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

Question

I have the following error on bootstrap:

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

I'm on Angular2 RC1 and using ng2-translate 2.1.

Also, the issue was still there while in previous versions: Angular2 Beta-17 and ng2-translate 1.11.

Here is the 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]);

Here is the systemjs.config.js

  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":{}}"

Perhaps it is not reasonable trying to fix beta-17, since latest RC versions have i18n support builtin. — kemsky, Jun 22 '16 at 22:10
This is actually related to **Angular RC1**. I haven't found any recent documentation about Angular 2 **i18n**. Please point me to anything. Even the official i18n is not available. — Andrei Zhytkevich, Jun 23 '16 at 00:01

score 1 · Answer 1 · edited Jun 27 '16 at 19:59

Possible solution:

I am at RC1 with angular-cli, had same problem and managed to get translate work. These are code parts that might be useful to locate your problems.

System config: (notice format: 'cjs' at packages config, without this option TranslateService was undefined )

System.config({
    map: {
        /* ... */
        'ng2-translate': 'vendor/ng2-translate',
        /* ... */
    },
    packages: {
        /* ... */
        'ng2-translate': {
            format: 'cjs',
            defaultExtension: 'js',
            main: 'ng2-translate'
        },
        /* ... */
    }
})

To vendor folder i am copying as 'ng2-translate/**/*.js' so 'ng2-translate/ng2-translate.js' and also 'ng2-translate/src/*.js' are copied

unfortunately, this doesn't help – Andrei Zhytkevich Jun 21 '16 at 11:35 — Andrei Zhytkevich, Jun 21 '16 at 11:35

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

1 Answers1