Angular Universal中Node向Angular服务端传值：令牌使用疑问

当然不是只能用字符串令牌！你遇到的StaticInjectorError是因为使用InjectionToken或类型令牌时的配置细节没处理好，下面给你梳理正确的实现方式：

一、推荐方案：使用共享的InjectionToken（类型安全） #

这是Angular官方推荐的方式，比字符串令牌更安全，能避免类型错误。关键是要让服务端和客户端使用同一个InjectionToken实例，而不是各自定义。

1. 创建共享的令牌文件 #

在你的Angular项目中新建一个共享文件（比如src/app/core/tokens.ts），定义InjectionToken：

import { InjectionToken } from '@angular/core';
import { TheType } from '../path-to-your-type-definition';

// 定义一个全局唯一的注入令牌
export const THE_VALUE_TOKEN = new InjectionToken<TheType>('theKey');

2. 在服务端server.ts中配置提供者 #

导入刚才的令牌，并用它提供Node.js获取的值：

import { THE_VALUE_TOKEN } from './src/app/core/tokens';

const theValue: TheType = nodeLogicToRetrieveValue();
app.engine('html', (_, options, callback) => {
  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      // 使用共享令牌提供值，这里用useValue更直接（无依赖时）
      { provide: THE_VALUE_TOKEN, useValue: theValue }
    ]
  });
  engine(_, <any>options, callback);
});

3. 在组件中注入令牌 #

在组件里通过@Inject()装饰器注入这个令牌，或者用Injector.get()获取：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { THE_VALUE_TOKEN } from './core/tokens';
import { TheType } from './path-to-your-type-definition';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  theValue: TheType;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    // 直接注入令牌对应的value
    @Inject(THE_VALUE_TOKEN) private serverProvidedValue: TheType
  ) {
    if (isPlatformServer(this.platformId)) {
      this.theValue = this.serverProvidedValue;
      // 或者用Injector的方式：this.theValue = this.injector.get(THE_VALUE_TOKEN);
    }
  }
}

二、为什么你之前用InjectionToken会报错？ #

最常见的原因是：

• 你在服务端和客户端各自定义了一个new InjectionToken('theKey')，这会导致两个不同的实例，Angular注入器无法匹配
• 组件中注入时没有使用@Inject()装饰器（直接用constructor(private token: InjectionToken)是不行的，必须显式用@Inject()）

三、用类型作为令牌的情况（仅限类类型） #

如果TheType是一个类（而不是接口），你也可以直接用类作为令牌：

1. 服务端配置 #

// 假设TheType是一个类
{ provide: TheType, useValue: theValue } // theValue必须是TheType的实例

2. 组件注入 #

constructor(
  @Inject(PLATFORM_ID) private platformId: Object,
  private theValue: TheType // 直接注入类类型
) {
  if (isPlatformServer(this.platformId)) {
    // 使用this.theValue
  }
}

⚠️ 注意：如果TheType是接口，绝对不能用它作为令牌！因为TypeScript接口在编译成JavaScript后会被移除，Angular注入器无法识别。

总结 #

• 字符串令牌可以用，但推荐用共享的InjectionToken，类型更安全，也符合Angular最佳实践
• 只要确保令牌实例全局唯一、服务端正确配置提供者、组件正确注入，就能避免注入错误

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