Introduction To Angular 6|7|8|9 Modules

Now Angular 9 released and it comes with few new features which make your web application development more interesting using the Angular 9. In this article, we are going to learn about the angular 9 NgModule and how to use its metadata.

We all know that angular is based on the module architecture and it has its own modularity system called NgModules. We will learn what is and how you can use it to build an awesome SPA web application.

What is Angular NgModule

In a simple word, NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

In Angular, NgModule groups all your components, services, pipes, directives.

They are responsible for importing the functionalities from other modules and export selected functionality for use by other NgModules in an Angular Application.

Every angular app must have one NgModule which is known as a root module of the application. When you create an Angular project using Angular CLI then it will create a file name app.module.ts.

Below is a simple root NgModule definition.

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

Take a look at the NgModule definition, it starts with @NgModule And it possesses an object consisting of bootstrap, providers, imports, and declarations.

Let’s learn about all these terms one by one and see how to use them in your angular application.

Angular NgModule MetaData

Imports

In the Angular NgModule, imports are responsible for importing the essential modules of the application.

By Default, only BrowserModule is imported into this array but you can add all your modules in this which is required for the application or module.

For Example, If we need to use reactive form or router service in our application then we will import those things in the imports array of the NgModule.

Exports

This array property of the NgModule is responsible to export all those components which are needed in another NgModules.

Declaration

In this array, you can declare all your components, pipes and directive that belongs to this module.

Whenever you create a new component using the Angular CLI, by default it adds that component into this array.

Providers

If you think that any service which you create in your angular application needs to be present in each module or maximum modules of your application then you can add those services into this array.

Bootstrap

This is the main application view knows as root component of the angular application.

Only the root NgModule should set this bootstrap property.

Difference between Angular NgModule and JavaScript modules

Modules help us to organise our code and use it an efficient way.

A JavaScript module is a code written in JavaScript and this module comes into action by making use of an export statement.

Below is a simple example of the javascript module

export class JavascriptModule{}

An Angular NgModule uses decorator @NgModule. The imports array inside the decorator tells Angular that these modules will be needed for the current scenario which definition you already see in the above paragraphs.

Angular NgModule defers from Javascript module because unlike Javascript module, NgModules don’t have their own file.

How To Create Modules In Angular 6|7|8|9

If you are using the Angular CLI, it eases your most of the task regarding the creation of modules, components, services, pipes and directives.

Angular CLI provides a simple 1 line command to create all of these within your angular application.

To create a module into angular application, you can use the below command

ng generate module module_name

// or you can use the short form

ng g m module_name


//To enable .spec files creation add --spec or -sp flag
ng g m module_name --spec 

//To enable routing to add --routing or -r flag
ng g m module_name --routing 

//You can also combine flags listed above. For example, to create a module with routing and //specs use the following command.
ng g m module_name -sp -r

Conclusion

In this article, you have learned about the Angular NgModule and different meta data used into the NgModule.

Hope this article helps you to grasp the basic idea of the Angular NgModule. You can learn more about this from Angular official docs.

If you have any doubts or suggestions then please comment in the comment box.

If you like this article then share it on Twitter, Facebook and other platforms to reach it more audiences. You can also join our Private Facebook Group where you can discuss and share your experiences of web development.

Codecademy Pro
Pin It
×

Table of Contents