I18n

Angular internationalization provides a solution for extracting language files, but for NG-ALAIN, this is not the best way; this is mainly limited by @Delon/* The component library needs to provide a set of dynamic translation Service, therefore, NG-ALAIN has built-in a simple internationalized service ALAIN_I18N_TOKEN interface.

How to configure

Scaffolding is composed of two important parts: ng-zorro-antd and @delon/*. These two libraries have their own international configuration. When internationalizing, they need to be the same for these libraries. Language configuration.

Angular

Angular configuration is mainly for currency, date format, etc., such as Chinese version:

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

ng-zorro-antd

ng-zorro-antd internationalization defaults to the Chinese version, for example the default English version:

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';
@NgModule({
  ...
  imports     : [ NgZorroAntdModule ],
  providers   : [ { provide: NZ_I18N, useValue: en_US } ]
})
export class AppModule { }

Of course, you can also use runtime changes:

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';
...
constructor(private nzI18nService:NzI18nService) {
}

switchLanguage() {
  this.nzI18nService.setLocale(en_US);
}

@delon

@delon internationalization defaults to Chinese version, for example the default is English version:

import { DELON_LOCALE, en_US } from '@delon/theme';
@NgModule({
  ...
  providers   : [ { provide: DELON_LOCALE, useValue: en_US } ]
})
export class AppModule { }

Of course, you can also use runtime changes:

import { en_US, DelonLocaleService } from '@delon/theme';
...
constructor(private delonLocaleService: DelonLocaleService) {
}

switchLanguage() {
  this.delonLocaleService.setLocale(en_US);
}

ALAIN_I18N_TOKEN

@delon/* class library has many data interface properties with the i18n typeface (for example: page-header, st column description, Menu menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for ALAIN_I18N_TOKEN (for example: I18NService /master/src/app/core/i18n/i18n.service.ts)) and register under the root module.

import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { I18NService } from '@core';

@NgModule({
  ...
  providers: [
    { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }
  ]
})
export class AppModule {}

i18n pipe

In order not to be named by the third-party pipes, the scaffolding contains a i18n pipe, which is equivalent to calling the fanAIN method of ALAIN_I18N_TOKEN directly.

| i18n will not listen to language change notifications, so there will be better performance. When you explicitly re-render the Angular project after switching languages, | i18n will be more suitable.

How to add

When creating scaffolding from command line ng add ng-alain, it is allowed to specify --i18n to indicate whether the internationalized sample code is included.

How to delete

The sample code covers the following:

  • src/app/core/i18n directory

  • Replace the pipe of i18n that may appear in the default layout using | i18n

Default language

Regardless of whether internationalization is required or not, since the default languages ​​of class libraries such as Angular, ng-zorro-antd, @delon/* are different, it is also necessary to ensure that the default language of these libraries is the same type. A simple example approach to understand the current language situation for each type of library:

import { Component } from '@angular/core';

@Component({
  selector: 'app-i18n-test',
  template: `
  <h2>angular</h2>
  <p>Date: {{now | date}}</p>
  <h2>ng-zorro-antd</h2>
  <nz-transfer [nzDataSource]="[]"></nz-transfer>
  <h2>@delon</h2>
  <div style="width: 200px">
    <tag-select>
      <nz-tag>1</nz-tag>
    </tag-select>
  </div>`,
})
export class I18nTestComponent {
  now = new Date();
}

Example

In order to make language uniformity, NG-ALAIN provides a simple unified configuration in the AppModule root module.

Chinese Version

// #region i18n
import { default as ngLang } from '@angular/common/locales/zh';
import { NZ_I18N, zh_CN as zorroLang } from 'ng-zorro-antd/i18n';
import { DELON_LOCALE, zh_CN as delonLang } from '@delon/theme';
const LANG = {
  abbr: 'zh',
  ng: ngLang,
  zorro: zorroLang,
  delon: delonLang,
};
// register angular
import { registerLocaleData } from '@angular/common';
registerLocaleData(LANG.ng, LANG.abbr);
const LANG_PROVIDES = [
  { provide: LOCALE_ID, useValue: LANG.abbr },
  { provide: NZ_I18N, useValue: LANG.zorro },
  { provide: DELON_LOCALE, useValue: LANG.delon },
];
// #endregion

@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}

English version

// #region i18n
import { default as ngLang } from '@angular/common/locales/en';
import { NZ_I18N, en_US as zorroLang } from 'ng-zorro-antd/i18n';
import { DELON_LOCALE, en_US as delonLang } from '@delon/theme';
const LANG = {
  abbr: 'en',
  ng: ngLang,
  zorro: zorroLang,
  delon: delonLang,
};
// register angular
import { registerLocaleData } from '@angular/common';
registerLocaleData(LANG.ng, LANG.abbr);
const LANG_PROVIDES = [
  { provide: LOCALE_ID, useValue: LANG.abbr },
  { provide: NZ_I18N, useValue: LANG.zorro },
  { provide: DELON_LOCALE, useValue: LANG.delon },
];
// #endregion

@NgModule({
  providers: [...LANG_PROVIDES],
})
export class AppModule {}

Command Line

Use the defaultLanguage plugin to quickly switch between the default locales.

Internationalized routing

If you want to toggle internationalization by routed URLs, e.g. by accessing /zh and /en to change the language, just use the AlainI18NGuard guard in the root route:

const routes: Route[] = [
   {
     path: '',
     component: LayoutComponent,
     canActivateChild: [AlainI18NGuard],
     children: [
       { path: '', redirectTo: 'en', pathMatch: 'full' },
       { path: ':i18n', component: HomeComponent }
     ]
   }
];

Where :i18n is a fixed value of the parameter, which can be adjusted by the Global Configuration paramNameOfUrlGuard.