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

the-ult commented 7 years ago

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
<!-- Check whether this is still an issue in the most recent Angular version -->

* **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 ]
<!-- All browsers where this could be reproduced -->

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

hansl commented 7 years ago

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.

visurel commented 7 years ago

Still happens with @angular/cli@1.0.0-beta.32.3

TypeError: Cannot read property 'length' of undefined at LineChartComponent
../src/line-chart/line-chart.component.ts.LineChartComponent.getXDomain

Seems to be something with the results array, but I haven't been able to figure out what exactly. Defining an empty array for results does not seem to fix the issue.

cheema38 commented 7 years ago

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?

hansl commented 7 years ago

I cannot reproduce this with a new app and installing+using ngx-charts. This is using CLI RC.0

If you have a minimal repository that reproduces this issue that you can share, I will definitely investigate (and fix if it's in the CLI). Thanks!

byunru commented 7 years ago

cli with ng4, cause the similar error: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined at createSourceFile (**\node_modules\@ngtools\webpack\node_modules\typescript\lib\typescript.js:14552:109) at parseSourceFileWorker (**\node_modules\@ngtools\webpack\node_modules\typescript\lib\typescript.js:14484:26) ...........

"dependencies": { "@angular/common": ">=4.0.0-beta <5.0.0", "@angular/compiler": ">=4.0.0-beta <5.0.0", "@angular/core": ">=4.0.0-beta <5.0.0", "@angular/forms": ">=4.0.0-beta <5.0.0", "@angular/http": ">=4.0.0-beta <5.0.0", "@angular/platform-browser": ">=4.0.0-beta <5.0.0", "@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0", "@angular/router": ">=4.0.0-beta <5.0.0", "@swimlane/ngx-charts": "^4.1.3", "core-js": "^2.4.1", "d3": "^4.6.0", "rxjs": "^5.2.0", "zone.js": "^0.7.7" }, "devDependencies": { "@angular/cli": "1.0.0-rc.0", "@angular/compiler-cli": ">=4.0.0-beta <5.0.0", "@types/node": "~7.0.5", "codelyzer": "~3.0.0-beta.0", "ts-node": "~2.1.0", "typescript": "~2.2.1" }

ragulmathawa commented 7 years ago

Having a similar issue when importing LineSeriesComponent from ngx-charts module. It seems like TypeError related to angular-cli, so I raised an issue there. But its also related to ngx-charts.

Take a look at this issue - Need more error info - " Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined "

jimmykane commented 7 years ago

Here it is :

EventChartsComponent.html:1 ERROR TypeError: Cannot read property 'length' of undefined
    at LineChartComponent../src/line-chart/line-chart.component.ts.LineChartComponent.getXDomain (index.js:14889)

and

LineChartComponent.prototype.getXDomain = function () {
        var values = [];
        for (var _i = 0, _a = this.results; _i < _a.length; _i++) {
            var results = _a[_i];
            for (var _b = 0, _c = results.series; _b < _c.length; _b++) {
                var d = _c[_b];
                if (!values.includes(d.name)) {
                    values.push(d.name);
                }
            }
        }

dmicevski commented 7 years ago

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

simonmlewis commented 7 years ago

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.

HarelM commented 6 years ago

I think I have the same error - just created a repository from scratch Attached is that repository: chart-error.zip

What I did basically using angular 5 and cli 1.5.5:

ng new chart-test
Added d3 and ngx-charts packages
Added relevant references in app.module
Added the data from the demo page: https://swimlane.gitbooks.io/ngx-charts/content/charts/area-chart.html#
ng serve

ERROR TypeError: Cannot read property 'length' of undefined
    at AreaChartComponent../src/area-chart/area-chart.component.ts.AreaChartComponent.getXDomain (index.js:1435)
    at AreaChartComponent../src/area-chart/area-chart.component.ts.AreaChartComponent.update (index.js:1409)
    at AreaChartComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:7148)
    at checkAndUpdateDirectiveDynamic (core.js:12426)
    at checkAndUpdateNodeDynamic (core.js:13950)
    at checkAndUpdateNode (core.js:13874)
    at debugCheckAndUpdateNode (core.js:14764)
    at debugCheckDirectivesFn (core.js:14705)
    at Object.eval [as updateDirectives] (AppComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14690)

pedrolucasoliva commented 6 years ago

Same error at METEOR 1.5/ANGULAR 5. Somebody solve it?

modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:90408 ERROR TypeError: Cannot read property 'length' of undefined
    at LineChartComponent../src/line-chart/line-chart.component.ts.LineChartComponent.getXDomain (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:290976)
    at LineChartComponent../src/line-chart/line-chart.component.ts.LineChartComponent.update (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:290950)
    at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:284985)
    at checkAndUpdateDirectiveInline (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:101315)
    at checkAndUpdateNodeInline (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:102846)
    at checkAndUpdateNode (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:102789)
    at prodCheckAndUpdateNode (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:103513)
    at Object.eval [as updateDirectives] (HomeComponent.ngfactory.js:357)
    at Object.updateDirectives (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:103235)
    at checkAndUpdateView (modules.js?hash=5a7ed5c2c4f96bd079f841387d45330105919869:102755)

HarelM commented 6 years ago

Seems like the maintainers of this library ignore issue from users as I have yet to receive any comment on issues I've opened...

codycornell commented 6 years ago

Harel,

Apologies for the delay, but the team that maintains this has a day job and can’t always get to every question and feature request as fast as they’d like, but I can tell you they are very much interested in helping users of the project and if you look at past issues, they systematically work through them when they have the time. We provide this project free, but in order to do that, we have to do our day job first.

We are always open to PRs to the project and any project contributions that can help move the project forward.

Thanks, Cody

Sent from my iPad

On Jan 17, 2018, at 10:52 AM, Harel M notifications@github.com wrote:

Seems like the maintainers of this library ignore issue from users as I have yet to receive any comment on issues I've opened...

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

marjan-georgiev commented 6 years ago

@HarelM

I looked at the code you provided, and it looks like you are not even initializing your data in the component.

You are doing this:

public staticData: [
  ...

instead of

public staticData = [
  ...

That is a very basic user error, and not part of ngx-charts.

While we do our best to keep up with the issues opened here, please double check your code before opening one, and only open issues if you are sure you have found a bug in the project and can provide precise steps for reproduction. That would help us a lot.

marjan-georgiev commented 6 years ago

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.

HarelM commented 6 years ago

Hi @codycornell I too have a day job and have an open source project. I wanted to migrate to this library instead of google chart about 6 month ago. To make sure I can "in-place-replace" the functionality I currently have I opened the following issue in May: #416 which was never answered. About a month ago I wanted to try the migration again but couldn't use this library due to this error - which means I can't even start the migration as it didn't work from the get-go - which means it's a critical issue that prevent developers from using this library - it can't be kept open for a month IMHO. Forgive me for my harsh words but this is the impression I got, I'll be more than happy to change my opinion if this changes...

HarelM commented 6 years ago

@marjan-georgiev Thanks for your reply! I'll double check my code, sorry for the mistake, the reproduction was on a side project and I didn't double check it compiles, sorry. However, I don't think it was the case in my original project, I'll check your suggestion with the *ngIf.

HarelM commented 6 years ago

As a side note, a "no data is available" or even "no data is available, try and using *ngIf" exception will truly serve the developers who uses this library :-)

marjan-georgiev commented 6 years ago

There is already a feature request for that: https://github.com/swimlane/ngx-charts/issues/636

We are planning for it. Please feel free to vote for any feature requests you feel are important. That also helps us prioritize things to work on.

glfp commented 6 years ago

I removed the message error placing

    this.single = [];
    this.multi = [];

in component constructor.

altsanz commented 6 years ago

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

saint1729 commented 5 years ago

I faced the same problem and the issue is with either your data or the colorScheme.

The actual format of both should be as follows:

data: any = [
    {
      name: 'Germany',
      series: [
        {
          name: '2010',
          value: 7300000
        },
        {
          name: '2011',
          value: 8940000
        }
      ]
    }
  ];

colorScheme = {
    domain: ['#ee0000', '#00ee00', '#0000ee', '#eeee00', '#ee00ee', '#00eeee', '#eeeeee']
  };

mgleria commented 4 years ago

In our case, our error is about the getColor() function but is practically the same. We found that there is an open bug related with buildOptimizer option. If we set buildOptimizer=false our problem disappears. Here there is an explanation for that.

swimlane / ngx-charts

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