Angular报错NG8001：'router-outlet'非已知元素，现有方案无效

错误详情 #

[ERROR] NG8001: 'router-outlet' is not a known element:

1. 如果'router-outlet'是Angular组件，请确认它已包含在当前模块中。
2. 如果'router-outlet'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'中以抑制此提示。[plugin angular-compiler]
   错误出现在AppComponent的模板文件src/app/app.component.html第336行，对应src/app/app.component.ts的templateUrl配置。
   应用打包失败，耗时0.216秒。

环境信息 #

• Angular CLI: 17.0.6
• Node: 18.16.0
• Package Manager: npm 9.5.1
• OS: win32 x64

问题代码分析 #

查看提供的模块代码，发现AppModule中重复导入了路由配置：同时在imports数组中添加了RouterModule.forRoot(routes)和AppRoutingModule，而AppRoutingModule内部已经通过RouterModule.forRoot(routes)配置了路由并导出RouterModule，这种重复导入会导致Angular无法正确识别路由组件。

原app.module.ts关键部分 #

imports: [
    BrowserModule,
    RouterModule.forRoot(routes), // 重复导入
    AppRoutingModule,
    CommonModule,
    HttpClientModule
],

解决方案步骤 #

1. 移除重复的路由导入 #

修改app.module.ts的imports数组，删除RouterModule.forRoot(routes)，只保留AppRoutingModule即可：

imports: [
    BrowserModule,
    AppRoutingModule, // 仅保留封装好的路由模块
    CommonModule,
    HttpClientModule
],

2. 确认路由模块的正确性 #

检查app.routes.ts，确保AppRoutingModule正确导出RouterModule（你的代码中已经正确配置，无需修改）：

@NgModule ({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule] // 必须导出RouterModule才能让模块内组件识别路由指令
})
export class AppRoutingModule {}

3. 清除缓存并重新构建 #

执行以下命令清除Angular缓存并重新打包，避免缓存导致的问题：

ng clean
ng build

额外排查点（如果上述步骤无效） #

• 确认app.component.html中的<router-outlet>拼写正确，无大小写错误或多余字符。
• 如果使用了懒加载模块，确保每个子模块都导入了RouterModule.forChild(routes)并导出。

内容的提问来源于stack exchange，提问作者Alessandro de Almeida