Angular ngx-translate,第一次不翻译

分享于2022年07月17日 angular browser browser-cache ngx-translate 问答
【问题标题】:Angular ngx-translate,第一次不翻译(Angular ngx-translate, does not translate first time)
【发布时间】:2022-06-23 00:18:50
【问题描述】:

我使用 ngx-translate 和 angular。在新电脑上打开网站时,不会显示翻译,只有键。然后用户必须按 F5 才能翻译。据我所知,每次都会发生。有时当我有一段时间没有接触到项目时,我的电脑上也会出现同样的问题。

我想调试测试一下是不是在显示页面的时候翻译文件没有下载初始化,但是证明很困难,因为我重新加载后不能再进入不翻译状态了页。一直在翻译。

我尝试过:

  • “随时”清除所有浏览器缓存
  • 使用 Edge 浏览器
  • 卸载并重新安装 Chrome 浏览器
  • 安装其他浏览器 (Opera)
  • 重启电脑
  • 在 VS 代码中重新编译项目

它只是保持翻译状态,我没有做任何事情让它工作,甚至今天我第一次在 localhost 切换到项目时看到它,所以我知道它没有按预期工作。

我需要它处于未翻译状态,否则我将不知道我在寻找什么,并且在我尝试修复它之后无法验证它是否有效。

有人知道我可以尝试什么吗?

在导入的 App.module 中我这样做:

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient],
      },
    }),

在提供程序的 App.module 中我这样做:

{
      provide: APP_INITIALIZER,
      useFactory: initTranslations,
      deps: [TranslateService],
      multi: true,
    },

翻译方法:

import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export function initTranslations(
  translateService: TranslateService,
): () => Promise {
  return () => {
    const supportedLanguages = ['en'];
    const defaultLanguage = 'en';

    translateService.addLangs(supportedLanguages);
    translateService.setDefaultLang(defaultLanguage);
    const browserLang = translateService.getBrowserLang();
    const language =
      supportedLanguages.find((x) => x === browserLang) ?? defaultLanguage;
    return translateService.use(language).toPromise();
  };
}

  • 禁用浏览器缓存不会重现?
  • 没有不工作可悲
  • 真的很奇怪。可能仍然是一些与浏览器相关的问题。如果 ngx-translate 有时对我来说也失败了。只是一个想法,如果它不会发生在你身上,那么连接速度也可能会起作用。对于您本地,它会立即加载,但对于其他人则不会。可能在翻译加载之前页面刚刚呈现并且视图没有加载。在下一次加载时,翻译文件应该被查明并立即加载。因此可能会在加载后强制进行视图渲染(例如,使用 NgZone.Run(()=>....)

【解决方案1】:

我遇到了同样的问题。我还不知道为什么,但是第一次翻译没有加载默认语言。

第一次运行时,下面的代码总是显示为空

export class AppComponent {
  constructor(
    ...
    public translate: TranslateService,
    ...
  ) {
    ...
    const currentLang = this.translate.currentLang;
    console.log(currentLang);
    ...
  }

我通过强制使用我的默认语言解决了这个问题

export class AppComponent {
  constructor(
    ...
    public translate: TranslateService,
    ...
  ) {
    ...
    this.translate.use('pt');
    ...
  }

我相信有一个更有效的解决方案。