Search code examples
javascriptangularseo

Why are the Angular files included in the <body> tag?

I noticed that Angular puts its script files in index.html after the <app-root> element in the <body> part of the HTML. I wonder why it is placed there and not at the beginning of the <head> section.

Angular script files placed in the body

This would decrease page loading time, in my opinion, because it would lead to Angular's code being loaded before all the other Scripts that might be in <head> (for example Google Tag Manager stuff). This way, the page rendering could start while the other libraries are still loading, leading to a faster rendering and increased SEO performance.

I could not find an option where Angular injects its code in angular.json, so I guess I'm missing something here.

If I'm not wrong, where is the option to include Angular's script tags in the head section of index.html?

I'm using Angular 12.1.3 and Node 14.17.3.

Solution

  • You can take a look at the index.html file in the source files and you'll notice it's actually almost empty.

    The body actually contains an app-root element which only serves as a bootstrapper (the application takes place on this element).

    As the scripts need this element to exist before they execute, they need to be placed after it.