ngx-chips: problem with angular universal

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.<anonymous> (\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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 21 (4 by maintainers)

Most upvoted comments

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

SergioV85 on Nov 6, 2017

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

relatedrhymes on Jun 10, 2020

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; …

pauloinfotec on Jun 11, 2019

Same problem when update angular from 4.1.2 to 5.0.2

art-hck on Nov 15, 2017

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.

nishadmenezes on Feb 14, 2018