Error typeerror cannot read properties of undefined reading nativeelement

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

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.

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?

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 ‘<whatever>’ of undefined is thrown.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub<#374 (comment)>, or mute the thread<https://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.

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

…

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.

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

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

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

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.

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

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!

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.

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)

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)

i just a timeout of 300 ms and its works.

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

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

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

hi

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

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.