Angular 9 universal 为什么用ngx-translate只翻译了一半的app？

Question

我有 angular 9 pwa 通用 Web 应用程序，在 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 完全工作 + 不会在页面加载时加载，我认为它应该加载在服务器上，因为当我第一次打开应用程序时，我看到文本如何变化（一半其中）

Answer 1

当您使用单独的翻译文件并在代码 (TranslateHttpLoader(http, './assets/i18n/', '.json');) 之后加载它们时，此 json 文件由浏览器缓存。由于您没有在那里使用内容哈希，因此您的代码的较新版本可能会从浏览器缓存中获取较旧的翻译文件。（您可以使用 chrome 开发工具验证这一点，有一个禁用缓存复选框）

你有几个选择：

删除您的浏览器缓存并告诉您的用户在每次重新部署后也这样做
将网络服务器配置为以非常短的缓存生命周期提供翻译文件
在重新部署后请求的资源不同的地方使用某种内容散列，这样如果文件已更改，浏览器缓存就不会命中。（例如，修改您的构建过程，使文件名以 .json?67d383 结尾，其中最后一部分在构建时替换为构建代码的 git 提交哈希）
将翻译编译到 javascript 包中

我已经使用了选项 1、3 和 4，并推荐最后一个（适用于语言环境差异不大的应用程序）。如果没有翻译，javascript 包就无法显示任何有意义的内容，所以它还不如包含它们。

您可以直接将所有语言的 json 文件包含到 typescript 文件中，并将它们用作常量。根据需要切换，因为任何翻译加载都是立即的（没有 http 调用）并且翻译总是准确的。应该已经为 javascript 包配置了内容哈希（默认情况下）。

如果您有多种语言，我宁愿采用方法 3 来确定包大小。

Angular 9 universal 为什么用ngx-translate只翻译了一半的app？

Angular 9 universal why only half app is translated with ngx-translate?

node.js

typescript

angular-universal

ngx-translate

angular