NgModule
.AppModule
into an Angular module just by using the NgModule
decorator. The NgModule
decorator requires at least three properties: imports
, declarations
and bootstrap
.imports
expects an array of modules. Here's where we define the pieces of our puzzle (our application). The property declarations
expects an array of components, directives and pipes that are part of the module. The bootstrap
property is where we define the root component of our module. Even though this property is also an array, 99% of the time we are going to define only one component.There are very special circumstances where more than one component may be required to bootstrap a module but we are not going to cover those edge cases here.
BrowserModule
as an explicit dependency. The BrowserModule
is a built-in module that exports basic directives, pipes and services. Unlike previous versions of Angular, we have to explicitly import those dependencies to be able to use directives like *ngFor
or *ngIf
in our templates.AppComponent
we have to list it in the bootstrap
array. Because in the declarations
property we are supposed to define all the components or pipes that make up our application, we have to define the AppComponent
again there too.imports
property of its NgModule
decorator. If the module is importing the BrowserModule
then it's a root module, if instead is importing the CommonModule
then it is a feature module.As developers, we need to take care of importing theBrowserModule
in the root module and instead, import theCommonModule
in any other module we create for the same application. Failing to do so might result in problems when working with lazy loaded modules as we are going to see in following sections.
AppModule
.It is also possible to perform the compilation as a build step of our workflow. This method is called "Ahead of Time" (AOT) compilation and will require a slightly different bootstrap process that we are going to discuss in another section.