Angular universal give me errors

[KromPass]

I'm submitting a support request.

In your code I found this

 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
// angular universal hacks
/* tslint:disable-next-line */
var KeyboardEvent = ((window)).KeyboardEvent;

but after my compiling my console of node server write this

var KeyboardEvent = ((window)).KeyboardEvent;
ReferenceError: window is not defined

There are solutions?

thanks

[Gbuomprisco]

Hi @KromPass, have you tried this solution yet? https://github.com/angular/universal/issues/830#issuecomment-338359090

[KromPass]

Hi @Gbuomprisco, i'm tried this solution but not work. The problem is inside ngx-chips, when i try to import component in my appModule, node execute the component and find window reference, but it's not defined.

In tag.component.ts line 20 there are this

const KeyboardEvent = (window as any).KeyboardEvent;
const MouseEvent = (window as any).MouseEvent;

do you think it is possible to implement a check for angular universal in the plugin?

More info: i use AOT for build

[Gbuomprisco]

Do you have a public repository i can try it on?

[CybrZr00]

I have the same problem (window is not defined), I managed to get around it in a previous version but don't remember how! I use this as my starting template: https://github.com/MarkPieszak/aspnetcore-angular2-universal

is there a workaround / hack to get things working again? Edit: I just rolled back to "ngx-chips": "1.6.7" and the problem isn't there... I don't have zindex (I don't think) but most importantly I don't get the "window is not defined" error!

[KromPass]

use this repo for test https://github.com/KromPass/ngx-test-universal For run build

npm run build:universal
cd dist
node server.js

[KromPass]

Hi @Gbuomprisco you have news for support us?

[Gbuomprisco]

Sorry haven't had a chance yet

[pquarme]

One way to fix this issue is to use webpack.DefinePlugin and webpack-node-externals. This creates a global object which could be used as a mock for window object. Add these to webpack.config.js

externals: [
    nodeExternals({
      whitelist: [
        /^ngx-chips/,
      ]
    })
  ],
plugins: [
    new webpack.DefinePlugin({
      window: {
        navigator: JSON.stringify({
          userAgent: 'Chrome',
          vendor: 'Google Inc'
        })
      }
    })
  ]

webpack-node-externals - https://www.npmjs.com/package/webpack-node-externals More info on DefinePlugin - https://webpack.js.org/plugins/define-plugin

[whisher]

Hi there, the same here :( looking for news :)

[technoobs]

Hi there, still looking for solutions.

[CybrZr00]

I've made my own now. it's essentially an input with tags inline, and an auto complete dropdown (also easy to make). Once you make a start you'll realise how easy it actually is! Just remember to use Renderer2 to make changes to the DOM.

[nimatrazmjo]

Hello guys, I have the same problem. anyone has any valid solution for this issue.

[TGihan]

I am also getting the same error when execute npm run serve:ssr command in angular cli this is related to ngx-chips module (v2.1.0). (SSR with Angular 9 Universal)

const DragEvent = window.DragEvent; ^

ReferenceError: window is not defined is there any solution?