Ng2-select: MouseEvent is used from window in off-click

[dennisx5]

The off-click uses MouseEvent which is an object from the global window. Angular2-modules should avoid direct access to window to be compatible with Angular-Universal and WebWorker.

When I started to use ng2-select with server-side-rendering of Angular-Universal I had errors like "MouseEvent is not defined" and had to define MouseEvent in nodes-global.

[Hongbo-Miao]

Link to https://github.com/valor-software/ng2-bootstrap/issues/61

[linusbrolin]

I'd say https://github.com/valor-software/ng2-bootstrap/issues/964 is more relevant, since it seems the problem has re-appeared.
@valorkin fixed it in ng2-bootstrap with https://github.com/valor-software/ng2-bootstrap/commit/d20ccf109c9a718823b2eab4f971b3595b04a83f

so the fix is to add these lines in off-click.ts:

/* tslint:disable-next-line */
const MouseEvent = (global as any).MouseEvent as MouseEvent;

[romansp]

Can we get some love for this particular issue? That's one of the few things that blocks me from angular-universal server-side rendering.

I can do a dedicated PR, that does the same hack as valor-software/ng2-bootstrap@d20ccf1. Will it be useful?

[jessedegans]

Please just fix this.

by adding this line:

/* tslint:disable-next-line */
const MouseEvent = (global as any).MouseEvent as MouseEvent;

[anas3636]

Hey guys

I have the same issue here ! is there any workaround ?
Where I am suppose to add this line ?
/* tslint:disable-next-line */
const MouseEvent = (global as any).MouseEvent as MouseEvent;
In the server or in the angular app!
Please help

[jessedegans]

You should add it to the top of the bundled ng2-select js file

[simonmlewis]

Hi @jessedegans ,

Can your provide the exact filename that the "fix" code needs to be place please?

None of the files seem suitable so don't know if I'm missing something?

[graundas]

I found a temporary solution to this problem. I put a text replacing plugin regexp-replace-loader to webpack config:

  module: {
    rules: [
      { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } },
      { test: /\.ts$/, loader: 'ts-loader' },
    ]
  },

[fopnet]

Please just fix this.

by adding this line:

/* tslint:disable-next-line */
const MouseEvent = (global as any).MouseEvent as MouseEvent;

I have inserted this line in

.../node_modules/angular2-multiselect-dropdown/clickOutside.d.ts after the imports line but the same error is thrown !

After angular universal compilation in this command below.

ngu-sw-manifest --module src/app/app.module.ts --out dist/ngsw-manifest.json