Ngx-charts: Cannot read property 'nativeElement' of undefined when View is undefined

[nethore]

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
I'm using the latest version of ngx-charts with Angular 4.0.0 and I get an error when trying to set view to undefined to get the chart at parent's div dimensions.

ChartWindowComponent.html:52 ERROR TypeError: Cannot read property 'nativeElement' of undefined at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.getContainerDims (index.js:9031) at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.update (index.js:9015) at LineChartComponent../src/line-chart/line-chart.component.ts.LineChartComponent.update (index.js:14596) at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:9004)

Expected behavior
Just get the chart to fit to the parent container size.

• ngx-charts version: 5.1.2
  

• Angular version: 4.0.0
  

[marjan-georgiev]

Can you provide a plunkr where this can be reproduced please?
This example seems to be working fine: https://plnkr.co/edit/CtOHGZAycVZUSUwNWOBo?p=preview

[nethore]

I can't for now reproduce the issue on plunker (I'm trying but i can't get the same error).
I don't know why it isn't working in my project but it's working in the demo. It might be because my div's structure is a bit complexe and I don't know why in this line, chartElement seems to be undefined :
var hostElem = this.chartElement.nativeElement;
It's like it cannot init this.chartElement.

The complete error is :

If you have any idea where it could come from, I'm running out of ideas about the issue's origin.

[GallinEnerg]

Hi Guys' I am having the same issue. The strange thing it that when I load and run ngx-charts as a separate project ie through the main app component it works as expected. I run into this issue after incorporating ngx-charts into my project through it's own component?
I also can't replicate the error on plunker?

[GallinEnerg]

Hi There you can solve your issue by doing the following: In your chart component.html file, just change [results]=”single” to [result]=”SINGLE”.

From: Huiguang Liang [mailto:[email protected]]
Sent: 17 May 2017 08:16
To: swimlane/ngx-charts [e-mail]
Cc: Gary Allin [e-mail]; Comment [e-mail]
Subject: Re: [swimlane/ngx-charts] Cannot read property 'nativeElement' of undefined when View is undefined (#374)

Hi, I have a very similar issue. The demo example provided works fine, but once I try to incorporate ngx-charts like this: Plunkerhttps://plnkr.co/edit/Yp77lIum7EaYV4c8hjQ0?p=preview, a whole bunch of Cannot read property '' of undefined is thrown.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/swimlane/ngx-charts/issues/374#issuecomment-302006515, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AXk0lmZYMF9Od6KrRunn4tEf42boW8Gpks5r6p63gaJpZM4NR0sf.

Disclaimer

The information contained in this communication from the sender is confidential. It is intended solely for use by the recipient and others authorized to receive it. If you are not the recipient, you are hereby notified that any disclosure, copying, distribution or taking action in relation of the contents of this information is strictly prohibited and may be unlawful.

This email has been scanned for viruses and malware, and may have been automatically archived by Mimecast Ltd, an innovator in Software as a Service (SaaS) for business. Providing a safer and more useful place for your human generated data. Specializing in; Security, archiving and compliance. To find out more visit the Mimecast website.

[huiguang-liang]

Yeah I realized it was my error so I deleted my comment, cheers

On May 17, 2017 20:00, "GallinEnerg" [e-mail] wrote:

Hi There you can solve your issue by doing the following: In your chart
component.html file, just change [results]=”single” to [result]=”SINGLE”.

From: Huiguang Liang [mailto:[email protected]]
Sent: 17 May 2017 08:16
To: swimlane/ngx-charts [e-mail]
Cc: Gary Allin [e-mail]; Comment <
[email protected]>
Subject: Re: [swimlane/ngx-charts] Cannot read property 'nativeElement' of
undefined when View is undefined (#374)

Hi, I have a very similar issue. The demo example provided works fine, but
once I try to incorporate ngx-charts like this: Plunker<
https://plnkr.co/edit/Yp77lIum7EaYV4c8hjQ0?p=preview>, a whole bunch of
Cannot read property '' of undefined is thrown.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub swimlane/ngx-charts/issues/374#issuecomment-302006515>, or mute the
thread AXk0lmZYMF9Od6KrRunn4tEf42boW8Gpks5r6p63gaJpZM4NR0sf>.

Disclaimer

The information contained in this communication from the sender is
confidential. It is intended solely for use by the recipient and others
authorized to receive it. If you are not the recipient, you are hereby
notified that any disclosure, copying, distribution or taking action in
relation of the contents of this information is strictly prohibited and may
be unlawful.

This email has been scanned for viruses and malware, and may have been
automatically archived by Mimecast Ltd, an innovator in Software as a
Service (SaaS) for business. Providing a safer and more useful place for
your human generated data. Specializing in; Security, archiving and
compliance. To find out more visit the Mimecast website.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-charts/issues/374#issuecomment-302068725,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD6L8thr2GeFalFTyG_BPixD1vXoRo2Qks5r6uFpgaJpZM4NR0sf
.

[marjan-georgiev]

If you can't reproduce in a plunkr, try creating a basic project and upload it to a public github repo where it can be reproduced.

[michal-th]

I'm experiencing exactly the same issue,

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of undefined at LineChartComponent../src/common/base-chart.component.ts.BaseChartComponent.getContainerDims

Looks like if [view]="undefined" , this.chartElement is undefined in getContainerDims of BaseChartComponent.

@swimlane/[email protected]

Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.8.0
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64

[eduibrahim]

No news? I'm having same problem only with Ionic projects,

[aboglioli]

I thinks it's a problem with @angular/material

[wa1gon]

I am having the same issue. I am having problem in my SPA which works, but throws this error.

So I took copy and pasted the example from the material mat-select page into my sand box page and got the same error. So there must be something wrong else where. I don't have a clue how to debug this.

Using Angular 5.0.0 and Mat 2.0.0-beta.10-4905443.
Stack Trace:

MatSelect.html:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at MatSelect._onFadeInDone (select.js:688)
    at Object.eval [as handleEvent] (MatSelect.html:1)
    at handleEvent (core.js:11166)
    at callWithDebugContext (core.js:12592)
    at Object.debugHandleEvent [as handleEvent] (core.js:12232)
    at dispatchEvent (core.js:7878)
    at eval (core.js:8488)
    at _animationCallbacksBuffer.forEach.tuple (animations.js:270)
    at Array.forEach (<anonymous>)
    at _zone.run (animations.js:268)
    at ZoneDelegate.invoke (zone.js:392)
    at Object.onInvoke (core.js:3864)
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:142)
    at NgZone.run (core.js:3754)
    at Promise.resolve.then (animations.js:267)
    at ZoneDelegate.invoke (zone.js:392)
    at Zone.run (zone.js:142)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)
    at HTMLElement.globalZoneAwareCallback (zone.js:1566)

Any suggestions would be welcome.

[wa1gon]

Problem went away after I imported material. Then I removed the import without any issue.
Strange.

[caotuiit1997]

I don't know if you guy had resolved this issue: MatSelect.html:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined.
I found a solution by setTimeOut and waited for all view init.

ngAfterViewInit() {
    setTimeout(()=>{
      this.loadingMap = true;
      if (this.loadingMap == true) {
        this.loadMap();
      }
    },3000);
  }

It worked for me perfectly!

[marjan-georgiev]

Closing this as a potential solution has been provided above. If the problem still occurs and an example of it can be provided, I would be happy to reopen.

[samusonak]

I am still having this problem, Getting
RROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
at ReportPage.Array.concat.ReportPage.createBarChart (report.ts:97)

[suchetaswabhav]

I still get this error while downloading the PDF -

app.component.ts
`

export class PayloadComponent implements OnInit, AfterViewInit {
 ngOnInit() {

this.payloadLogKey = this.shareData.LOG_KEY_VALUE_3;

console.log("inside payload KEY_VALUE = " + this.payloadLogKey);

  }

  ngAfterViewInit(){

  setTimeout(()=>{
    this.loading = true;
    if (this.loading == true) {
      this.viewPayloadTransaction();
    }
     },3000);

   }

   @ViewChild('content')content : ElementRef;


  public downloadPDF(){

console.log ("inside downloadPDF()")
let doc = new jsPDF();

doc.setFontSize(45);

doc.setLineWidth(18.5);
doc.setFont("courier");

  let specialElementHandlers = {

  '#editor':function (element,renderer){
  return true;
  }
 };

 let content = this.content.nativeElement;
 doc.fromHTML(content.innerHTML,10,10,{

 'width' : 120,
 'elementHandlers':specialElementHandlers

 });
console.log("2nd inside download pdf",this.content )

console.log("3rd inside download pdf ", this.content )

 doc.setLineWidth(1);
 doc.save('payload.pdf');

  }
  }

`

app.component.html

<td type="text" title="{{dat.PAYLOAD}}" > <span class="fa fa-file-pdf-o" title="Copy to PDF" id= "downloadPdf" (click)="downloadPDF()" style="font-size:20px; "></span> &nbsp;&nbsp; <span class="glyphicon glyphicon-duplicate" id="downloadToClipboard" title="Copy to Clipboard" (click)="jqFn(dat)" style="font-size:10px; cursor:pointer"></span>&nbsp;&nbsp; {{dat.PAYLOAD|slice:0:12}} </td>

Error

TypeError: Cannot read property 'nativeElement' of undefined
at PayloadComponent.downloadPDF (payload.component.ts:160)
at Object.eval [as handleEvent] (PayloadComponent.html:193)
at handleEvent (core.es5.js:11997)
at callWithDebugContext (core.es5.js:13458)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13046)
at dispatchEvent (core.es5.js:8601)
at eval (core.es5.js:9212)
at HTMLSpanElement.eval (platform-browser.es5.js:2651)
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)

[hardik-godhani]

i just a timeout of 300 ms and its works.

[devangptechuz]

you should use ngAfterviewInit(){ } instead of timeout()

[ammad172]

you should use ngAfterviewInit(){ } instead of timeout()

I have tried this as well not working and giving same error

[howtomake]

hi

if develop mode its ok, but after build project i have
ERROR TypeError: Cannot read property 'nativeElement' of undefined