ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)

Question

I am adding ng2-translate to a project. When I add TranslateService I get:

Error: Cannot read property 'getOptional' of undefined(…)

My system config is setup properly but after hours of searching I can't find anything that helps me figure out what's wrong.

//angular
import {bootstrap} from "angular2/platform/browser";
import {Component,Inject,provide} from "angular2/core";
import {HTTP_PROVIDERS} from "angular2/http";
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate";

@Component({
    selector: 'app',
    directives: [TheApp],
    template: '<the-app></the-app>'
})

class TT{
    translate:TranslateService
    constructor(@Inject(TranslateService) translate:TranslateService){
        this.translate = translate;
        ....
    }
    ....
}

bootstrap(TT,[
    HTTP_PROVIDERS,
    provide(TranslateLoader, {useClass: TranslateStaticLoader}),
    TranslateService
]);

angular2.dev.js:353 TypeError: Cannot read property 'toString' of undefined angular2-polyfills.js:1243

Error: Cannot read property 'getOptional' of undefined(…)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

<script src="es6-shim.min.js"></script>
    <script src="es6-module-loader.js"></script>
    <script src="system-polyfills.js"></script>

    <script src="angular2-polyfills.js"></script>
    <script src="system.src.js"></script>
    <script src="Rx.js"></script>
    <script src="angular2.dev.js"></script>
    <script src="ng2-bootstrap.js"></script>
    <script src="ng2-translate.js"></script>
    <script src="router.js"></script>
    <script src="http.js"></script>

<script>
            System.transpiler = 'typescript';
            System.config({
                packages: {
                    ts: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                },
                map: {
                    moment: '/moment.js',
                    'ng2-translate/ng2-translate': '/ng2-translate.js'
                }
            });
            System.import('ts/main')
                    .then(null, console.error.bind(console));
        </script>

TypeError: Cannot read property 'getOptional' of undefined at runAppInitializers (localhost:8000/angular2.dev.js:12628:25) at PlatformRef.initApp (localhost:8000/angular2.dev.js:12603:21) at PlatformRef.application (localhost:8000/angular2.dev.js:12550:22) at Object.bootstrap (localhost:8000/angular2.dev.js:24805:64) at execute (localhost:8000/ts/main.js:118:23) at ensureEvaluated (localhost:8000/system.src.js:3197:26) at Object.execute (localhost:8000/system.src.js:3315:13) at doDynamicExecute (localhost:8000/system.src.js:708:25) at link (localhost:8000/system.src.js:910:20) at doLink (localhost:8000/system.src.js:562:7)

Where does the error happen? Can you add error msg/stack trace? — Sasxa
I guess you need to provide more information, ideally a Plunker that allows to reprodcue the issue. — Günter Zöchbauer

Thierry Templier Thierry Templier · Accepted Answer · 2016-03-01T08:12:49

I think your problem could be:

You forgot to include the corresponding JS file of your library inside your HTML file.
You forgot to define a map entry in your SystemJS configuration if you rely on TypeScript file of the library
```
System.config({
  map: {
    'ng2-translate': 'node_modules/ng2-translate'
  },
  (…)
});
```

Edit

I finally made it work using the following configuration:

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/http.dev.js"></script>

<script>
  System.config({
    map: {
      "ng2-translate": "node_modules/ng2-translate"
    },
    packages: {      
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      "ng2-translate": {
        "defaultExtension": "js"
      }
    },
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

Here is what I have in my boot.ts file:

import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { AppComponent } from './app.component';
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate";

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(TranslateLoader, {useClass: TranslateStaticLoader}),
  TranslateService
]);

Don't forget to specify HTTP_PROVIDERS since it's required by ng2-translate...

With this configuration, I'm able to inject a TranslateService instance into a component:

import {Component,Inject} from 'angular2/core';
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate";

@Component({
  selector: 'first-app',
  template: `
    <div>Hello wolrd</div>  
  `
})
export class AppComponent {
  constructor(translate:TranslateService) {
    console.log(translate); // not undefined
  }
}

ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)

1 Answers