介紹
先講講名詞。
Internationalization 的縮寫是 i18n，中文叫國際化。
Globalization 是 Internationalization 的同義詞，都是指國際化。
Localization 的縮寫是 l10n，中文叫本地化。
i18n vs l10n
一個國際化，一個本地化，它倆有什麼區別，又有什麼關係呢？
我們來看一個具體的例子
上圖是蘋果公司給美國人訪問的官網，內容是 iPhone 16 Pro 的售價。
文字使用的是美式英文 (en-US)，價錢使用的是美金 (USD)。
好，我們再看另外兩張圖
圖一是蘋果公司給中國人看的官網，圖二則是給日本人看的官網。
中國人看的是簡體中文 (zh-Hans-CN) 和人民幣 (CNY)。
日本人看的是日文 (ja-JP) 和日元 (JPY)。
三個網站銷售的都是 iPhone 16 Pro。網站設計、排版都一模一樣。
唯一的區別就是，網站會依據不同的國家，顯示對應的語言和貨幣。
像這樣一個網站，我們就可以說：蘋果公司的官網支援國際化，同時也落實了本地化。
所謂支援國際化，意思是，網站架構有能力 handle 不同的語言，貨幣，時區。(設計，功能全都一樣，就語言，貨幣，時區不同)
所謂落實本地化，意思是，網站不僅有能力 handle 不同語言，而且它確實做出來了。
國際化指的是一個方案 / preparation，本地化則是具體的實現。
Angular i18n
Angular 有 built-in 的 i18n 方案。我們使用 Angular 就能做出像蘋果公司那樣支援國際化的網站。
本篇會 step by step 教 i18n，但不會講解原理，也不會逛原始碼，開始吧 🚀。
參考
YouTube – Introduction to Internationalization in Angular
Docs – Angular Internationalization
Angular i18n step by step
建立一個新專案
ng new i18n --routing=false --ssr=false --skip-tests --style=scss
安裝 localize package
ng add @angular/localize
提醒：是 ng add 不是 yarn add 哦。
它會做好幾件事情：
-
package.json
安裝了 @angular/localize package。
注意看，它是安裝到了 devDependencies 裡哦。
這也意味著，Angular i18n 是在 compile 階段完成的，而不是在 runtime。
-
angular.json
多了一個 polyfill。上一 part 我們說 i18n 發生在 compile 階段，但也不完全。有一小部分還是要 runtime 配合來完成的。
這個 polyfill 就用在這些地方。
-
tsconfig
main.ts
還需要 TypeScript 配合，因為 runtime 會用到一些全域性變數。
目錄
上一篇 Angular 18+ 高階教程 – Memory leak, unsubscribe, onDestroy
下一篇 TODO
想檢視目錄，請移步 Angular 18+ 高階教程 – 目錄
喜歡請點推薦👍，若發現教程內容以新版脫節請評論通知我。happy coding 😊💻