使用 HttpContext 傳遞資料給 HttpInterceptor

Angular 中的 HttpInterceptor 可以幫助我們攔截每個 HttpClient 送出的呼叫,幫助我們在呼叫前後打點各種大小事情,不過有時候我們反而希望 HttpInterctptor 不要自作主張幫我們處理太多事情,之前有些過一篇文章介紹如何忽略 HTTP_INTERCEPTORS,而到了 Angular 12 之後,則內建了 HttpContext 的功能,方便在程式中主動傳遞一些資料給我們自己設計的 HttpInterctptor,來達到一些更細緻的操作,這篇文章就來看一下 HttpContext 該如何使用。

繼續閱讀
[GitHub Actions] 印出事件相關資訊

當使用 GitHub Actions 時,經常要針對來源事件去進行一些額外處理,導致要去查詢事件相關屬性,非常不方便,可以使用 [Debug action] 將相關資料印出,方便查找。

繼續閱讀
[GitHub Actions] 發送 Telegram 訊息
繼續閱讀
[GitHub Actions] 自動關閉某個 bot 的 issues
繼續閱讀
[Angular Universal] 使用 TransferState 解決畫面閃爍問題

透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果,不過對於伺服器端產生的內容,到了 client 依然會重新進行產生,對於比較複雜的非同步處理如 HTTP 呼叫,就會發生重複呼叫,甚至造成畫面閃爍的問題。

針對這個問題,Angular 提出了 Transfer State (狀態轉移) 的做法,將 server 抓取資料的狀態移轉到 client,讓 client 可以直接使用這些狀態資料,而不是重新產生,以避免畫面閃爍等問題。

今天就來看看 Transfer State 的使用方式吧!

繼續閱讀
透過 CLI Builder API 加強 Angular CLI 功能

Angular CLI 可以幫助我們透過 ng 指令完成許多繁雜的工作,像是啟動開發用的伺服器 (ng serve)、將 Angular 專案建置成純前端網站 (ng build) 、或是進行單元測試 (ng test) 等等,這些指令其實背後都是一段又一段的程式,再搭配 Angular 的 CLI Builder API 整合起來的,而透過 CLI Builder API 也可以幫助我們將一些專案內經常運行的程式也整合到 Angular CLI 內,甚至可以藉此擴充原本內建的 Angular CLI 指令,今天就來看一下如何使用 CLI Builder API 吧!

繼續閱讀
[Angular Universal] 使用 Prerender 建立自己的 Static Site Generator

隨著 Angular 不斷的改版,原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大,搭配 Prerender 功能,不用再依靠如 Hexo、Scully 等工具,要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易,今天就來簡單看一下 Angular Universal 現在變得多麼簡單,且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧!

繼續閱讀
[Ramda] 使用 sortWith 輕鬆達成多欄位排序條件

多欄位排序是一件不太困難,但也有點麻煩的事情,雖然 JavaScript 本身提供的 sort() 就可以達到目標,但寫起來就是醜醜的,而透過 Ramda 的 sortWith() 就簡單得多,而且更加好閱讀,今天就來如何使用 sortWith() 打造更好閱讀的排序程式。

繼續閱讀
[Luxon] 顯示 UTC 時間而非當地時間

Luxon 是一套輕巧但強大的時間處理 library,可以幫助我們快速解析來源時間字串,並處理好時區問題,不過預設處理時區有時候也會帶來一些困擾,今天就筆記一下如何用 Luxon 來處理各種時區問題。

繼續閱讀
[Angular 大師之路] Angular 12 預設開啟 strict mode 的生存之道

Angular 12 預設在建立專案時,現在預設會開啟 strict mode 了,strict mode 會加上一些 TypeScript team 建議的檢查,以及 Angular 額外加入的檢查;這代表在不改變設定的情況下,撰寫 Angular 程式將會需要花費更多的心力去處理各種型別的宣告,以避免在 compile 階段發生錯誤。

雖然感覺起來會越來越難寫,但往好處想,這些 strict mode 的檢查,都是為了減少程式在執行階段可能會發生的錯誤,減少非預期錯誤的可能性,也會減少許多 bug 發生的機會,讓我們寫出品質更好的程式碼,也省去更多 debug 的時間浪費!因此花些時間投資在寫出通過 strict mode 檢查的程式碼我覺得是很值得的,今天就來說幾個 strict mode 下容易發生的錯誤以及生存方法。

繼續閱讀