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

Question

I have problem. Angular is sometimes showing error ERROR TypeError: Cannot read properties of undefined (reading 'onDestroy')

I am getting this error when I am running ng serve, but if I use angular universal, then page is sometimes loading properly and sometimes it is showing same error. I found out, that this error started when I started making modularization of my app.

Angular version 13.3

Answer 1

This happened when I was trying to use components in an ngSwitchCase that rendered ng-templates with components in them.

The components that did not implement ngOnDestroy would give me this error.

short answer, try adding ngOndestroy to components that might be rendering on the fly?

Answer 2

I found a solution for this issue; it is hard and not typical bug. It happens if you don't finish modularizing your code, where part of code you are using as modules and part as component imports.

Components that aren't modularized and used in app.component.html different than

<router-outlet></router-outlet>

are causing this error.

In my case, it was:

<app-navbar></app-navbar>

What is the issue?

If you have this error, and you add to navbar f.e. <div></div> and then remove it app works normally.

What is the solution?

You have to modularize all components used in app.component.html properly.

Answer 3

I had the same problem. in my case because I defined my model without any default values and bind it to HTML like this myModel.value. so because the myModel.value is not value, I got that error. I replaced it with myModel?.value and the error fixed

Answer 4

I had the same issue. Try to remove the .angular directory! worked for me.

Answer 5

We had this issue on production. Turns out the issue was in our git repository. Due to some squash commits to the master branch, it seems to have gotten messed up somehow.

Fixed it by enabling the "Clean" option with clean option "Sources" in Azure DevOps pipeline, under "get sources" at the top (Classic pipeline).

Answer 6

If none of above is working for you, try updating your packages via npm install. It worked for me :)

Answer 7

I had the same problem, which was caused by a faulty import of a module. The typescript alias contained a double slash. Similar to lib//module, and once we removed this, the app worked again.

Answer 8

I solved my issue with updating my A13 to A14.

Answer 9

If non of fixes above helped, the same error appears when you forget to include CommonModule in import section of your @NgModule. Be aware and hope it helps somebody.

Answer 10

In my case I had neglected to add the import for NgFor in my @Component({imports:[NgFor]}) array.

Hope this helps someone.

Answer 11

We had the same issue and it was caused by using "npm install" with parameter "force" in the dev environment, but the build server didn't use force. This was causing the prod build to use old packages which caused the error.