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

Question

I have angular 9 pwa universal web app which after npm run build:ssr works with node dist/app/server/server.js. I translated all text , but after build I see only half translated and another half like : common.next , common.back.
Here is what i have :
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 { }
If you need another info, which I doubt, just write in comments and I will provide.
How to make that ngx-translate would work fully + won't be loaded on page load, It should lode on server I think, because when I open app for the first time, i see how text changes (half of it)

Answer 1

As you use separate translation files and load them after the code (TranslateHttpLoader(http, './assets/i18n/', '.json');) this json file is cached by the browser. As you're not using content hashes there, it is likely that a newer version of you code is getting older translation files from the browser cache. (You can verify this with the chrome dev tools, there is a disable cache checkbox)
You have several options there:
Delete your browser cache and tell your users to do the same after every redeploy
Configure the web server to serve the translation file with a very short cache lifetime
Use some kind of content-hashing where the requested resource is different after a redeploy so that the browser cache does not hit if the file has changed. (for example, modify your build process so that the filename ends like .json?67d383 where the last part is replaced at build time with the git commit hash of the code that was build)
compile the translation into the javascript bundle
I have used options 1, 3 and 4 and recommend the last (for applications with little different locales). The javascript bundle cannot display anything meaningful without the translations, so it might as well include them.
You can directly include the json files for all the languages into the typescript file and use them as a constant. Switch as needed, as any loading of translations will be immediate (no http call) and the translations will always be accurate. Content hashing should be configured for the javascript bundle already (by default).
If you have many languages, I'd rather move towards approach 3 for bundle size.