Angular 14中基于外部配置动态编译带Providers的复合模块

Angular早已废弃了compileAsyncModule和ngCreateModule这类JIT时代的动态编译API，在当前AOT主导的编译模式下，你需要用静态模块组合+ModuleWithProviders模式来实现需求，具体步骤如下：

1. 规范子模块的可配置入口 #

首先确保你的子模块（比如Module1）提供标准的forRoot方法，返回ModuleWithProviders类型，用来传递配置：

// 定义配置令牌和接口
export const MODULE1_CONFIG = new InjectionToken<Module1Config>('Module1Config');
export interface Module1Config {
  module1Config: string;
}

@NgModule({
  // 子模块的声明、组件、默认提供者等
})
export class Module1 {
  // 静态方法接收配置，返回带配置的模块描述
  static forRoot(config: Module1Config): ModuleWithProviders<Module1> {
    return {
      ngModule: Module1,
      providers: [
        { provide: MODULE1_CONFIG, useValue: config }
      ]
    };
  }
}

2. 实现复合模块的动态导入逻辑 #

修改你的MyModule，让它的forRoot方法根据传入参数动态生成要导入的子模块配置版本，返回包含动态导入集合的ModuleWithProviders：

@NgModule({
  // 不要直接导入Module1，留空由forRoot动态处理
  imports: []
})
export class MyModule {
  static forRoot(someParam?: { module1Config?: string }): ModuleWithProviders<MyModule> {
    const dynamicImports: any[] = [];
    
    // 根据传入参数决定是否加载带配置的Module1
    if (someParam?.module1Config) {
      dynamicImports.push(Module1.forRoot({ module1Config: someParam.module1Config }));
    } else {
      // 无配置时加载默认版本的Module1
      dynamicImports.push(Module1);
    }

    return {
      ngModule: MyModule,
      imports: dynamicImports
    };
  }
}

3. 应用层使用复合模块 #

在AppModule中正常调用MyModule.forRoot并传入配置即可：

@NgModule({
  imports: [
    MyModule.forRoot({ module1Config: 'something' })
  ],
})
export class AppModule { }

处理异步配置场景 #

如果你的配置需要从外部（比如后端API）异步获取，不能在模块导入阶段直接传递，可通过APP_INITIALIZER提前加载配置，再通过注入令牌传递给子模块：

第一步：实现配置加载服务 #

@Injectable({ providedIn: 'root' })
export class ConfigLoaderService {
  private loadedConfig: any;

  // 模拟异步加载配置（实际替换为你的API请求）
  loadConfig(): Promise<any> {
    return fetch('/app-config')
      .then(res => res.json())
      .then(config => {
        this.loadedConfig = config;
        return config;
      });
  }

  getModule1Config() {
    return this.loadedConfig?.module1Config;
  }
}

第二步：在AppModule中配置初始化钩子 #

@NgModule({
  imports: [MyModule.forRoot()],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (loader: ConfigLoaderService) => () => loader.loadConfig(),
      deps: [ConfigLoaderService],
      multi: true
    }
  ]
})
export class AppModule { }

第三步：修改子模块使用动态配置 #

@NgModule({
  providers: [
    {
      provide: MODULE1_CONFIG,
      useFactory: (loader: ConfigLoaderService) => ({
        module1Config: loader.getModule1Config()
      }),
      deps: [ConfigLoaderService]
    }
  ]
})
export class Module1 {
  // 保留静态forRoot用于覆盖配置
  static forRoot(config: Module1Config): ModuleWithProviders<Module1> {
    return {
      ngModule: Module1,
      providers: [
        { provide: MODULE1_CONFIG, useValue: config }
      ]
    };
  }
}

核心原理 #

Angular的模块系统是静态编译的，所有模块依赖关系在编译阶段就已确定，因此不能用运行时编译的方式动态生成模块。通过ModuleWithProviders，我们可以在编译阶段根据传入的参数静态组合模块和配置，既满足动态配置需求，又符合Angular的编译规范。

内容的提问来源于stack exchange，提问作者Noel Álvarez