Angular应用跨环境下载模板文件损坏问题排查求助

这种本地正常、DEV环境下载文件损坏的情况，通常是路径配置、服务器处理或打包配置出了问题，以下是具体排查方向：

• 资源路径错误
  本地开发时根路径就是应用根目录，但DEV环境中子应用可能部署在子路径下（比如https://dev.example.com/sub-app/），这时用绝对路径/assets/template/sample.xlsx会指向https://dev.example.com/assets/...，如果父应用的assets确实在根目录还好，但如果子应用的资源路径被基座路由重写、服务器配置导致路径解析错误，可能返回的不是真实文件内容（比如404页面），下载后自然损坏。
  解决：改用相对路径或者通过Angular的APP_BASE_HREF注入动态获取路径。比如在子应用组件中：

  import { Component, Inject } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  
  @Component({...})
  export class YourComponent {
    templateUrl: string;
    constructor(@Inject(APP_BASE_HREF) baseHref: string) {
      this.templateUrl = `${baseHref}/assets/template/sample.xlsx`;
    }
  }
  

  模板中绑定路径：

  <a [href]="templateUrl" download="sample.xlsx"> Download the Sample Template file </a>
  

• 服务器静态文件处理错误
  DEV环境的服务器（如Nginx、Apache）可能对xlsx文件做了错误的MIME类型设置，或者开启了不必要的压缩，导致文件内容被篡改。
  检查点：

  1. 确认服务器返回的xlsx文件Content-Type是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，而非text/plain或其他类型。
  2. 确保服务器没有对xlsx文件启用gzip压缩（部分压缩配置会损坏二进制文件），可在服务器配置中排除.xlsx后缀的文件。

• 父应用打包时未包含模板文件
  检查父应用的angular.json中assets配置，确认assets/template文件夹被包含在打包资源里：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/assets/template" // 确保该行存在，或已包含在src/assets的递归扫描中
  ]
  

  如果打包时没把这个文件夹复制到dist目录，DEV环境部署后文件实际不存在，服务器返回的是错误页面内容，下载后就会显示损坏。

• 微前端架构下的资源共享问题
  如果是用Module Federation等微前端方案，子应用直接访问父应用的assets可能存在跨模块资源访问限制，需要在父应用中配置共享静态资源，或者通过父应用提供的接口来获取文件路径。

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