Angular 11升15后SSR出现TypeError: 无法读取cssRules属性

问题根源 #

这个错误是服务端渲染（SSR）环境下DOM模拟不完整导致的：Node.js环境没有浏览器的完整CSSOM API，而旧版本的第三方UI库（比如你依赖里的primeng@11.4.5）在SSR时会尝试访问styleSheets[].cssRules，但domino（你用的DOM模拟库）未提供该属性的实现，或者初始化不完整。

具体修复步骤 #

1. 升级不兼容的第三方依赖 #

你的依赖里大量库版本和Angular 15不匹配，尤其是UI组件库：

• primeng：Angular 15需要primeng 15.x版本，当前11.4.5版本完全不兼容，执行：

  npm install primeng@^15.4.0 primeicons@^6.0.1
  

• 其他旧版依赖：ng-multiselect-dropdown@0.3.4、angular-ng-autocomplete@2.0.5、ngx-image-cropper@4.0.1等版本过低，建议升级到对应Angular 15的兼容版本，或者替换为维护活跃的替代库。

2. 完善SSR的DOM模拟配置 #

修改server.ts文件，补充CSSOM相关的polyfill，确保domino模拟的document对象包含cssRules属性：

import * as domino from 'domino';
import { readFileSync } from 'fs';
import { join } from 'path';

// 读取浏览器端的index.html作为模板
const template = readFileSync(join(__dirname, './browser/index.html')).toString();
const win = domino.createWindow(template);

// 全局挂载模拟对象
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;

// 为styleSheet添加cssRules的空数组模拟，避免读取undefined
Object.defineProperty(win.document.styleSheets, 'cssRules', {
  get: () => [],
  configurable: true
});

// 或者针对单个style标签的sheet对象处理
win.document.createElement = (tagName: string) => {
  const elem = domino.createElement(tagName);
  if (tagName === 'style' && elem.sheet) {
    Object.defineProperty(elem.sheet, 'cssRules', {
      value: [],
      writable: true
    });
  }
  return elem;
};

3. 调整Angular SSR的CSS处理配置 #

在angular.json的server构建选项中禁用内联关键CSS，避免SSR时触发CSS解析逻辑：

"projects": {
  "your-project-name": {
    "architect": {
      "server": {
        "builder": "@nguniversal/builders:ssr",
        "options": {
          "outputPath": "dist/server",
          "main": "server.ts",
          "tsConfig": "tsconfig.server.json",
          "inlineCriticalCss": false
        }
      }
    }
  }
}

4. 强制清理依赖缓存 #

执行以下命令彻底清理旧依赖并重新安装：

rm -rf node_modules package-lock.json dist
npm install
npm run build:ssr

5. 组件级别的SSR兼容处理 #

如果某些组件仍存在SSR问题，在组件中使用isPlatformBrowser判断环境，仅在浏览器端执行相关DOM操作：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在浏览器端执行需要访问CSSOM的逻辑
    }
  }
}

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