Modules in Angular

In Angular, modules are a way of grouping and organizing code related to a specific functionality or feature separate from other code. In every Angular application, there is atleast one root module called the NgModules, conventionally named as AppModule in the app.module.ts file. NgModules are containers for a logical unit of code dedicated to a specific application domain, workflow, or set of capabilities. NgModules can contain components, service providers and other code files. The NgModules can import functionality from other NgModules as well as export functionality for usage by other NgModules. It is important to note that, an Angular application starts by bootstrapping the root NgModules.

The definition of the root NgModule looks like the following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As you can see in the above root NgModule, the class is decorated with @NgModule. The @NgModule decorator is a function that takes a single metadata object. The properties of the metadata object describe the module. The following are important properties:

  • declarations: The declarations property is used to declare an array of components, directives, and pipes that belong to the NgModule. Their scope is limited to within the module until you export them in the exports array of NgModule.
  • exports: The exports property is used to make the subsets of declarations visible and usable in the component templates of other NgModules.
  • imports: The imports property is used to import an array of other modules whose classes are required by component templates that are declared in this MgModule.
  • providers: The providers property is used to declare an array of services to make them available for dependency injection throughout the application. The providers can also be specified at the component level.
  • bootstrap: The bootstrap property is used to tell Angular which component view to load as the top-level component when the application starts. The bootstrap property should only be set by the root NgModule.

A root NgModule always has one root component that is generated during project creation. However, any NgModule can have any number of extra components, which can be loaded through the router or created through the template.

Creating Modules in Angular

A small Angular application can have one as well as many feature NgModules. A feature module is a custom module. The root NgModule can include child NgModules in a hierarchy of any depth.

A module in Angular can be created using the Angular CLI command as follows:

ng generate module module-name

Why do we need Feature Modules?

Feature modules is needed to make the application code easier to read by breaking it down into functions that each deal with a single part of the overall functionality. It can greatly reduce the size and complexity of project files. For example, if we have all the components, directives, pipes, and services of the application in the root app.module.ts module then it will become unmanageable. Splitting the code into separate feature modules help to make the code manageable.

If we need features for user authentication and product management in our application, we can create two modules using the following steps:

  1. Create user-auth module:

    2. Use the following command to create user-auth module:

    ng generate module user-auth

    The above command will generate src/app/user-auth/user-auth.module.ts file as follows:

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class UserAuthModule { }
  2. Create product module:

    3. Use the following command to create product module:

    ng generate module product

    The above command will generate src/app/user-auth/product.module.ts file as follows:

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class ProductModule { }