【转】Understanding the Angular Boot Process

原文： https://medium.com/@coderonfleek/understanding-the-angular-boot-process-9a338b06248c

---------------------------------------------------------------------------------

For newcomers to Angular 2+ (now referred to simply as Angular), the struggle is always adapting to the drastic change from the structure they are already familiar with in AngularJS. And for those that have never seen AngularJS but began their Angular journey with the new kid on the block, the fact that Angular includes a bootstrap process can send a rather unpleasant but rather misguided tone that Angular just decided to be a black sheep among its counterparts (as if favoring Typescript was not enough).

However, these misconceptions only arise when you have not fully understood the inner workings of Angular. When you fully understand it you will realize and start to appreciate its structure and rather than seeing it has “complex” you see it as highly organized.

In this short article (one of many devoted to demystifying the structure of Angular), i will break down the Angular bootstrap process, simply put, how an angular app starts up.

Then entry point to every Angular application is the main.ts file which contains this last line:

 

The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment. As Angular can be used in Javascript host environments asides the browser (e.g. on the server or in a web worker), its thus imperative that we specify the environment in which our App is to be booted.

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.

In our AppModule, we then need to specify the component that will serve as the entry point component for our application. This happens 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.

 

And there you have it, that concludes our Angular boot process. A recap of the steps

1. Specify the enviroment in which your Angular App is running
2. Use the bootstrapModule() function to boot your entry module by supplying the module as an argument.
3. Inside the root module, specify your entry point component in the module configuration object.

Now that doesn’t look complicated does it :).