Angular v12 來了!!

YEAH!!!

今天一早準備工作時,看到令人興奮的好消息!那就是 ─ Angular v12 已經正式 Release 了!!

官方文章在此:Angular v12 is now available

幫看到英文就倒退三百步的朋友總結一下幾個重點:

Ivy Everywhere

為了更靠近 Ivy Everywhere 這個目標, Angular 棄用了舊的 Compiler - View Engine ,不過這對於一般開發者來說沒什麼影響,主要是如果你是身為 Library 的作者且是使用 View Engine 來 Compile 的話,可以開始著手準備使用 Ivy 來 Compile 了。

為此,官方有提供實作細節

Protractor 的未來

關於 Angular 生態圈所標配的 E2E 測試框架 ─ Protractor 的未來,目前官方決定將從 v12 開始不再預設包含 Protractor ,而是與其他夥伴合作(目前官方已收到的夥伴回音有 CypressTestCafeWebdriverIO 。如果你們公司也有在做這塊且有興趣,可以跟官方團隊聯繫),並透過 Angular CLI 的 schematic/builder 與 Angular 緊密結合。

官方堅信,透過與其他夥伴的合作以及擁抱社群的力量,可以使 Angular 變得更加強大!對於細節有興趣的朋友可以閱讀官方的RFC(請求意見稿)

Nullish 操作符

從 v12 開始,開發者們可以在 Angular 的 Template 裡使用 Nullish 操作符 ─ ??(沒錯,就是很香很甜的語法糖)了!

透過使用 Nullish 操作符,可以讓你的 code 看起來更加 Clean (雖然每個人、每個團隊對於 Clean Code 的定義都不一樣,但官方是這麼認為,我也是)。

舉個例子:

1
{{ age !== null && age !== undefined ? age : calculateAge() }}

使用 Nullish 操作符後,你的 code 像這樣:

1
{{ age ?? calculateAge() }}

謎之聲:耶!令人舒爽的程式碼!

樣式相關的改進

關於樣式方面,從 v12 開始,只要在 angular.json 裡加上 inlineStyleLanguage: "scss" 的設定,就可以在 Component 的 styles 裡寫 SCSS 了,雖然關於這點我其實覺得還好,因為我個人不喜歡將 Template 或是樣式直接寫在 *.component.ts 裡。

不過令人興奮的是, Angular CDKAngular Material 現在內部已經改使用 Sass 新的 Module System 了!與此同時, Angular CDKAngular Material 所外露的 API 介面也已經改採用 @use 語法,官方文件 也已經同步更新(尷尬,破版了XDD)。

不過如果你的應用程式是建立在 Angular v12 以下,但有使用到新版的 Angular CDK 或是 Angular Material 的話,可以使用 ng update 的指令讓 Angular CLI 幫你自動更新所有使用於 Angular CDKAngular Material@import 聲明(Before and After),並記得將你的 NPM 套件從 node-sass 改為 sassnode-sass 已經沒有持續更新且維護了(如果你是使用 Angular v12 則不用做此行為,內建已經是 sass 了)。

編譯模式預設為 Production 模式

v12 之後, ng build 指令將會預設為 Production 模式,意即開發者們不用再加上 --prod 來強調要編譯 Production 模式的檔案,減少多餘的步驟並防止將開發模式的程式碼誤植到 Production 上的意外發生。

預設開啟嚴格模式

v12 之後,將預設開啟 TypeScript 的嚴格模式,嚴格模式會幫助開發者們儘早發現錯誤。

關於嚴格模式可以閱讀 Angular 官方文件Angular 官方部落格的文章

Angular Language Service 預設為 Ivy-based

v12 之後,將原先 Angular Language Service 可以選擇性使用 Ivy-based 改為預設使用。

官方還有提供了一部影片 是關於Angular Language Service with Ivy 的,有興趣的朋友也可以看看。

使用 Webpack 5

從 v11 開始, Angular 其實就有實驗性地在支援 Webpack 5 ;但從 v12 開始,就正式支援啦!!!(灑花)

TypeScript v4.2

v12 預設所採用的 TypeScript 是 v4.2 ,關於 v4.2 的細節可以閱讀官方的文章

棄用對 IE 11 的支援

從 v12 開始,官方將棄用對於 IE 11 的支援,並預計將在 v13 時正式將其移除。關於此決定可以觀看 官方的 RFC(請求意見稿)

其他更新

其實其他還有一些滿重要的更新與調整,不過上述幾點是我個人擷取出來,覺得對一般開發者來說比較重要且有感的更新,所以關於其他的更新,可以直接閱讀官方的文章,抑或是直接看官方的 CHANGELOG


以上,就是今天李歐想要分享給大家的資訊,感謝您的收看!

如果您喜歡我的文章,歡迎按讚、訂閱以及分享,我們下次見囉,拜拜~!(好 Youtuber 式的結尾XD)

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×