Angular 4应用部署Azure App Service遇运行时错误请求协助

我来帮你搞定这个部署问题！从你描述的情况和错误信息来看，主要是IIS的自定义错误配置限制了远程查看详细错误，同时我们也需要优化Angular SPA的IIS配置来确保正常运行。

第一步：更新你的 web.config 配置 #

首先，修改你的web.config，添加自定义错误开关和必要的静态资源MIME类型配置，同时修正路由重写的目标路径：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <!-- 允许远程查看详细错误信息，方便排查问题 -->
  <system.web>
    <customErrors mode="Off"/>
  </system.web>
  <system.webServer>
    <!-- 配置静态资源的MIME类型，避免字体、JSON等资源加载失败 -->
    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <!-- Angular SPA路由重写规则，确保所有非文件/目录请求指向index.html -->
    <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>

这里几个关键调整：

• 添加 <customErrors mode="Off"/>：解除远程查看详细错误的限制，这样你就能看到具体的错误原因，而不是通用提示页。
• 重写规则的目标改为 /index.html：原来的 / 在部分IIS配置下无法正确指向Angular的入口文件，明确指定index.html更可靠。
• 新增 staticContent 节点：确保Azure IIS能正确识别Angular的静态资源类型，避免字体、JSON文件等加载失败导致的隐性错误。

第二步：确认部署文件结构 #

确保你把 ng build --prod 生成的 dist 目录下的所有文件（不是dist目录本身）复制到Azure App Service的根目录（也就是site/wwwroot路径下）。比如：

• index.html 必须在根目录
• 各种打包后的JS、CSS、字体文件也都在根目录，没有嵌套在子文件夹里

第三步：重启Azure App Service #

修改配置和部署文件后，登录Azure Portal，找到你的App Service，点击顶部的「重启」按钮，确保配置和文件生效。

进一步排查 #

如果还是有问题，你可以：

• 在Azure Portal的App Service中，进入「日志」→「应用服务日志」，开启「详细错误日志」，然后查看具体的错误日志内容，定位问题根源。
• 检查Azure App Service的「配置」→「常规设置」，确保.NET版本设置为「.NET Core (跨平台)」或者「无」，因为Angular是静态站点，不需要.NET运行时。

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