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.
