Angular项目执行ng serve报错NG8001：'router-outlet'非已知元素

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

1. 若'routes-outlet'是Angular组件，请确认它属于当前模块。
2. 若'routes-outlet'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'中以抑制此提示。

以下是针对性的排查和解决步骤：

• 检查AppRoutingModule的导出配置
  确保AppRoutingModule内部正确导入并导出RouterModule，这是让根模块能识别router-outlet的关键：

  // app-routing.module.ts
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HomeComponent } from './home/home.component'; // 示例路由组件
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    // 其他路由规则
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule] // 必须导出RouterModule，否则根模块无法使用路由指令
  })
  export class AppRoutingModule { }
  

• 确认AppModule的导入和声明
  检查app.module.ts中是否正确引入AppRoutingModule，同时确保路由关联的组件已在declarations数组中：

  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component'; // 关联组件需声明
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule // 此处必须导入路由模块
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 修正模板标签拼写
  错误提示中出现了routes-outlet的拼写，确认你的app.component.html里使用的是正确的<router-outlet></router-outlet>标签，避免拼写错误。

• 清理缓存并重启服务
  执行以下命令清理Angular缓存后重新启动服务，排除缓存导致的异常：

  ng cache clean
  ng serve --open
  

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