Angular SSR中如何让动态导入的数据正确完成水合？

问题背景 #

在Angular应用中需根据所选语言加载不同菜单（无法使用i18n），当前实现代码如下：

protected readonly menuItems = signal<LibHeaderMenuItem[]>([]);

ngOnInit() {
  import(`./menus/menus.${this.applicationManager.lang}.ts`).then(m => {
    this.menuItems.set(m.default);
  });
}

// NOTE: 为便于阅读已大幅简化
@for (item of menuItems(); track item.href) {
  <a [routerLink]="item.href">{{item.label}}</a>
}

该代码在客户端正常运行，但SSR渲染时存在以下问题：

• 服务器和客户端都会执行动态导入，导致初始加载时菜单闪烁，Angular无法正确水合数据
• 若仅在服务器端执行导入，客户端加载JS后数据会被清空

用户希望保留类型安全性（不想改用JSON+HttpClient），并想知道是否能让Angular像处理HTTP请求数据一样正确水合动态导入的数据。尝试过TransferState但觉得不够优雅，担心其被弃用，认为provideClientHydration应该能处理这类问题。

解决方案 #

方案1：封装TransferState服务，兼顾类型安全与水合 #

TransferState目前仍是Angular官方认可的SSR状态传递方案，暂无明确弃用计划。通过封装服务可以简化逻辑，同时保留动态导入的类型校验：

1. 创建菜单加载服务

import { Injectable, PLATFORM_ID, inject } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import type { LibHeaderMenuItem } from './path-to-your-type';

const MENU_STATE_KEY = makeStateKey<LibHeaderMenuItem[]>('menuItems');

@Injectable({ providedIn: 'root' })
export class MenuLoaderService {
  private transferState = inject(TransferState);
  private platformId = inject(PLATFORM_ID);

  async loadMenu(lang: string): Promise<LibHeaderMenuItem[]> {
    // 客户端优先读取缓存的服务器状态
    if (!isPlatformServer(this.platformId)) {
      const cachedMenu = this.transferState.get(MENU_STATE_KEY, []);
      if (cachedMenu.length) return cachedMenu;
    }

    // 动态导入菜单文件（保留类型检查）
    const menuModule = await import(`./menus/menus.${lang}.ts`);
    const menuItems = menuModule.default as LibHeaderMenuItem[];

    // 服务器端将数据存入TransferState，供客户端复用
    if (isPlatformServer(this.platformId)) {
      this.transferState.set(MENU_STATE_KEY, menuItems);
    }

    return menuItems;
  }
}

2. 在组件中调用服务

protected readonly menuItems = signal<LibHeaderMenuItem[]>([]);
private menuLoader = inject(MenuLoaderService);

async ngOnInit() {
  const items = await this.menuLoader.loadMenu(this.applicationManager.lang);
  this.menuItems.set(items);
}

此方案既保留了TypeScript的类型安全，又通过TransferState确保服务器渲染的菜单数据能传递到客户端，彻底解决水合不匹配和菜单闪烁问题。

方案2：结合Angular 16+的信号与自动水合 #

Angular 16+的provideClientHydration主要处理组件状态同步，但异步数据仍需显式保障前后端一致。可以用toSignal将异步加载转换为信号，配合上述服务优化代码：

import { toSignal, inject } from '@angular/core';
import { MenuLoaderService } from './menu-loader.service';

protected readonly menuItems = toSignal(
  this.menuLoader.loadMenu(this.applicationManager.lang),
  { initialValue: [] }
);

toSignal会在服务器端等待Promise完成后再渲染HTML，客户端水合时直接复用TransferState中的数据，无需重复请求/导入，进一步简化组件逻辑。

关于类型安全的必要性 #

改用JSON+HttpClient虽然能借助Angular的HTTP水合机制，但会丢失TypeScript的类型校验。对于包含路由参数、权限配置等复杂结构的菜单，类型错误难以排查，因此保留动态导入的类型安全是更稳妥的选择。

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