Angular 13部署至Azure后Assets中JSON文件加载失败（404错误）

针对你遇到的Angular生产构建部署Azure后，assets目录下JSON文件404（服务器已存在文件）的问题，可以按以下步骤排查解决：

• 确认Angular构建配置中的资源路径
  打开项目根目录的angular.json，检查projects -> [你的项目名] -> architect -> build -> options -> assets配置，确保assets目录及JSON文件被包含在构建输出中。示例正确配置：

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

  执行ng build --configuration=production后，务必检查dist文件夹内是否存在assets目录及对应的JSON文件，确认构建阶段已正确复制资源。

• 配置Azure静态资源的MIME类型与路由
  根据Azure托管类型调整配置：

  • 若使用Azure静态Web Apps：在项目根目录添加staticwebapp.config.json，指定JSON文件的MIME类型并配置Angular路由 fallback：

    {
      "routes": [
        {
          "route": "/*",
          "serve": "/index.html",
          "statusCode": 200
        }
      ],
      "mimeTypes": {
        ".json": "application/json"
      }
    }
    

  • 若使用Azure存储账户静态网站：在dist目录添加web.config（IIS配置文件），配置MIME类型和路由重写：

    <configuration>
      <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
          <rules>
            <rule name="Angular Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

  配置完成后重新部署，确保配置文件被同步到Azure服务器。

• 检查路径大小写一致性
  Azure存储账户对文件路径大小写敏感，确保代码中请求JSON文件的路径（如assets/data.json）与Azure服务器上的实际文件路径大小写完全匹配，避免因大小写差异导致404。

• 清除缓存并重试
  强制刷新浏览器（Ctrl+F5）清除本地缓存，或者使用隐私模式访问页面，排除缓存导致的路径错误。同时确认部署时dist文件夹的所有内容已完全覆盖Azure上的旧文件，避免资源未更新。

• 验证Azure资源权限
  登录Azure门户，检查存储账户的容器访问级别，确保包含assets文件的容器设置为“Blob”或“容器”级别的公开访问，避免因权限不足导致无法访问文件。

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