Angular：如何通过同一路由路径同时懒加载多个模块？

你遇到的问题本质是Angular的路由匹配机制：路由配置是按顺序从上到下匹配的，同一路径的第一个路由会被优先选中，后面的配置会被直接忽略，所以直接写两个path: 'mypath'的路由是行不通的。

下面给你两种可行的方案，都能实现同一路径根据条件懒加载不同模块，且不会出现模块互相导入导致的非懒加载问题：

方案一：在主路由中动态返回懒加载模块 #

你可以把loadChildren写成一个动态函数，根据用户权限（或其他业务条件）决定加载哪个模块，同时配合守卫确保只有有权限的用户能访问对应的模块。

实现步骤： #

1. 先实现一个权限判断函数（比如根据用户角色、登录状态等）
2. 在主路由配置中，用动态loadChildren返回对应模块
3. 配置统一的守卫来验证用户权限

示例代码：

// 主路由模块
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RouteAccessGuard } from './route-access.guard';

// 自定义权限判断逻辑，实际场景可从AuthService/localStorage获取用户角色
const checkUserRole = (): 'home' | 'advisor' => {
  const userRole = localStorage.getItem('userRole');
  return userRole === 'advisor' ? 'advisor' : 'home';
};

const routes: Routes = [
  {
    path: 'mypath',
    canLoad: [RouteAccessGuard], // 守卫验证用户是否有权限访问目标模块
    loadChildren: () => {
      switch (checkUserRole()) {
        case 'advisor':
          return import('./advisor/advisor.module').then(m => m.AdvisorModule);
        default:
          return import('./home/home.module').then(m => m.HomeModule);
      }
    }
  }
];

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

然后实现RouteAccessGuard，确保用户只能访问自己权限内的模块：

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RouteAccessGuard implements CanLoad {
  constructor(private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): boolean {
    const userRole = localStorage.getItem('userRole');
    // 根据用户角色判断是否允许加载对应模块
    if (userRole === 'advisor' || userRole === 'home') {
      return true;
    }
    // 无权限时重定向到其他页面
    this.router.navigate(['/unauthorized']);
    return false;
  }
}

方案二：创建中间入口模块（更清晰的解耦） #

如果你的业务逻辑比较复杂，建议创建一个空的中间模块作为路由入口，把动态加载的逻辑放到这个模块里，让主路由更简洁。

实现步骤： #

1. 创建EntryModule和对应的守卫
2. 在EntryModule的路由中动态加载目标模块
3. 主路由只配置指向EntryModule的懒加载

示例代码：

// entry.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EntryGuard } from './entry.guard';

const checkUserRole = (): 'home' | 'advisor' => {
  const userRole = localStorage.getItem('userRole');
  return userRole === 'advisor' ? 'advisor' : 'home';
};

const routes: Routes = [
  {
    path: '', // 继承主路由的'mypath'路径
    canActivate: [EntryGuard],
    loadChildren: () => {
      return checkUserRole() === 'advisor' 
        ? import('../advisor/advisor.module').then(m => m.AdvisorModule)
        : import('../home/home.module').then(m => m.HomeModule);
    }
  }
];

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

主路由配置：

const routes: Routes = [
  {
    path: 'mypath',
    canLoad: [EntryGuard],
    loadChildren: () => import('./entry/entry.module').then(m => m.EntryModule)
  }
];

EntryGuard的实现和方案一中的RouteAccessGuard类似，负责验证用户权限。

关键说明： #

• 两种方案都是通过动态返回Promise的方式实现懒加载，只有当条件满足时，对应的模块才会被打包加载，不会出现提前加载的问题。
• 不要尝试把两个模块互相导入，那样会导致被导入的模块失去懒加载特性，变成随主模块一起加载。
• 守卫的作用是确保用户只能访问自己有权限的模块，避免出现权限泄露的情况。

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