Like any web application, what is served by the server is an index.html. Then there will be few javascript files downloaded as required by the script tags in the index.html.
 |
| files downloaded at start-up |
 |
| index.html |
Out of these files, main.js is important and it is the compiled version of the main.ts within the src folder. So main.js is the entry point and then it will call the following files in the below-depicted order.
 |
| file call hierarchy |
So if we need to do any pre-Angular stuff to do some hacking, main.ts looks like the correct place.
After main.ts app.module.ts will be invoked, and then the root component mentioned in the bootstrap section of the @NgModule decorator will be loaded.
Refer
https://angular.io/guide/bootstrapping#the-bootstrap-array
Normally there will be a single component tree with a single root component and all other components nested within the root component.
Once the browser encounters the <app-root> which is an HTML5 custom-element, it will render the app.component or the root component. The selector attribute in the @Component decorator will help the browser the figure out this. Whatever the content in the HTML template file given by the templateUrl will be rendered inside the <app-root>.
How this happens is a mystery, which leads to the topic WebComponets.
Refer
https://www.html5rocks.com/en/tutorials/webcomponents/customelements
 |
| index.html |
 |
| app.component.ts |
Comments
Post a Comment