Show List
Tutorials > Angular > Angular Module

Angular Module

Angular Modules are used to organize the application into groups based on functionality. They are similar to packages in other languages. 

Angular CLI creates a base module for all the applications. We can create additional modules to group the functionality. These modules can then be imported to other modules for integration.

Here is a sample module code:

app.component.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MyDirectiveDirective } from './my-directive.directive';
import { PipedemoComponent } from './pipedemo/pipedemo.component';
import { CuberootPipe } from './cuberoot.pipe';
import { AppRoutingModule } from './app-routing.module';
import { ErrorpageComponent } from './errorpage/errorpage.component';
import { GreetComponent } from './greet/greet.component';
import { HttpClientModule } from '@angular/common/http';
import { MessageService } from './message.service';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MyDirectiveDirective,
    PipedemoComponent,
    CuberootPipe,
    ErrorpageComponent,
    GreetComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

  • Angular Modules use @NgModule decorator. It takes the meta data to tell Angular how to compile and launch the application.
  • Declarations : Components, directives and pipes that belong to the module.
  • Imports: Other modules whose exported classes are needed by components in this module.
  • providers: Services provided here contribute to global collection of services and become accessible in all parts of the application.
  • bootstrap: This is the main application view (also called the root component) which hosts all other app views. Only the root module should  set the bootstrap view.
  • exports: Subset of the declarations that should be visible and usable in the components of other NgModules.


Next: Angular Routing

    Leave a Comment

  • captcha text