.NET 7.0 Angular应用部署IIS时加载.js文件出现503错误

问题1：静态资源（.js/.css/.ico）返回503错误 #

核心原因是Angular默认构建的基础路径（base href）为根路径/，导致脚本请求直接指向http://localhost/xxx.js，但实际文件存放在http://localhost/MRP/目录下。解决步骤：

• 构建Angular项目时指定base-href参数：

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

  重新构建后，index.html中的脚本引用会自动带上/MRP/前缀，示例：

  <script src="/MRP/runtime.js" type="module"></script>
  

  此时请求会指向正确路径http://localhost/MRP/runtime.js，503错误即可消除。

问题2：ClientApp目录下所有请求返回index.html #

这是SPA应用的典型问题，需通过IIS URL重写规则区分静态资源和路由请求：

1. 确认IIS已安装URL重写模块（未安装的话，从IIS管理器的「模块」中添加）。
2. 在Angular构建输出目录（通常是ClientApp/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" />
               <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> <!-- 若项目有API路由需排除，可删除该行 -->
             </conditions>
             <action type="Rewrite" url="/MRP/ClientApp/index.html" /> <!-- 替换为你的实际index.html路径 -->
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

   该规则会跳过已存在的文件/目录请求，仅将路由请求转发到index.html，避免静态资源被错误重写。
3. 检查IIS中MRP应用的物理路径是否指向包含ClientApp的正确目录，同时确保IIS_IUSRS用户对该目录有读取权限。

若问题仍存在，需提供的诊断信息 #

• Angular项目angular.json文件中build配置下的baseHref字段内容。
• IIS中MRP应用的物理路径设置详情。
• ClientApp目录下已创建的web.config完整内容。

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