Angular使用<router-outlet>报错：'router-outlet'不是已知元素

核心问题排查与修复 #

你的代码存在冗余导入问题：app.module.ts的imports数组中同时导入了AppRoutingModule和RouterModule。而AppRoutingModule已通过exports: [RouterModule]导出配置好的路由模块，重复导入会导致Angular模块解析冲突，进而引发router-outlet识别失败的错误。

修复步骤： #

1. 修改app.module.ts，移除imports中的RouterModule，仅保留AppRoutingModule即可：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'
// 移除单独的RouterModule导入
import { SearchBarComponent } from './components/search-bar/search-bar.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchBarComponent,
    HomeComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,      
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 重启Angular开发服务器：
   执行命令：

ng serve --stop
ng serve

Angular的模块缓存可能无法自动识别配置变更，重启服务可确保新的模块配置生效。

额外排查方向（若上述修复无效） #

• 确认AppRoutingModule是否正确导出RouterModule：你的路由模块代码已正确配置exports: [RouterModule]，此部分无问题。
• 检查组件所属模块：AppComponent已在AppModule的declarations中，模块归属正常，无需额外调整。

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