Angular中能否将InjectionToken用于NgModule的import数组？

答案是不行。

为什么不行？ #

NgModule的import数组是Angular在编译阶段就会处理的内容，而InjectionToken是依赖注入系统的一部分，只有到应用运行时才能通过注入器拿到对应的值。编译的时候Angular根本不知道InjectionToken对应的实际值是什么，自然没法基于它动态决定要导入哪些模块。

那该怎么处理多环境下的动态模块导入？ #

给你几个可行的方案：

1. 用forRoot传递配置

把环境配置通过模块的forRoot方法传进去，在模块内部根据配置决定是否导入调试模块：

// 定义配置接口
export interface AppEnvConfig {
  production: boolean;
}

@NgModule({})
export class CoreModule {
  static forRoot(envConfig: AppEnvConfig): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      imports: [
        // 这里就能用传入的配置判断了
        !envConfig.production ? StoreDevtoolsModule.instrument() : []
      ],
      providers: [
        { provide: APP_ENV_CONFIG, useValue: envConfig }
      ]
    };
  }
}

// 根模块里这么用
@NgModule({
  imports: [
    CoreModule.forRoot({ production: environment.production })
  ]
})
export class AppModule {}

2. 在main.ts里动态构建模块

如果你的环境配置是异步加载的（比如从后端接口获取），可以先加载配置，再动态生成模块并启动应用：

// 先拉取配置
fetch('/app-config')
  .then(res => res.json())
  .then(config => {
    // 动态组装import数组
    const moduleImports = [
      BrowserModule,
      AppRoutingModule,
      !config.production ? StoreDevtoolsModule.instrument() : []
    ].flat();

    // 动态定义根模块
    @NgModule({
      imports: moduleImports,
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    class DynamicRootModule {}

    // 启动应用
    platformBrowserDynamic().bootstrapModule(DynamicRootModule);
  });

3. 优化现有环境变量管理

如果多环境文件维护麻烦，可以在angular.json里配置多个环境编译项，每个项对应不同的environment.ts文件，编译时用ng build --configuration=xxx指定环境。这样依然能直接在import数组里用environment.production，同时满足多环境需求。

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