Core: ng2-translate not found

[estradamarkie]

I've added ng2-translate to my system.config.js that comes with standard angular2 installation. ng2-translate is not being loaded.

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' };

[estradamarkie]

Tried lots of things to try to fix this thing and its either giving me 404 or annotation of undefined error.

[ocombe]

What is your systemjs config? Did you update it accordingly for ng2
translate (as explained in the readme)

Le lun. 11 juil. 2016 14:00, estradamarkie [email protected] a
écrit :

Tried lots of things to try to fix this thing and its either giving me 404
or annotation of undefined error.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ocombe/ng2-translate/issues/167#issuecomment-231714614,
or mute the thread
https://github.com/notifications/unsubscribe/AAQMoohzdT7iDXo3MIBjfXsTQBo6hlJCks5qUjBVgaJpZM4JJPMy
.

[estradamarkie]

Yeah I've updated my systemconfig.js, I'm using the standard system.config.js from angular installation guide I've added 'ng2-translate' : 'node_modules/ng2-translate' in the map section. I've also tried copying the systemconfig from the link you've provided and as I mention its either giving me a 404 or annotation of undefined error.

`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'

};
`

`// packages tells the System loader how to load when no filename and/or no extension
var packages = {

// 'ng2-translate':              { main: 'ng2-translate.js', defaultExtension: 'js' },

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

'app':                        { main: 'main.js',  defaultExtension: 'js' },

'rxjs':                       { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

};`

[ocombe]

and what is the request that gives you a 404 trying to load? do you have that url ?

[estradamarkie]

Yeah I'm getting http://localhost:3000/node_modules/ng2-translate/ng2-translate 404 (Not Found). Also made stackoverflow question regarding this issue and no luck fixing it http://stackoverflow.com/questions/38304242/ng2-translate-404-not-found-ive-added-it-in-system-js

[ocombe]

Hmm I don't know then, I'm not using systemjs anymore, but it looks like a config problem, not a problem with the library.

[estradamarkie]

So everyone who is using systemjs will have the same problem? Well even the step "systemjs" in your readme doesn't work and that systemconfig was pretty straightforward.

Annotation of undefined error when definingExtension js
Cannot read property 'annotations' of undefined

[ocombe]

yes probably, if you find the right setup update this issue and I'll update the readme, otherwise it will have to wait until I can check the example repo and update it to the latest RC and version of systemjs

[mpavel]

I encountered the same issue today. I'm using the systemjs.config.js file from angular.io website.

I had to do the following in this file:

var map = {
    ...
    'ng2-translate':              'node_modules/ng2-translate'
  };

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

// further down in the same file, they are being used like this
...
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
...

[estradamarkie]

@mpavel
Hi, Yeah that's similar to my systemconf but still giving me an error.

[razvanmitre]

Isn't ng2-translate in the dist/vendor folder?

[gsiradze]

faced to same issue? any idea how to fix it?

[gsiradze]

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

working example of system.config.js

[3du4]

worked for me as @Giola94 explained.

[jeebb]

I have to map 'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js' for it to work.

[ocombe]

I'll add a note about systemjs in the readme

[AnnekathrinL]

hi.

i have the same error. i adjusted everything you have recommended here .
i have tried to set the mapping to

• node_modules/ng2-translate
• node_modules/ng2-translate/bundles
• node_modules/ng2-translate/bundles/ng2-translate.umd.js

none of them worked.

i still get a 404 "Cannot GET /ng2-translate". I wonder, why angular is looking for it in the root-directory and not in the node_modules.

do i need to adjust my package.json ? or anything else?

any help would be appreciated.

[SamVerschueren]

@AnnekathrinL

1. Care to share your config file?
2. Are you using the latest version of ng2-translate?
3. How are you importing ng2-translate in your source files?

[ocombe]

Have you defined the correct base tag in your index file ? <base href="/">

[AnnekathrinL]

thank you for your fast help.

i had an error in including the correct systemjs as i was working on a test-project. sorry and thank you again.

[roddydairion]

Do you mind sharing how you fixed it please? I'm facing the same issue and can't figure out what I'm doing wrong.

Thank you.

[SamVerschueren]

@roddydairion Share your SystemJS config so we can have a look.

[AnnekathrinL]

@roddydairion it is pretty embarrassing to say that i simply included the wrong systemjs in my index.html as i was working on a test-project. :)

[roddydairion]

@SamVerschueren

(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',
    'underscore':                 'node_modules/underscore/underscore.js',
    'ng2-translate':              'node_modules/ng2-translate/bundles'
  };
  // 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 = [
    'common',
    'compiler',
    '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
  };
  System.config(config);
})(this);

I've followed exactly the instruction but it fails no matter what I do.

[SamVerschueren]

Not sure if it changes anything, but try using paths and point to the js file instead of to the bundles directory.

Maybe changing your ng2-translate entry in map to node_modules/ng2-translate/bundles/ng2-translate.umd.js might be enough. Otherwise, try using this config.

(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 = [
    'common',
    'compiler',
    '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);

[roddydairion]

@SamVerschueren
You, my friend, are a gem. Thank you very much.

[SamVerschueren]

@roddydairion Glad it worked :).