Angular库服务注入DOCUMENT支持SSR：document注入位置的疑问

你当前的问题出在手动实例化服务并直接传入全局document——在SSR环境中这个全局对象不存在，所以会抛出引用错误。要解决这个问题，你需要让Angular的依赖注入(DI)系统来处理DOCUMENT的注入，而不是手动传递。

正确的模块配置方式 #

使用useFactory替代直接new服务，让DI自动注入DOCUMENT：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MyService, MyConfig } from './my-service';

@NgModule({})
export class MyModule {
  static forRoot(config: MyConfig): ModuleWithProviders<MyModule> {
    return {
      ngModule: MyModule,
      providers: [
        {
          provide: MyService,
          // 工厂函数：由DI注入DOCUMENT，再创建服务实例
          useFactory: (document: Document) => new MyService(config, document),
          // 声明工厂函数的依赖，DI会按顺序注入对应实例
          deps: [DOCUMENT]
        }
      ]
    };
  }
}

为什么这样可行？ #

• Angular的DOCUMENT注入令牌会根据运行环境自动适配：在浏览器中注入真实的document对象，在SSR环境（如Angular Universal）中注入Angular提供的模拟Document，避免了直接引用全局对象的错误。
• 通过useFactory和deps，你把服务实例化的控制权交给了DI系统，它会正确处理跨环境的依赖注入。

进阶：用注入令牌管理配置（可选） #

如果希望配置也通过DI传递（更符合Angular最佳实践），可以定义一个配置注入令牌：

import { InjectionToken } from '@angular/core';

// 定义配置的注入令牌
export const MY_SERVICE_CONFIG = new InjectionToken<MyConfig>('MyServiceConfig');

然后修改模块和服务：

模块代码：

static forRoot(config: MyConfig): ModuleWithProviders<MyModule> {
  return {
    ngModule: MyModule,
    providers: [
      // 提供配置实例
      { provide: MY_SERVICE_CONFIG, useValue: config },
      {
        provide: MyService,
        useFactory: (config: MyConfig, document: Document) => new MyService(config, document),
        deps: [MY_SERVICE_CONFIG, DOCUMENT]
      }
    ]
  };
}

服务代码：

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MY_SERVICE_CONFIG } from './my-module';

class MyService {
  private config: MyConfig;

  constructor(
    @Inject(MY_SERVICE_CONFIG) config: MyConfig,
    @Inject(DOCUMENT) private document: Document,
  ) {
    this.config = config;
  }
}

这种方式让配置更灵活，也统一了DI注入的模式。

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