Angular - NgModules

This chapter will discuss the NgModule in Angular. NgModule is a key component of every custom or root module, which plays an important role in structuring and organizing an Angular application.

Important!! As per the latest Angular version, the application and components created are standalone by default, which means they do not depend on @NgModule. So, the Angular team recommends using the standalone component instead of NgModule.

Angular NgModule

In Angular, the NgModule is a class marked (or defined) with the @NgModuledecorator, which specifies it as an Angular module. This decorator provides metadata that tells Angular how to compile and run the module code and configure the DI (dependency injection).

Here is the snippet of the @NgModule in Angular:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MyFeatureModule } from './my-feature/my-feature.module'; import { MyService } from './my-service.service'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, MyFeatureModule ], providers: [ MyService ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Note: The NgModule has two main responsibilities:

• Declaring components, directives, and pipes that belong to the NgModule
• Add providers to the injector for components, directives, and pipes that import the NgModule

Important Properties of @NgModule

The @NgModule class has several important properties which are:

• Declarations
• Imports
• Exports
• Providers
• Bootstrap

Declarations

The declarations are an array, that contains the list of components, directives, and pipes that belong to this module.

 @NgModule({ // Signup and Login are components. declarations: [Signup, Login], }) export class AuthModule { } 

In the example above, the components SignupComponent and LoginComponent belong to AuthModule.

Note: If Angular finds any components, directives, or pipes declared in more than one NgModule, it reports an error.

Any components, directives, or pipes must be explicitly marked as standalone: false, to be declared in an NgModule.

 @Component({ // mark is false so that it can be declared in @NgModule standalone: false, }) export class CustomMenu { } 

Imports

The imports are an array, which lists out the other modules whose exported classes are needed by the components in this module.

The components may depend on other components, directives, and pipes. Add these dependencies in the imports property of @NgModule.

 @NgModule({ imports: [CommomModule, AppRoutingModule], // Signup and Login are components. declarations: [Signup, Login], }) export class AuthModule { } 

The imports array accepts other NgModules, as well as standalone components, directives, and pipes.

Exports

The exports are an array, which defines the components, directives, and pipes that can be used in the templates of other modules.

 @NgModule({ imports: [CommomModule, AppRoutingModule], // Signup and Login are components. declarations: [Signup, Login], exports: [Login, Signup] }) export class AuthModule { } 

The exports property is not limited to declarations. However, a NgModule can also export any other components, directives, pipes, and NgModules that it imports.

NgModule Providers

The providers are also an array, which lists out the services that are available to the injector and can be used throughout the module.

 @NgModule({ // Signup and Login are components. declarations: [Signup, Login], providers: [MyService], }) export class AuthModule { } @NgModule({ imports [AuthModule], declarations: [UserProfile], providers: [UserData], }) export class UserProfileModule { } 

Here, in the example above:

• The AuthModule provides the MyService.
• The Login and SignUp components can inject MyService because they're declared in AuthModule.
• UserProfile can inject MyService because its NgModule imports AuthModule.
• UserData can inject MyService because its NgModule imports AuthModule.

The forRoot and forChild Pattern

In Angular, a few NgModule define a static forRoot() method that accepts some configuration and returns an array of providers.

If any providers are included this way will be eagerly loaded, and increases the JavaScript bundle size of your first loaded page.

 boorstrapApplication(AppComponent, { providers: [ AuthModule.forRoot(/* configuration */), ], }); 

Similarly, some NgModules may define a staticforChild() methodthat indicates the providers are considered to be added to components within your application hierarchy.

 @Component({ providers: [ CustomMenuModule.forChild(/*configuration */), ], }) export class UserProfile { } 

Bootstrapping Application

In Angular, the@NgModuledecorator accepts an optionalbootstraparray that may contain one or more components.

You can use thebootstrapModule()method from eitherplatformBrowser (i.e., a client)orplatformServer (i.e., a server)to start an Angular application.

 import { BrowserModule } from '@angular/platform-browser'; @NgModule({ bootstrap: [AppComponent], }) export class AppModule { } BrowserModule().bootstrapModule(AppModule);