Angular 14中如何在自定义模块初始化前执行初始化代码？

核心原因 #

Angular的模块加载顺序是先实例化所有导入的模块（执行模块构造函数），之后才会触发APP_INITIALIZER中注册的初始化逻辑，所以常规的APP_INITIALIZER无法满足“模块实例化前完成初始化”的需求。

可行解决方案 #

方案1：在应用启动前（main.ts）执行初始化 #

这是最直接的方式，在调用bootstrapModule启动应用前，先完成所有前置初始化逻辑，此时所有模块都还未开始实例化。

示例代码：

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 自定义初始化函数，支持异步操作
async function preInitialize() {
  console.log('in initialize');
  // 执行你的初始化逻辑，比如加载配置、初始化NGRX前置数据等
  await fetchRequiredConfig();
}

// 等待初始化完成后再启动应用
preInitialize().then(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

方案2：利用模块的forRoot方法执行同步初始化 #

如果初始化逻辑和自定义模块强绑定，可将同步初始化逻辑放在模块的forRoot静态方法中。因为forRoot是在模块被导入时执行的，早于模块构造函数的调用时机。

示例代码：

// 自定义模块文件
import { NgModule, ModuleWithProviders } from '@angular/core';

@NgModule({
  // 模块的声明、导入、导出配置
})
export class CustomNgrxDataModule {
  constructor() {
    console.log('called from module');
  }

  static forRoot(): ModuleWithProviders<CustomNgrxDataModule> {
    // 在这里执行同步初始化逻辑
    console.log('in initialize');
    initNgrxDataConfig(); // 你的自定义初始化方法

    return {
      ngModule: CustomNgrxDataModule,
      providers: [
        // 注册依赖初始化数据的服务
      ]
    };
  }
}

在AppModule中导入时调用forRoot：

// app.module.ts
import { NgModule } from '@angular/core';
import { CustomNgrxDataModule } from './path/to/custom-ngrx-data.module';

@NgModule({
  imports: [
    // 其他模块
    CustomNgrxDataModule.forRoot()
  ]
})
export class AppModule {}

注意事项 #

• 如果初始化是异步操作，方案2无法直接处理，此时必须使用方案1，通过async/await等待异步任务完成后再启动应用。
• APP_INITIALIZER的设计定位是应用初始化后期、路由激活前的逻辑执行，本身就晚于模块构造函数，不适合用于模块实例化前的前置操作。

内容的提问来源于stack exchange，提问作者Dave