Angular 10 SSR搭配.NET Core 3.1部署Azure App Service问题咨询

1. Angular SSR的正常运行逻辑说明 #

你描述的逻辑是完全正确的：

• 首次请求时，服务端Node环境执行Angular应用代码，生成带完整渲染内容的HTML返回，此时<app-root>标签内包含完整的预渲染静态DOM，用户可快速看到首屏内容
• 浏览器加载完Angular客户端脚本后，会自动完成水合（hydration）流程，接管页面交互能力，后续路由跳转、操作都走CSR模式，不会再发起全页面请求。

2. 部署后<app-root>标签为空是否正常 #

不属于正常情况。只要SSR服务运行正常，不管部署在什么环境，首次请求返回的HTML中<app-root>都应该包含服务端预渲染的内容，为空说明服务端渲染流程完全没有执行成功。

3. Azure App Service上出现该问题的常见原因 #

• Node.js运行环境配置异常：如果你用的是.NET Core运行栈的Azure App Service，默认不会启用Node.js运行时，需要手动开启Node.js支持，且要保证线上Node.js版本和本地编译SSR产物的版本一致，避免兼容性问题导致server/main.js执行失败
• 启动路径配置错误：确认Azure App Service的启动命令中server/main.js的路径和部署后的实际文件路径一致，Azure的部署根目录结构和本地不同，很容易出现路径写错导致SSR服务没有正常启动的情况
• 服务端渲染执行报错：本地正常但线上报错是SSR部署的常见问题，大多是因为代码中直接使用了浏览器专属API（如window、document、localStorage等），服务端环境没有这些API，会导致渲染流程中断，直接返回空的HTML骨架。你可以通过Azure App Service的应用日志查看Node.js运行时报错定位问题
• 路由转发规则冲突：如果同时配置了.NET Core的路由和静态文件服务，可能会出现请求没有转发到Node.js的SSR服务，而是直接返回了客户端打包生成的空index.html文件，导致<app-root>为空，需要调整规则优先级，保证页面请求优先交给SSR服务处理
• 部署产物不完整：部署时遗漏了SSR所需的依赖文件，比如dist目录下的客户端打包文件、SSR运行所需的配置文件等，会导致服务端渲染时找不到对应资源，渲染失败返回空内容。

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