What is Module in Angular? Basic use of Module & Create Custom Module.

In Angular 2+ a module is a structure of services ,components, directives and pipes that are related, in such a way that can be combined with other modules to create an application.
Angular module is a Class. In That class we define private,public functions.
Private functions we can use internally so it’s hidden no one can read it.
Public function we can interact with API so we can get data from server.
NgModule is basic decorator for our angular application.


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

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

NgModule decorator requires three main properties: imports, declarations and bootstrap & optional providers we can define external services in the Providers.

Create Custom(Feature) Module in Our Application.
Full Code of Creating Custom Module.

For create basic module First create “baiscmodule” folder then create “basic-module.ts”,”basic-component.ts” & “basic-service.ts”. Display in below Tree structure.


├── app
│   ├── app.component.ts
│   └── app.module.ts
├── baiscmodule
│   ├── basic-component.ts
│   ├── basic-module.ts
│   └── basic-service.ts
├── index.html
└── main.ts

“basic-module.ts”


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

import { BasicService } from './basic-service';
import { BasicComponent } from './basic-component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    BasicComponent
  ],
  providers: [BasicService],
  exports: [BasicComponent]
})
export class BasicModule {}

“BasicModule” pretty similar to our root “AppModule” with a few most important differences:
here we have not import “BrowserModule” in Custom module we import only “CommonModule” because our custom modules need to be platform independent. That’s why we only import the “CommonModule” there, which’s exports common directives and pipes.Code sample display in above.

After creating Basic module then we need to import in our main Root module.Display in below code.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BasicModule } from './basicmodule/basic-module';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule , BasicModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }



Let’s Lazy Loaded Custom Modules & Services in Our Application
In lazy load module is going to create a child injector and it will create an instance of our service there.
For that we need to update “basic-module.ts” need to add “import { NgModule, ModuleWithProviders } from ‘@angular/core’;”
we need to change export BasicModule Class Mainly difference now we have loaded service is added to the root module. so no new instance for service is going to be added to the child injector.


@NgModule({
  imports: [CommonModule],
  declarations: [
    BasicComponent
  ],
  exports: [BasicComponent]
})
static forRoot(): ModuleWithProviders {
    return {
      ngModule: BasicModule ,
      providers: [BasicService]
    }
  }

In Custom Module : Mailnly use forRoot syntax when exporting services.

Spread the love
  • 30
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •