Loading Angular App - aakash14goplani/FullStack GitHub Wiki

1. Whenever ng-serve builds our application, it creates "bundles" and automatically adds these to our index.html file at runtime. So, from these bundles, the first code has to be executed from main.ts file: the main file from where the execution of an Angular application will start.

2. The job of main.ts is to bootstrap the application. It loads everything and controls the startup of the application. Bootstrapping is the equivalent of initializing, or starting, your Angular app.

   • Most importantly here is the line platformBrowserDynamic().bootstrapModule(AppModule) where bootstraps start our angular app by passing app module to the method. AppModule refers to the app.module.ts file.
   • This refers to AppModule, i.e. import { AppModule } from './app/app.module'; which looks into the app folders.

3. If we look into app.module file, here, we can see a bootstrap array (bootstrap: [AppComponent]) which is basically a list of all the components which should be known to the compiler at the point of time it analyzes our index.html file.

4. app.module loads app.component.ts, here, the main thing is the "selector" property. Selector property contains exactly the same string as we have in our index.html file. This information is needed by the Angular to place this part into an index.html file with the template of the component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

5. The template of the component is ./app.component.html, so, Angular includes this part into the body of the index.html file.

Reference