Welcome to the free & complete Angular Tutorial.

In this lesson, we are going to discuss about Angular Modules in detail.

Module is one of the building block of Angular, we are here to dissect the Module structure and learn how to create it.

To know about Angular Architecture, below articles will help you.

Angular Architecture Overview

Angular Architecture Explained

Let’s get started.

What is Module?

Module (NgModule) is a cohesive block of code that contains components, service providers and other code files that have to be declared inside NgModule.

A small Angular application might have only one Module (NgModule) where a complex application can have more than one Module, each dealing with specific feature of an application.

How to create Module in Angular?

By default, App module gets created when new Angular project is created. If you expand the app folder under src folder, you can see default app module – a root module got created.

Angular Module

You can also create modules once after new project has been created using one of below commands:

ng generate module <module name>

ng g module <module name>

NgModule structure

Module class has decorator / meta data declared that has information about components, modules to be imported, modules to be exported, service providers, component to be bootstrapped etc.,

Here is a sample root module code snippet:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Let’s disssect each section in NgModule decorator.

  • imports – Modules to be used in root module are declared here. Any Angular library modules or custom modules can be imported. In the above case, BrowserModule is imported.
  • providers – Services created to handle logging, data retrieval from server etc., have to be declared here.
  • declarations – All the components that come under the root module umbrella have to be declared here. Even pipes need to be declared here.
  • exports – The subset of declarations that should be visible and usable in the component templates of other NgModules.
  • bootstrap – Component(s) to be bootstrapped when the application is accessed. Would say the entry point to Views goes here.

Angular Multiple Modules

Angular can have more than one modules, each module deals with specific feature of an application. One of the modules has to be root module, which bootstraps the application.

Each module has one or components to be bootstrapped. Module to be used in another module can be specified by having the module name (to be imported) in the imports property of Module class.

NgModule vs JavaScript Module

The NgModule is different from and unrelated to JavaScript Module. Don’t get confused !

Angular libraries

Angular imports libraries (or packages) that begins with @angular prefix.

Here are few example libraries that we commonly import in Angular applications:

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

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule }   from '@angular/forms';