如何解决Angular预渲染中Transloco无法显示翻译文本并实现动态翻译？

预渲染时Transloco无法加载翻译是因为异步HTTP请求在预渲染阶段无法完成，导致静态HTML中没有翻译文本。以下是几种可行的解决方案：

1. 使用静态加载器打包翻译文件 #

将翻译文件直接导入并作为静态数据返回，避免HTTP请求。在transloco-root.module.ts中实现自定义加载器：

import { TRANSLOCO_LOADER, TranslocoLoader } from '@ngneat/transloco';
// 直接导入翻译文件
import { en } from '../assets/i18n/en.json';
import { fr } from '../assets/i18n/fr.json';

export class TranslocoStaticLoader implements TranslocoLoader {
  getTranslation(lang: string) {
    // 根据语言返回对应静态数据
    return Promise.resolve(lang === 'en' ? en : fr);
  }
}

@NgModule({
  imports: [TranslocoModule],
  providers: [
    { provide: TRANSLOCO_LOADER, useClass: TranslocoStaticLoader }
  ]
})
export class TranslocoRootModule {}

这种方式会把翻译数据打包进应用代码，预渲染时可以直接同步获取，无需发送HTTP请求。

2. 借助Transloco服务器端加载器（适用于Angular Universal） #

使用@ngneat/transloco-server包在服务器端预加载翻译，确保预渲染过程中翻译数据已准备就绪：

1. 安装依赖：

npm install @ngneat/transloco-server

2. 在server.ts中配置服务器端Transloco：

import { TranslocoServerLoader } from '@ngneat/transloco-server';
import { provideTranslocoServer } from '@ngneat/transloco-server';

export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    providers: [
      provideTranslocoServer({
        loader: TranslocoServerLoader,
        config: {
          availableLangs: ['en', 'fr'],
          defaultLang: 'en',
          prodMode: true,
          // 指定翻译文件路径
          translationPath: join(distFolder, 'assets/i18n')
        }
      })
    ]
  }));
  
  // 其他服务器配置逻辑...
}

服务器端会在预渲染时提前读取翻译文件，将翻译后的文本直接渲染到静态HTML中。

3. 预渲染时锁定默认语言 #

如果你的预渲染只针对特定语言，可以在Transloco配置中设置默认语言，并确保构建时该语言的翻译文件被正确处理：

在transloco.config.ts中：

export const translocoConfig = {
  availableLangs: ['en', 'fr'],
  defaultLang: 'en',
  // 开启预加载默认语言
  preloadDefaultLang: true,
  prodMode: environment.production,
};

同时在angular.json的预渲染配置中确保语言参数正确：

"prerender": {
  "builder": "@angular-devkit/build-angular:prerender",
  "options": {
    "browserTarget": "your-app:build:production",
    "routes": ["/"],
    "serverTarget": "your-app:server:production"
  }
}

预加载默认语言会在应用初始化时同步加载翻译数据，确保预渲染阶段能获取到文本。

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