Modules

  • Provides organization at a framework level.
  • declarations define view classes that are available to the module.
  • imports define a list of modules that the module needs.
  • providers define a list of services the module makes available.
  • exports define a list of modules the module makes available.
  • bootstrap defines the component that should be bootstrapped.

Angular NgModule differ from and complement JavaScript (ES2015) Modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

Every Angular application has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An application typically contains many functional modules.

Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the Router NgModule.

Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of lazy-loading —that is, loading modules on demand — to minimize the amount of code that needs to be loaded at startup.