Angular SSR执行prerender报错window is not defined的解决方法

问题根源 #

预渲染（prerender）过程在Node.js服务器环境执行，不存在浏览器专属的window对象，直接访问window.location.pathname会触发ReferenceError。

解决方案 #

通过Angular提供的平台检测工具，仅在浏览器环境下访问window对象，服务器端（预渲染时）使用默认值或替代逻辑。

步骤1：导入平台检测依赖 #

在AppModule.ts中导入相关工具：

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

步骤2：修改工厂函数 #

更新agmConfigFactory，注入PLATFORM_ID并判断运行环境：

export function agmConfigFactory(
  http: HttpClient, 
  config: LazyMapsAPILoaderConfigLiteral, 
  @Inject(PLATFORM_ID) platformId: object
) {
  let id = '';
  // 仅在浏览器环境下读取window路径
  if (isPlatformBrowser(platformId)) {
    id = window.location.pathname.replace(/\//g, "");
  }
  // 预渲染时可根据需求设置默认id，或通过服务器端请求对象获取路径（如需）

  return () => http.get<any>(`API`).pipe(
    map(response => {
      config.apiKey = response['mapkey'];
      console.log(response['mapkey']);
      return response;
    })
  ).toPromise();
}

步骤3：更新依赖注入 #

在providers数组的deps中添加PLATFORM_ID：

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: agmConfigFactory,
    deps: [HttpClient, LAZY_MAPS_API_CONFIG, PLATFORM_ID],
    multi: true
  }
],

可选：服务器端路径获取（如需） #

如果预渲染时需要获取请求路径，可注入Angular Universal的REQUEST token（需先配置Universal）：

import { REQUEST } from '@nguniversal/express-engine/tokens';

// 工厂函数中注入REQUEST
export function agmConfigFactory(
  http: HttpClient, 
  config: LazyMapsAPILoaderConfigLiteral, 
  @Inject(PLATFORM_ID) platformId: object,
  @Inject(REQUEST) request: any
) {
  let id = '';
  if (isPlatformBrowser(platformId)) {
    id = window.location.pathname.replace(/\//g, "");
  } else {
    // 服务器端从请求对象获取路径
    id = request.path.replace(/\//g, "");
  }

  // 后续逻辑不变
}

// 更新deps
deps: [HttpClient, LAZY_MAPS_API_CONFIG, PLATFORM_ID, REQUEST],

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