Angular Universal仅执行SSR未加载客户端完整应用问题求助

SSR仅返回静态渲染的HTML结构，客户端Angular应用未完成水合（Hydration）挂载，导致交互功能失效。

• 移除全局domino对象挂载
  你当前直接将domino模拟的window、document等对象绑定到Node的global全局对象上，会导致Angular环境判断逻辑异常，误以为服务端是浏览器环境，触发水合不匹配跳过客户端挂载。全局polyfill不需要直接挂载到global，仅在需要兼容的第三方库中按需注入即可，或者优先用环境判断逻辑处理浏览器API调用。
• 核对静态资源路径配置
  确认angular.json中项目的browser构建输出路径是否和server.ts中定义的distFolder一致，你当前配置的路径是dist/demo1-app/browser，如果你的项目名不是demo1-app，会导致客户端js、css等静态资源加载404，无法完成应用挂载。
• 补充浏览器API调用的环境判断
  所有用到浏览器专属API（window、document、localStorage、DOM事件等）的业务代码、第三方库调用，都需要先判断运行环境，仅在浏览器端执行，示例代码：

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

@Component({
  // 组件配置
})
export class ExampleComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngOnInit() {
    // 仅在浏览器环境执行浏览器API相关逻辑
    if (isPlatformBrowser(this.platformId)) {
      console.log(window.innerWidth);
      localStorage.setItem('test', 'value');
    }
  }
}

• 检查客户端控制台报错
  打开浏览器开发者工具的控制台标签，排查是否有静态资源加载失败、运行时JS报错，大部分水合失败问题都可以通过客户端报错信息定位具体原因。

你可以删除server.ts中全局挂载domino对象的相关代码，修改后的核心逻辑如下：

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// 仅在有第三方库强制要求global localStorage时保留这两行，否则可以删除
import 'localstorage-polyfill';
global['localStorage'] = localStorage;

export function app(): express.Express {
  const server = express();
  // 这里路径要和angular.json中browser构建的outputPath一致
  const distFolder = join(process.cwd(), 'dist/你的实际项目名/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // 静态资源服务规则不变
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

// 后续启动逻辑保持不变即可

内容的提问来源于stack exchange，提问作者Tom Captain-Dad Pretorius