single-spa集成Angular时深度导入URL被替换为localhost问题

问题背景 #

• 运行环境：多 Angular 项目接入 single-spa@5.8.2 搭建微前端架构
• 异常现象：引入依赖 quill.js 的第三方组件 ngx-quill 时，single-spa 会将组件默认的静态资源导入URL替换为根应用加载地址 localhost:9000，导致资源加载失败
• 已排除的无效方案：
  • 按照官方文档完成了项目自有scss、图片等静态资源的路径适配，但异常请求来自第三方依赖库，直接修改第三方源码不符合工程规范
  • 尝试添加Angular HTTP拦截器替换异常URL，但这类静态资源请求不属于REST接口请求，不会经过HTTP拦截器链路，无法生效
• 核心诉求：通过single-spa原生配置调整资源路由规则，正确加载node_modules目录下的第三方依赖资源

可行解决方案 #

方案1：构建层配置固定公共资源路径（优先选择，无侵入） #

不需要修改任何第三方代码，直接在微应用构建阶段指定静态资源的公共基础路径，从产物层面避免运行时路径被single-spa篡改：

1. 基于Angular CLI构建的项目，在微应用的angular.json中对应构建目标下配置baseHref和deployUrl为当前微应用的独立部署地址，例如微应用单独运行端口为4201：

{
  "projects": {
    "your-micro-app-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "http://localhost:4201/",
            "deployUrl": "http://localhost:4201/"
          }
        }
      }
    }
  }
}

2. 基于自定义webpack构建的项目，直接在webpack配置中指定output.publicPath为微应用自身的完整访问前缀：

module.exports = {
  output: {
    publicPath: "http://localhost:4201/"
  }
}

该配置生效后，所有静态资源（包括第三方依赖打包时引入的样式、字体、图片等资源）的引用路径都会自动带上微应用自身的地址前缀，不会再被根应用的localhost:9000地址覆盖。

方案2：根应用importmap映射第三方资源地址 #

如果ngx-quill依赖的quill资源是运行时动态发起的相对路径请求，没有被webpack打包处理，可以在根应用的importmap中提前声明对应资源的固定访问地址，从single-spa模块加载层直接指向正确路径：
在根应用入口html中添加如下配置：

<script type="systemjs-importmap">
{
  "imports": {
    "quill": "你本地部署的quill脚本固定访问地址",
    "quill/dist/quill.snow.css": "你本地部署的quill样式文件固定访问地址"
  }
}
</script>

方案3：全局拦截资源请求（兜底方案） #

如果上述两个方案受项目架构限制无法落地，可以在微应用挂载阶段注册全局资源标签拦截逻辑，在资源发起请求前替换错误的路径前缀：

// 放在微应用single-spa生命周期的bootstrap阶段执行
const originalCreateElement = document.createElement.bind(document)
document.createElement = function(tagName) {
  const ele = originalCreateElement(tagName)
  const targetTags = ['link', 'script', 'img']
  if (targetTags.includes(tagName.toLowerCase())) {
    const originalSetAttr = ele.setAttribute.bind(ele)
    ele.setAttribute = function(attrKey, attrValue) {
      if (['href', 'src'].includes(attrKey) && attrValue.startsWith('http://localhost:9000/')) {
        // 替换为当前微应用的实际资源前缀
        attrValue = attrValue.replace('http://localhost:9000/', 'http://localhost:4201/')
      }
      return originalSetAttr(attrKey, attrValue)
    }
  }
  return ele
}

注意需要在微应用unmount生命周期中还原被重写的原生document方法，避免污染全局环境影响其他微应用运行。

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