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.

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.

How to create Custom Module?

There are some step to create the Module
Step1)
you can create a custom module through below command.

Syntax:-


ng g module moduleName --routing

Example:- Suppose, you have to create static-page module.


ng g module static-page --routing

After run the command then two files will be created.

1) static-page.module.ts
2) static-page-routing.module.ts

Step2) Now, add the code into the above files.
1) static-page.module.ts:- this module file has many details like components, other modules, etc. information.


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StaticPageRoutingModule } from './static-page-routing.module';

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

Note:-If you create components into the static-page module folder then component include into the static-page.module.ts file.

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


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

const routes: Routes = [];

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

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

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

Step3) Now, create the component into this module (static-page) folder.
Suppose, I create a about-us component into this through below command.


ng g c /static-page/about-us

Now 4 files are created and 1 module file is updated.


CREATE src/app/static-page/about-us/about-us.component.html (23 bytes)
CREATE src/app/static-page/about-us/about-us.component.spec.ts (634 bytes)
CREATE src/app/static-page/about-us/about-us.component.ts (283 bytes)
CREATE src/app/static-page/about-us/about-us.component.scss (0 bytes)
UPDATE src/app/static-page/static-page.module.ts (387 bytes)

Step4) Include module into app-routing.module.ts file


import { StaticPageModule } from './static-page/static-page.module';

After that add custom module into the routes array.


const routes: Routes = [
  {path:'static-page', loadChildren:  () => import('src/app/static-page/static-page.module').then(m => m.StaticPageModule)}
];

Now add the route into the static-page-routing.module.ts file


import { AboutUsComponent } from './about-us/about-us.component';

const routes: Routes = [
  {path:'about-us', component:AboutUsComponent,
},
];

when run the website through the below the URL


http://localhost:4200/

then load the all components which is required to start the application.

When click on the about-us URL then the custom module (static-page) load along with about-us component


http://localhost:4200/static-page/about-us