Angular 15升级16添加provideClientHydration时Transloco报错问题

将项目从Angular 15升级至Angular 16并搭配Universal使用时，无论在AppModule还是AppServerModule中添加provideClientHydration()，都会触发以下Transloco相关错误：

ERROR Error: When using the default fallback, a fallback language must be provided in the config!
    at getNextLangs (./node_modules/@ngneat/transloco/fesm2020/ngneat-transloco.mjs:318:19)
    at handleFailure (./node_modules/@ngneat/transloco/fesm2020/ngneat-transloco.mjs:898:67)
    at error (./node_modules/@ngneat/transloco/fesm2020/ngneat-transloco.mjs:568:25)
    at onError (./node_modules/rxjs/dist/cjs/internal/operators/catchError.js:13:51)
    at _error (./node_modules/rxjs/dist/cjs/internal/operators/OperatorSubscriber.js:43:21)
    at error (./node_modules/rxjs/dist/cjs/internal/Subscriber.js:60:18)
    at onError (./node_modules/rxjs/dist/cjs/internal/operators/tap.js:31:28)
    at _error (./node_modules/rxjs/dist/cjs/internal/operators/OperatorSubscriber.js:43:21)
    at error (./node_modules/rxjs/dist/cjs/internal/Subscriber.js:60:18)
    at <anonymous> (./node_modules/rxjs/dist/cjs/internal/operators/retry.js:60:36)

涉及的AppServerModule代码如下：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { provideClientHydration } from '@angular/platform-browser';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
  providers: [provideClientHydration()]
})
export class AppServerModule {
}

问题原因 #

错误提示明确说明：使用默认回退机制时，必须在Transloco配置中提供回退语言。Angular 16的客户端水合机制改变了初始化流程，导致原本可能被忽略的配置缺失问题直接暴露。

解决方法 #

在Transloco的配置中显式指定fallbackLang参数即可解决：

1. 找到项目中的Transloco配置文件（通常是transloco.config.ts，或在AppModule的provideTransloco/TranslocoModule.forRoot配置中）
2. 添加fallbackLang字段，设置为你的项目默认语言（比如'en'或'zh-CN'）

示例配置（独立配置文件形式）：

import { provideTransloco } from '@ngneat/transloco';

export const translocoConfig = provideTransloco({
  config: {
    availableLangs: ['en', 'zh-CN'],
    fallbackLang: 'en', // 必须添加该字段
    // 其他配置项...
  },
  // 其他providers...
});

示例配置（AppModule中直接配置）：

import { TranslocoModule } from '@ngneat/transloco';

@NgModule({
  imports: [
    TranslocoModule.forRoot({
      config: {
        availableLangs: ['en', 'zh-CN'],
        fallbackLang: 'en',
        // ...其他配置
      },
    }),
    // ...其他模块
  ],
  // ...
})
export class AppModule {}

配置完成后重启项目，错误即可消除。

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