I've installed ng2-translate to my proj and console error keep showing 404 of the bundle and xhr error. I've added ng2-translate to my system.config.js that es with the standard angular2 quickstart but still showing 404 and xhr error.

It's either giving me 404 error or annotation of undefined error :/

github: thread regarding the issue using systemconfig.js

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'ng2-translate':              'node_modules/ng2-translate',
    'rxjs':                       'node_modules/rxjs'
  };

Edit:

var packages = {
    'ng2-translate':              { main: 'ng2-translate.js', defaultExtension: 'js' },
  };

I've installed ng2-translate to my proj and console error keep showing 404 of the bundle and xhr error. I've added ng2-translate to my system.config.js that es with the standard angular2 quickstart but still showing 404 and xhr error.

It's either giving me 404 error or annotation of undefined error :/

github: thread regarding the issue using systemconfig.js

https://github./obe/ng2-translate/issues/167

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'ng2-translate':              'node_modules/ng2-translate',
    'rxjs':                       'node_modules/rxjs'
  };

Edit:

var packages = {
    'ng2-translate':              { main: 'ng2-translate.js', defaultExtension: 'js' },
  };

• javascript
• angular

• did you find any solution? – gsiradze Commented Oct 11, 2016 at 6:21

7 Answers 7

I faced to the same issue today

solution is this:

put 'ng2-translate': 'node_modules/ng2-translate/bundles' in system.config.js in the map and 'ng2-translate' : { defaultExtension: 'js' } in packages

I had to map it like this, in the systemjs config to make it work:

'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js'

install the npm module:

npm install ng2-translate --save

update your config like this:

System.config({
    packages: {
        "ng2-translate": {main: 'ng2-translate.js', "defaultExtension": "js"}
    },
    map: {
        'ng2-translate': 'node_modules/ng2-translate'
    }
});

Use ng2-translate like this in .ts file-

import {TranslateService, TranslatePipe} from 'ng2-translate';

See if this helps.

Probably by doing:

 'ng2-translate':              'node_modules/ng2-translate',

you are referring index.js

however you might need to point some else .js file such as

 'ng2-translate':              'node_modules/ng2-translate/somefile.js',

for example you can do:

System.config({
    //... some other stuff
      map: {
        'ng2-translate': 'node_modules/ng2-translate/ng2-translate.js',
    },
    packages: {          
        //... some other stuff, do not put your ng2-translate here
    }
});

ng2-translate uses the CommonJS module format as configured in its tsconfig.json:

pilerOptions": {
    ...
    "module": "monjs",
    "target": "es5",
     ...
}

I successfully added ng2-translate by explicitly specifying this format in the packages section of my SystemJS config.

System.config({
    map: {
        'ng2-translate': 'node_modules/ng2-translate'
         // ... more mappings
    },
    packages: {          
        'ng2-bootstrap': {
             defaultExtension: 'js',
             format: 'cjs'
        }
        // ... more package definitions
    }
});

Refer to the list of supported module formats in the SystemJS documentation for more details.

If like me, you've spent hours trying to fix the ng2-translate (404 not found) issue. Here's is a systemjs.config.js which worked for me. Compliment of Sam Verschueren @github

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
    };

    var paths = {
        'underscore':                 'node_modules/underscore/underscore.js',
        'ng2-translate':              'node_modules/ng2-translate/bundles/ng2-translate.umd.js'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'ng2-translate':              { defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'mon',
        'piler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages,
        paths: paths
    };
    System.config(config);
})(this);

you need to have a i18n folder in your app with en.json (its the default setting) or whatever file you call from the constructor, looks like:

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}