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

Equilibrant

Same error on Angular 12 – Fecal

Answer 1

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

Semolina

Excatly, delete .angular and re-run ng s. Thanks a lot! – Fantast

Mind blowing, thanks @Faisal Alashir. This solution worked for me too... But what's the reason behind this? Why did it throw an error at first place? – Hanhhank

but what is the reason behind .angular directory – Mission

Should be marked as resolve answer – Owlish

I guess the reason behind this is something to do with compiled code that is no longer there, that's why it happens. Deleting the .angular is more like deleting the cache which makes the next ng serve fresh. – Meaghan

Thank you... Unbelievable that this worked! ;) – Checkrein

Answer 2

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?

Delanie

This is the correct answer. This error happens only in prod mode, and you need to add the ngOnDestroy to component especially when u use structural directives over them. deleting the angular dir as well seems helping – Lakin

This error does not happen only on prod mode, so.. unfortunately this answer didn't help. – Fecal

Answer 3

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.

Equilibrant

this saved my bum. I mean... literally changing the .html file with anything (like the div you proposed) fixes it. so, so silly! many thanks @Equilibrant – Weka

Answer 4

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

Pepsinate

Answer 5

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.

Betulaceous

Answer 6

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.

Laney

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.

Expression

Answer 8

I solved my issue with updating my A13 to A14.

Suppletion

Answer 9

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

Surrounding

Answer 10

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

Amish

Please improve formatting, quality and add some more information. – Thomajan

Answer 11

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

Hope this helps someone.

Quintin

Answer 12

First remove node modules & also remove package-lock.json. Then install node modules again. npm i-f It's work for me

Dhammapada