Angular Universal中ReferenceError: window is not defined问题求助

这个问题很典型——你在使用Angular Universal（SSR）时，print-js库直接访问了浏览器特有的window对象，而Node.js服务器环境里根本没有这个对象，所以才会抛出ReferenceError。下面给你几个靠谱的解决方法：

方法1：用Angular的平台判断隔离浏览器端代码 #

Angular提供了isPlatformBrowser工具，可以帮你区分当前代码是在浏览器还是服务器端运行。我们可以用它把依赖window/document的打印逻辑包裹起来，确保只有在浏览器环境才执行：

首先在组件里导入必要的工具：

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

然后修改你的打印方法，加上平台判断：

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

printContent() {
  // 只在浏览器环境执行这段代码
  if (isPlatformBrowser(this.platformId)) {
    const contentToConvert = document.getElementById('content');
    this.selectedFunctionCode = htmlToImage.toPng;
    
    this.selectedFunctionCode(contentToConvert)
      .then((dataUrl) => { 
        // 动态导入print-js，确保只在浏览器加载
        import('print-js').then(printModule => {
          printModule.default(dataUrl, 'image');
        });
      })
      .catch((error) => { console.error('oops, something went wrong!', error); });
  }
}

这样服务器端渲染时会直接跳过这段代码，不会触发window相关的错误。

方法2：配置Angular Universal排除浏览器端库 #

如果print-js完全不需要在服务器端运行，你可以在server.ts里配置，告诉Webpack不要把它打包进服务器代码：

找到server.ts里的AppServerModule配置，添加一个提供者来模拟空实现：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    // 为print-js提供空实现，避免服务器端报错
    {
      provide: 'PRINT_JS',
      useValue: typeof window !== 'undefined' ? require('print-js') : { default: () => {} }
    }
  ]
})
export class AppServerModule {}

之后在组件里通过依赖注入使用print-js即可，不过这种方法相对麻烦，方法1更直接高效。

错误根源说明 #

Angular Universal在Node.js服务器上渲染页面时，不存在浏览器特有的window、document等对象。print-js是纯浏览器端库，代码中直接引用了window，所以服务器端打包执行时就会触发报错。核心解决思路就是把浏览器专属逻辑和服务器端渲染逻辑彻底隔离开。

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