Angular 9 универсальный, почему только половина приложения переводится с помощью ngx-translate? - PullRequest
Новая
       30

Angular 9 универсальный, почему только половина приложения переводится с помощью ngx-translate?

1 голос
/ 16 апреля 2020

У меня есть angular 9 pwa универсальное веб-приложение, которое после npm run build:ssr работает с узлом dist/app/server/server.js. Я перевёл весь текст, но после сборки вижу только половину переведённой и другую половину вроде: common.next, common.back.

Вот что у меня есть:

app.module: 

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

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

app.server.module: 

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

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

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    BrowserModule.withServerTransition({ appId: 'autorent' }),
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

app.browser.module: 

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

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    AppModule,
    BrowserModule.withServerTransition({ appId: 'autorent' }),
    BrowserTransferStateModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent],
})
export class AppBrowserModule { }

Если вам нужна другая информация, в которой я сомневаюсь, просто напишите в комментариях, и я предоставлю.

Как сделать так, чтобы ngx-translate работал полностью + не будет загружаться при загрузке страницы. Думаю, он должен загружаться на сервер, потому что, когда я впервые открываю приложение, я вижу, как меняется текст (половина она)

1 Ответ

1 голос
/ 16 апреля 2020

Поскольку вы используете отдельные файлы перевода и загружаете их после кода (TranslateHttpLoader(http, './assets/i18n/', '.json');), этот json файл кэшируется браузером. Поскольку вы не используете там хэши контента, вполне вероятно, что более новая версия вашего кода получает старые файлы перевода из кэша браузера. (Вы можете проверить это с помощью инструментов chrome dev, есть флажок отключения кэша)

У вас есть несколько вариантов:

  1. Удалите кеш браузера и сообщите своим пользователям: делайте то же самое после каждого повторного развертывания
  2. Настройте веб-сервер для обслуживания файла перевода с очень коротким временем жизни кэша
  3. Используйте какое-либо хеширование содержимого, когда запрашиваемый ресурс отличается после повторного развертывания, поэтому что кеш браузера не срабатывает, если файл изменился. (например, измените ваш процесс сборки так, чтобы имя файла заканчивалось как .json?67d383, где последняя часть заменяется во время сборки на git commit ha sh кода, который был собран)
  4. compile перевод в javascript связку

Я использовал варианты 1, 3 и 4 и рекомендую последний (для приложений с небольшими различными языками). * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * *}} *}} *}}}}} * Не исключено ”. , При необходимости переключайтесь, так как любая загрузка переводов будет немедленной (без http-вызова), и переводы всегда будут точными. Хэширование содержимого должно быть уже настроено для пакета javascript (по умолчанию).

Если у вас много языков, я бы предпочел перейти к подходу 3 для размера пакета.

...