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

У меня есть универсальное веб-приложение angular 9 pwa, которое после npm run build:ssr работает с node 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 работал полностью + не загружался при загрузке страницы, я думаю, он должен загружаться на сервер, потому что, когда я открываю приложение в первый раз, я вижу, как изменяется текст (половина его)


person Andrėjus Lazauskas    schedule 16.04.2020    source источник


Ответы (1)


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

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

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

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

Вы можете напрямую включить файлы json для всех языков в файл машинописного текста и использовать их как константу. Переключайтесь по мере необходимости, так как любая загрузка переводов будет немедленной (без HTTP-вызова), и переводы всегда будут точными. Хеширование содержимого уже должно быть настроено для пакета javascript (по умолчанию).

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

person DasKrümelmonster    schedule 16.04.2020
comment
Мне это кажется обходным решением, разве angular не реализовал что-то, что нормально работает без них? - person Andrėjus Lazauskas; 16.04.2020
comment
Извините, возможно, я не совсем понимаю проблему (у меня мало опыта в Angular SSR). Значит, вы используете рендеринг на стороне сервера, а рендеринг на стороне сервера переведен наполовину? А потом, после того, как клиент выполнит JS, все переведено? - person DasKrümelmonster; 17.04.2020