如何在Single-Spa应用中加载含资源的npm包组件？

问题背景 #

我的Single-Spa应用包含：

• 根配置应用（部署地址：http://localhost:3000）
• Angular子应用App1（部署地址：http://localhost:3001）

App1依赖的npm包Dep1提供了PreviewComponent，其模板使用绝对路径引用图片：

<img src="/assets/images/img-preview.png">

通过根配置应用访问时，图片请求会指向根应用域名（http://localhost:3000），但实际图片存在于App1的部署地址下，导致加载失败。已使用single-spa-angular的assetUrl处理App1自身资源，但无法修改Dep1，需要解决依赖包内资源的路径问题。

可行解决方案 #

方案1：Angular HTTP拦截器重写资源路径 #

通过拦截HTTP请求，将Dep1的资源请求重定向到App1的部署地址，无需修改Dep1代码。

1. 创建拦截器文件dep-asset.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { getSingleSpaExtraProps } from 'single-spa-angular';

@Injectable()
export class DepAssetInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 匹配Dep1的资源路径，可根据实际情况调整匹配规则
    if (req.url.includes('/assets/images/img-preview.png')) {
      // 获取Single-Spa注入的子应用公共路径
      const { publicPath } = getSingleSpaExtraProps();
      // 修正资源URL
      const correctedUrl = `${publicPath}assets/images/img-preview.png`;
      const correctedReq = req.clone({ url: correctedUrl });
      return next.handle(correctedReq);
    }
    return next.handle(req);
  }
}

2. 在App1的app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DepAssetInterceptor } from './dep-asset.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: DepAssetInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

优势：无需修改打包配置或根应用，仅在子应用内处理，规则灵活可扩展。

方案2：打包时复制Dep1资源到App1输出目录 #

通过Angular的打包配置，将Dep1的资源复制到App1的资源目录，确保请求指向子应用域名。

修改angular.json中App1的构建配置，在assets数组中添加：

{
  "glob": "**/*",
  "input": "./node_modules/Dep1/assets/images",
  "output": "./assets/images"
}

说明：此配置会将Dep1下的assets/images目录所有文件复制到App1构建后的dist/assets/images目录，请求时会自动从App1的部署地址加载。需确保Dep1的资源路径结构稳定，避免后续版本变更导致配置失效。

方案3：根配置应用设置请求代理 #

在根配置应用中添加代理规则，将Dep1资源的请求转发到App1的部署地址。

如果根配置基于Node.js/Express，可使用http-proxy-middleware实现：

const { createProxyMiddleware } = require('http-proxy-middleware');

// 根配置的服务器代码中添加代理
app.use('/assets/images/img-preview.png', createProxyMiddleware({
  target: 'http://localhost:3001',
  changeOrigin: true
}));

优势：无需修改子应用代码，适合资源数量较少的场景；若Dep1有多个资源，需逐个添加代理规则。

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