MODULE_INITIALIZER Initialization Angular Advanced Tips for Lazy Loading Modules

What is a lazy loading module?

Angular is a powerful front-end development framework that provides various mechanisms to optimize application performance and maintainability. In this article, we will dive into MODULE_INITIALIZER in Angular, a powerful tool for initializing lazy loading modules. We will introduce in detail the usage of MODULE_INITIALIZER and its role in Angular.

Lazy loading modules is a key concept in Angular, which allows us to split the application into smaller modules and load them when needed, reducing the initial loading time and resource usage. Lazy loading modules are usually loaded when the user first accesses related features, which can improve the performance and responsiveness of the application.

The difference between MODULE_INITIALIZER and APP_INITIALIZER

In Angular, there are usually two ways to initialize the application: APP_INITIALIZER and MODULE_INITIALIZER. Let's first understand the difference between them.

APP_INITIALIZER

APP_INITIALIZER is an initialization mechanism provided by Angular, which allows you to execute some initialization logic when the application starts. These logics are executed before the application is initialized, including lazy loading of modules. This means that whether or not the lazy loading module requires initialization logic, it will be executed at the start of the application, which can cause performance issues.

MODULE_INITIALIZER

In contrast, MODULE_INITIALIZER is a more flexible initialization mechanism that is specifically used to initialize lazy load modules. This means that the relevant initialization logic will be executed only when the lazy loading module is loaded. This avoids unnecessary initialization and improves performance.

How to use MODULE_INITIALIZER

Let's look at a practical example of how to use MODULE_INITIALIZER to initialize the logic inside a lazy load module.

import { InjectionToken, NgModule, Injector } from '@angular/core';
export const MODULE_INITIALIZER = new InjectionToken<() => Promise<void>>('MODULE_INITIALIZER');
export function initializeApp(injector: Injector): () => Promise<void> {
  return () => {
    // Execute your initialization logic here    return ();
  };
}
@NgModule({
  providers: [
    {
      provide: MODULE_INITIALIZER,
      useFactory: initializeApp,
      deps: [Injector],
      multi: true,
    },
  ],
})
export class MyLazyLoadedModule {}

In the above code, we first create a namedMODULE_INITIALIZERInjection token. Then we define a name calledinitializeAppThe initialization function of the lazy load module will be executed before loading. Finally, we use it in the module's provider arrayMODULE_INITIALIZER,WillinitializeAppFunctions are registered as initialization logic.

More technical details

Configure MODULE_INITIALIZER

To configure MODULE_INITIALIZER, you can useuseFactoryProperties to specify the factory function that initializes the function.depsThe attribute is used to specify the injection token on which the factory function depends. passmulti: true, you can specify multiple MODULE_INITIALIZER, which allows you to add multiple initialization functions according to the requirements of the module.

Lazy loading and urgent loading

An important feature of MODULE_INITIALIZER is that it only runs when the lazy loading module is loaded. If a lazy loading module is configured for emergency loading (loading at application startup), the MODULE_INITIALIZER function runs when Angular application starts.

Asynchronous initialization

If your initialization logic involves asynchronous operations, you can return a promise. This will ensure that the application or module loading does not complete until the Promise is resolved. If Promise is rejected, the application or module loading will be interrupted.

Error handling

If the initialization function throws an error, it will also cause the application or module to be loaded interrupted. Therefore, be careful when handling errors in the initialization function to ensure the stability of the application.

Things to note

It should be noted that MODULE_INITIALIZER is part of the composable storefront lazy loading mechanism, which may not be applicable to other lazy loading mechanisms such as Angular's default route-based lazy loading.

in conclusion

By using MODULE_INITIALIZER, you can control the initialization process of lazy loading modules more accurately, ensuring that the initialization logic only runs when the module is loaded, not when the application is started, improving performance and user experience. This is a very useful technique in Angular that can help you build more efficient front-end applications.

I hope this article will be helpful to you in understanding and applying MODULE_INITIALIZER. Please support me in the future!