Question

我目前正面临一个问题，很不幸，我没有找到任何类似的话题。在Angular应用程序中，在页面加载期间，只有一秒钟的时间，在此期间我们可以在看到翻译本身之前先看到翻译键。

例如，假设我们有一个主页，上面有标题为“大家好！”的翻译。并在我们的i18n文件“ HELLO_EVERYONE”中添加翻译键：在很短的时间内，将显示“ HELLO_EVERYONE”，然后将其替换为翻译“大家好！”。

我们希望尽可能避免这种行为。

我们将Angular 10与ngx-translate一起使用。我们的AppModule中具有以下配置：

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthorizationGuard } from './shared/guards/authorization-guard';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from 'environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { RootStoreModule } from './store';
import { SharedModule } from './shared/shared.module';
import { CommonModule, registerLocaleData } from '@angular/common';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import * as moment from 'moment';
import localeFr from '@angular/common/locales/fr';

import '@iconfu/svg-inject/dist/svg-inject.min';
import { ShowLoaderRequestList } from './app.constants';
import { LoaderInterceptor } from '@az-fr/om-common';
import { AuthTokenInterceptor } from './shared/interceptors/authTokenInterceptor';
import { WindowRef } from 'ngx-tag-commander';
import { NdbxIconModule } from '@allianz/ngx-ndbx/icon';
import { FileCachingInterceptor } from './shared/interceptors/fileCachingInterceptor';

registerLocaleData(localeFr);
moment.locale('fr');

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    SharedModule,
    AppRoutingModule,
    HttpClientModule,

// Translate configuration
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/');
}

而且，目前我们的应用程序加载时间很长：您认为这会导致这种行为吗？

期待您的建议！

翻译键显示在Angular中的翻译之前

0 个答案: