Angular 7|6 Tutorial Course: Angular NgModules (Feature and Root Modules)

Angular modules are containers of code parts that implement related domain requirements. They let developers create apps with modular architectures and reusable code just like components. Angular uses NgModules to create modules and submodules which are different from JavaScript/ES6 modules.

What's an NgModule

NgModules are simply TypeScript classes decorated with the @NgModule decorator imported from the @angular/core package.

Modules provide a way for developers to organize their code and they are particularly helpful for managing large apps.

You can either create your own modules or use the built-in modules for importing the various Angular APIs such as:

  • [FormsModule]( for working with forms,
  • [HttpClientModule]( for sending HTTP requests,
  • and [RouterModule]( for providing routing mechanisms to your Angular application.

Each Angular module can contain components, directives, pipes and services and may be lazy loaded by the router.

You Angular application has at least one module which is called the root module. You need to bootstrap the root module to start your application.

Creating the Admin Feature Sub-Module & CRUD Interface

Now, let's create the admin CRUD interface for listing, creating, updating and deleting the portfolio projects.

Create an admin module with four components:

  • ProjectComponent,
  • ProjectListComponent,
  • ProjectCreateComponent,
  • ProjectUpdateComponent.

First, run the following command to create a module called admin:

$ ng g module admin 

This will create a src/app/admin/admin.module.ts file with the following content:

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

declarations: [],
imports: [
export  class  AdminModule { }

Next, run the following commands to create the components inside the admin module:

$ ng g c admin/project-list
$ ng g c admin/project-create
$ ng g c admin/project-update
$ ng g c admin/project

This is the content of the src/app/admin/admin.module.ts file:

import { NgModule } from  '@angular/core';
import { CommonModule } from  '@angular/common';
import { ProjectListComponent } from  './project-list/project-list.component';
import { ProjectCreateComponent } from  './project-create/project-create.component';
import { ProjectUpdateComponent } from  './project-update/project-update.component';
import { ProjectComponent } from  './project/project.component';

declarations: [ProjectListComponent, ProjectCreateComponent, ProjectUpdateComponent, ProjectComponent],
imports: [
export  class  AdminModule { }

In the NgModule metadata, we specify:

  • The components, directives, and pipes that belong to the module. In our case, the four component that we created i.e ProjectListComponent, ProjectCreateComponent, ProjectUpdateComponent and ProjectComponent.
  • The components, directives, and pipes that we want to export. In our case, none.
  • The modules that we need to import in our current module. In our case CommonModule
  • The services that we need to use. In our case none.

CommonModule is a built in module that exports all the basic Angular directives and pipes, such as [NgIf](, [NgForOf](, [DecimalPipe](, etc.

Next we need to import the admin module in the main module. Open the src/app/app.module.ts file and update it accordingly:

// [...]
import { AdminModule } from  './admin/admin.module';

// [...]
imports: [
providers: [],
bootstrap: [AppComponent]
export  class  AppModule { }

This is the main module of our application. In the imports array we added AdminModule. You can see two other arrays:

  • The providers array which can be used to include the services we want to provide to our components,
  • The bootstrap array which specifies the component(s) to bootstrap.

Check out all parts:


In this tutorial, you have grasped the concept of NgModules in Angular , you have created the admin submodule of your portfolio web application and the various components of the submodule which are needed to create a CRUD interface for creating and manipulating your portfolio's projects.

In your next tutorial, you'll be adding routing in your admin module using a nested router outlet and child routes.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus Protection Status