Setup ngx-translate in angular

In angular typescript, we can use ngx-translate for i18n, and ngx-translate-extract for extracting keys to generate multiple language file. i will describe how to setup i18n in angular with ngx-translte, and how to extract messages with ngx-translate-extract. To setup ngx-translate, run the following command:

npm install ngx-translate

in app.module, add module import for whole app usage,

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}
imports: [
    ....
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ....
]

providers: [
    ....
    TranslateService,
    .....
]

in app constructor function, setup default language to deufalt browser language

  constructor(
    public translate: TranslateService,
  ) {
    const browserLang: string = translate.getBrowserLang() || 'en';
    translate.use(browserLang.match(/en|zh/) ? browserLang : 'en');
  }

in your project html file, add translate pipe for your keys to be translated, such as

  <div class="headline-section">
    <h1 class="header-headline">{{'Welcome to Xiaoyao.io'|translate}}</h1>
  </div>

Also, in your project ts files, you can translate instant message use TranslateService

 constructor(
      private translateService: TranslateService,
  ) { }

this.translateService.instant('Close')

when your app is ready, install ngx-translate-extract to extract all keys and export them in a json file in i18n directory, for higher angular version, above 13, install ngx-translate-extract using the following command,

npm install @vendure/ngx-translate-extract --save-dev

and if you got the following error message, that means your angular version is higher, and the old extract package is not compatible with it, you can use above package instead.

node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/@angular/compiler/fesm2015/compiler.mjs not supported.
Instead change the require of /app/node_modules/@angular/compiler/fesm2015/compiler.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/dist/parsers/pipe.parser.js:3:20)
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/dist/cli/cli.js:6:23)
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/bin/cli.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

for more details about this error, refer here, otherwise, you can install the following package

npm install @biesbjerg/ngx-translate-extract --save-dev

and then in package.json file, add extract script,

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --aot=true --optimization=true",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,zh}.json --clea -k --format json"
  },

open a terminal, run npm run extract to extract all messages in .src directory, and in assets/i18n/ directory, two files will be generated, en.json, zh.json. translate these files into other languages.