What exactly triggers main.ts in Angular
main.ts file is the entry point of our web-app.It compiles the web-app and bootstraps the AppModule to run in the browser. It starts with importing the basic module which we need.
platformBrowserDynamic().bootstrapModule(AppModule)
This code has reference to the parent module i.e AppModule. Hence when it executes in the browser, the file that is called is index.html. index.html internally refers to the main.ts file which calls the parent module i.e AppModule.
When AppModule is called, it calls app.module.ts which further calls the AppComponent based on the bootstrap.
bootstrap:[AppComponent]
In app.component.ts, there is selector:"app-root" which is used in the index.html file. This will display the contents present in app.component.html.
Yes, only angular-cli.json references it for handling the startup of the application.
main.ts is not a module but a simple script-file, executed from top to bottom and can have any other file-name.
The only other thing that affects it as a .ts file, is tsconfig.json, which handles the transpilation to javascript. but it does so by the *.ts file-name pattern not by referencing files individually.
No Vendor.bundle.js don't contain angular code. It contain 3rd party plugins, eg. bootstrap, jquery, jquery plugins, which we included in package.json. It's not responsible for bootstrapping angular application.
In main.ts file last line platformBrowserDynamic().bootstrapModule(AppModule) responsible for bootstraping of angular application. platformBrowserDynamic() part of this line indicates that we are about to boot Angular in a browser environment.
3.The bootstrapModule() function helps bootstrap our root module taking in the root module as its argument.
- AppModule is our root module which is the entry module for our application, this can actually be any of the modules in our application but by convention AppModule is used as the root module.
5.In our AppModule, we then need to specify the component that will serve as the entry point component for our application. In our app.module.ts file where we import the entry component (conventionally AppComponent) and supply it as the only item in our bootstrap array inside the NgModule configuration object. eg. bootstrap[AppComponent]