Angular懒加载实现报错：RouterModule.forRoot()被调用两次

我来帮你搞定这个报错！这个问题的根源很清晰：你的项目里两次调用了RouterModule.forRoot()，而Angular有明确的规则——只有根模块（也就是AppModule对应的路由配置）能使用forRoot()来设置全局路由，所有懒加载的子模块必须用RouterModule.forChild()来定义自己的路由规则。

下面是具体的排查和修复步骤：

1. 检查根路由模块（AppRoutingModule）的配置 #

首先确保你的app-routing.module.ts是唯一调用forRoot()的地方，示例代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component'; // 示例组件

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 懒加载模块的路由配置，用loadChildren指定模块路径
  { 
    path: 'lazy-feature', 
    loadChildren: () => import('./lazy-feature/lazy-feature.module').then(m => m.LazyFeatureModule) 
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 这里只用一次forRoot()
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修正AppModule的导入逻辑 #

打开你的app-module.ts，确保你只导入AppRoutingModule，而不是直接在AppModule里再次调用RouterModule.forRoot()。正确的结构应该是这样：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module'; // 导入根路由模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule // 只导入这个，不要在这里添加RouterModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查所有懒加载模块的路由配置 #

找到你项目中所有的懒加载模块，它们的路由模块必须使用RouterModule.forChild()。举个例子，假设你有一个LazyFeatureModule，它的路由文件应该是这样：

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

const routes: Routes = [
  { path: '', component: LazyFeatureComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)], // 懒加载模块用forChild()
  exports: [RouterModule]
})
export class LazyFeatureRoutingModule { }

然后在懒加载模块的定义文件里，导入这个路由模块即可：

// lazy-feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyFeatureRoutingModule } from './lazy-feature-routing.module';
import { LazyFeatureComponent } from './lazy-feature.component';

@NgModule({
  declarations: [LazyFeatureComponent],
  imports: [
    CommonModule,
    LazyFeatureRoutingModule
  ]
})
export class LazyFeatureModule { }

最后再提醒一下关键规则：

• 全局根路由只在AppRoutingModule里用一次RouterModule.forRoot()
• 所有懒加载子模块的路由必须用RouterModule.forChild()
• 绝对不要在AppModule或者任何懒加载模块里直接调用RouterModule.forRoot()

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