Angular 15无共同URL祖先的子路由懒加载配置方案咨询

问题根源 #

你当前的路由配置存在两个核心问题：

1. 主路由已将video-page/image-page指向MediaModule，但MediaModule内部路由又重复添加了相同前缀，导致实际路径变为video-page/video-page/:documentId，引发404。
2. 移除前缀后，路由器无法区分video-page和image-page下的参数路由，因为/:documentId和/:imageId都是通用参数占位符。

最终解决方案 #

1. 修正主模块路由的语法错误

主路由中第三个路由缺少loadChildren关键字，修正后配置如下：

// 主模块路由配置
const routes: Routes = [
  {
    path: 'video-page',
    loadChildren: () => import('app/myapp/submodules/media.module').then(m => m.MediaModule),
  },
  {
    path: 'image-page',
    loadChildren: () => import('app/myapp/submodules/media.module').then(m => m.MediaModule),
  },
  {
    path: '',
    loadChildren: () => import('app/myapp/submodules/hp.module').then(m => m.HPModule),
  },
];

2. 创建路由守卫动态切换组件

生成MediaRouteGuard，通过父路由路径判断当前应加载的组件：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { VideoPageComponent } from './video-page.component';
import { ImagePageComponent } from './image-page.component';

@Injectable({ providedIn: 'root' })
export class MediaRouteGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 获取父路由的路径标识（video-page 或 image-page）
    const parentPath = route.parent?.url[0].path;

    if (parentPath === 'video-page') {
      route.routeConfig!.component = VideoPageComponent;
      route.routeConfig!.data = { breadcrumb: 'Media page' };
    } else if (parentPath === 'image-page') {
      route.routeConfig!.component = ImagePageComponent;
      route.routeConfig!.data = { breadcrumb: 'Image page' };
    }

    return true;
  }
}

3. 修改MediaModule的路由配置

移除冗余前缀，使用通用参数占位符并绑定路由守卫：

// MediaModule 路由配置
import { MediaRouteGuard } from './media-route.guard';

const routes: Routes = [
  {
    path: ':id',
    canActivate: [MediaRouteGuard],
    data: { breadcrumb: '' }
  },
  {
    path: ':id/:title',
    canActivate: [MediaRouteGuard],
    data: { breadcrumb: '' }
  }
];

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

方案说明 #

• 主路由通过video-page/image-page分别懒加载MediaModule，保证URL结构符合需求。
• MediaModule使用相对路径配置路由，避免路径重复导致的404错误。
• 路由守卫根据父路由的路径动态切换组件，既区分了视频/图片页面，又保留了MediaModule内公共组件的复用性。

配置完成后：

• 访问/video-page/123或/video-page/123/test-title会加载VideoPageComponent
• 访问/image-page/456或/image-page/456/image-title会加载ImagePageComponent

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