Angular如何为指定懒加载模块自定义下载URL？

我之前正好处理过类似的跨主机懒加载Angular模块的需求，你遇到的自定义ResourceLoader没生效的问题，其实是因为最新Angular版本的懒加载机制已经不再依赖它了——从Angular 8+开始，默认用ES模块动态import加载懒加载模块，而ResourceLoader仅负责模板、样式等静态资源的加载，对模块本身的加载流程不起作用。

下面给你几个可行的客户端方案，按推荐度排序：

方案一：自定义NgModuleFactoryLoader（最可靠） #

这个方案直接替换Angular的模块加载器，精准控制AdminModule的加载来源，兼容最新Angular版本：

1. 创建自定义加载器类 #

import { Injectable, NgModuleFactory, NgModuleFactoryLoader } from '@angular/core';
import { Observable, from } from 'rxjs';

@Injectable()
export class CustomAdminModuleLoader implements NgModuleFactoryLoader {
  load(path: string): Observable<NgModuleFactory<any>> {
    // 判断当前要加载的是否是AdminModule
    if (path.endsWith('#AdminModule')) {
      // 替换为主机B的完整chunk URL
      // 注意：这里的chunk路径要和主机B上AdminModule打包后的实际路径一致
      // 比如主机B打包后Admin模块的chunk是admin.xxx.js，就替换成对应的URL
      const adminChunkUrl = `https://主机B域名/admin/admin.module.js`;
      
      // 用动态import加载外部模块，webpackIgnore告诉webpack不要解析这个静态依赖
      return from(
        import(/* webpackIgnore: true */ adminChunkUrl)
          .then(module => module[path.split('#')[1]])
          .then(moduleClass => NgModuleFactory.create(moduleClass))
      );
    }

    // 其他模块用默认加载逻辑
    const defaultLoader = new SystemJsNgModuleLoader();
    return defaultLoader.load(path);
  }
}

2. 在AppModule中注册自定义加载器 #

import { NgModule, NgModuleFactoryLoader } from '@angular/core';
import { CustomAdminModuleLoader } from './custom-admin-loader';

@NgModule({
  providers: [
    { provide: NgModuleFactoryLoader, useClass: CustomAdminModuleLoader }
  ]
})
export class AppModule { }

方案二：动态切换webpack公共路径（更简洁） #

如果你的项目用Angular CLI打包（底层是webpack），可以利用webpack的__webpack_public_path__变量，在进入Admin路由时动态切换资源加载路径：

1. 创建路由守卫 #

import { CanActivate, CanDeactivate, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';

// 声明webpack公共路径变量
declare let __webpack_public_path__: string;

@Injectable()
export class AdminRouteGuard implements CanActivate, CanDeactivate<unknown> {
  private originalPublicPath: string;

  canActivate(_route: ActivatedRouteSnapshot): boolean {
    // 保存原公共路径（主机A的路径）
    this.originalPublicPath = __webpack_public_path__;
    // 切换为主机B的资源路径
    __webpack_public_path__ = 'https://主机B域名/';
    return true;
  }

  canDeactivate(): boolean {
    // 离开Admin路由时恢复原路径
    __webpack_public_path__ = this.originalPublicPath;
    return true;
  }
}

2. 在路由配置中绑定守卫 #

const routes: Routes = [
  { 
    path: 'users', 
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule) 
  },
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AdminRouteGuard],
    canDeactivate: [AdminRouteGuard]
  }
];

这个方案的前提是：主机B上AdminModule的chunk结构（包括文件名、哈希）和主机A的打包输出一致，或者你可以固定Admin模块的chunk名（在angular.json中配置outputHashing: none或者用chunkNames自定义）。

方案三：直接在路由中用fetch加载模块（灵活但需注意安全） #

如果需要更灵活的控制，可以直接在路由的loadChildren中用fetch请求主机B的chunk，再手动解析模块：

const routes: Routes = [
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
  { 
    path: 'admin', 
    loadChildren: () => 
      fetch('https://主机B域名/admin-abc123.js') // 替换成实际chunk URL
        .then(res => res.text())
        .then(chunkCode => {
          // 创建临时模块容器
          const tempModule = { exports: {} };
          // 执行chunk代码（注意：仅在主机B完全可信时使用，避免XSS风险）
          eval(chunkCode);
          return tempModule.exports.AdminModule;
        })
  }
];

⚠️ 注意：这个方案使用了eval，存在安全风险，只有当你完全信任主机B的内容时才建议使用。

关键注意事项 #

1. CORS配置：主机B必须配置CORS，允许主机A的域名跨域请求chunk文件，否则会出现跨域错误。
2. 模块打包格式：主机B上的AdminModule打包时，要确保输出格式为UMD（可以在angular.json的build配置中设置output.format: 'umd'），这样才能被动态import或eval正确解析。
3. 文件名一致性：如果用方案二，要确保主机A和主机B的Admin模块chunk文件名（包括哈希）一致，或者固定chunk名避免哈希变化导致加载失败。

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