Feature Modules in Angular 7
Feature Modules in Angular 7 | techijournal.com

Feature Modules in Angular 7

Feature Module

Whenever we  create angular application we go on adding components to angular application. But as our application goes on increasing it become to much problematic to maintain such application. Every feature of our application is binded under single module which we call as app module. Which is root module of our Angular 7 application. While developing angular application without modularizing its features creates several problems 
  • Application is not easily scalable.
  • Application is tough to maintain.
  • Application complexity makes it hard to understand.

Solution

Here feature modules comes for our rescue. Feature modules help angular applications to get modularised on basis of features present in our application. As our application grows we can divide our entire application in small feature using feature module. Feature modules helps in creating boundary that separates our specific functionality or say features. Feature modules communicates with other module or root module using the services it provides and the component, directives and pipes its shares.
now,  Here we will see Bus Booking app that will deal with two module 
  •  Reservation Module
  •  Passenger Module
For creating feature module in Angular app you have two ways
  • Generate module using Cli
  • Manual Module Creation
For generating module for your app using CLI you have to run “ng g m <module-name>” form your terminal pointing to root folder of your angular app.
In our case run following commands.
  • ng g m reservation
  • ng g m passenger
Above command will create two folder( reservation and passenger ) in your application’s src/app each containing reservation.module.ts and passenger.module.ts as shown below.

Now , above we have created two modules but our app modules needs to be aware of our modules this we can do by adding passenger and reservation module to imports array of  NgModule as shown below.

Now you add <app-reservation></app-reservation> app.component.html. Try to up the server by typing below command in Terminal or CMD within your project root.

ng serve –open

This command will up the server and open the tab in your default browser.

But you won’t be seeing any thing and if you try to inspect in chrome you will get an error that app-passenger is not recognised.

Nothing to display when your server starts

But when you inspect by pressing  ctrl+shift+i or right click->inspect. There in console section you will get this error

you are getting above error because app module is not aware of any component named <app-passenger> or <app-reservation> even you added both passenger and reservation module in app.module.ts. That is because your passenger and reservation component are specific to passenger and reservation module and no other module can access it until and unless passenger and reservation module export these module to outside world.

You can Exports passenger and reservation component from there modules by adding these component in your exports array of each module. Check the code below.

Note : find the above code at this link 

Summary

In this section we learned  how to create a module in angular 7. and also how to make its component available for other module to access it.

Durgesh Kumar

He is the Founder of TechiJournal.com. And have 4+ years of experience as full-stack Java developer. He worked with many reputed product companies and would like to share his experience and knowledge through this blog. He works very hard to provide you with quality content. But as no one is perfect, If you feel that some improvement can be made then feel free to add it in the comment section. We look forward to it.

Leave a Reply