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.

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

Syntax:-

ng g module moduleName --routing

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

ng g module static-page --routing

After running the command then two files will be created.

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

Step 2) Now, add the code to 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 components are included in the static-page.module.ts file.

2) static-page-routing.module.ts:- this file is 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 a route in this file.

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

Step 3) Now, create the component in this module (static-page) folder.
Suppose, I create an about-us component into this through the 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 a 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 running the website through the below the URL

http://localhost:4200/

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

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

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

Angular Module – Interview Questions

Angular Module – Objective Questions (MCQs)