Timely matter: when does Angular execute your code?
Description
Who we are? Developers!
What do we want? To load data in our Angular application!
When do we want it? As soon as possible!
Many of us are familiar with component lifecycle hooks such as onInit or afterViewInit. What are other hooks that Angular gives us to load our data or to execute some code? In my talk I'm going to investigate it and put it on a time scale - from bootstrapping function to APP_INITIALIZER and resolvers. We will learn what code is executed first and last, creating a time perspective of an Angular application.
Key takeaways
Mind caching of routing components for your lifecycle hooks
Be aware that the guards of the nested routes are executed before the resolver
Use APP_INITIALIZER to initialise your service during app bootstrapping (if necessary)
Take care of unsaved changes with an onbeforeunload event listener, but don't forget about the back/forward cache
Be careful with executing too much initialisation logic as it affects your core web vitals
About Maria
Maria is a Frontend Technology Lead and a Google Developer Expert with focus on Angular. She writes for ng-conf, speaks at tech meetups and co-organizes NG-DE conference. In her tweets and articles Maria likes to share her learnings from everyday coding. Fun fact: she illustrates her stories herself because she likes drawing.
Learn more about Maria at: