SSR - Window is not defined

[CybrZr00]

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

Prevents application from running because window is not defined

Expected behavior

The app would run and I would be able to use ngx-chips with out the error "Window is not defined"

Minimal reproduction of the problem with instructions (if applicable)

see:

492

This issue persists and a hack that is provided in the above is not relevant to my situation as I do not use the same repo and upon attempting to use it was faced with even more errors, unfortunately the issue was closed with no fix.

Previously I would just roll back to an older version, however that no longer seems to work due to the dependency to ng2-material-dropdown, which causes the error:

NodeInvocationException: Prerendering failed because of error: TypeError: Object(...) is not a function at eval (webpack-internal:///./node_modules/ng2-material-dropdown/ng2-material-dropdown.es5.js:458:155) at Module../node_modules/ng2-material-dropdown/ng2-material-dropdown.es5.js (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:9274:1) at webpack_require (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./node_modules/ngx-chips/esm5/ngx-chips.js:16:79) at Module../node_modules/ngx-chips/esm5/ngx-chips.js (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:12214:1) at webpack_require (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./ClientApp/app/dashboard/dashboard.module.ts:30:68) at Module../ClientApp/app/dashboard/dashboard.module.ts (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:1125:1) at __webpack_require__ (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./ClientApp/app/app.module.ts:47:86) Current directory is: G:\05072018\aspnetcore-angular2-universal-master

To reproduce the error use this repo: https://github.com/MarkPieszak/aspnetcore-angular2-universal

Add ngx-chips to the app.module.ts and use in one of the components.

What do you use to build your app?. Please specify the version

"webpack": "^4.9.1"

Angular version:

6.0.3

ngx-chips version:

1.9.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[dmitriydementor]

Any solution yet?

[Gbuomprisco]

Sorry I haven't had a chance yet

[whisher]

Hi there, sorry I've no time to try it and I think you've just tried it :) but just in case what's about

(((typeof window !== 'undefined') ? window : ({})) as any).KeyboardEvent;

OR

const getWindow = () => {
  try {
    return window;
  } catch (err) {
    return ({});
  }
};

in the tag component

I'm stuck :(

[nch3ng]

There's workaround without involving ngx-chips code

check this out: https://github.com/angular/universal/issues/830#issuecomment-345228799

You can fix window is not defined like this: server.ts (start of 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); global['window'] = win; global['document'] = win.document;

look: https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

[CybrZr00]

@qqnc that won't work as I don't have an index.html I use the template mentioned above. https://github.com/MarkPieszak/aspnetcore-angular2-universal

[Gbuomprisco]

anyone able to check v1.9.8?

[nimatrazmjo]

I have the same problem, any updates.

[Gbuomprisco]

Hi @nimatullah, have you tried the latest?

[nimatrazmjo]

Hi @Gbuomprisco , its "ngx-chips": "^1.5.3",

[Gbuomprisco]

not going to work, you need to upgrade

[nimatrazmjo]

OK

[nimatrazmjo]

@Gbuomprisco even though I upgraded to 1.9.8; same error appears.

[creativec0de]

any update??

[pauloinfotec]

Hi everyone,

I having this issue for many days. Follow my current logs:

C:\Users\prsousa\DADOS\workspace\talentos\frontend\node_modules\ngx-chips\bundles\ngx-chips.umd.js:678 var KeyboardEvent = ((window)).KeyboardEvent; ^

ReferenceError: window is not defined at C:\Users\prsousa\DADOS\workspace\talentos\frontend\node_modules\ngx-chips\bundles\ngx-chips.umd.js:678:31 at Object.setPrototypeOf.proto (C:\Users\prsousa\DADOS\workspace\talentos\frontend\node_modules\ngx-chips\bundles\ngx-chips.umd.js:2:65) at Object. (C:\Users\prsousa\DADOS\workspace\talentos\frontend\node_modules\ngx-chips\bundles\ngx-chips.umd.js:5:2) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19)

My src/server.ts:

require('reflect-metadata'); require('zone.js/dist/zone-node'); const { renderModuleFactory } = require('@angular/platform-server'); //import { enableProdMode } from '@angular/core' const { AppServerModuleNgFactory } = require('../dist/ngfactory/src/app/app.server.module.ngfactory'); const express = require('express'); const fs = require('fs'); const path = require('path'); const domino = require('domino');

const PORT = 8000;

//enableProdMode();

const app = express();

let template = fs.readFileSync(path.join(__dirname, '..', 'dist', 'index.html')).toString();

var win = domino.createWindow(template); global['window'] = win; global['document'] = win.document;

app.engine('html', (_, options, callback) => { const opts = { document: template, url: options.req.url };

renderModuleFactory(AppServerModuleNgFactory, opts) .then(html => callback(null, html)); });

app.set('view engine', 'html'); app.set('views', 'src')

app.get('.', express.static(path.join(__dirname, '..', 'dist')));

app.get('*', (req, res) => { res.render('index', { req }); });

app.listen(PORT, () => { console.log(listening on http://localhost:${PORT}!); });

My package.json:

{ "name": "frontend", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0", "build": "ng build --prod && ngc", "deploy": "ts-node src/server.ts", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/build-optimizer": "^0.800.1", "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/platform-server": "^5.2.0", "@angular/router": "^5.2.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7", "@nguniversal/express-engine": "^7.1.1", "@ngx-progressbar/core": "^3.0.2", "@ngx-progressbar/http": "^3.0.2", "@ngx-progressbar/router": "^3.0.2", "@swimlane/ngx-datatable": "^11.1.7", "@types/file-saver": "^1.3.0", "angular-font-awesome": "^3.0.3", "angular2-text-mask": "^8.0.4", "asyncawait": "^1.0.8", "bootstrap": "^4.0.0-beta.2", "core-js": "^2.4.1", "file-saver": "^1.3.3", "font-awesome": "^4.7.0", "ng2-currency-mask": "^4.4.1", "ng2-file-upload": "^1.3.0", "ng2-scroll-to-el": "^1.2.1", "ng2-toasty": "^4.0.3", "ngx-chips": "^1.9.2", "ngx-device-detector": "^1.3.0", "ngx-json-ld": "^0.3.1", "ngx-popover": "0.0.16", "ngx-ui-switch": "^1.6.0", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "^1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.6.2", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "angular-prerender": "^3.2.42", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.6.2" } }

I've spent many days on this. Plz, for God, someone could me help?

[khwerhahn]

Same issue here.

ReferenceError: window is not defined node_modules/ngx-chips/bundles/ngx-chips.umd.js:1497:21 node_modules/ngx-chips/bundles/ngx-chips.umd.js:2:68 /node_modules/ngx-chips/bundles/ngx-chips.umd.js:5:2

[VenomApps]

Why has this not been fixed its been over half a year!