Application loading fails with "Uncaught (in promise): TypeError: Cannot read property 'length' of null" - JIT

[RajeshYaligar]

Hello,

We are using JIT compilation.

Application home page loading fails for the first time with the below error(Shows up blank page). The same works fine when home page is refreshed.

Also when I dont have the translation file for the selected language, I get this below error and application does not load.

-------Browser stack trace------- Uncaught (in promise): TypeError: Cannot read property 'length' of null TypeError: Cannot read property 'length' of null at new Tokenizer (ngx-translate-i18n-polyfill.js:1182) at tokenize (ngx-translate-i18n-polyfill.js:1135) at Parser.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Parser.parse (ngx-translate-i18n-polyfill.js:2159) at XliffParser.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.XliffParser.parse (ngx-translate-i18n-polyfill.js:3650) at xliffLoadToI18n (ngx-translate-i18n-polyfill.js:3621) at Function.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.TranslationBundle.load (ngx-translate-i18n-polyfill.js:7747) at new I18n (ngx-translate-i18n-polyfill.js:8477) at _createClass (core.js:8126) at _createProviderInstance$1 (core.js:8088) at resolveNgModuleDep (core.js:8054) at new Tokenizer (ngx-translate-i18n-polyfill.js:1182) at tokenize (ngx-translate-i18n-polyfill.js:1135) at Parser.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.Parser.parse (ngx-translate-i18n-polyfill.js:2159) at XliffParser.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.XliffParser.parse (ngx-translate-i18n-polyfill.js:3650) at xliffLoadToI18n (ngx-translate-i18n-polyfill.js:3621) at Function.push../node_modules/@ngx-translate/i18n-polyfill/fesm5/ngx-translate-i18n-polyfill.js.TranslationBundle.load (ngx-translate-i18n-polyfill.js:7747) at new I18n (ngx-translate-i18n-polyfill.js:8477) at _createClass (core.js:8126) at _createProviderInstance$1 (core.js:8088) at resolveNgModuleDep (core.js:8054) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3662) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Please help us on this.

Thank you in advance.

[Darkein]

I've already had the problem, it's just because you have not loaded the translation file

[MaximilienFaure]

How to load the translation file ?

[ntziolis]

Having the same issue. How can I make sure the translation file is loaded?

Using angular 8, the code below is in our core module. the path to the message file is correct (build / serve fails when changing the path to any other):

What are we doing wrong? Do we need to configure angular to load these language files? We had used backtick syntax before but found posts that this causes webpack issues. but that wasn't it either.

    { provide: TRANSLATIONS_FORMAT, useValue: "xlf" },
    {
      provide: TRANSLATIONS,
      useFactory: (locale: string) => {
        const language = getLanguageFromLocale(locale || "de"); 
        return require('raw-loader!../../locale/messages.' + language + '.xlf')
          .default;
      },
      deps: [LOCALE_ID]
    },
    I18n

[ntziolis]

For anyone running into this on angular 8:

        return require('raw-loader!../../locale/messages.' + language + '.xlf')
          //.default; <= Remove this line and it works like a charm