[Angular] Import TranslateModule in Angular 16

1.Background

Angular 更新至V16版后，支援 standalone，故移除了 NgModule，而TranslateModule 又要在AppModule中 import，那该如何做呢？

2.NPM packages installation

npm install @ngx-translate/core
npm install @ngx-translate/http-loade

3.Import TranslateModule in bootstrapApplication of main.ts

// import ngx-translate and the http loader
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      NzMessageServiceModule,
      NzDrawerServiceModule,
      NzModalModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    )
  ]
}).catch(err => console.error(err));

4. Create i18n files under assets folder.

For example: i18n\en.json, i18n\zh_CN.json, i18n\zh_TW.json

5. Add key value object in i18n files.

For example: en.json

{
    "test": {
        "title": "This is a test title."
    }
}

zh_CN.json

{
    "test": {
        "title": "这是一个测试标题."
    }
}

zh_TW.json

{
    "test": {
        "title": "這是一個測試標題."
    }
}

6. Import TranslateService service and TranslateModule module.

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

...

imports: [NzButtonModule, NzSelectModule, TranslateModule, CommonModule, FormsModule, NzCardModule, NzFormModule, NzInputModule]

...

  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.selectedLang = 'en';
  }

7. Using in HTML

<h1>{{ 'test.title' | translate }}</h1>

8. Using in component

const lang = this.translate.instant(key);

9. Change language

changeLanguage(): void {
    let lang = this.translate.getDefaultLang();
    this.translate.setDefaultLang(this.selectedLang);
    this.translate.use(this.selectedLang);
  }

10. The full source code

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
  selector: 'app-pages-sample-translate',
  template: `
    <br />
    <h1>{{ 'test.title' | translate }}</h1>
    <br />
    <nz-select [(ngModel)]="selectedLang" (ngModelChange)="log($event)">
      <nz-option nzLabel="English" nzValue="en"></nz-option>
      <nz-option nzLabel="简体中文" nzValue="zh_CN"></nz-option>
      <nz-option nzLabel="繁體中文" nzValue="zh_TW"></nz-option>
    </nz-select>
    <button nz-button nzType="primary" (click)="changeLanguage()">{{ 'test.changelang' | translate }}</button>
    <button nz-button (click)="getLang('test.changelang')">Get lang with Component</button>
  `,
  styles: [
    `
      nz-select {
        width: 200px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  providers: [],
  imports: [NzButtonModule, NzSelectModule, TranslateModule, CommonModule, FormsModule, NzCardModule, NzFormModule, NzInputModule]
})
export class TranslateComponent implements OnInit {
  selectedLang: any = {};

  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
    this.translate.use('en');
    this.selectedLang = 'en';
  }

  ngOnInit(): void {}

  changeLanguage(): void {
    let lang = this.translate.getDefaultLang();
    this.translate.setDefaultLang(this.selectedLang);
    this.translate.use(this.selectedLang);
  }

  log(value: any): void {
    this.changeLanguage();
  }

  getLang(key: string): void {
    const lang = this.translate.instant(key);
    console.log(lang);
  }
}

11. Test result