Nrwl Nx15+Angular15集成SSR与PWA异常问题求助

一、服务器部署：响应超时、SSR渲染不稳定 #

问题根源及修复步骤： #

• PWA Service Worker 缓存冲突
  Angular PWA的Service Worker会优先返回缓存的客户端页面，导致SSR内容偶尔不生效，同时缓存策略可能拖慢初始请求。
  修复：

  1. 在server.ts的请求处理中添加禁用缓存的响应头：

     server.get('*', (req, res) => {
       // 阻止Service Worker缓存SSR初始响应
       res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
       res.setHeader('Pragma', 'no-cache');
       res.setHeader('Expires', '0');
       res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
     });
     

  2. 调整ngsw-config.json的navigationUrls，避免缓存动态SSR路径：

     {
       "navigationUrls": [
         "/**",
         "!/**/*.{js,css,html}",
         "!/**/*?*"
       ]
     }
     

• 服务器进程或资源阻塞
  未正确管理SSR进程、资源占用过高会导致请求超时。
  修复：

  1. 用pm2或systemd托管SSR进程，配置自动重启：

     pm2 start dist/apps/your-app/server/main.js --name "ssr-app"
     

  2. 查看进程日志（如pm2 logs ssr-app），排查未捕获的异步错误。

• 第三方库SSR兼容性问题
  部分前端库在Node.js环境下无法正常运行，导致渲染阻塞。
  修复：

  1. 用domino模拟浏览器DOM环境（针对依赖DOM的库）：

     import * as domino from 'domino';
     const fs = require('fs');
     const path = require('path');
     const template = fs.readFileSync(path.join(__dirname, '..', 'browser', 'index.html')).toString();
     const win = domino.createWindow(template);
     global['window'] = win;
     global['document'] = win.document;
     

  2. 排查app.server.module.ts中的导入模块，替换或移除不兼容SSR的库。

二、本地开发：ssr-dev-server 请求Pending #

问题根源及修复步骤： #

• Nx 构建路径配置错误
  Nx monorepo的构建路径可能与Angular Universal默认路径不匹配，导致服务器找不到bundle。
  修复：
  检查angular.json中应用的构建配置，确保browser和server输出路径正确：

  "architect": {
    "build": {
      "options": {
        "outputPath": "dist/apps/your-app/browser"
      }
    },
    "server": {
      "options": {
        "outputPath": "dist/apps/your-app/server"
      }
    },
    "ssr-dev-server": {
      "builder": "@nguniversal/builders:ssr-dev-server",
      "options": {
        "browserTarget": "your-app:build",
        "serverTarget": "your-app:server"
      }
    }
  }
  

• 端口占用或代理冲突
  本地端口被占用，或Nx代理规则导致请求循环。
  修复：

  1. 修改ssr-dev-server的端口配置：

     "ssr-dev-server": {
       "options": {
         "port": 4201
       }
     }
     

  2. 检查proxy.conf.json或nx.json中的代理规则，移除可能导致循环的配置。

• Angular 15 SSR 初始化问题
  Angular 15对Universal的初始化逻辑有调整，未正确配置会导致请求挂起。
  修复：

  1. 确保app.server.module.ts正确导入ServerModule：

     import { NgModule } from '@angular/core';
     import { ServerModule } from '@angular/platform-server';
     import { AppModule } from './app.module';
     import { AppComponent } from './app.component';
     
     @NgModule({
       imports: [AppModule, ServerModule],
       bootstrap: [AppComponent],
     })
     export class AppServerModule {}
     

  2. 单独构建server bundle排查错误：

     nx run your-app:server:development
     

内容的提问来源于stack exchange，提问作者Grzegorz Kniażuk