What is module in Angular 5

In this tutorial, we will take a look at Module in Angular 5. Basically, a module is a container of different parts of an Angular application. Where you can group all the components, pipes, directives, and services that are related to the application.

Previous tutorials of Angular 5 Series

• How to install Angular 5 Application.
• What are components in Angular 5 application?

Module in Angular 5

Let’s see how a module works in Angular 5 Application.

When you create a new project using Angular CLI command, the one file is created by default with the name of Angular CLI.

Let’s understand the app.module.ts file code.

Go to folder structure => src folder => app folder => then open the “app.module.ts” file.

Line # 2: First-of-all, we need to import NgModule from @angular/core as you see in the above code.

Line # 6 to 15: this is the definition of NgModule. Or we can say it’s a structure of NgModule that starts with @NgModule. And this NgModule contains four parts.

• Declaration part:

Whenever you create a new component in your application, then it will be imported first in this file above and then the reference will be included in this declaration part. As you see above code, now it has only one component reference like “AppComponent” which is by default component when you create a project using Angular CLI. If you will create a new component like “home”, then first it will be imported above and then the reference will be included in declaration part as you see in below code line # 5 and line # 10. So, it is an array of components.

• Imports Part:

Whenever you need a module in your application like forms module, Browser Module, Animation Module and etc, then first of all you need to import that module and then reference of that module here in this “imports” part. So, this is the array of modules. As you see in the below code line # 4, 5 and Line # 17,18.  

• Providers Part:

Whenever you create a service in your application, then you will add the reference of that service here in this “providers” part.

• Bootstrap part:

This is the part where we will define the root component of our module to starting the execution.