Thinking more...

Angular i18n 的官方作法並不讓人滿意，我後來找到 ngx-translate

先說明一下他的作法，他把這些翻譯好的字詞放到 JSON 翻譯檔去，在執行時就可以透過 http client 去拉取回來作動態的替換。

好處是，程式只要建置一次，不需要針對個別語言再次建置，網頁伺服器那邊也不需要特別寫設定去處理，而且可以做到動態切換語言。壞處是會有額外的 HTTP 請求，會增加流量。

ngx-translate 額外好的地方是，他提供了相應的工具、plugin，相當的方便。

那麼怎麼使用呢？我推薦看這篇【Angular】ngx-translate 多語系實務應用 ，他這篇的缺點是萃取字串的部分是手動，我建議萃取字串的部分可以用原作者 biesbjerg 的 ngx-translate-extract  ，就不用自己找字串找的太累。

先進行安裝

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

然後改 app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
import { HttpClientModule, HttpClient } from '@angular/common/http';

// … 省略 …

// 這主要是告訴 ngx-translate 翻譯檔該怎麼載入，用 TranslateHttpLoader 是表示以 HTTP 方式去下載、載入
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

// … 省略 …

// 設定
const translateConfig = {
  defaultLanguage: 'en-US',  // 預設是英文
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,  // 前面寫的 Factory
    deps: [HttpClient]
  },
  compiler: {
    provide: TranslateCompiler,
    useClass: TranslateMessageFormatCompiler
  }
};

@NgModule({
  // …
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    TranslateModule.forRoot(translateConfig),  // 模組帶設定
    // …
  ],
  // …
})

在 HTML 裡，使用

// 方法 1
{{ ‘your_translation_key’ | translate }}

// 方法 2
<div [translate]=“‘your_translation_key’”></div>

// 方法 3，適用於字串要用 HTML
<div [innerHTML]="'HELLO' | translate"></div>

他還可以帶參數，只是這邊我看不太懂，暫時也還用不到。

在程式裡，使用

// 先匯入
import {TranslateService} from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

// … 省略 …
export class AppComponent implements OnInit {
  l10n__title = '';

  constructor(public translate: TranslateService) {
  }

  ngOnInit(): void {
    const self = this;

    // 讓 ngx-translate-extract 可以抓到字串用的
    _('your_translation_key');

    // 取得字串都要使用 translate.get() 來預先取得
    this.translate.get('your_translation_key').subscribe((res: string) => {
      self.l10n__title = res;
    });
  }
}

這裡要特別說明一點，也是我當初用的時候搞錯的地方，就是上面用到的 your_translation_key 並不是字串，而是你自定義的代碼，裡面有使用 ‘.’ 的時候，在產出的 JSON 裡會變成 nested object ，舉個例子，假設這個 key 是 login.title，那麼 JSON 翻譯檔就會是

{
  "login": {
    "title": ""
  }
}

接下來講 ngx-translate-extract，ngx-translate-extract 的安裝

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

裝好以後，在 package.json 的 scripts 裡加入 (要產生什麼語言，請替換 {en,da,de,fi,nb,nl,sv} 這個字串，以繁體中文來說，是zh-TW或zh-Hant，只有英文跟繁體中文的話，就放 {en-US,zh-TW}。 )

// package.json
...
"scripts": {
  "i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
  "i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json"
}
...

然後建立存放字串的資料夾：mkdir -p src/assets/i18n，執行 npm run i18n:extract 以後，就可以在 src/assets/i18n 裡看到翻譯檔了。