Missing translation on the client side with the angular universal starter app

I’m submitting a … (check one with “x”) [X ] support request => check the FAQ and search github for a similar issue before submitting

Current behavior

I try without success since a half day to use ngx-translate with the angular universal starter app https://github.com/angular/universal-starter.

When I start npm start my server and reload my pages I see briefly that the translation is found before being replaced with the key which traditionally show that something doesn’t work with ngx-translate. Also when I change the path of the translation in the server-app.module.ts I see an error in the console of the server, therefore I think that my server part is alright and that the problem comes from the client side.

app.module.ts:

 export function exportTranslateStaticLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
 imports: [
    TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: exportTranslateStaticLoader,
      deps: [Http]
    }
  }
  )
]

browser-app.module.ts:

 imports: [TranslateModule.forChild()]

server-app.module.ts:

  export function translateFactory() {
    return new TranslateUniversalLoader('./dist/assets/i18n', '.json');
  }

  imports: [
      TranslateModule.forRoot({
         loader: {
          provide: TranslateLoader,
           useFactory: translateFactory
      }
    })
 ]

TranslateUniversalLoader:

 import {Observable} from "rxjs/Observable";
 import {TranslateLoader} from '@ngx-translate/core';
 const fs = require('fs');
 
 export class TranslateUniversalLoader implements TranslateLoader {
   constructor(private prefix: string = 'i18n', private suffix: string = '.json') {}
     
   public getTranslation(lang: string): Observable<any> {
     return Observable.create(observer => {
 observer.next(JSON.parse(fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8')));
       observer.complete();
     });
   }
 }

webpack.common.js:

 plugins: [
new copyWebpackPlugin([
     {
       from: './src/assets/i18n/en.json',
       to: './assets/i18n/en.json'
     }
   ])
 ]   

app.component.ts:

 ngOnInit() {
     this.translateService.setDefaultLang('en');
     this.translateService.use('en');
 }

Futhermore, when I query http://localhost:8000/assets/i18n/en.json I get a valid answer back respectively my en.json:

{
   "TEST": "Super super"
 }

What am I missing???

P.S.: Same question on https://stackoverflow.com/questions/45490937/ngx-translate-and-angular-universal-client-side-translations-not-found

• ngx-translate version: x.x.x

  “@ngx-translate/core”: “^7.1.0”, “@ngx-translate/http-loader”: “^1.0.1”

• Angular version: 2.x.x

  “angular/core”: “^4.3.3”

[crebuh]

@peterpeterparker

weird i had to remove the import of TranslateModule.forChild() in the browser.app-module then it worked. thanks for your detailed instructions!

[peterpeterparker]

@crebuh yes me too, had to remove the TranslateModule.forChild() in the browser.app-module.ts…still don’t understand why