Angular Universal SSR部署Azure Pipeline后页面源码未渲染HTML问题求助

核心问题说明 #

你当前站点实际运行的是Angular客户端静态版本，服务端未执行SSR渲染逻辑，因此页面源码仅返回未填充内容的基础HTML。以下是需要调整的具体配置： #

1. 修正流水线任务配置 #

• 启用Copy server.js to the root任务：Angular 16+版本SSR构建默认入口为main.js，该任务将SSR启动入口复制到产物根目录，方便服务端调用
• 保持Delete the dist/server.js任务为禁用状态，无需删除server目录下的构建产物
• 修改dotnet Publish任务的输出路径，将原路径$(build.artifactstagingdirectory)/taste/browser改为$(build.artifactstagingdirectory)/taste，避免dotnet发布产物覆盖Angular客户端静态资源
• 新增复制任务，将TasteUI目录下的package.json和package-lock.json复制到$(Build.ArtifactStagingDirectory)/taste目录，后续服务端安装SSR运行依赖需要用到

2. 配置服务端运行环境 #

如果你使用ASP.NET Core集成SSR方案： #

• 确保后端代码中已正确注册SSR中间件，配置如下示例：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "TasteUI";
    spa.UseSpaPrerendering(options =>
    {
        options.BootModulePath = $"{spa.Options.SourcePath}/dist/taste/server/main.js";
        options.BootModuleBuilder = env.IsDevelopment() ? new AngularCliBuilder(npmScript: "build:ssr") : null;
        options.ExcludeUrls = new[] { "/sockjs-node" };
    });
});

• 确认中间件配置的BootModulePath路径和你的构建产物路径完全匹配

如果你使用独立Node服务部署方案： #

• 在Azure App Service应用配置中，将启动命令设置为node main.js
• 确保应用服务的Node.js运行时版本和你本地开发环境版本一致

3. 修复Angular SSR代码兼容问题 #

• 检查项目中所有调用浏览器专属API（window、document、localStorage等）的代码，使用isPlatformServer做环境判断，服务端渲染阶段跳过执行：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  if (isPlatformServer(this.platformId)) {
    // 服务端环境不执行浏览器API相关逻辑
    return;
  }
  // 仅客户端执行的逻辑
  window.scrollTo(0,0);
}

• 确认angular.json中SSR相关配置已开启，server构建目标配置正确

4. 部署后验证 #

部署完成后直接右键页面查看源码，若能看到页面业务内容对应的HTML标签而非仅空的<app-root></app-root>，说明SSR已生效。

内容的提问来源于stack exchange，提问作者Adrian De Battista