Angular Router Outlet不渲染页面且报NG05100错误求助

错误核心原因 #

NG05100错误的本质是BrowserModule被重复导入，Angular规则明确：仅根模块（AppModule）可导入BrowserModule，所有子模块、功能模块必须改用CommonModule。

具体排查与修复操作 #

1. 修正AppModule配置 #

确保AppModule只导入一次BrowserModule，且通过导入路由模块引入路由配置，而非直接导入RouterModule：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule, // 仅根模块允许导入此模块
    AppRoutingModule // 导入配置好的路由模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 完善路由模块的类定义 #

你的路由模块代码缺少模块类的导出，会导致Angular无法正确识别加载，补充完整：

// 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: 'home', component: HomeComponent },
  { path: '', pathMatch: 'full', redirectTo: 'home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } // 补充模块类导出

3. 检查功能模块的导入规则（若HomeComponent属于独立模块） #

如果HomeComponent在单独的功能模块（如HomeModule）中，该模块必须导入CommonModule而非BrowserModule：

// home.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule], // 此处必须用CommonModule
  exports: [HomeComponent]
})
export class HomeModule { }

4. 确认RouterOutlet的正确使用 #

保证app.component.html中仅保留<router-outlet>标签，无多余的重复路由配置或组件引用：

<!-- app.component.html -->
<router-outlet></router-outlet>

完成以上操作后重启项目，路由重定向与router-outlet的页面渲染即可恢复正常。

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