DEV Community

Deepa Chaurasia
Deepa Chaurasia

Posted on • Edited on

How to create feature modules in Angular 11

Feature modules are nothing but you dividing your appModule into different modules to make code more clean and for better optimization.

Image description

Here you can notice that the Your ProductListComponent and ProductComponent got separated in a whole different module that is ProductModule .Similarly you can notice for OrdersComponents

WHY WE NEED TO DO THAT??

  • In large projects you have multiple components,services and directives. You don't want to confuse your dev by keeping hundreds of components,services at one place.

  • To make it look effective we make our feature module and register our component there.

  • You will use this majorly in Lazy Loading Optimization.

How to make your feature Module

  1. First you have to make a component.module.ts file

Image description

It will look like this.

2.Remember now that you have made your own module for components,You don't need them in AppMOdule. Remove it from there and also make sure to remove imports of those components at AppModule.(You might not notice but it end up increasing your bundle size if you forgot to remove imports).

**USING ROUTER MODULE AND IMPLEMENT LAZY LOADING IS ESSENTIAL PART WHY WE DIVIDE OUR MODULE AT FIRST PLACE

I will explain that in next blog.**

Top comments (0)