Can anyone give me a clear idea which runs first, Index.html or main.ts?

Question

There are many questions on StackOverflow, related to this but none answers with logic.

If index.html runs first.

main.ts or better say main.js (after transpilation) can't run by itself as it is a Javascript file at the end, and index.html file is the one that contains the reference of main.js at the bottom before the closing body tag, obviously, the webpack does all this.

Now, let's say from the configuration that is angular.json file, the angular knows that index is the main HTML file that should be served first.

Then again, as main.js is unknown at this point, so there is no way that the angular would know about the root component. And it must throw an error while parsing <app-root></app-root> but it doesn't throw the error. This means, it already knows about app-root, which means main.js is the entry point. But how is this possible, how a Javascript file can be triggered without HTML page?

first way:- angular.json ---> main.js--->index.html (but how is this possible? who triggers main.js?)

second way:- angular.json--->index.html---->main.js (but then how do angular know about ??)

also,

My question is, If I write huge "ts" code inside the App-Component itself, then also it will not be executed even after the flow reaches the <app-root> as angular has no idea about what <app-root> actually is until it finds the main.js in the body tag and executes it and then only it could know about it.

Answer 1

You can tested it easily. Put console.log(1) in the index.html, and console.log(2) in main.ts. First console will be 1, so index.html runs first.

When application is opened, initially index.html start to render and it will render with empty <app-root></app-root> - because Angular app is still to be loaded (you can test that easily with CTRL + U - that is initial content that browser see). That was the big bottleneck for the SEO of SPA apps.

Once the Angular app is loaded, it will dynamically populate the content to the <app-root></app-root> of the index.html.

UPDATE

I missed the part why the error is not thrown when index.html comes to <app-root></app-root> tag. @Ashish explained that really well in his answer (and definitely deserves an upvote), so I will just quote his answer here:

Reason is, index.html is not an Angular template file, it is pure html, you can place any element inside it and it will never throw an error. But for Angular template files, during compile time it checks if is defined or not and throws compile time error if not defined.

Answer 2

As it is clear from Nenad's answer index.html loads first followed by main.js. Once main.js is loaded it renders the root component inside <app-root>.

Your main confusion here seems, Angular encounters <app-root> in html before main.js/main.ts is loaded or executed, then why it doesn't throw any error or exception because if main.js is not loaded that means <app-root> is not defined yet.

Reason is, index.html is not an Angular template file, it is pure html, you can place any <xyz> element inside it and it will never throw an error. But for Angular template files, during compile time it checks if <xyz> is defined or not and throws compile time error if not defined.