search

ngx-translate / core

The internationalization (i18n) library for Angular
MIT License
4.51k stars 575 forks source link

Cannot read property 'indexOf' of undefined - Universal&angular5 #890

Open albertsanchez opened 6 years ago

albertsanchez commented 6 years ago

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 commented 6 years ago

1+

levytskyy commented 6 years ago

+1

chetanppatil commented 5 years ago

+1

alvinvoo commented 5 years ago

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 commented 5 years ago

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:///./nodemodules/@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:///./nodemodules/@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:///./nodemodules/@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 commented 5 years ago

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 commented 5 years ago

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

BruneXX commented 5 years ago

Hi guys,

win.navigator.language='en';

solve that issue but.. I'm receiving:

ERROR [Error]

Any ideas what can be happening here?

Ilyoskhuja commented 5 years ago

@BruneXX post full error or screenshot

BruneXX commented 5 years ago

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

BruneXX commented 5 years ago

Captura de pantalla de 2019-09-14 14-34-34

Ilyoskhuja commented 5 years ago

Hi, @BruneXX . Recently I fixed error with "Cannot read property 'indexOf' of undefined " and I have also get another error like this Screen Shot 2019-09-15 at 00 00 45

"Error: renderModule[Factory]() 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 commented 5 years ago

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