求助：Angular 18中html2canvas修改默认URL导致懒加载组件无法加载

问题场景 #

使用Html2canvas生成PDF已有12个月，升级至Angular 18并切换为独立组件后，PDF生成功能正常，但执行Html2canvas后，新的懒加载路由加载失败——原本的URL如http://localhost:4200/default-node_modules_angular_mate...，执行后变为http://localhost:4200/reports/default-src_app_share...，新增了reports路径，导致未加载过的组件无法正常加载，仅包含Html2canvas的组件可复现该问题，核心代码如下：

public PublishRpt2(nativeElement: any, genericProofImage: GenericProofImage)
{
    html2canvas(nativeElement, { scale: 3 }).then((canvas) => {
        const imageGeneratedFromTemplate = canvas.toDataURL('image/png',1.0);
    });    
}

可能原因 #

• Html2canvas在渲染元素过程中，可能修改了页面的<base>标签属性，或错误调整了资源加载的相对基准路径，导致Angular路由解析时使用了错误的基础URL。
• Angular 18独立组件的路由机制对路径解析更严格，懒加载模块的相对路径受当前页面URL变化的影响被放大。

解决方案 #

1. 强制Html2canvas使用绝对根路径作为基准 #

调用Html2canvas时，通过baseURL参数明确指定站点根路径，避免相对路径被篡改：

public PublishRpt2(nativeElement: any, genericProofImage: GenericProofImage)
{
    html2canvas(nativeElement, { 
        scale: 3,
        baseURL: `${window.location.origin}/` // 固定使用站点根路径作为基准
    }).then((canvas) => {
        const imageGeneratedFromTemplate = canvas.toDataURL('image/png',1.0);
    });    
}

2. 保存并恢复<base>标签的原始配置 #

如果Html2canvas修改了<base>标签，手动备份原始href，执行完成后恢复：

public PublishRpt2(nativeElement: any, genericProofImage: GenericProofImage)
{
    // 备份原始base标签的href值
    const baseElement = document.querySelector('base');
    const originalBaseHref = baseElement?.getAttribute('href');
    
    html2canvas(nativeElement, { scale: 3 }).then((canvas) => {
        const imageGeneratedFromTemplate = canvas.toDataURL('image/png',1.0);
        // 恢复原始base配置
        if (baseElement && originalBaseHref) {
            baseElement.setAttribute('href', originalBaseHref);
        }
    });    
}

3. 确保懒加载路由使用绝对路径配置 #

检查Angular路由配置，将懒加载路由的路径改为绝对路径（前缀加/），避免相对路径解析错误：

// 路由配置示例
export const routes: Routes = [
  // 错误：相对路径可能受当前URL影响
  // { path: 'reports', loadChildren: () => import('./reports/reports.routes').then(r => r.REPORTS_ROUTES) },
  
  // 正确：使用绝对路径
  { path: '/reports', loadChildren: () => import('./reports/reports.routes').then(r => r.REPORTS_ROUTES) },
];

4. 检查Angular路由初始化策略 #

在provideRouter中启用阻塞式初始导航，避免路由解析受页面动态变化影响：

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withEnabledBlockingInitialNavigation())
  ]
});

内容的提问来源于stack exchange，提问作者Guy Gallant 4321