Preloading modules in Angular

We saw different ways of loading modules in an Angular Application

Eager loading
Laze Loading &

Pre Loading

Eager, Lazy and Preloading modules in Angular

In the previous posts we have seen about Feature modules which are added to the root module for better modularity and maintainability of the Angular applications. Depending on the need there are 3 different ways in which modules can be loaded in an Angular application.

Eager loading
Laze loading &
Preloading

Types of Feature Modules

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. Feature modules also help improving the performance of larger applications using lazy loading where only the root module is loaded initially other modules are loaded on demand thereby improving performance.

There are 6 different types of feature modules in Angular, they are.

Feature Modules in Angular

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. As the application grows it becomes difficult to maintain all the components, services etc in a single root module, hence we organize the components into sub-modules called Feature Modules and hook them to the root module.

The feature modules should be included in the imports[] section of the root module so that they can be loaded when required. Once we add the feature modules in the import list, we render the components in the feature module in the root modules components by embedding the feature module component’s selector tags anywhere in the root modules components.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, myFeatureModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


<!-- Main comonent template -->

<app-feature-component></app-feature-component>

Feature Module example in Angular

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. As the application grows it becomes difficult to maintain all the components, services etc in a single root module, hence we organize the components into sub-modules called Feature Modules and hook them to the root module.

In this example let us see how to create a FeatureModule, import it in the root module and render the contents of the FeatureModule components in the root modules components.