TypeError: Cannot read property 'toString' of undefined(…) on bootstrap

[andzhik]

I have TypeError: Cannot read property 'toString' of undefined(…) on bootstrap. Looks similar to issue #108, but with different versions and no gulp.

I'm on Angular 2 rc1 and ng2-translate 2.1.

Issue was there for my project with Angular 2 beta 17 and ng2-translate 1.11, but ng2-play worked fine.

boot.ts:

import {provide} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic'
import {HTTP_PROVIDERS, Http} from '@angular/http';
import {TranslateLoader, TranslateStaticLoader, TranslateService} from 'ng2-translate/ng2-translate';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(TranslateLoader, {
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'i18n', '.json'),
        deps: [Http]
    }), TranslateService]);

systemjs.config.js (not sure if it matters):

  var  map = {
    ....
    'ng2-translate': 'docs/default/libs/ng2-translate'
  };
  var packages = {
    ...
    'ng2-translate': { defaultExtension: 'js' }
  };

If I have breakpoint in boot.js, in the setter for ng2_translate:

            function (ng2_translate_1_1) {
                ng2_translate_1 = ng2_translate_1_1;
            },

ng2_translate_1_1 is "almost" empty:

JSON.stringify(ng2_translate_1_1)
=> "{"default":{}}"

[matthieubouvier]

Is your TranslateService provider undefined ? It seems to be the same issue as the #120 ...

[vmasek]

@andzhik maybe this will help you https://github.com/ocombe/ng2-translate/issues/120#issuecomment-224127374

[andzhik]

@matthieubouvierthales , yes, TranslateService is undefined. @Shootervm , no, that doesn't help.

[matthieubouvier]

It seems to be the same issue as me.

I found a solution (workaround?):

• Import ng2-translate with script tag:

<script src="angular2/ng2-translate/bundles/ng2-translate.js"></script>

• Do not reference ng2-translate in systemjs
• In main component:

import { TranslatePipe, TranslateService, TRANSLATE_PROVIDERS } from 'ng2-translate';
[...]
@Component({
...
providers: [..., TRANSLATE_PROVIDERS, ...],
pipes: [TranslatePipe]
...
}
[...]
export class AppComponent {
constructor(..., private _translateService: TranslateService, ...) {}
[...]
}

[ocombe]

Do you still have this issue ? Is there some kind of example plunkr or github/gist repo that I could use to reproduce the bug ?

[ocombe]

Closing this old issue, let me know if I should reopen it.