Ngx-charts: Server side build error

[AndreyKogut]

I'm submitting a ...

• [X] bug report - search github for a similar issue or PR before submitting

Current behavior
While launching my SSR build I got errors like "Zone task already loaded" or "Cannot find module '.'". I found that I get this errors only if I use ngx-charts-line-chart component. I also use _ngx-charts-pie-chart_, _ngx-charts-bar-horizontal_, _ngx-charts-bar-vertical-2d_ and no errors appear.

## Reproduction
Webpack config
`const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: { server: './server.ts' },
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/(node_modules|update__modules..*.js)/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /.(ts|js)$/,
loader: 'regexp-replace-loader',
options: { match: { pattern: '\[(Mouse|Keyboard|Focus)?Event\]', flags: 'g' }, replaceWith: '[]' }
}, {
test: /.ts$/, loader: 'ts-loader'
}, {
test: /.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
plugins: [
// Temporary Fix for issue: https://github.com/angular/angular/issues/11580
// for 'WARNING Critical dependency: the request of a dependency is an expression'
new webpack.ContextReplacementPlugin(
/(.+)?angular(\|/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\|/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
`

Current dependencies
"dependencies": { "@angular/animations": "5.2.6", "@angular/common": "5.2.6", "@angular/compiler": "5.2.6", "@angular/core": "5.2.6", "@angular/forms": "5.2.6", "@angular/http": "5.2.6", "@angular/platform-browser": "5.2.6", "@angular/platform-browser-dynamic": "5.2.6", "@angular/platform-server": "^5.2.4", "@angular/router": "5.2.6", "@ng-select/ng-select": "^1.1.1", "@nguniversal/express-engine": "^5.0.0-beta.5", "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5", "@ngx-progressbar/core": "3.0.1", "@ngx-progressbar/http-client": "3.0.1", "@ngx-share/core": "^5.0.1", "@ngx-translate/core": "^9.1.1", "@ngx-translate/http-loader": "^3.0.1", "@swimlane/ngx-charts": "^7.4.0", "angular2-jwt": "0.2.3", "angular2-text-mask": "8.0.3", "bootstrap": "3.3.7", "core-js": "2.4.1", "d3": "^5.4.0", "dom-to-image": "^2.6.0", "file-saver": "1.3.3", "font-awesome": "4.7.0", "intl": "1.1.0", "js-base64": "^2.4.3", "jwt-decode": "2.2.0", "lodash": "^4.17.4", "moment": "^2.21.0", "ng-inline-svg": "6.0.0", "ng-pick-datetime": "5.2.1", "ng-pick-datetime-moment": "^1.0.5", "ng-semantic": "1.1.13", "ng-sidebar": "6.0.1", "ng2-bootstrap-modal": "https://github.com/Sky4CE/ng2-bootstrap-modal/tarball/v.1.0.2", "ng2-cookies": "1.0.12", "ng2-dnd": "4.2.0", "ng2-flatpickr": "0.4.0", "ng2-img-cropper": "0.9.0", "ng2-nouislider": "1.7.4", "ng2-order-pipe": "0.1.5", "ng2-toastr": "4.1.2", "ngx-dropdown": "0.0.22", "ngx-hellojs": "0.0.4", "ngx-infinite-scroll": "0.5.1", "ngx-mask": "2.1.17", "ngx-modal": "0.0.29", "ngx-pagination": "3.0.1", "ngx-scrollbar": "1.5.5", "ngx-sharebuttons": "4.0.4", "ngx-siema": "2.0.1", "nouislider": "9.0.0", "rxjs": "^5.5.6", "svgxuse": "1.2.6", "ts-loader": "^3.5.0", "web-animations-js": "2.3.1", "zone.js": "0.8.4" }, "devDependencies": { "@angular/cli": "^1.6.8", "@angular/compiler-cli": "5.2.6", "@angular/language-service": "5.2.6", "@biesbjerg/ngx-translate-extract": "^2.3.4", "@compodoc/compodoc": "^1.1.1", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "^6.0.98", "codelyzer": "~3.0.1", "husky": "^0.14.3", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "1.2.1", "karma-jasmine": "^1.1.1", "karma-jasmine-html-reporter": "0.2.2", "lint-staged": "^7.0.0", "prettier": "^1.11.1", "protractor": "~5.1.2", "regexp-replace-loader": "^1.0.1", "ts-node": "~4.1.0", "tslint": "^5.9.1", "tslint-config-prettier": "^1.10.0", "tslint-misc-rules": "^3.3.2", "typescript": "2.4.2", "webpack-bundle-analyzer": "^2.11.1" }

Working chart example
<ngx-charts-bar-vertical-2d #verticalBarChart [legend]="true" [results]="data" [xAxis]="true" [yAxis]="true" legendTitle=""> </ngx-charts-bar-vertical-2d>
Chart that cause an error
<ngx-charts-line-chart #lineChart [legend]="true" [results]="data" [xAxis]="true" [yAxis]="true" legendTitle=""> </ngx-charts-line-chart>

Environment:
IDE: Webstorm 2018 / VisualCode
Node 9.2.1
npm 6.0.0

ngx-charts version:
ngx-charts: 7.4.0/8.0.0 (the same behavior)
d3: 4.10.0/5.4.0
angular: 5.0.0/5.2.*
angular/cli 1.6.{4,8}/1.7.3/1.7.4/6.00
zone.js: 0.8.{4,14,17,26}

Language:
TypeScript 2.4.2

[tawn33y]

Found a fix after being stuck with this error for 3 days: 🙂

In your project root, open these two files:
i) 'node_modules/@swimlane/ngx-charts/release/common/circle-series.component.d.ts'
ii) 'node_modules/@swimlane/ngx-charts/release/common/circle-series.component.js'

In each file, replace the following line of code

import { ColorHelper } from '.'
````
with
```ts
import { ColorHelper } from '../common/color.helper'
````
You should be good to go. Just save and build your project.

### Additional Note
Afterwards, when you try to build the project you might experience the following error: "Prerendering failed because of error: ReferenceError: MouseEvent is not defined".

To solve this, install regexp-replace-loader:
```sh
npm i regexp-replace-loader --save-dev

Then in './webpack.server.config.js', update rules as follows:

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

Future Considerations

This error occurs because of a simple mistake in the source code of the ngx-charts project. It is my askance, kindly, if the core team could replace the lines in the two files above with my proposed fixes, as this would ensure no future errors for developers using Angular Universal.

Happy coding! Cheers! 😎

[zvirja]

@marjan-georgiev It's fixed by #920

[marjan-georgiev]

Closing, thanks!

[zvirja]

@tawn33y Thanks a lot for your advises around the issues - it helped me a lot during work on this! 🥇

[tawn33y]

@zvirja Welcome!