作为WebComponent运行的Angular应用如何配置懒加载chunk的正确加载路径？

这个问题的核心原因是Angular默认使用当前页面的域名路径作为懒加载chunk的根路径，嵌入跨域WebComponent时就会出现路径匹配错误。可以通过以下两种方式解决：

方案1：动态设置公共路径（推荐，无需写死部署地址） #

Angular底层基于Webpack构建，可以通过Webpack提供的__webpack_public_path__全局变量动态指定chunk加载的根路径，操作步骤如下：

1. 在项目src目录下新建public-path.ts文件，写入以下代码：

// 声明Webpack内置变量，避免TS类型报错
declare var __webpack_public_path__: string;

// 获取当前执行脚本的src地址（也就是你加载的main.js的完整地址）
const currentScript = document.currentScript as HTMLScriptElement;
if (currentScript) {
  // 截取去掉脚本文件名的路径作为公共路径
  __webpack_public_path__ = currentScript.src.substring(0, currentScript.src.lastIndexOf('/') + 1);
}

2. 在main.ts文件的最顶部第一行引入该文件，确保在所有应用逻辑执行前完成路径配置：

import './public-path';
// 后面再写原有main.ts的其他逻辑
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// ... 其他原有代码

方案2：构建时写死部署路径 #

如果你的WebComponent部署地址固定，也可以在构建时直接指定部署路径，运行构建命令时添加--deploy-url参数即可：

ng build --deploy-url http://localhost:8089/lazy/

注意：该方案缺陷是如果后续WebComponent的部署地址变更，需要重新构建项目，灵活性低于方案1。

验证方式 #

重新构建后部署到8089服务器，再在8080的页面嵌入测试，懒加载时请求的chunk路径会自动变为http://localhost:8089/lazy/[chunk名].js，问题即可解决。

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