Angular Module

An angular module is a group of components, directives, services that are related. An angular module can include another module.

the default angular module is an App module when you setup a project in angular. you can create a custom module through command.

Syntax:-

ng g module moduleName --routing

Example:- Suppose, you have to create users module.

ng g module users --routing

then two files will be created.

1) users.module.ts
2) users-routing.module.ts

1) users.module.ts:- this file is used to define components related information.


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

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


Note:- Now, You can create components and include in users.module.ts file.

2) users-routing.module.ts:- this file used to define the routes.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
 
  {path:'', component:''},
  
}

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }


Note:- Now you can create route in this file.

RouterModule.forChild is used for every custom module while app module use RouterModule.forRoot.

What is the use of Custom Angular Module?

Custom Angular Module is also called Lazy loading modules which helps us to decrease the startup to load the application.
With lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.