Solveduniversal starter How add a translate module to universal starter?

I use this repository to our project but I can't add module as easy as AngularJs for example I need to add ngx-translate but after I added as its document installation for aot it showed me
Unexpected value 'TranslateModule' imported by the module 'AppModule'
How could I add module to this project?

25 Answers

✔️Accepted Answer

So, I lost half a day figuring out how to use ngx-translate with universal-starter, therefore, find out here how I achieve it, maybe it will help you solve your problem.

1_install ngx-translate

 npm install @ngx-translate/core --save
 npm install @ngx-translate/http-loader --save

2_install copy-webpack-plugin

 npm install copy-webpack-plugin --save-dev

3_create folder and translation file src/assets/i18n/en.json containing for example

{
   "TEST": "Super super"
}

4_in webback.common.js add a copy plugin to copy the translations file to the dist/output directoty

 const copyWebpackPlugin = require('copy-webpack-plugin');
 
 plugins: [
    new copyWebpackPlugin([
         {
           from: './src/assets/i18n/en.json',
           to: './assets/i18n/en.json'
         }
       ])
     ]

5_if you run your server, you gonna face maybe like me an error on the client side telling you that fs isn't found, therefore in webpack.client.js add the following:

 node: {
    fs: 'empty'
 }

6_app.module.ts:

 export function exportTranslateStaticLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }

imports: [
     HttpClientModule,
     TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: exportTranslateStaticLoader,
      deps: [HttpClient]
    }
  }
   )
  ]

7_browser-app.module.ts: ** UPDATED ** edit nothing there. I used to think that TranslateModule.forChild() was needed in this module but actually it doesn't.

8_server-app.module.ts:

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

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

9_create a new service translateUniversalLoader

ng g service translateUniversalLoader

10_overwrite the content of this service with the following code:

 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();
     });
   }
 }

11_finally in app.component.ts:

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

12_and in home-view

<div>{{ 'TEST' | translate }}</div>

Hope it gonna help you or someone.

Related Issues:

36
universal starter How to deploy Angular Universal to production (port 80)
The @kalyan1102 answer is correct After make the app how to deploy it? I see that on package.json th...
13
universal starter Can't get current request (or more specifically cookies)
Fixed by adding empty array to deps for the provider: Hi again ! Going deeper and deeper in the use ...
13
universal starter Error: No module factory available for dependency type: ContextElementDependency
You can get this working off a project that has webpack already installed by doing: 1.npm ls webpack...
11
universal starter How add a translate module to universal starter?
So I lost half a day figuring out how to use ngx-translate with universal-starter therefore find out...
6
universal starter not implemented in Parse5DomAdapter: getElementsByTagName
Okay just in case anyone else lands here and needs this Hi I may be running away with things that ar...
3
universal starter How to set meta data in index.html
@nicky-lenaers My solution should work on server-side at leats it works for me Here i have seen angu...