Why Feature module & Shared Module is important in Angular Application?

Angular application can be hectic sometimes when your project gets large and uncontrollable. There might be cases where your components count is large(even more than 50: personal experience ;)  ). This is troublesome. You forget the component name, you start getting lost in the projects.

This is when the feature module and the shared module comes into play. Let's start with the introduction of the Feature module & Shared Module.

Feature Module

Let's say, you are designing a wireframe for your office space. you will start by separating various spaces. A room for developers, room for managers, a room for CEO. Now think, we separated all this space so that when anyone enters your office, they can easily identify where to visit the specific person you are looking for.

Same is the case with feature module, you can separate your components, routing, services, modules based on feature which will help you to keep your code clean. It is one of the organizational best practices.

How do we create feature module?

ng generate module FeatureName

This will create a feature-name.module.ts under FeatureName Folder. The feature module is exactly similar to the root module.

Import the module in root module

After creating the module you need to let the root module know that our feature module exists.
In the root module, you need to import the feature Module which in our case is the 'FeatureNameModule'

  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    FeatureNameModule // add the feature module here
  ]

Adding routing in Feature Module

you can also create routing using Angular CLI.

 ng new module FeatureName --routing

--routing

This creates a separate file named feature-name-routing.module.ts to store the NgModule's routes. The file includes an empty Routes object that you can fill with routes to different components.

Add Feature Module routing to root Module

Our angular application needs to know that our feature modules has routing that needs to loaded. To do this, we need to add the path and loadChildren value.

{path:'feature',loadChildren:'./FeatureModule/feature.module#FeatureModule'}

Using this technique, it will easier to divide our project into different modules based on features.

Shared Module

Now, we know why feature modules are important. Let's go through an example again, In the same office space we discussed above, we may require things that may be common to all the room like kitchen spaces, refreshment room which can be used by all. Similar is the case with Shared Module. Shared Module is used to put all the common directives, components, pipes used by modules so that any modules can use it whenever necessary. This will help to keep our codes more organized and clean.

Create a Shared Module

its same as creating  a feature module.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CustomerComponent } from './customer.component';
import { NewItemDirective } from './new-item.directive';
import { OrdersPipe } from './orders.pipe';

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
 exports:      [ CustomerComponent, NewItemDirective, OrdersPipe,
                 CommonModule, FormsModule ]
})
export class SharedModule { }

CommonModule, FormModules, Pipes are some of the things we may require in every module So, importing it in every module can be a trouble and an example of redundant code. So, to avoid such mistakes, We must declare it in shared components and instead import the SharedModule to the Module which needs it.

Notice, we import all the modules in SharedModule but also exported all of them so that whenever any Module which imports the SharedModule also import the Modules, Components, etc that was imported in SharedModule.

Conclusion

Feature Module & Shared Module are ways to keep your angular application clean & streamline your code. Things will still work when such features are not used but features like this will help to organize your code and is an organizational practice.

By deafult, angular app loads all the modules while starting the app, So Lazy Loading plays a vital role while using Shared and Feature Module. Lazy loading is a technique used for a faster initial load for the angular project . The main idea behind lazy loading is asynchronously loading javascript component using modules. Since the required module is only loaded when the specific router is activated, The initial app size decreased thus increasing the initial load performance.Here is the link to how  lazy loading works : https://shrestharohit.com.np/lazy-loading-in-angular/.

Happy Coding!!!