Angular Universal SSR构建失败：生成index.html时出现'this.debug is not a function'错误

我之前在做Angular Universal项目时也碰到过几乎一模一样的问题，浏览器构建完全正常，一到SSR构建就卡在这里。结合你描述的情况——自己代码里完全没调用过this.debug()，这个错误肯定是某个第三方依赖在服务端渲染时，默认认为window.debug是个可调用的函数，但我们用domino模拟的浏览器环境里并没有这个方法，所以才抛出了错误。

下面给你几个亲测有效的解决思路：

1. 给模拟的window对象添加空的debug函数 #

这是最快的临时修复方案，直接在你的server.ts里给domino创建的window对象补上这个方法就行，第三方库调用时就不会报错了：

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(process.cwd(), 'dist/browser/index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
// 新增这行，给window添加空的debug方法
win.debug = () => {};

如果有些库用的是function形式的调用，也可以写成win.debug = function() {};，效果是一样的。

2. 排查并隔离触发错误的第三方依赖 #

如果临时修复后你想找到根源，可以用排除法定位问题库：

• 逐步注释掉package.json里的第三方依赖（先从非核心的库开始），每次注释后重新执行SSR构建，直到错误消失，就能锁定是哪个库搞的鬼
• 找到问题库后，用Angular的isPlatformBrowser工具，把这个库的初始化或使用逻辑限制在浏览器环境下：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngOnInit() {
    // 只在浏览器环境下初始化这个第三方库
    if (isPlatformBrowser(this.platformId)) {
      // 这里写问题库的初始化代码
    }
  }
  

  这样服务端渲染时就不会执行这个库的代码，从根源上避免错误。

3. 检查Universal版本兼容性 #

有时候版本不匹配也会导致各种奇怪的环境模拟问题，你可以确认下@nguniversal/express-engine的版本和你的@angular/cli、@angular/core版本是否兼容——尽量保持大版本一致，比如Angular 15就用对应版本的Universal包，不要跨大版本混用。

我当时是先用第一个方法快速解决了构建问题，之后慢慢排查找到了那个依赖地图的第三方库，用第二个方法做了隔离，现在项目运行完全正常。

内容来源于stack exchange