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

Solution 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 CRTL + 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.

Solution 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.