Angular报错NG8001：'router-outlet'不是已知元素，求解决方法

问题描述 #

• 错误提示：NG8001: 'router-outlet'不是已知元素
• 开发环境：
  • Angular CLI: 17.2.0
  • Node: 20.7.0
  • Package Manager: npm 10.4.0
  • OS: win32 ia32
• 已尝试相关解决方案但无效，当前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 {AuthComponent} from "../components/auth/auth.component";
import {ReactiveFormsModule} from "@angular/forms";
import {RouterModule, Routes} from "@angular/router";

const routes: Routes = [
  { path: '/', component: AuthComponent },
]
// @ts-ignore
@NgModule({
  declarations: [
    RouterModule,
    RouterModule.forRoot(Routes),
    AppComponent,
    AuthComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题根源与修复步骤 #

你的app.module.ts存在多处路由配置错误，导致Angular无法识别router-outlet组件：

• 错误地将RouterModule放入declarations数组：declarations仅用于声明组件、指令、管道，RouterModule是模块，必须放在imports数组中。
• 路由初始化语法错误：路由数组定义后，应该传入具体的routes变量而非Routes类型；且路由路径不能以/开头，默认路径用空字符串''即可。
• 重复配置路由模块：你已经导入了AppRoutingModule，无需在AppModule里重复定义路由，二者选其一即可（推荐用AppRoutingModule单独管理路由）。

修正后的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 { AuthComponent } from "../components/auth/auth.component";
import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
  declarations: [
    AppComponent,
    AuthComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, // 路由配置移至AppRoutingModule中
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

对应AppRoutingModule的修正 #

若保留单独路由模块，app-routing.module.ts需按如下写法：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from "../components/auth/auth.component";

const routes: Routes = [
  { path: '', component: AuthComponent }, // 移除路径开头的/
  { path: '**', redirectTo: '' } // 可选：添加通配路由处理404场景
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule] // 必须导出RouterModule，才能在组件模板中使用router-outlet
})
export class AppRoutingModule { }

额外检查项 #

1. 确认app.component.html中正确使用了<router-outlet></router-outlet>标签
2. 清理缓存后重启服务：执行ng clean，再重新运行ng serve

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