0

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.

  • main.ts (A)
  • index.html (B)

    • app.module.ts (C)

    • app.component (incl. .html) (D)

      • my-own-comp-1 (incl. .html) (E)

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.

TheRealOha
  • 43
  • 8
  • Most probably your example is oversimplified, try to create sample app without router and put console log into each constructor. – kemsky Jun 27 '23 at 11:10

1 Answers1

2

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.

MGX
  • 2,534
  • 2
  • 14
  • So if I understand correctly: constructors are child -> root but ngOnInit is root-> child? – TheRealOha Jun 27 '23 at 08:34
  • @TheRealOha what about trying yourself ? Add a console.log in your component's parent/childs constructor and ngOnInit. You'll see the exact order. – Random Jun 27 '23 at 08:38
  • @Random of course I could do that and partly I already did. I was wondering about the WHY, and WHO is responsible. MGX gave the missing piece of the puzzle, I was mainly trying to clarify if I understood their post correctly. AFAIK Stack Overflow is a place to collect knowledge. While Telling people "go and try yourself" is a valid proposition, it's not exactly helpful in this case, because after having tried one still doesn't know the Whys and Whos. – TheRealOha Jun 27 '23 at 08:48
  • It is indeed a valid question. But anyone giving an answer may be wrong (we're humans, after all). So if you can easily check by yourself, and be 100% sure, it is better than asking someone and be 95% sure. What I'm pointing out is that you now have all the informations needed to try it by yourself. You can then come back here with the result you found and we may discuss about it, would be interesting. – Random Jun 27 '23 at 09:39
  • 1
    @TheRealOha no it's not that : constructors are called when Angular instantiates the components, then it calls ngOnInit and other hooks : this is **usage order**. But if you write console logs ABOVE your classes (above the @Component), you should see when the files are being used : this is the "creation" order. – MGX Jun 27 '23 at 09:43