Angular: How I Broke ngOnInit
bob.ts
Posted on November 22, 2021
So, recently I ran into an issue where one of my functions was not being implemented "at the correct time." The solution was to trigger it in another component via ngOnInit
.
Moving the code was simple, but in the process I ran into an issue that I've seen before but not dug into.
The Problem
The issue is that I like to use fat-arrow functions in my code (() => {}
) and somewhere along the way I converted an ngOnInit
to fat-arrow. I unknowingly broke the OnInit lifecycle hook complete.
ngOnInit = async (): Promise<void> => {
await this.init();
...
};
The Resolution
The fix was actually pretty simple, I converted the code back to a traditional function pattern ...
async ngOnInit(): Promise<void> {
await this.init();
...
}
... and my function started working again.
Conclusion
Be careful (yes, I am telling myself this) as you may inadvertently write code that does not execute correctly. It was a simple mistake and one that was hidden by some layers of async behavior.
Posted on November 22, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.