移除Angular组件懒加载后，如何保障i18next翻译重载正常？

核心问题分析 #

移除懒加载后组件立即渲染，导致i18next初始化完成前就被调用，同时语言选择器将语言存在sessionStorage，但i18next检测器配置为读取localStorage，两者不匹配导致重载后语言丢失。

步骤1：确保i18next初始化完成后再启动应用 #

修改app.config.ts，使用APP_INITIALIZER强制Angular等待i18next初始化完成：

import { ApplicationConfig, provideZoneChangeDetection, APP_INITIALIZER } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { I18NEXT_SERVICE, I18NextModule, defaultInterpolationFormat } from 'angular-i18next';
import i18next from 'i18next';
import HttpApi from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const i18nextOptions = {
  debug: true,
  fallbackLng: 'en',
  supportedLngs: ['en', 'de', 'cz'],
  ns: ['translation', 'validation', 'error'],
  interpolation: {
    format: I18NextModule.interpolationFormat(defaultInterpolationFormat)
  },
  backend: {
    loadPath: '/assets/i18n/{{lng}}.json',
  },
  detection: {
    order: ['localStorage', 'navigator', 'htmlTag'],
    caches: ['localStorage'],
  },
};

// 初始化i18next并返回Promise，让Angular等待完成
export function initializeI18next() {
  return () => i18next
    .use(HttpApi)
    .use(LanguageDetector)
    .init(i18nextOptions);
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    provideAnimationsAsync(),
    // 添加初始化钩子
    {
      provide: APP_INITIALIZER,
      useFactory: initializeI18next,
      multi: true
    },
    {
      provide: I18NEXT_SERVICE,
      useValue: i18next
    },
    I18NextModule.forRoot({}).providers!
  ]
};

步骤2：同步语言存储到localStorage #

修改language-picker.component.ts，将语言存储从sessionStorage改为localStorage，与i18next检测器配置保持一致：

import { ChangeDetectionStrategy, signal, Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { I18NextModule, ITranslationService, I18NEXT_SERVICE } from 'angular-i18next';
import { Language } from '@app/enums/language.enum';

@Component({
  selector: 'app-language-picker',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    I18NextModule
  ],
  templateUrl: './language-picker.component.html',
  styleUrls: ['./language-picker.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LanguagePickerComponent implements OnInit {
  @Output() nextStep = new EventEmitter<void>();
  languageEnum: typeof Language = Language;
  language = signal<string>(Language.NONE);

  constructor(@Inject(I18NEXT_SERVICE) private i18NextService: ITranslationService) {
    const savedLanguage = window.localStorage.getItem('selectedLanguage') as Language;
    if (savedLanguage) {
      this.language.set(savedLanguage);
    }
  }

  async ngOnInit(): Promise<void> {
    this.i18NextService.events.initialized.subscribe(async (initialized) => {
      if (initialized) {
        const savedLanguage = window.localStorage.getItem('selectedLanguage') as Language;
        // 确保i18next使用已保存的语言
        if (savedLanguage && savedLanguage !== this.i18NextService.language) {
          await this.i18NextService.changeLanguage(savedLanguage);
        }
        this.language.set(this.i18NextService.language);
      }
    });
  }

  selectLanguage(lang: Language) {
    window.localStorage.setItem('selectedLanguage', lang);

    if (lang !== this.i18NextService.language) {
      this.i18NextService.changeLanguage(lang).then(() => {
        this.language.set(lang);
      });
    }
    this.nextStep.emit();
  }
}

验证修复效果 #

1. 控制台不再出现i18next未初始化的警告
2. 页面重载后自动读取localStorage中保存的语言
3. 翻译键正常解析，显示对应语言的文本

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