Angular Bootstrapping
When a user invokes a Angular App over the Internet: How is the Angular App served?
This is described beautifully in: Bootstrapping in Angular: How It Works Internally
Mentioning some key facts:
| Artifact | What it does |
|---|---|
| angular.json | Describes the project(s) and for each of them the index.html and main.js that is set up at the root. |
| index.html | Contains: 1.) the html selector tag which is referenced in the root Angular component that implements it. –> e.g. ‚<app-root></app-root> 2.) The references to the JavaScript files invoked |
| main.js | Calls some Angular libraries in order to invoke the root module. This is a Module annotated with @NgModule –> e.g. AppModule |
| app.module.js (=AppModule) | Contains the bootstrap: [AppComponent] directive telling Angular to load the AppComponent |
| app.component.js (AppComponent) | Having the this annotation (or similar): @Component({ selector: ‚app-root‘, templateUrl: ‚./app.component.html‘, styleUrls: [‚./app.component.css‘] }) Telling angular, that it implements the HTML node ‚<app-root>‘ with the given template ‚./app.component.html‘ |