43

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

1
  • Same error on Angular 12 Commented Dec 11, 2022 at 7:54

12 Answers 12

117

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

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

7 Comments

Excatly, delete .angular and re-run ng s. Thanks a lot!
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?
but what is the reason behind .angular directory
Should be marked as resolve answer
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.
|
6

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.

1 Comment

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 @J4mJeMax
5

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?

2 Comments

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
This error does not happen only on prod mode, so.. unfortunately this answer didn't help.
2

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

1 Comment

This was a solution for me. I had to set default values for what I was doing. I had subscribed to a model, but before I displayed it in the component, there was some delay. Because of this I had to previously set the model with default values.
1

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.

Comments

1

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

1 Comment

Please improve formatting, quality and add some more information.
1

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.

Comments

0

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.

Comments

0

I solved my issue with updating my A13 to A14.

Comments

0

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

Comments

0

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

Hope this helps someone.

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.