ngx-charts: Cannot find module "." when running universal server

When I followed the Angular Universal: server-side rendering tutorial to start the universal server, I met the error:

Error: Cannot find module "."
    at webpackMissingModule (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164237:82)
    at Object.. (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164237:160)
    at __webpack_require__ (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164176:30)
    at Object../node_modules/@swimlane/ngx-charts/release/common/circle-series.component.js (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:168816:59)
    at __webpack_require__ (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164176:30)
    at Object../node_modules/@swimlane/ngx-charts/release/common/circle-series.component.ngfactory.js (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:169083:10)
    at __webpack_require__ (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164176:30)
    at Object../node_modules/@swimlane/ngx-charts/release/line-chart/line-chart.component.ngfactory.js (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:192065:10)
    at __webpack_require__ (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:164176:30)
    at Object../src/app/domains/inspector/dmarc-panel/dmarc-panel.component.ngfactory.js (/home/zhezhu/Documents/fm-frontend-jobs/dist/server.js:208172:11)

I tried to start it without webpack, then there would be another error with ngx-charts:

/home/zhezhu/Documents/fm-frontend-jobs/node_modules/@swimlane/ngx-charts/release/line-chart/line-series.component.js:10
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:646:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)

and I don’t know why.

Thanks for your help.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

@yanivamrami Yes as a matter of fact I did. The issue is with how ngx charts is packaged, currently node doesn’t support the current packaging. To fix this I installed Babbel as a dev dependency and added the following scripts to my package.json:

“compile_@swimlane_ngx-charts”: “babel node_modules/@swimlane/ngx-charts -d node_modules/@swimlane/ngx-charts --presets es2015”
“postinstall”: “npm run compile_@swimlane_ngx-charts”

So whenever I run npm install, ngx charts is automatically compiled into a compatible format. I have no issues runnning this with Angular 6.1.6, @nguniversal/express-engine 6.1.0 and @nguniversal/common 6.1.0.

Hope I was of help!

Pibomeister on Sep 25, 2018

Merged the PR. This will be in the next release. Thanks for the contribution everyone!

marjan-georgiev on Jul 17, 2018

This problem is back. I am trying to make a app-shell using the angular cli generator and builder, guided by this link

Error: SyntaxError: Unexpected token { in @swimlane\ngx-charts\release\common\axes\x-axis.component.js:10

"@angular/animations": "^7.2.15",
"@angular/platform-browser-dynamic": "^7.2.15",
"@swimlane/ngx-charts": "^11.1.0",
"@angular/cli": "7.3.9",

CWINDOWSsystem32cmd exe_3

hallysonh on May 24, 2019

Oops. Pushed it, thanks!

marjan-georgiev on Jul 18, 2018