CODEWITHSUNDEEP
angularangular5bootstrappingentry-point
Hitender
Hitender

Reputation: 189

Angular 4 application bootstrapping and entry point

Official site of angular (angular.io) is show that main.ts is the entry point of our application, means the first file executed is main.ts. After that app.module.ts and so on. But when i added alerts on these files found that app.module.ts is reached first then main.ts and index.html. Why? My experiment is below.

main.ts

// top of the file

alert('main.ts reached');

app.module.ts

alert('app.module.ts reached')

index.html

alert('index.html reached')

Now the first message that i see is app.module.ts reached then main.ts reached and index.html reached.

My question is that if main.ts is the entry point then why i can't see main.ts reached first? Is app.module.ts loaded before main.ts? I can't found a flow chart of 'angular 4 request serving process' anywhere. If you can provide or clear me the flow that's greate.

Upvotes: 2

Views: 3335

Answers (1)

DeborahK
DeborahK

Reputation: 60528

I don't know exactly where in any of these files that you have specified these messages ... but as with most Web applications, the index.html file comes down first and is processed.

If you use ng build --prod you will see in the dist folder the generated files prepared for production. In the index.html file, you'll see that it references bundles. Those bundles are downloaded and processed.

You can also view the contents of the bundles and see the JavaScript that they are running.

So it is not as organized as you've alluded to above. :-)

When Angular is loaded ... it bootstraps the module defined in main.ts ... which is your AppModule.

platformBrowserDynamic().bootstrapModule(AppModule);

Also note that you are working with TypeScript files. Those files are transpiled to JavaScript and then compiled by the Angular compiler. So you'd need to look carefully to determine where/when the alerts are executed.

Upvotes: 2

Related Questions