Angular index.html or main.ts?

Sachin Singh

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

If Index.html runs first.

point 1. 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 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 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 ??)

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Yes, @Bhat, you are right, I too think the same way, but there is one undocumented and hidden concept, that as index.html first loads then it directly means app-root is uninitialized at the beginning because Main.js contains the logic for app-root.
So, when the flow reaches the first time , it is actually empty and doesn't render anything, after the Main.js executes, as soon as the flow reaches the end of the body tag, then dynamically the app-root (root component) re-executes.
And, Main.ts is an entry point that doesn't make any sense. If documentation wouldn't have mentioned it, it is anyway understood that Main.js is the first javascript file (containing the bootstrapping module) on the HTML page, so obviously, it will load first, as all javascript file loads in a sequence when the browser finds it in the HTML page.
Pranam Bhat5y ago
index.html will load first in the browser. When index.html is loaded, the Angular core libraries, third-party libraries are loaded. Now the Angular will locate the entry point. The entry point of Angular application is main.ts. Which located under "src/main.ts".

angular.json is the file which is first referred by the builder to look for all the paths and configurations and to check which is the main file.
main.ts helps in creating the browser environment for the application to run:
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
After this, main.ts file calls the function bootstrapModule(AppModule) which tells the builder to bootstrap the app:
platformBrowserDynamic().bootstrapModule(AppModule)
Later, Angular bootstrapper loads our root module AppModule. The AppModule is located under the folder src/app.

Flow:
main.ts -> app.Module.ts -> app.component.ts -> index.html -> app.component.html
So your answer:
second way:- Angular.json--->Index.html---->Main.js
How do Angular know about ?:
From the app.module.ts file ng gets the information about the components and which component is to be bootstrapped as the top level component. As per the AppModule referred here the component that has to be bootstrapped is AppComponent which is specified in src/app/app.component.ts file.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
...
}
Component specifies the selector, template and CSS that has to used. As you can see selector property here specifies the app-root (same as used in index.html). Which means any tags that are used within a template will be compiled using the AppComponent class and get the functionality as defined in the class.
With in the angular.json index.html is defined as the first page to be loaded. In index.html you will find the same tags.

Template specified in AppComponent (app.component.html) is rendered between these tags.
Runtime: When the typescript compiler runs it takes all the decorator information and shoves it into the Javascript code attached to the decorated classes, methods, and fields.
In your index.html you reference your main.js which calls the bootstrap method. That method is passed your top level module.

The bootstrap method fires up the runtime compiler and gives it a reference to that top level module. The runtime compiler then starts to crawl that module, all services, components, etc. referenced by that module, and all of associated metadata, and builds up your application.

Minko Gechev explained the compiler concept nicely.
Do have a look when you want to know about AOT/JIT complier flow:

https://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/
Sachin Singh5y ago
I can't confirm it

but I am 99.9 % sure that index.html runs first with empty app-root at the beginning and then as soon as the flow reaches the Main.js , it loads the template (html).
Sachin Singh5y ago
There is nothing like "ts" after compiling it becomes js, so how do browsers will know about the js file, until it finds it somewhere in the index.html?
Md Sarfaraj5y ago
Hello Sachin,

I think main.ts file will run first.