如何解决Angular与Asp.Net同部署Azure App Service报错问题

问题现象 #

• 部署目标：将作为UI层的Angular项目与ASP.NET项目部署到同一个Azure App Service
• 异常表现：
  • 已将站点物理路径配置指向Angular项目目录，网站仍无法正常显示Angular内容
  • 单独部署Angular应用时站点可正常运行
  • 向同一App Service发布ASP.NET应用后，站点直接返回报错
  • 报错截图：
    

根因说明 #

问题核心是IIS配置继承逻辑冲突：

• 发布ASP.NET项目时，会自动在部署目录生成根级web.config，将所有进入该路径的请求全部转发给dotnet运行时处理
• 即使手动修改站点物理路径指向Angular目录，只要发布ASP.NET项目时覆盖了站点根目录配置，或者上层目录的web.config规则被子路径继承，Angular的静态文件请求就会被ASP.NET运行时拦截，找不到对应接口时直接返回错误，和截图表现一致。

解决方案 #

按推荐优先级排序，可根据自身项目场景选择：

方案1：将Angular编译产物托管到ASP.NET项目（生产环境首选，稳定性最高） #

不需要额外配置Azure虚拟路径，直接从项目层面整合两个应用：

1. 打开Angular项目根目录的angular.json，找到outputPath配置项，将编译输出路径修改为ASP.NET项目的wwwroot目录，路径按实际项目层级调整，示例：../YourAspNetProjectName/wwwroot
2. 确认ASP.NET项目已开启静态文件中间件：
   • .NET 6+ 项目在Program.cs中，在路由、端点配置代码之前添加：

     app.UseDefaultFiles();
     app.UseStaticFiles();
     

   • .NET Core 3.1/5 项目在Startup.cs的Configure方法中添加上述代码
3. 配置Angular路由回退规则，避免页面刷新出现404：在Program.cs中添加兜底路由，所有不匹配后端接口的请求统一返回Angular入口文件：

   app.MapFallbackToFile("/index.html");
   

4. 正常发布ASP.NET项目到Azure App Service即可，不需要修改站点默认物理路径，Angular静态资源会随ASP.NET项目一同发布，请求会被静态文件中间件正常处理。

方案2：虚拟目录分离部署（无需改动项目代码） #

如果不想修改项目编译配置，通过Azure的虚拟目录能力做路径隔离，禁止直接修改站点根路径物理路径混放两个项目的文件：

1. 进入Azure App Service的「配置」-「路径映射」页面
2. 若需要根路径直接展示Angular应用，接口请求走ASP.NET：
   • 保留根路径/的物理路径为site/wwwroot/angular，用于存放Angular编译后的所有文件
   • 新增一条虚拟应用记录，虚拟路径填/api，物理路径填site/wwwroot/api，类型勾选「应用程序」，用于存放ASP.NET发布产物
3. 解决配置继承问题：在Angular部署目录（site/wwwroot/angular）下添加专属web.config，清空从上层继承的IIS规则，同时配置Angular路由重写，内容如下：

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
     <system.webServer>
       <clear/>
       <staticContent>
         <mimeMap fileExtension=".json" mimeType="application/json" />
         <mimeMap fileExtension=".woff" mimeType="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" />
             </conditions>
             <action type="Rewrite" url="/index.html" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>
   

4. 分别上传两个项目的编译产物到对应目录，注意给ASP.NET项目的所有接口路由统一添加/api前缀，避免和Angular路由冲突。

部署后校验 #

• 发布完成后重启一次Azure App Service，清理IIS缓存的旧配置
• 若仍报错，进入App Service的「高级工具」-「Kudu」-「调试控制台」，检查对应目录的文件是否上传完整，确认web.config没有被发布流程覆盖
• 发布ASP.NET项目时不要勾选「删除目标位置的所有现有文件」，避免清空同站点下的Angular文件

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