如何配置Angular从多个URL路径查找加载lazy chunk files

你可以通过路由级加载地址配置+必要的运行时改写，实现不同懒加载chunk从独立域名/路径加载，不需要改动全局公共资源路径配置，步骤如下：

1. 打包配置优化（可选，方便部署定位） #

先打开固定命名chunk配置，避免每次构建生成的随机hash导致chunk文件名不固定，方便你单独上传到对应托管位置：
在angular.json对应项目的生产构建配置中开启namedChunks：

"production": {
  "namedChunks": true,
  // 其余原有生产配置保持不变
}

执行ng build后，你可以在输出的dist目录里找到两个懒加载模块对应的独立chunk文件，文件名会和你模块命名关联，比如src-app-lazy-a-lazy-a-module.js这类格式，把两个文件分别上传到两个独立的托管位置即可，比如第一个chunk托管地址为https://cdn-a.com/ng-chunks/，第二个为https://cdn-b.com/assets/ng/。

2. 路由配置指定独立加载地址（适用于Angular 12+版本） #

Angular 12及以上版本原生支持在懒加载import语句中直接传入完整URL，不需要额外改写加载逻辑，直接在路由定义中给对应懒加载模块指定地址即可：

const routes: Routes = [
  {
    path: 'feature-a',
    // 直接填入第一个chunk的完整托管地址
    loadChildren: () => import('https://cdn-a.com/ng-chunks/src-app-lazy-a-lazy-a-module.js')
      .then(mod => mod.LazyAModule)
  },
  {
    path: 'feature-b',
    // 直接填入第二个chunk的完整托管地址
    loadChildren: () => import('https://cdn-b.com/assets/ng/src-app-lazy-b-lazy-b-module.js')
      .then(mod => mod.LazyBModule)
  }
];

• 如果是Angular 14+使用独立组件做路由懒加载，loadComponent字段支持完全相同的URL写法，直接传入对应组件chunk的托管地址即可。

注意：如果chunk托管域名和主应用域名不一致，需要在chunk托管的服务端配置CORS规则，允许主应用所在域名的跨域访问，否则浏览器会拦截加载请求。

3. 低版本Angular兼容方案（<12版本） #

如果使用的Angular版本低于12，不支持import直接传远程URL，可以通过重写webpack运行时的chunk加载逻辑，按chunk名称匹配对应托管路径：
首先在src目录下新建chunk-path-rewrite.ts文件：

// 保留原始chunk加载方法
const originChunkLoader = (window as any).__webpack_require__.e;
(window as any).__webpack_require__.e = function (chunkId: string) {
  // 匹配第一个懒加载chunk，替换为对应托管路径前缀
  if (chunkId.includes('lazy-a-module')) {
    return originChunkLoader.call(this, {
      ...chunkId,
      publicPath: 'https://cdn-a.com/ng-chunks/'
    });
  }
  // 匹配第二个懒加载chunk，替换为对应托管路径前缀
  if (chunkId.includes('lazy-b-module')) {
    return originChunkLoader.call(this, {
      ...chunkId,
      publicPath: 'https://cdn-b.com/assets/ng/'
    });
  }
  // 其余非懒加载、其余默认chunk走原有公共路径加载
  return originChunkLoader.call(this, chunkId);
};

然后在项目入口文件main.ts的最顶部引入这个改写文件，保证在Angular启动前就完成加载逻辑重写：

import './chunk-path-rewrite';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
// 原有main.ts启动逻辑保持不变
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

配置验证 #

部署完成后访问主应用，打开浏览器开发者工具的网络面板，切换到两个懒加载路由时，查看对应chunk的请求地址，如果请求发往你配置的两个独立托管路径且返回200、模块功能正常，即配置生效。

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