Angular页面加载报NG8001错误：'router-outlet'不是已知元素求助

核心原因 #

你的app.module.ts配置存在两个关键错误：

1. 错误将模块放入declarations数组：declarations仅用于声明Angular组件、指令、管道，你却把AppRoutingModule（NgModule类型）放在了这里，导致Angular无法识别路由模块提供的router-outlet组件。
2. 重复导入路由模块：AppRoutingModule已通过exports: [RouterModule]导出了路由模块，所以imports里同时导入AppRoutingModule和RouterModule属于冗余操作，虽不直接触发错误，但会增加不必要的模块加载。

修复步骤 #

修改app.module.ts文件，调整declarations和imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    AppComponent,  
    LoginComponent, 
    MainComponent 
    // 移除此处的AppRoutingModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule 
    // 移除重复的RouterModule导入
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

额外优化建议 #

• 确认项目已安装@angular/router依赖（Angular CLI创建带路由的项目会自动安装，若缺失可执行npm install @angular/router）。
• app.component.ts和app.component.html同时存在<router-outlet>，建议只保留一处：比如删除app.component.ts中的template属性，改用templateUrl: './app.component.html'，避免冗余。

内容的提问来源于stack exchange，提问作者Allan José