Integrated NGX translate for ionic3 learning

Integrating NGX translate

Official connection


Step 1:


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

Step 2:

To import the TranslateModule, first import the TranslateModule and add the following code under app.module.ts

// Import package
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Increase method
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');

  imports: [
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]

Step 3 Create internationalization file

Enter the following directory:

cd ionicProject/src/assets

Create a new directory as i18n

Enter i18n directory and create json file

  • zh-cmn-Hans.json simplified Chinese
  "HOME": {
   "TITLE":"home page",
   "CONTENT":"Hello, the world!"
  • zh-cmn-Hant.json traditional Chinese
  "HOME": {
   "CONTENT":"Hello, the world!"
  • en.json English
  "HOME": {
   "CONTENT":"Hello word!"


Open the file app.component.ts and add code

import { TranslateService } from '@ngx-translate/core';

translate.setDefaultLang('en'); // Set default language pack

Source optimization in official start demo

initTranslate() {
    // Judging character set according to browser
    const browserLang = this.translate.getBrowserLang();

    if (browserLang) {
      if (browserLang === 'zh') {
        const browserCultureLang = this.translate.getBrowserCultureLang();

        if (browserCultureLang.match(/-CN|CHS|Hans/i)) {
        } else if (browserCultureLang.match(/-TW|CHT|Hant/i)) {
      } else {
    } else {
      // Set up translation



    <ion-title>{{ 'HOME.TITLE' | translate }}</ion-title>

<ion-content padding>
   <button (click)="ChangeLanguage()" ion-button color="light">Setup language</button>
  <h2>{{ 'HOME.CONTENT' | translate }}</h2>

Be careful:

I have been looking for this problem for a long time. At the beginning, I didn't know how to deal with it. After reading several people's blogs, I went to the doctor at random when I was ill. Finally, I saw the above on the official website, and I knew it was the version problem. I suggest that you go to the official website to see if there is any explanation after you make a mistake...

If you're still using Angular v5, please use ngx-translate 9.x because
version 10 and above are only compatible with Angular v6. If you try
to use v10 with Angular v5 you will get an error message TypeError:
Object(...) is not a function

The picture shows:

Tags: JSON angular github npm

Posted on Mon, 23 Mar 2020 09:23:44 -0700 by rhiza