Angular 19中如何获取SSR端提供的Provider值？

1. 统一注入令牌 #

不要直接用字符串作为注入标识，定义一个专属的InjectionToken避免命名冲突：

// src/app/tokens.ts
import { InjectionToken } from '@angular/core';

export const MESSAGE_TOKEN = new InjectionToken<string>('message');

2. 服务端传递并序列化状态 #

使用Angular官方的TransferState来传递服务端值到客户端，这是解决hydration状态不一致的核心：

服务端配置（如server.ts） #

import { CommonEngine } from '@angular/ssr';
import { MESSAGE_TOKEN } from './src/app/tokens';
import { TransferState, makeStateKey } from '@angular/platform-browser';

// 定义状态键，用于两端统一识别
const messageStateKey = makeStateKey<string>('serverMessage');

app.get('*', (req, res, next) => {
  const commonEngine = new CommonEngine();
  const transferState = new TransferState();
  // 服务端生成的目标值
  const serverMessage = '服务端提供的消息内容';

  // 将值存入TransferState
  transferState.set(messageStateKey, serverMessage);

  commonEngine
    .render({
      bootstrap: AppServerModule,
      documentFilePath: indexHtml,
      url: req.originalUrl,
      publicPath: browserDistFolder,
      providers: [
        { provide: MESSAGE_TOKEN, useValue: serverMessage },
        { provide: TransferState, useValue: transferState }
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

3. 客户端复用服务端状态 #

在客户端app.config.ts中，通过工厂函数从TransferState读取服务端传递的值，作为provider提供：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { MESSAGE_TOKEN } from './tokens';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const messageStateKey = makeStateKey<string>('serverMessage');

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideClientHydration(),
    {
      provide: MESSAGE_TOKEN,
      useFactory: (transferState: TransferState) => {
        // 优先取服务端传递的值，无值时用客户端默认值
        return transferState.get(messageStateKey, '客户端默认消息');
      },
      deps: [TransferState]
    }
  ]
};

4. AppComponent中注入使用 #

现在可以正常注入令牌，服务端渲染和客户端hydration阶段都能获取到正确值：

import { Component, Inject } from '@angular/core';
import { MESSAGE_TOKEN } from './tokens';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(MESSAGE_TOKEN) public message: string) {
    console.log('获取到的消息:', message);
  }
}

核心注意事项 #

• 必须用TransferState传递状态：客户端hydration时无法直接读取服务端注入的provider值，只有通过序列化后的状态才能跨端复用，这是之前出现null的根本原因。
• 统一使用InjectionToken：避免字符串标识带来的命名冲突，提升代码可维护性。

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