Angular 6升级后，如何按配置动态添加客户定制模块？

这是典型的AOT编译静态分析限制导致的问题——Angular 6开启AOT和Build Optimizer后，编译器需要静态可预测的模块导入结构，而你之前用的concat是运行时动态操作，AOT没法提前解析合并后的模块列表，导致客户定制模块里的RouterModule（或者主模块依赖的RouterModule）没被正确识别，最终抛出router-outlet未知元素的错误。

下面是几个能在保留优化选项的前提下解决问题的方案：

1. 用ES6展开运算符替代concat #

把动态的concat换成静态的数组展开语法，这是AOT编译器能直接解析的写法：

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // 所有基础模块
    ...environment.extraModules // 用展开运算符嵌入客户定制模块
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个写法和concat功能完全一致，但AOT编译时能清晰识别到所有导入的模块，包括客户模块中可能包含的RouterModule，从而正确注册router-outlet组件。

2. 确保环境文件的类型定义准确 #

检查你的Environment接口是否明确了extraModules的类型，避免类型模糊导致AOT编译出错：

// environments/environment.ts
import { Type, ModuleWithProviders } from '@angular/core';

export interface Environment {
  // 其他环境配置项
  production: boolean;
  extraModules: Array<Type<any> | ModuleWithProviders<any> | any[]>;
}

// 默认环境
export const environment: Environment = {
  production: false,
  extraModules: [] // 默认空数组
};

客户定制的环境文件（比如environment.SOME_CUSTOMER.ts）保持原有结构即可，类型匹配能让AOT更稳定地解析模块列表。

3. 验证angular.json的环境替换配置 #

确保angular.json中对应客户的编译配置正确指向了目标环境文件，避免编译时用错配置：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "configurations": {
          "SOME_CUSTOMER": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.SOME_CUSTOMER.ts"
              }
            ],
            "aot": true,
            "buildOptimizer": true
          }
        }
      }
    }
  }
}

额外注意点 #

如果你的客户定制模块中没有导入RouterModule，请确保主模块中已经导入了RouterModule.forRoot(...)——router-outlet是RouterModule提供的组件，必须在模块的imports中显式声明，AOT才能识别它。

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