Not rendering in Universal: MouseEvent undefined

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 => Please do not submit support request here

Current behavior Unable to render Number Card or Pie Grid in universal.

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: MouseEvent is not defined

Expected behavior NgxChartsModule should build in AOT and render in universal.

Reproduction of the problem Based on: #441

What is the motivation / use case for changing the behavior? Declare MouseEvent:

force-directed-graph/force-directed-graph.component.ts

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

@Component({
  selector: 'ngx-charts-force-directed-graph',

common/area-tooltip.component.ts

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

@Component({
  selector: '[ngx-charts-area-tooltip]',

Fixes based on ngx-bootstrap package: https://github.com/valor-software/ngx-bootstrap/commit/d20ccf109c9a718823b2eab4f971b3595b04a83f

Please tell us about your environment: MacOS Sierra 10.12.5 VS Code Yarn: 0.24.6 Webpack: 3.0.0

• ngx-charts version: 5.3.1

• Angular version: 4.2.4

• Browser: all

• Language: TypeScript 2.4

[blue-cp]

@nukec - I found this hack here and I got it to work

first install

npm install regexp-replace-loader --save-dev

then in weback.server.config.js add below in modules.rules section

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

        }
      }

Hope this helps.

[samber]

Working with domino:

// server.ts

const domino = require('domino');

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