部署Angular应用到Azure Web App后，如何修复“Failed to load resource 404”错误？

咱先理清你的问题：用ng build --prod生成dist文件夹，压缩上传到Azure后，网站只加载部分内容还一堆404，尤其是books路由相关的问题。这种情况在SPA部署到IIS环境（Azure App Service用的就是IIS）时特别常见，主要是客户端路由和服务器静态文件规则不匹配导致的，给你一步步排查解决：

1. 必须添加Web.config配置文件（核心解决路由404） #

Azure的IIS服务器默认会根据URL去寻找对应物理文件，但Angular是单页应用，所有路由都是客户端层面的——比如你直接访问https://tes42.azurewebsites.net/books，IIS会去找books文件夹或文件，找不到就返回404。这时候需要配置URL重写，让所有非文件/非目录的请求都转发到index.html，交给Angular路由器处理。

你需要在dist文件夹的根目录新建一个Web.config文件，内容如下：

<?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>
      <!-- 确保静态资源的MIME类型正确，避免加载失败 -->
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

添加完这个文件后，重新打包或者直接把包含Web.config的dist内容上传到Azure，覆盖原来的部署文件。

2. 检查Angular的base href配置 #

打开dist文件夹里的index.html，确认<base href="/">标签存在且正确。如果你的应用部署在网站根路径（比如你的https://tes42.azurewebsites.net/），这个配置是对的；如果之前打包时没指定，也可以重新用命令打包：

ng build --prod --base-href="/"

这个配置确保Angular加载静态资源（js、css、图片）时用正确的根路径，避免静态资源404。

3. 确认部署文件的目录结构 #

手动压缩上传时容易犯一个错误：把dist文件夹本身上传到Azure的site/wwwroot目录，导致实际路径变成wwwroot/dist/...，而不是把dist里的所有文件直接放到wwwroot下。你可以登录Azure Portal，进入你的App Service，打开“高级工具”→“Kudu”→“调试控制台”→“CMD”，查看site/wwwroot下的文件，应该直接能看到index.html、Web.config以及各种js/css文件夹，而不是被嵌套在dist文件夹里。

4. 验证Angular路由配置 #

最后确认你的books路由配置是否正确：

• 检查AppRoutingModule里是否正确定义了path: 'books'的路由，并且关联了对应的组件
• 确保路由没有拼写错误，比如大小写（Azure的URL是区分大小写的，所以Angular路由的path要和访问的URL一致）
• 如果控制台里的404是针对静态资源（比如某块js/css文件），那大概率是base href或者部署目录的问题；如果是路由路径的404，那就是Web.config没配置好。

按照上面的步骤调整后，应该就能解决大部分问题了。

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