Angular 2报错：<router-outlet>不是已知元素的排查求助

我之前踩过这个一模一样的坑！哪怕看起来配置全对，这个报错大概率还是路由模块的导入/导出环节出了疏漏，给你列几个必查的关键点：

1. 确保AppRoutingModule正确导出RouterModule #

这是最容易忽略的一步！你的路由模块必须导出RouterModule，这样根模块才能识别<router-outlet>指令。正确的app-routing.module.ts应该是这样：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的页面组件
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: DashboardComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule] // 这行绝对不能少！
})
export class AppRoutingModule { }

2. 确认AppModule已经导入AppRoutingModule #

根模块必须把路由模块加入imports数组，不然路由相关的指令不会被注册。检查你的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';

@NgModule({
  declarations: [
    AppComponent
    // 路由组件需要在这里声明，或者在对应的特性模块里声明
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // 必须把路由模块加在这里！
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查模板里的<router-outlet>拼写是否正确 #

别笑，有时候手滑打错字母也会出问题！确保标签名完全正确，没有多余的字符或拼写错误：

<!-- app.component.html 示例 -->
<header>我的Angular应用</header>
<router-outlet></router-outlet> <!-- 自闭合写法 <router-outlet /> 也可以 -->

4. 嵌套路由场景：特性模块需导入RouterModule.forChild() #

如果是在特性模块里使用<router-outlet>实现嵌套路由，那特性模块也要配置路由并导入RouterModule.forChild()：

// feature-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature.component';
import { FeatureDetailComponent } from './feature-detail/feature-detail.component';

const routes: Routes = [
  { 
    path: 'feature', 
    component: FeatureComponent,
    children: [
      { path: ':id', component: FeatureDetailComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

然后把这个特性路由模块导入到对应的特性模块中。

5. 清理缓存并重启开发服务 #

有时候Angular的缓存会导致模块变更不生效，试试执行：

ng serve --clearCache

或者直接关闭终端，重新启动ng serve，说不定就能解决问题。

如果以上步骤都检查过还是报错，可以把你的app-routing.module.ts、app.module.ts的实际代码贴出来，这样能更精准定位问题！

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