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

Question

我有一个角度为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

当您使用单独的翻译文件并在浏览器缓存的json ic的代码（TranslateHttpLoader(http, './assets/i18n/', '.json');）之后加载它们。由于您未在此处使用内容哈希，因此您的代码更新版本可能正在从浏览器缓存中获取较旧的翻译文件。

您有几个选择：

1. 删除您的浏览器缓存，并在每次重新部署后告诉您的用户执行相同的操作
2. 配置Web服务器以在非常短的缓存生命周期内提供翻译文件
3. 重新部署后，使用某种形式的内容哈希，其中所请求的资源有所不同，因此，如果文件已更改，则浏览器缓存不会命中。 （例如，修改您的构建过程，以使文件名以.json?67d383结尾，在构建时将最后一部分替换为所构建代码的git commit哈希）
4. 将翻译编译成javascript捆绑包

我使用了选项1、3和4，并推荐了最后一个（对于语言环境几乎没有差异的应用程序）。没有翻译，javascript捆绑包就无法显示任何有意义的内容，因此也可能包含它们。

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

如果您使用多种语言，则我倾向于采用方法3来确定软件包的大小。