ASP.NET Core集成Angular项目的默认页面路由运行原理咨询

1. 中间件执行顺序基础 #

ASP.NET Core的中间件是按Configure方法中注册的顺序依次执行的，你提供的代码中路由匹配逻辑在前，SPA处理逻辑在后：

• 收到请求后首先会执行UseEndpoints中的路由匹配规则，尝试匹配你定义的MVC/API路由{controller}/{action=Index}/{id?}
• 只有当请求没有匹配到任何存在的Controller/Action时，才会落到后续的UseSpa中间件处理
• 默认访问根路径/时，如果项目中没有创建默认的HomeController与Index Action，路由匹配就会失败，自动交给SPA中间件处理

2. SPA中间件返回index.html的逻辑 #

UseSpa是ASP.NET Core专门为单页应用提供的托管中间件，处理逻辑区分开发和生产环境：

• 开发环境：你配置了spa.UseAngularCliServer(npmScript: "start")，项目启动时会自动拉起Angular CLI的开发服务器，SPA中间件会把所有接管的请求代理到Angular开发服务器，Angular dev server会直接返回ClientApp/src/index.html作为入口页面
• 生产环境：项目发布时会自动执行Angular的打包命令，把ClientApp下的所有代码编译、压缩后输出到wwwroot目录，SPA中间件会直接读取wwwroot下打包好的index.html返回给浏览器
• 配置项spa.Options.SourcePath = "ClientApp"就是用来指定Angular项目的根目录，供开发环境下的Angular CLI调用、生产环境下的打包逻辑读取使用

3. Angular组件的渲染流程 #

返回的index.html中默认包含<app-root></app-root>占位标签，后续流程如下：

1. 浏览器加载index.html中引入的Angular编译后产物（runtime.js、polyfills.js、main.js等）
2. main.ts作为Angular项目的启动入口，会执行引导逻辑启动AppModule
3. Angular框架启动完成后，会把根组件AppComponent的内容渲染到index.html的<app-root>标签位置，完成整个页面的加载
4. 后续的页面跳转都由Angular前端路由接管，不会再触发后端路由请求

整合MVC、带Areas的Angular、API的注意提示 #

• 调整路由注册顺序，优先级按照API路由 > Areas下的MVC/Angular路由 > 普通MVC路由 > SPA中间件配置，避免SPA中间件拦截本该走MVC/API的请求
• 如果需要指定只有特定前缀的请求才走Angular（比如/admin/*对应Areas下的Angular应用），可以使用MapWhen方法对请求路径做判断，仅匹配前缀的未命中请求才交给SPA中间件处理，实现多SPA共存或者SPA与MVC共存

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