使用Single Spa与Angular时刷新页面SVG出现404未找到问题求助

以下是针对你遇到的SVG资源404错误的具体解决方案：

1. 修正资源引用路径（优先推荐） #

由于Single Spa微前端架构下，子应用的挂载路径会改变相对路径的上下文，避免使用../这类相对路径，改用基于Angular应用根路径的引用方式：

• 直接使用根相对路径：

  <img src="assets/icons/save.svg" />
  

• 若子应用挂载在非根路径（如/child-app），通过APP_BASE_HREF动态生成路径：
  在组件中注入APP_BASE_HREF：

  import { Component, Inject } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}
  
    getSvgPath(svgName: string) {
      return `${this.baseHref}/assets/icons/${svgName}`;
    }
  }
  

  模板中调用方法：

  <img [src]="getSvgPath('save.svg')" />
  

2. 确认Angular资源配置正确性 #

检查angular.json中的assets配置，确保src/assets被正确包含：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ]
        }
      }
    }
  }
}

若需单独指定SVG目录，可改为：

"assets": [
  "src/favicon.ico",
  {
    "glob": "**/*.svg",
    "input": "src/assets/icons",
    "output": "/assets/icons/"
  }
]

3. 配置Single Spa打包路径 #

为子应用设置deployUrl，确保资源打包后路径正确：

• 在angular.json的build.options中添加：

  "deployUrl": "/your-child-app-path/"
  

• 或在构建命令中传入参数：

  ng build --deploy-url /your-child-app-path/
  

4. 导入SVG为模块资源（替代img标签方案） #

将SVG作为模块导入，避免路径解析问题：

• 在组件中导入SVG：

  import saveSvg from '../assets/icons/save.svg';
  

• 模板中绑定：

  <img [src]="saveSvg" />
  

  若出现导入错误，需确保Angular支持SVG导入，可在tsconfig.json中添加：

  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
  

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