ngx-charts: ngx-charts causes 'Cannot read property 'length' of undefined' with angular-cli beta.30

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

ngx-charts@4.1.x causes the following error with @angular/angular-cli@1.0.0-beta.31 in combination with the peer dependency @ngtools/webpack@>1.2.4 (with @ngtools/webpack @1.2.4 installed as dev-dependency it still works without errors).

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (...\node_modules\typescript\lib\typescript.js:14552:109)
    at parseSourceFileWorker (...\node_modules\typescript\lib\typescript.js:14484:26)
    at Object.parseSourceFile (...\node_modules\typescript\lib\typescript.js:14433:26)
    at Object.createSourceFile (...\node_modules\typescript\lib\typescript.js:14288:29)
    at WebpackCompilerHost.getSourceFile (...\node_modules\@ngtools\webpack\src\compiler_host.js:209:27)
    at findSourceFile (...\node_modules\typescript\lib\typescript.js:63453:29)
    at processSourceFile (...\node_modules\typescript\lib\typescript.js:63384:27)
    at ...\node_modules\typescript\lib\typescript.js:63494:17
    at Object.forEach (...\node_modules\typescript\lib\typescript.js:1293:30)
    at processReferencedFiles (...\node_modules\typescript\lib\typescript.js:63492:16)
    at findSourceFile (...\node_modules\typescript\lib\typescript.js:63477:21)
    at processImportedModules (...\node_modules\typescript\lib\typescript.js:63600:25)
    at findSourceFile (...\node_modules\typescript\lib\typescript.js:63481:17)
    at processImportedModules (...\node_modules\typescript\lib\typescript.js:63600:25)
    at findSourceFile (...\node_modules\typescript\lib\typescript.js:63481:17)
    at processSourceFile (...\node_modules\typescript\lib\typescript.js:63384:27)
    at processRootFile (...\node_modules\typescript\lib\typescript.js:63271:13)
    at ...\node_modules\typescript\lib\typescript.js:62620:60
    at Object.forEach (...\node_modules\typescript\lib\typescript.js:1293:30)
    at Object.createProgram (...\node_modules\typescript\lib\typescript.js:62620:16)
    at AotPlugin._setupOptions (...\node_modules\@ngtools\webpack\src\plugin.js:111:28)
    at new AotPlugin (...\node_modules\@ngtools\webpack\src\plugin.js:21:14)
    at _createAotPlugin (...\node_modules\@angular\cli\models\webpack-configs\typescript.js:28:12)
    at Object.exports.getNonAotConfig (...\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:13)
    at new NgCliWebpackConfig (...\node_modules\@angular\cli\models\webpack-config.js:24:37)
    at Class.run (...\node_modules\@angular\cli\tasks\serve.js:33:29)
    at checkExpressPort.then.then (...\node_modules\@angular\cli\commands\serve.js:84:26)
    at process._tickCallback (internal/process/next_tick.js:103:7)

might be related to:

Expected behavior

ngx-charts not causing the error 😉

Reproduction of the problem

Using @angular/angular-cli@1.0.0-beta.31 with ngx-charts@4.1.1 As soon as I remove ngx-charts from my package.json the error does not occur while compiling/building with ng serve

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Windows 10 VS Code yarn / npm

ngx-charts version: x.x.x

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.31
node: 6.9.5
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7
@angular/tsc-wrapped: 0.5.2

typescript: 2.0.3 or 2.1.6

Angular version: 2.x.x

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 23 (4 by maintainers)

Commits related to this issue

chore: cleanup demo app experienced the random tsc error flu TypeError: Cannot read property 'length' of undefined at createSourceFile (/Users/David/Projects/github/dherges/ng-hal/demo/node_modu... — committed to ng-hal/ng-hal by dherges 7 years ago
(fix): Handle undefined results (#217) — committed to swimlane/ngx-charts by marjan-georgiev 6 years ago

Most upvoted comments

I found my issue here was moving from a bar chart to a line chart.

I expected my data to be able to stay the same.

It looks like for bar chart this is fine: [ { “value”: 6581, “name”: “2016-09-17T16:44:36.551Z” }, { “value”: 4853, “name”: “2016-09-20T12:24:27.430Z” },

BUT then for a line chart the series is required: [ { “name”: “Somalia”, “series”: [ { “value”: 6581, “name”: “2016-09-17T16:44:36.551Z” }, { “value”: 4853, “name”: “2016-09-20T12:24:27.430Z” },

I love these graphs but the documentation and example code could do with some input.

Thanks for the effort though guys.

simonmlewis on Sep 9, 2017

I’m going to take a look into the Angular-CLI as well. This might be a failure on our part for some code analysis part.

hansl on Feb 11, 2017

To others seeing the same error - this is most likely due to the data not being defined at the time the chart is created. It can happen if you fetch the data asynchronously and your initial value is undefined. To prevent it, you can not show the chart using *ngIf until your data is ready.

marjan-georgiev on Jan 17, 2018

@cheema38 did you instantiate your array chartDataNGX?

Seems like the chart’s results is not instantiated or set. I had the same error until I correctly set the results array.

dmicevski on Aug 31, 2017

I too have this issue and none of the previous solutions fixed my problem.

altsanz on Aug 6, 2018

Facing similar issue when trying ot dynamically build the data so for example

//app.ts i declare array chartDataNGX:any[];

then in constructor call getChatrtData()

then in getchartdata i go something like

this.chartDataNGX.push( {“name”: “TEST”,“series”:[{“name”: “Target”,“value”: 40632},{“name”: “Actual”,“value”: 36953}, {“name”: “Projected”,“value”: 31476}]}, {“name”: “TEST1”,“series”: [{“name”: “Target”,“value”: 40632},{“name”: “Actual”,“value”: 36953}, {“name”: “Projected”,“value”: 31476}]}, {“name”: “TEST2”,“series”: [{“name”: “Target”,“value”: 40632},{“name”: “Actual”,“value”: 36953}, {“name”: “Projected”,“value”: 31476}]}, {“name”: “TEST3”,“series”: [{“name”: “Target”,“value”: 40632},{“name”: “Actual”,“value”: 36953}, {“name”: “Projected”,“value”: 31476}]}, {“name”: “TEST4”,“series”: [{“name”: “Target”,“value”: 40632},{“name”: “Actual”,“value”: 36953}, {“name”: “Projected”,“value”: 31476}]} );

it fails with ‘Cannot read property ‘length’ of undefined’

so what am i doing wrong?

cheema38 on Feb 27, 2017