Ngx-chips: problem with angular universal

[ist1373]

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

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

Current behavior

when i want build my app with production mode and with angular universal i get this error:

var parentJsonpFunction = window["webpackJsonpngx_chips"];
ReferenceError: window is not defined
at module.exports (\node_modules\ngx-chips\dist\ngx-chips.bundle.js:13:37)
at \node_modules\ngx-chips\dist\ngx-chips.bundle.js:165:10
at webpackUniversalModuleDefinition (\node_modules\ngx-chips\dist\ngx-chips.bundle.js:3:20)
at Object. (\node_modules\ngx-chips\dist\ngx-chips.bundle.js:10:3)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)

Expected behavior

my expected behavior is that when i put this library in whitelist of webpack.config.js similar to other 3rd party libraries like material design its work properly...

Minimal reproduction of the problem with instructions (if applicable)

What is the motivation / use case for changing the behavior? (if applicable)

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version

Webpack 3

Angular version:

angular 4.2.4

ng2-tag-input version:

1.4.5

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 ]

[Gbuomprisco]

will have a look on sunday

[ist1373]

thanks a lot

[ahmed-anas]

Any update? or a possible quickfix?

[Gbuomprisco]

@ahmed-anas not yet

[piskovoy-dmitrij]

Don't know will it fix the issue but have struggled myself with the same error. The difference is I'm not using universal directly but have the almost same configuration for server side rendering.
For building and working properly I import library not as

from "ngx-chips"

but

from "ngx-chips/dist/modules"

this way it builds properly everything and works as expected in production.
I hope it can help others as well.

[ahmed-anas]

this seems to be something related to webpack. The server.js file that is output (with the error segment) is this:

(function webpackUniversalModuleDefinition(root, factory) {
    if(true)
        module.exports = factory(__webpack_require__(0), __webpack_require__(10), __webpack_require__(939), __webpack_require__(87), __webpack_require__(6));
    else if(typeof define === 'function' && define.amd)
        define(["@angular/core", "@angular/forms", "ng2-material-dropdown", "@angular/animations", "@angular/common"], factory);
    else if(typeof exports === 'object')
        exports["ngx-chips"] = factory(require("@angular/core"), require("@angular/forms"), require("ng2-material-dropdown"), require("@angular/animations"), require("@angular/common"));
    else
        root["ngx-chips"] = factory(root["@angular/core"], root["@angular/forms"], root["ng2-material-dropdown"], root["@angular/animations"], root["@angular/common"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__) {
return /******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonpngx_chips"];
/******/    window["webpackJsonpngx_chips"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, resolves = [], result;
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId]) {
/******/                resolves.push(installedChunks[chunkId][0]);

The culprit is this part: var parentJsonpFunction = window["webpackJsonpngx_chips"]; and the line that follows. the funny thing is that window["webpackJsonpngx_chips"] is never directly accessed but only set. so if you manually edit the server.js file it works fine.

This is obviously not a solution, just information to help in diagnosis.

[Gbuomprisco]

not sure if it changes anything but ngx-chips is builts using webpack 2 instead of 3?

[SergioV85]

The problem still exist with latest version of ngx-chips and Angular 5

[michael-vasyliv]

I think the problem with the building, I get the library from git and run it locally, do not have bugs with node.

[art-hck]

Same problem when update angular from 4.1.2 to 5.0.2

[nishadmenezes]

So, this is how I whitelist the package in my webpack.config.js if you are interested in the whitelist solution @ist1373 . Also, for the latest victims @SergioV85 @art-hacker -

const input = `./dist-server/main.bundle`;
const output = `./dist-server/main.bundle.js`;
var nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  entry: input,
  output: { filename: output, libraryTarget: 'commonjs' },
  externals: [nodeExternals({
    whitelist: [/ngx-chips/]
  })]
}

Solved: using a regex match without the ^ symbol to avoid matching from start of module name onwards.

[CybrZr00]

Still no fix for this?

[nimatrazmjo]

The Same problem still exist with version of 1.5.3

[firstor]

The workaround described in this article works for me.
So here is my server.ts:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { join } from 'path';
import * as fs from 'fs';
import * as domino from 'domino';

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

import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine'; // Express Engine
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'; // Import module map for lazy loading
import * as express from 'express';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();
...

[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?

[hesampour]

@pauloinfotec

window is a browser code. and is not available at server side. you should put it in a isPlatformBrowser if.

in this way:
import { isPlatformBrowser } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private platformId: Object){
}

if (isPlatformBrowser(this.platformId)) {
window.....
}

[pauloinfotec]

First of all, thank you for answering.
@hesampour where shoud I put this code?

[hesampour]

every component that you want to use something like window,document. in fact you everywhere that you have window you should put in the
if (isPlatformBrowser(this.platformId)) {

[pauloinfotec]

I see @hesampour but I get this error when I run node server.ts cmd. There is no code with window reference in my application. I get this error because of code below in ngx-chips.umd.js:

...
line 678 var KeyboardEvent = ((window)).KeyboardEvent;
...


[wil92]

any news regarding this error, I will need to remove the library from my project because is not compatible with angular-universal

[relatedrhymes]

Looks like there is no solution to this other than using some other library