Angular 15 Universal报错ReferenceError: window is not defined，求替代方案

当你的Angular项目转SSR时，遇到依赖库调用window等浏览器专属API的问题，除了逐个组件加isPlatformBrowser检查，还有这些更高效的方案：

1. 用APP_INITIALIZER延迟加载依赖库 #

在应用初始化阶段，先判断当前环境是否为浏览器，再加载依赖库，避免服务器端执行相关代码。

// app.module.ts
import { NgModule, APP_INITIALIZER, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

export function loadBrowserDepsFactory(platformId: object) {
  return () => {
    if (isPlatformBrowser(platformId)) {
      // 动态加载依赖库，比如某个用到window的第三方库
      return import('your-browser-only-lib').then(() => {
        // 库加载完成后的初始化逻辑（如果需要）
      });
    }
    return Promise.resolve();
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadBrowserDepsFactory,
      deps: [PLATFORM_ID],
      multi: true
    }
  ]
})
export class AppModule {}

2. 服务器端模拟浏览器全局对象 #

如果依赖库必须在服务器端也被加载，可以在server.ts中用jsdom模拟window、document等对象，让库以为运行在浏览器环境。

// server.ts
import { JSDOM } from 'jsdom';

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global['window'] = dom.window;
global['document'] = dom.window.document;
global['navigator'] = dom.window.navigator;
// 根据库的需求，可能还需要模拟其他对象，比如localStorage
global['localStorage'] = {
  getItem: (key: string) => '',
  setItem: (key: string, value: string) => {},
  removeItem: (key: string) => {}
};

注意：这种方法并不适用于所有库，部分复杂库可能依赖浏览器的真实API实现，模拟后仍会报错，需要测试验证。

3. 组件/服务内动态导入依赖库 #

在需要使用依赖库的组件或服务中，仅在浏览器环境下动态导入，服务器端跳过导入逻辑。

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

@Component({
  selector: 'app-your-component',
  template: `<div></div>`
})
export class YourComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      import('your-browser-only-lib').then((lib) => {
        // 使用库的功能
        lib.someFunction();
      });
    }
  }
}

4. 利用打包工具做条件编译 #

如果使用Webpack或Angular CLI的自定义配置，可以针对服务器端和浏览器端打包不同的代码分支：

• 为浏览器和服务器分别配置入口文件，在服务器入口中排除依赖浏览器API的库
• 使用Webpack的NormalModuleReplacementPlugin，将浏览器专属库替换为空实现或服务端兼容版本

比如Webpack配置示例：

// webpack.server.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /your-browser-only-lib/,
      './server-compatible-replacement.js'
    )
  ]
};

其中server-compatible-replacement.js是一个空实现或服务端适配版本，比如：

// server-compatible-replacement.js
export function someFunction() {
  // 服务器端空实现或降级逻辑
}

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