When generating a basic angular app via ng-cli and creating our own component, which results in a project structure similar to the list below (leaving out all the other clutter for now). The bootstrap order is not changed so we bootstrap app.module via main.ts and then we bootstrap app.component in app.module. I also have my router outlet inside of my app.component.html.
app.module.ts (C)
app.component (incl. .html) (D)
Assuming we've coded correctly, we load up our app, navigate to my-own-comp-1 and the app works fine. We then decide to refresh the browser.
In all my years of Angular development I've ben under the impression that the order of instantiation, construction and (ngOn)initialization, leaving out main.ts, index.html and app.module was like so: D - E
But while debugging I discovered, that it was actually the other way around! The breakpoints that were hit first were placed in the constructors in this order: E - D
I've consulted some colleagues and a well-known search engine, I've searched for similar topics here in SO but I did not yet discover any person, article or question that went into detail on how Angular handles this. I assumed the complete order is like so:
A - B - C - D - E but from what I gathered it's rather A - B - C - E - D which makes no sense to me.
I don't understand why the app.component would be created AFTER the current view component, especially since the router outlet is placed inside the app.component.html which means it becomes the parent/container of all subsequent components and therefore, in my mind, should be constructed before any other component. Can someone explain in which order a standard cli created Angular Application constructs it's components?
To prevent misunderstandings: I am NOT asking how a singular component is instantiated and how/when constructor and ngOnInit are executed, there's plenty of information about that on SO, but rather how the whole circus comes to live and especially in which order which component/module is created.
It has always been, and will always be, from the last child to the root parent.
The reason is simple : typescript imports.
App module can only be created when the child component is created, because it is a dependency of app module.
But the child itself, does not have any dependency.
So logically speaking, every typescript file that has no dependency will be created first, and the files with the most imports will be created last.
But be warned : creation order does not mean usage order. Angular will use the components the other way around : you bootstrap the app module first, then display the app component, then the child component : this is the usage order, which is the exacte opposite of the creation order in that particular case.