Core: Cannot read property 'indexOf' of undefined - Universal&angular5

[albertsanchez]

Error with Angular Universal and angular 5.2.11.
When I run "run serve: ssr" and I go to the browser this error appears

Current behavior

ERROR { Error: Uncaught (in promise): TypeError: Cannot read property 'indexOf' of undefined
TypeError: Cannot read property 'indexOf' of undefined
at TranslateService.getBrowserLang (project/dist/server.js:37892:25)
at ManualParserLoader.LocalizeParser._getBrowserLang (/project/dist/server.js:53678:55)
at ManualParserLoader.LocalizeParser.init (/project/dist/server.js:53502:32)
at /project/dist/server.js:53825:19

Environment

//package.json scripts
"scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "extract": "ng xi18n --outputPath=src/locale",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.config.js --progress --colors"
}

ngx-translate version: 8.0.0
Angular version: 5.2.11


For Tooling issues:
- Node version: 8.11.3
- Platform:  Mac

[markelor]

1+

[levytskyy]

+1

[Chetan07j]

+1

[alvinvoo]

Hi guys,

Try this in your server.js.

The getBrowserLang is getting from window.navigator.language which is not available at server side. Just define some value for it ;)

const domino = require('domino');
const fs = require('fs');

const template = fs.readFileSync(path.join(__dirname, '../dist/browser/index.html')).toString();
const win = domino.createWindow(template);
win.navigator.language='en';
global['window'] = win;
global['document'] = win.document;

[mgutbor]

I have the same proyect, and after this modification on my _server.ts_ file:

---

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
const files = fs.readdirSync(${process.cwd()}/dist-server);
global['window'] = win;
Object.defineProperty(win.document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true
};
},
});
global['document'] = win.document;
global['CSS'] = null;
global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Prism'] = null;

win.navigator.language='en';

I received this error after execute npm run generate:prerender:

---

node prerender.js

ERROR TypeError: Cannot read property 'indexOf' of undefined
at TranslateService.getBrowserLang (webpack:///./node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js?:886:25)
at new eval (webpack:///./dist-server/main.2354f112b15d37acff04.js?:1:298972)
at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:9598:20)
at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:9483:20)
at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:10703:36)
at createRootView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10617:5)
at Object.createProdRootView [as createRootView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11129:12)
at ComponentFactory_.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:8963:29)
at ComponentFactoryBoundToModule.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:3612:29)
at ApplicationRef.bootstrap (webpack:///./node_modules/@angular/core/fesm5/core.js?:4847:40)
Unhandled Promise rejection: Cannot read property 'indexOf' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'indexOf' of undefined
at TranslateService.getBrowserLang (webpack:///./node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js?:886:25)
at new eval (webpack:///./dist-server/main.2354f112b15d37acff04.js?:1:298972)
at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:9598:20)
at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:9483:20)
at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:10703:36)
at createRootView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10617:5)
at Object.createProdRootView [as createRootView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11129:12)
at ComponentFactory_.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:8963:29)
at ComponentFactoryBoundToModule.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:3612:29)
at ApplicationRef.bootstrap (webpack:///./node_modules/@angular/core/fesm5/core.js?:4847:40) TypeError: Cannot read property 'indexOf' of undefined
at TranslateService.getBrowserLang (webpack:///./node_modules/@ngx-translate/core/fesm5/ngx-translate-core.js?:886:25)
at new eval (webpack:///./dist-server/main.2354f112b15d37acff04.js?:1:298972)
at createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:9598:20)
at createDirectiveInstance (webpack:///./node_modules/@angular/core/fesm5/core.js?:9483:20)
at createViewNodes (webpack:///./node_modules/@angular/core/fesm5/core.js?:10703:36)
at createRootView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10617:5)
at Object.createProdRootView [as createRootView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11129:12)
at ComponentFactory_.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:8963:29)
at ComponentFactoryBoundToModule.create (webpack:///./node_modules/@angular/core/fesm5/core.js?:3612:29)

at ApplicationRef.bootstrap (webpack:///./node_modules/@angular/core/fesm5/core.js?:4847:40)

could anyone hepls me???

Thanks in advance.

[alvinvoo]

Hi @mgutbor you are supposed to put the win.navigator.language before you declare the global window variable.

win.navigator.language='en';
global['window'] = win;

[mgutbor]

@Alvin-Voo It works!!! thanks a lot for your help.

[BruneXX]

Hi guys,

win.navigator.language='en';

solve that issue but.. I'm receiving:

ERROR [Error]

Any ideas what can be happening here?

[Ilyoskhuja]

@BruneXX post full error or screenshot

[BruneXX]

Hi @Ilyoskhuja that's the only I've got from node console ERROR [Error]

[BruneXX]

[Ilyoskhuja]

Hi, @BruneXX . Recently I fixed error with "Cannot read property 'indexOf' of undefined " and I have also get another error like this

"Error: renderModuleFactory requires the use of BrowserModule.withServerTransition() to ensure
the server-rendered app can be properly bootstrapped into a client app." , and found solution from here
https://github.com/angular/angular-cli/issues/8384
I added to my app module this solution
import { BrowserModule } from '@angular/platform-browser';
...
imports: [
BrowserModule.withServerTransition({
appId: 'ng-universal-demystified'
})...
]
and now everything working

[BruneXX]

Thanks @Ilyoskhuja

But unfortunately that is not related to my error, that you've added:
BrowserModule.withServerTransition is to transition from the server to browser app, AFAIK that must be added for any universal app.

Regards