Angular Modules

Angular Modules

Angular applications are modular, and NgModules is Angular's modularity mechanism. NgModules refer to the containers for a logical code piece dedicated to a specific workflow, application domain, or capabilities set. Service providers, components, and other code files whose scope is defined by the contained NgModule are available with them. They can import functionality from other NgModules and export functionality for usage by other NgModules.

Each Angular application contains at least one NgModule class, also known as the AppModule (root module) and saved in the app.module.ts file. You can launch your application by bootstrapping the root NgModule.

While a small application might only contain one NgModule, most apps have more. Because it can include child NgModules in a hierarchy of any depth, the root NgModule for an application is called that.

NgModule metadata

A class with the @NgModule attribute defines a NgModule (). The @NgModule() decorator makes use of a single metadata object. Its properties describe the module and then return the same. Here are the most important qualities:

  • declarations:  This NgModule's components, directives, and pipes are listed here.
  • exports:  A set of declarations should be viewable and usable in other NgModules' component templates.
  • imports:  Other modules whose exported classes the component templates required and are declared in this NgModule are imported.
  • providers: Providers of services that this NgModule adds to the global collection of services, making them available throughout the application. (At the component level, you can also specify providers.)
  • bootstrap:  The root component, which hosts all other application views, is the main application view. The bootstrap attribute should only be set by the parent NgModule.