Angular Universal中如何让字符串依赖令牌可被组件访问

安全阿岳

2026-9-3

问题原因

Angular Universal 实际是两套独立运行时协同工作：

服务端：Node.js环境运行server.ts中配置的Angular应用，负责生成首屏HTML
客户端：浏览器下载打包后的客户端Angular bundle，在页面加载完成后启动，接管页面交互

两套运行时拥有完全独立的依赖注入（DI）容器，你在server.ts的providers数组中配置的MODEL令牌，仅在服务端的DI容器中生效。客户端打包逻辑不会引入server.ts的代码，因此客户端DI容器中根本不存在MODEL对应的提供者，才会出现服务端能正常读取到环境变量值、客户端取值为null，移除@Optional()后直接抛出NullInjectionError的现象。
另外要注意：服务端渲染完成后只会把生成的DOM结构返回给浏览器，不会自动把服务端DI容器中的配置、实例同步给客户端运行时。

解决方案

使用Angular官方提供的TransferState机制实现服务端到客户端的值传递，这是SSR场景下跨运行时同步数据的标准方案，配置步骤如下：

定义全局状态键，避免键名冲突
建议把键单独放在双端都能引用的公共文件中，比如src/app/constants.ts：

import { makeStateKey } from '@angular/core';
// 为MODEL值创建类型安全的状态键
export const MODEL_STATE_KEY = makeStateKey<string>('MODEL');

服务端写入值到TransferState
修改根组件逻辑，在服务端运行时把读取到的MODEL值写入TransferState，Angular会自动把这部分值序列化后插入到返回给浏览器的HTML中：

import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { TransferState } from '@angular/platform-browser';
import { MODEL_STATE_KEY } from './constants';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(
    @Optional() @Inject('MODEL') private model: string,
    @Inject(PLATFORM_ID) private platformId: Object,
    private transferState: TransferState
  ) {
    // 仅服务端运行时执行写入
    if (isPlatformServer(this.platformId)) {
      this.transferState.set(MODEL_STATE_KEY, this.model);
      console.log('服务端获取MODEL值：', this.model);
    }
  }
}

客户端配置对应提供者，从TransferState读取值
在客户端应用的providers配置（app.module.ts的providers数组，或Standalone组件对应的app.config.ts的providers数组）中，添加MODEL令牌的客户端提供者：

import { TransferState } from '@angular/platform-browser';
import { MODEL_STATE_KEY } from './constants';

// 加入到providers数组中
{
  provide: 'MODEL',
  useFactory: (transferState: TransferState) => {
    // 客户端启动时直接从TransferState读取服务端写入的值
    return transferState.get(MODEL_STATE_KEY, null);
  },
  deps: [TransferState]
}

配置完成后，不管是服务端还是客户端运行时，组件里都可以直接通过@Inject('MODEL')注入拿到对应的值，不需要再写额外的环境判断逻辑。

注意：通过TransferState传递的值会直接嵌入到页面HTML源码中，所有用户都可以通过查看页面源码看到，绝对不能用来传递密钥、数据库密码这类敏感信息，仅可传递允许公开给前端的配置项。

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