Angular部署Azure时assets/appconfig.production.json找不到问题求助

看起来你的Angular SPA部署到Azure后遇到了静态资源加载失败的问题，结合你的配置，我整理了几个排查和解决的方向：

1. 确认构建产物中是否包含目标文件 #

首先，本地执行ng build --prod（或ng build --configuration production，取决于你的Angular版本），然后检查生成的dist目录，确认dist/assets/appconfig.production.json是否存在。

• 如果这个文件不存在，说明Angular构建时没有正确复制它：
  • 检查文件实际位置是否在src/assets目录下（注意：是src/assets根目录还是子目录？如果是子目录，比如src/assets/config，那你的assets配置需要改成"src/assets/config"或者保持"src/assets"确保整个目录被复制）。
  • 打开angular.json，确认assets数组的配置是否正确，比如是否包含"src/assets"，并且该目录下确实存在appconfig.production.json。

2. 验证Azure部署的文件完整性 #

登录Azure Portal，进入你的App Service，打开高级工具（Kudu）（路径：https://<your-app-name>.scm.azurewebsites.net/），然后点击Debug console > CMD，导航到site/wwwroot/assets目录，查看是否存在appconfig.production.json。

• 如果文件不存在，说明部署过程中没有上传这个文件：
  • 检查你的部署脚本（比如Azure DevOps Pipeline、GitHub Actions）是否包含了dist/assets目录下的所有文件；
  • 如果是用VS Code的Azure扩展部署，确保部署时选择了完整的dist目录，没有排除assets文件夹。

3. 检查请求路径与文件名大小写 #

如果你的App Service是部署在Linux环境下，Azure的文件系统是大小写敏感的。确认：

• 代码中请求该文件的路径（比如HttpClient.get('/assets/appconfig.production.json')）与实际文件名的大小写完全一致；
• 本地src/assets下的文件名和部署到Azure的文件名大小写匹配（比如不要本地是AppConfig.Production.json，代码里却请求小写的）。

4. 确认Web.config的静态内容配置有效性 #

你的web.config中已经添加了.json的MIME类型映射，这部分是正确的，但可以额外检查：

• 确保Azure App Service已经启用了URL Rewrite模块（对于Windows App Service，默认是启用的；如果是Linux，可能需要确认你的部署方式是否支持web.config，比如用ASP.NET Core容器的话是支持的，纯静态站点的话可能需要调整配置）；
• 可以尝试修正.woff2的MIME类型（你之前的配置写错了，这虽不影响json文件，但更规范），调整后的静态内容部分如下：

  <staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
  </staticContent>
  

5. 检查Angular代码中的请求逻辑 #

确认你在代码中请求该配置文件的方式是否正确：

• 避免使用硬编码的绝对域名路径（比如https://your-domain/assets/...），除非你确定域名不会变化；
• 推荐使用根相对路径或相对路径，比如：

  import { HttpClient } from '@angular/common/http';
  
  constructor(private http: HttpClient) {}
  
  loadConfig() {
    return this.http.get('/assets/appconfig.production.json').toPromise();
  }
  

  （根相对路径/assets/...会直接从站点根目录开始查找，适配SPA的路由重写逻辑）

按照以上步骤逐一排查，应该能定位到问题所在。

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