Angular 9 通用为什么只有一半的应用程序用 ngx-translate 翻译？

Question

我有 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 { }

如果您需要其他信息，我对此表示怀疑，只需写在 cmets 中，我会提供。

如何使 ngx-translate 完全工作 + 不会在页面加载时加载，我认为它应该在服务器上加载，因为当我第一次打开应用程序时，我看到文本如何变化（其中一半)

Answer 1

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

你有几个选择：

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

我使用了选项 1、3 和 4，并推荐最后一个（适用于语言环境差异不大的应用程序）。如果没有翻译，javascript 包无法显示任何有意义的内容，因此最好将其包含在内。

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

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