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.