Angular 模块导入的动态配置

标题：使用 Angular 模块导入的动态配置进行灵活的应用开发

typescript
// module-config.ts
export const moduleConfig = [
  { name: 'FeatureModule1', path: './feature-module-1/feature-module-1.module#FeatureModule1Module' },
  { name: 'FeatureModule2', path: './feature-module-2/feature-module-2.module#FeatureModule2Module' },
  // 添加其他模块信息
];

typescript
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Compiler, COMPILER_OPTIONS, CompilerFactory } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
import { moduleConfig } from './module-config';
@NgModule({
  imports: [BrowserModule],
  declarations: [],
  providers: [
    {
      provide: COMPILER_OPTIONS,
      useValue: {},
      multi: true,
    },
    {
      provide: CompilerFactory,
      useClass: JitCompilerFactory,
      deps: [COMPILER_OPTIONS],
    },
    {
      provide: Compiler,
      useFactory: (compilerFactory: CompilerFactory) => compilerFactory.createCompiler(),
      deps: [CompilerFactory],
    },
  ],
})
export class AppModule {
  constructor(private compiler: Compiler) {
    this.loadModules();
  }
  private loadModules() {
    moduleConfig.forEach((module) => {
      import(module.path).then((loadedModule) => {
        this.compiler.compileModuleAndAllComponentsAsync(loadedModule[module.name])
          .then((compiled) => {
            // 模块已加载，可以进行后续操作
          });
      });
    });
  }
}