[Bug]主应用是react项目，子应用是angular项目，子应用配置了__webpack_public_path__，但是加载的静态资源图片404

[suruicq]

子应用是angular项目，配置了__webpack_public_path__，但是加载的静态资源图片404.

子应用配置public-path.js：

子应用图片使用的相对路径

但是加载子应用的时候，静态资源的路径是从主应用去获取的 http://localhost:3000/assets/svgs/nohistory.svg

主应用： http://localhost:3000/
子应用： http://localhost:4200/

[kuitos]

webpack 的 runtime publicPath 只会在 js 里 import 资源才会生效

[Arvinzwt]

同问+1

[hanalice]

@suruicq @Arvinzwt
single-spa-angular 会自动生成一个assetUrl 函数，可以在此基础上封装一个assetUrlPipe, 在静态资源的html中加上这个pipe, 就可以了。不好的是，所有地方需要手动修改。

<img class="logoImg" [src]="'logo.png' | assetUrl" />

如下是assetUrl 函数的定义

// In single-spa, the assets need to be loaded from a dynamic location,
// instead of hard coded to `/assets`. We use webpack public path for this.
// See https://webpack.js.org/guides/public-path/#root

export function assetUrl(url: string): string {
  // @ts-ignore
  const publicPath = __webpack_public_path__;
  const publicPathSuffix = publicPath.endsWith('/') ? '' : '/';
  const urlPrefix = url.startsWith('/') ? '' : '/';

  return `${publicPath}${publicPathSuffix}assets${urlPrefix}${url}`;
}

assetUrlPipe 的定义

import { Pipe, PipeTransform } from '@angular/core';
import { assetUrl } from 'src/single-spa/asset-url';

@Pipe({
  name: 'assetUrl'
})
export class AssetUrlPipe implements PipeTransform {

  transform(value: string, ...args: unknown[]): unknown {
    return assetUrl(value);
  }
}