ng build --prod时报router-outlet非已知元素 普通构建正常如何修复

核心原因 #

ng build开发模式默认关闭AOT，采用运行时JIT动态解析模板，对模块导入的容错性极强；生产模式开启AOT+静态严格编译，会逐行校验模板语法、模块依赖链路，所有之前被静默忽略的导入问题会直接触发编译中断，这就是开发能跑、生产报错的根本原因。

结合提供的全量代码，触发该错误的问题点共有4个，按影响优先级排序：

修复步骤 #

1. 修正app.module.ts的模块导入错误 #

这是触发本次报错的核心原因，当前文件存在两处严重的导入问题：

• 缺失必要的模块顶部引入：@NgModule装饰器的imports数组中使用了FormsModule、ReactiveFormsModule，但文件顶部完全没有对应的import语句，这两个值在模块解析时属于未定义的非法项，AOT编译遇到这类非法导入会中断依赖链解析，导致排在imports列表后的AppRoutingModule没有被正确加载，最终引发模板识别不到router-outlet指令的报错。
• 大量重复导入相同模块：BrowserModule、BrowserAnimationsModule、HttpClientModule都被重复导入了2次，其中BrowserModule作为平台根模块，重复导入会直接造成依赖注入上下文混乱，进一步放大解析异常。

修正操作：

• 在文件顶部新增缺失的模块导入：

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  

• 清理@NgModule装饰器下的imports数组，仅保留单次导入的合法模块，修正后内容如下：

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    AppRoutingModule
  ]
  

• 补全declarations数组的遗漏项：文件顶部已经import了LastseenDevicesComponent，但没有加入声明列表，需要补充到声明中：

  declarations: [
    AppComponent,
    DashboardComponent,
    TimeAgoPipe,
    FilterPipe,
    LastseenDevicesComponent
  ]
  

• 移除未实际使用的冗余导入（如CUSTOM_ELEMENTS_SCHEMA、NO_ERRORS_SCHEMA），避免无关代码干扰编译。

2. 修正angular.json的项目配置不匹配问题 #

当前配置存在项目标识错位的问题：

• projects节点下的实际项目键为AirwatchProject1
• 但defaultProject配置值为Project1，所有构建、服务目标的引用路径也全部使用Project1作为前缀
  开发模式下Angular CLI因为找不到匹配的defaultProject，会自动回退到唯一存在的项目，因此可以正常运行；但生产AOT构建会严格校验配置匹配性，错配会进一步加剧模块加载异常。

修正操作：

• 把defaultProject的值从"Project1"改为"AirwatchProject1"
• 把所有architect配置下的目标引用中的Project1替换为AirwatchProject1，包括：
  • serve.options.browserTarget
  • serve.configurations.production.browserTarget
  • extract-i18n.options.browserTarget
  • e2e.options.devServerTarget
  • e2e.configurations.production.devServerTarget

3. 确认路由模块配置正常 #

当前app-routing.module.ts的配置完全符合规范，无需修改：

• 已通过RouterModule.forRoot(routes)正确注册根路由
• 已正确导出RouterModule，确保router-outlet指令可以在AppComponent模板中被识别
• 路由表的path、pathMatch、component声明无语法错误

注意事项 #

不要为了快速绕过报错，直接在@NgModule.schemas中添加NO_ERRORS_SCHEMA，这种操作只是屏蔽了元素未识别的提示，并没有解决模块加载失败的本质问题，后续运行时仍会触发路由功能异常。

完成以上修改后，重新执行ng build --prod即可正常完成生产构建。

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