Azure App Service无法加载Angular 5应用的排查求助

我之前也碰到过一模一样的坑！咱们一步步排查可能的问题：

1. 确认FTP上传的路径是否正确 #

Azure App Service的Web应用根目录是site/wwwroot，很多人容易犯的错误是把整个dist文件夹上传到wwwroot里，导致实际的静态文件都在wwwroot/dist下，而App Service默认会加载wwwroot根目录的index.html。

你需要把dist文件夹里的所有文件和子文件夹（比如index.html、assets、各种js/css文件）直接上传到wwwroot的根目录，而不是把dist文件夹本身传进去。

2. 检查web.config的位置和内容 #

• 位置：web.config必须放在wwwroot的根目录，不能放在dist文件夹里。
• 内容：你的web.config缺少了静态资源的MIME映射配置，可能导致部分资源无法加载，而且Rewrite的URL可以调整为./index.html更稳妥。试试用这个完整的配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <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>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

3. 验证Angular构建参数 #

确保你构建的时候用了正确的参数，比如生产环境构建时加上--base-href /（虽然默认是根路径，但显式指定可以避免潜在问题）：

ng build --prod --base-href /

另外，检查index.html里的<base href="/">是否正确，根目录部署的话这个配置是对的。

4. 清除缓存并重启App Service #

• 浏览器缓存：按Ctrl+F5强制刷新页面，避免浏览器缓存了旧的默认着陆页。
• Azure缓存：在Azure Portal的App Service中，点击“重启”按钮；或者在“配置”->“应用程序设置”里添加WEBSITE_DYNAMIC_CACHE并设置为0，禁用静态内容缓存。

5. 用Kudu工具排查文件结构 #

打开Azure App Service的“高级工具”，进入Kudu控制台，导航到site/wwwroot目录，确认：

• index.html确实在根目录下
• 所有dist里的文件都正确上传到这里
• 尝试在Kudu里直接访问index.html（通过“Debug console”->“CMD”，然后点击index.html的链接），看是否能正常加载。

6. 查看日志排查错误 #

在Azure Portal的App Service中，打开“日志流”，查看是否有文件访问错误或者服务器报错；也可以在Kudu的LogFiles目录下查看详细的日志信息，定位具体问题。

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