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.

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.

Comments

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. 

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.

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 "https://start.spring.io/" You can do the same using STS setting to.Importing the project in STS.

Lazy Loading of Feature Module in Angular 7

whenever angular application is loaded then its all modules are loaded eagerly i.e  entire application is loaded at client side on first request made to server. This cause over utilization of the resources and slows down the application at least at first time.

Just take example for E-commerce website which will have several module like order module, Feedback module, Cart Module, Product module and etc. But suppose your require to give feedback for some product you have bought and you visited to feedback page but now instead of loading just