search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Cannot read property 'nativeElement' of undefined when View is undefined #374

Closed nethore closed 6 years ago

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

marjan-georgiev commented 7 years ago

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 commented 7 years ago

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 :

capture d ecran 2017-05-10 a 09 46 14

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

GallinEnerg commented 7 years ago

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 commented 7 years ago

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:notifications@github.com] Sent: 17 May 2017 08:16 To: swimlane/ngx-charts ngx-charts@noreply.github.com Cc: Gary Allin gary.allin@energ.co.uk; Comment comment@noreply.github.com 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 commented 7 years ago

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

On May 17, 2017 20:00, "GallinEnerg" notifications@github.com 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:notifications@github.com] Sent: 17 May 2017 08:16 To: swimlane/ngx-charts ngx-charts@noreply.github.com Cc: Gary Allin gary.allin@energ.co.uk; Comment < comment@noreply.github.com> 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 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.

— 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 commented 7 years ago

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 commented 7 years ago

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/ngx-charts@5.3.1

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 commented 7 years ago

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

aboglioli commented 7 years ago

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

wa1gon commented 6 years ago

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 commented 6 years ago

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

caotuiit1997 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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

`

      {{dat.PAYLOAD|slice:0:12}}

`

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 commented 4 years ago

i just a timeout of 300 ms and its works.

devangptechuz commented 4 years ago

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

ammad172 commented 3 years ago

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

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

howtomake commented 3 years ago

hi

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

erickroac commented 3 years ago

Hi!

I had the same problem when I tried to use ' @ViewChild('searchInput', {static: true}) public searchElementRef: ElementRef;' and I wasted a lot of time looking for a solution, but the only problem there was that I had my input inside an ng-template, so when the page loaded it seemed that the content was hidden I could not render the element, based on my hypothesis I took the input to the main page of the HTML and boom! The error went away, but I did not stay there, I put the element inside a div and use ngIF and initialized it to false, and I had the error again, it seems that when starting the hidden element it does not recognize it, oh and by the way, If the content is hidden and then you show it and then try to call the function, it still doesn't work, I hope my experience helps you.