Ngx-charts: Not rendering in Universal: MouseEvent undefined

[chrisvfabio]

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

[m0t0r]

Hi, @marjan-georgiev, can you please provide an update for this issue ? The error blocks my project also

[nukec]

problem here as well.

[blue-cp]

is there a fix or workaround for this issue?. Have same problem as well with angular universal.

[nukec]

@abhishekdubey1 it didn't work with universal for me, i just upgraded to angular4

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

[nukec]

@abhishekdubey1 thanks but i use angular4 so it might help someone else

[blue-cp]

cool. I am using angular5 and angular universal for server side rendering.

[flashcrow2000]

@abhishekdubey1 hi, any idea if I can use this hack with angular-cli ? I can't find webpack.server.config.js in my project..

[blue-cp]

@flashcrow2000 . I am using https://github.com/angular/universal-starter as my starter project. It is also angular-cli project. There is a weback.server.config.js in the project directory which is used to server SSR and pre-rendered pages

[levytskyy]

ngular 5, ngx-charts 7.0.1, the error still remains on server rendering
__metadata("design:paramtypes", [MouseEvent]),
ReferenceError: MouseEvent is not defined

[blogcraft]

Sorry, but replacing NgxCharts with ng2-charts in my project.

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

[marjan-georgiev]

This should be fixed in the upcoming release.

[rafa-as]

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;

Doesn't works for us, the Window definition doesn't have a property MouseEvent.