Skip to main content

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.


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 


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.


Popular posts from this blog

Routing in Angular 7

What you will learn after reading this post.What is Routing in Angular 7.Basic routing of component in Angular 7.Active link in routing in Angular 7.Wild card routing in Angular 7.Child routing in Angular 7.1. What is Routing in Angular 7? Whenever in normal HTML web page we click on a link we are navigated to specific page given in that link. When we are navigated then entire view of the application is reloaded again which cost resources and this type of application is not single page application. 

Creating Simple Hello World Application with SPRING BOOT

For creating a simple running web application with spring boot we do not have to do much. We just require to follow some simple steps and we are good to go. Unlike SpringMVC framework we do not. have to take care of all heck of configuration or XML file in one go we are all set with working mvc based web application.

Now we have to follow these steps.

Generate spring boot project from this url "" You can do the same using STS setting to.Importing the project in STS.

Adding Spring-Security to Spring-Boot App

In the previous post we have created a simple spring boot application. This application was very simple application just getting request and showing page for requested URL. Currently all urls are open to all user that is we do not have any kind of authentication on the URL. Our spring boot application is like the open pool in which any one can come and start fishing. Now we want to secure our application so that only authenticated user will be able to visit secure part of the application. For this purpose we will be using the Spring Security. 
Scope of this tutorial. In this we will learn basic integration of spring security with spring boot.
NOTE: This tutorial will just contain only basic integration of spring security. If you haven’t gone through previous tutorial and you are the newbies to this spring boot then I will request you to go through previous post to get understanding of spring boot. 
Now lets get started with the configuration.If you do not have the previous code you can …

Decompose Monolithic Application To Microservices

How To Decompose Application into Microservices. After reading the previous two posts you all must be excited to implement microservice architecture to your application and that's good you should be ready to implement something new that might boost the application performance,  maintenance, scalability and will make your application future proof. But have you ever thought how will you be breaking your application into micro application i.e microservices. Think about it for some minute exercise your brain for some time before reading the below tutorial.

Now i am sure that you all might  have come through excellent ideas for breaking up your application in microservices. Please feel free to mention your valuable ideas in comment so that other or even me can be benefited by your ideas.

Now before breaking your application into micro-services you should consider following points.
Points to be considered before creating microservices.Your each services should be easily testable.Your a…

Monolithic Application Architecture

In regular web development process what do we do? We create one war file which contains all functionality, services, modules or all use cases related to our business. In this approach of development we do not focus to make our application modularise. We may be following modularization in our code but end product is not seperated. Every services, modules are bundled up in single war and this war is deployed on server so that our business will be available for outside world which can make a request to get the required resources. This native architecture of development is called Monolithic Architecture.