在共享模块组件中使用router-outlet时懒加载子路由资源路径异常

问题分析 #

进入懒加载模块的子路由（如/lazy1/anything）后，所有核心资源（图片、JS bundle等）的请求路径被自动加上了懒加载模块前缀（如/lazy1/assets/img/pic.jpg），导致404错误，而根路由和懒加载模块根路径（/corepages、/lazy1）运行正常。核心原因是资源路径解析被当前路由前缀干扰，或路由配置的匹配逻辑存在问题。

解决方案（无需修改共享组件结构） #

• 强制使用绝对路径引用资源
  检查共享组件模板中的资源引用，确保所有路径以/开头（如/assets/img/pic.jpg）。绝对路径会基于应用的base href解析，不会被当前路由前缀影响。

• 确认base href配置正确
  在index.html中确保<base href="/">设置正确。如果应用部署在子目录，调整为对应路径（如<base href="/my-app/">），根部署场景保持/即可。

• 修正路由匹配逻辑

  1. 外壳路由配置中，确保懒加载模块的路由不会错误覆盖根匹配：

     const routes: Routes = [
       { path: 'corepages', component: CorePagesComponent },
       { 
         path: 'lazy1', 
         loadChildren: () => import('./lazy1/lazy1.module').then(m => m.Lazy1Module)
       },
       { path: '', redirectTo: '/corepages', pathMatch: 'full' }
     ];
     

  2. 懒加载模块内部的子路由设置为空路径作为入口：

     // lazy1.module.ts 路由配置
     const routes: Routes = [
       { path: '', component: Lazy1Component },
       { path: 'anything', component: Lazy1AnythingComponent }
     ];
     

  这样/lazy1/anything会被正确匹配，避免路由解析错误导致资源路径混乱。

• 动态生成绝对路径（适用于动态资源）
  如果共享组件中资源路径是动态生成的，注入APP_BASE_HREF来拼接绝对路径：

  import { Component, Inject } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  
  @Component({
    selector: 'app-shared-sidebar',
    template: `<img [src]="getFullAssetPath('assets/img/pic.jpg')" alt="Pic">`
  })
  export class SharedSidebarComponent {
    constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}
  
    getFullAssetPath(relativePath: string): string {
      return `${this.baseHref}/${relativePath}`.replace(/\/+/g, '/');
    }
  }
  

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