Angular 13单SPA应用中CSS资源请求指向错误端口问题求助

针对你遇到的子应用CSS中background-image资源请求指向主应用端口的问题，以下是几个适配Angular 13 + single-spa场景的可行方案：

方案1：配置single-spa的setPublicPath（推荐） #

single-spa-angular提供了专门的公共路径设置方法，可覆盖包括CSS在内的所有资源请求路径：

1. 在子应用的main.single-spa.ts文件中，导入并调用setPublicPath，指定子应用的基础URL：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngular, setPublicPath } from 'single-spa-angular';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 配置子应用的公共路径，指向自身端口
setPublicPath('http://localhost:4201/');

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: () => platformBrowserDynamic().bootstrapModule(AppModule),
  template: '<app-root />',
  Router,
  NavigationStart,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

这个方法会统一调整webpack输出的所有资源（包括CSS中的url引用）的基础路径，确保请求指向子应用自身端口。

方案2：动态设置CSS变量结合绝对路径 #

通过在子应用启动时注入自身的资源根路径到CSS变量中，再在样式中引用：

1. 在子应用的根组件（比如app.component.ts）中，获取子应用的基础URL，并设置CSS变量：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // 获取子应用的公共路径（可从single-spa props中获取或直接指定）
    const appPublicPath = 'http://localhost:4201/';
    document.documentElement.style.setProperty('--app-asset-path', appPublicPath);
  }
}

2. 在CSS文件中使用该变量拼接资源路径：

.some-element {
  background-image: url(var(--app-asset-path)assets/abc.svg);
}

方案3：自定义Webpack配置调整CSS loader的publicPath #

Angular 13使用Webpack 5，可通过angular-builders/custom-webpack扩展配置，强制设置CSS资源的publicPath：

1. 安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建custom-webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              publicPath: 'http://localhost:4201/'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              publicPath: 'http://localhost:4201/'
            }
          }
        ]
      }
    ]
  }
};

3. 修改angular.json中的构建配置，使用自定义webpack：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 其他原有配置...
  }
}

以上方案中，方案1是最贴合single-spa生态的解决方案，能一次性解决所有资源路径问题；方案2适合需要灵活调整个别资源路径的场景；方案3则通过底层webpack配置强制覆盖路径，适合复杂定制场景。

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