ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')

Question

I recently upgrade the dependencies within my package.json to their latest versions. The dependencies were outdated by atleast 2 years or maybe more. The site i'm working on displays various kinds of graphs and charts and it was working fine before the upgrade to the package.json. What would be the reason for this?

This is the updated package.json

{
  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/material-moment-adapter": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^4.0.4",
    "bootstrap": "^5.1.3", 
    "moment": "^2.29.1",
    "plotly.js": "^2.5.1",
    "rxjs": "^7.4.0",
    "rxjs-compat": "^6.6.7",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.0",
    "@angular/cli": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0"
  }
}

This is the old package.json that displays the graphs and charts.

{
  "name": "pipeline-viewer",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.3.3",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@wizpanda/super-gif": "0.0.5",
    "angular-plotly.js": "^1.3.2",
    "bootstrap": "^4.2.1",
    "moment": "^2.24.0",
    "plotly.js": "^1.49.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.3",
    "@angular/compiler-cli": "~7.1.0"
  }
}

what part of your code is causing this problem? sometimes, new versions of some npm packages behave quite differently to previous versions so you need to debug your source code itself — Jose Cabrera Zuniga
– Jose Cabrera Zuniga, Commented Oct 14, 2021 at 19:59
In the code where i'm using ElementRef from @angular/core it seems like — Carlos Ortiz
– Carlos Ortiz, Commented Oct 14, 2021 at 20:21

Fateh Mohamed · Accepted Answer · 2021-10-17 09:26:21Z

6

it's related to viewChild changes in Angular +8

Change

@ViewChild('element') element: ElementRef;

To

@ViewChild('element', {static: true}) element: ElementRef;
// to access your view Child in ngOnInit

Same thing for ContentChild

edited Oct 17, 2021 at 9:26

answered Oct 14, 2021 at 20:31

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carlos Ortiz Over a year ago

So if my element was navTable would the substitution be like so? @ViewChild('navTable', {static: true}) navTable: ElementRef;

Fateh Mohamed Over a year ago

yes! this is right!

Carlos Ortiz Over a year ago

This works ! Thanks Fateh!

Collectives™ on Stack Overflow

ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related