Angular：如何为多个根路径复用同一懒加载模块

没问题，我刚好搞定过类似的需求！你不需要拆分多个模块，只需要调整路由配置，就能让同一个懒加载模块直接处理/account、/settings这类根路径，而不用嵌套成子路由，具体步骤如下：

1. 配置懒加载模块的路由 #

假设你的低频功能模块叫AccountSettingsModule，先给它创建路由模块，直接在里面定义根级路径的路由（不用加父路径前缀）：

// account-settings-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccountComponent } from './account/account.component';
import { SettingsComponent } from './settings/settings.component';
import { FaqComponent } from './faq/faq.component';

const routes: Routes = [
  // 直接定义根路径路由
  { path: 'account', component: AccountComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'faq', component: FaqComponent },
  // 可选：如果访问模块的空路径（比如直接加载模块时），重定向到默认页面
  { path: '', redirectTo: 'account', pathMatch: 'full' }
];

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

2. 配置根路由，加载懒加载模块 #

在根路由模块（AppRoutingModule）中，把核心功能的路由放在前面，然后添加一个空路径的路由，用loadChildren加载你的懒加载模块。这样Angular会先匹配核心路由，剩下的路径会交给懒加载模块的路由处理：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  // 核心基础功能的路由，优先匹配
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  
  // 懒加载低频功能模块：空路径会匹配所有未被核心路由处理的路径
  {
    path: '',
    loadChildren: () => import('./account-settings/account-settings.module')
      .then(m => m.AccountSettingsModule)
  }
];

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

关键原理说明 #

Angular懒加载模块的路由会被合并到根路由树中，当你用空路径加载模块时，模块内的路由会成为根路由的“兄弟”路由，而不是子路由。这样访问/account时，会直接匹配懒加载模块里的path: 'account'路由，实现根路径下的懒加载。

注意事项 #

• 路由顺序很重要：核心路由必须放在懒加载路由前面，否则会被懒加载路由拦截，导致核心功能无法访问。
• 服务器配置（HTML5模式）：如果你的应用用的是HTML5路由模式（默认），需要配置服务器将所有请求重定向到index.html，否则刷新/account这类页面会出现404错误。
• 避免路由冲突：确保懒加载模块里的路由路径和核心路由没有重复。

内容的提问来源于stack exchange，提问作者Javier Marín