AppModuleinto an Angular module just by using the
NgModuledecorator requires at least three properties:
importsexpects an array of modules. Here's where we define the pieces of our puzzle (our application). The property
declarationsexpects an array of components, directives and pipes that are part of the module. The
bootstrapproperty 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.
BrowserModuleas an explicit dependency. The
BrowserModuleis 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
*ngIfin our templates.
AppComponentwe have to list it in the
bootstraparray. Because in the
declarationsproperty we are supposed to define all the components or pipes that make up our application, we have to define the
AppComponentagain there too.
importsproperty of its
NgModuledecorator. If the module is importing the
BrowserModulethen it's a root module, if instead is importing the
CommonModulethen it is a feature module.
As developers, we need to take care of importing the
BrowserModulein the root module and instead, import the
CommonModulein 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.
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.