Angular SSR中使用DOCUMENT注入令牌引发NotYetImplemented错误

问题原因 #

在Angular SSR的服务端渲染阶段，DOCUMENT注入的是Angular基于Domino库模拟的文档对象，而非浏览器原生的document。这个模拟对象并未实现cookie属性，直接访问会抛出NotYetImplemented错误——你的try/catch逻辑只处理了document未定义的情况，但实际错误是访问未实现的属性导致的，所以无法被捕获。

解决方案 #

通过环境判断，仅在浏览器环境下访问cookie属性，服务端直接返回null即可。具体修改如下：

修改DocumentService代码，引入PLATFORM_ID和isPlatformBrowser来区分运行环境：

import { Inject, Injectable, PLATFORM_ID } from "@angular/core";
import { DOCUMENT, isPlatformBrowser } from "@angular/common";

@Injectable({
  providedIn: "root",
})
export class DocumentService {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  get myCookie() {
    // 仅在浏览器环境中处理cookie逻辑
    if (!isPlatformBrowser(this.platformId)) {
      return null;
    }

    let cookies;
    try {
      cookies = this.document?.cookie;
    } catch (e) {
      console.error('Cookie error', e);
      return null;
    }

    const cookie = cookies
      .split('; ')
      .map((c) => c.split('='))
      .find(([name]) => name === 'my-cookie');

    return cookie?.[1] ?? null;
  }
}

补充说明 #

Angular SSR的服务端模拟文档对象仅实现了浏览器document的基础特性，像cookie、localStorage这类与浏览器上下文强绑定的API都未实现。所有涉及这类API的逻辑，都必须通过isPlatformBrowser做环境隔离，避免在服务端渲染阶段执行。

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