Angular 17部署Azure App Service遇MIME类型错误求助

错误原因分析 #

这个错误的核心是：浏览器请求JS模块文件时，服务器返回text/html类型而非正确的application/javascript，大概率是URL重写规则误将静态JS文件转发到index.html，或是缺少ES模块对应的MIME配置，也可能和Angular 17默认的ES模块构建模式不匹配有关。

针对性解决方案 #

1. 修正Web.config的重写规则与MIME配置 #

更新Web.config，补充ES模块相关MIME映射，同时优化重写规则避免匹配静态文件：

<configuration>
  <system.webServer>
    <staticContent>
      <!-- 补充JS模块相关MIME类型，确保服务器返回正确类型 -->
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".mjs" mimeType="application/javascript" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </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" />
            <!-- 明确排除Angular构建生成的静态资源后缀，避免被重写 -->
            <add input="{URL}" pattern="\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 适配Angular 17的ES模块构建模式 #

Angular 17默认输出ES模块，需确保index.html中的script标签类型正确：
修改dist目录下index.html的script标签，将type="text/javascript"改为type="module"：

<script src="polyfills-FFHMD2TL.js" type="module"></script>
<script src="main-KHKTSFNE.js" type="module"></script>

若不想手动修改，可在angular.json的build配置中添加模块输出配置：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他原有配置不变
    "outputTarget": "es2020",
    "module": "esnext"
  }
}

3. 验证Azure部署路径 #

确保部署时将dist文件夹的根目录内容直接上传到Azure App Service的site/wwwroot目录，而非上传dist文件夹本身。路径错误会导致服务器找不到静态资源，触发重写规则返回index.html，进而引发MIME类型错误。

4. 清除Azure缓存并重启服务 #

部署完成后，在Azure门户的App Service控制台执行以下命令清除缓存：

dotnet dev-certs https --clean

或直接重启App Service，确保新配置生效。

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