我們有個大型的 Angular 專案，原本在 Azure Pipelines 的 CI 都很順利，但是一個月前開始變的不穩定，常常會掛掉，而掛掉的原因是「記憶體不足」造成的。本篇文章我打算分享本次問題的 Log 內容，並提供一個解決方法。
... 繼續閱讀 ...
現在有越來越多純前端框架推出，但無論你用哪種前端框架，最終都還是需要後端 API 才能建構出一個完整的網站，以及提供身份驗證與授權等需求。為此微軟 Azure 推出了一個全新的服務叫做 Static Web Apps (SWA) (靜態網站應用程式)，不單單讓你部署前端應用程式，還幫你搞定了 API Gateway 與身份認證等常見需求，同時還結合了前端開發常見的 API 整合功能，進一步降低前後端整合門檻。今天這篇文章我主要以 Azure Static Web Apps 的命令列工具為例 (Static Web Apps CLI)，帶大家走一遍從安裝到部署的完整過程。
... 繼續閱讀 ...
我們在 Angular 使用 HttpClient 的時候，難免會需要在呼叫時加入 Query String (查詢字串)，與其用「組字串」的方式來撰寫，倒不如利用 HttpParams 提供的 API 徹底簡化查詢字串操作，同時也可以提升程式碼的可讀性。這篇文章我就來介紹幾個常見用法。
... 繼續閱讀 ...
我昨天在授課的時候，突然遇到 Chrome 瀏覽器無法瀏覽網站的情況(ERR_UNSAFE_PORT)，我踩到一個不知道算不算罕見的地雷，在深入瞭解之後，覺得有必要寫成文章提醒大家，因為你還真的很有可能會在不久的將來遇到這個問題，看完文章才不會讓你日後鬼打牆太久，讓我們繼續看下去。
... 繼續閱讀 ...
RxJS 可以將所有 Observable 物件簡單區分成兩種不同類型的，一種是有限事件數量的 Observable 物件，例如 HttpClient 相關 API 在訂閱之後就只會有一筆資料回來，這種類型的 Observable 在訂閱之後是不需要特別取消訂閱的。另一種則是無限事件數量的 Observable 物件，像是 DOM 的事件訂閱，或是使用 RxJS 的 timer 建立運算子(Creation Operators)，或是你在元件中訂閱 Router.events 等等，這些 Observable 都沒有結束的一天，因此需要實作取消訂閱(Unsubscribe)，否則就可能會導致記憶體洩漏等問題。這篇文章我將分享四種不同的 RxJS 取消訂閱方法。
... 繼續閱讀 ...
早期 Angular CLI 建立的專案都有內建 TSLint 與 codelyzer，但從 Angular CLI v11 開始建議大家開始轉移到 Angular ESLint，直到 Angular CLI v12 直接拔除所有 Linter 設定。本篇文章我將介紹如何從現有 TSLint 的 Angular 專案升級到改用 Angular ESLint 進行撰寫風格檢查，以及從完全沒有 ESLint 的 Angular 專案如何加入 ESLint 的完整流程。
... 繼續閱讀 ...
我們在團隊中開發 Angular 應用程式，經常需要同步每個成員的程式碼格式，與其訂定 Coding Style (代碼風格)，倒不如直接用工具強制所有成員用一致的風格進行程式碼排版。本篇文章我將示範用 husky 搭配 prettier 來設定 Git 的 pre-commit hook，讓每個人在 git commit 之前就自動將變更的程式碼進行排版。
... 繼續閱讀 ...
在 Visual Studio 2019 裡面使用含有 OpenAPI 規格的 Web API 已經是十分便利，只要規格寫的好，Web API 用戶端函式庫只要一秒鐘就可以產生。但其實這些好用的功能背後都是靠 MSBuild 與 NSwag 做到，今天花了一整天把所有技術細節釐清，釐清之後對這整套作法是如此的豁然開朗，感覺很棒。這篇文章我就來寫寫今日的研究心得！
... 繼續閱讀 ...
Angular CLI 從 v8 版本開始，就支援一個「差異化載入」(Differential Loading) 功能，此功能會自動判斷當今世上所有主流瀏覽器中，是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話，Angular CLI 在執行 ng build --prod 的時候，就會建置出分別為 ES5 與 ES2015 兩個版本，並透過 nomodule 屬性達成差異化載入。想當然爾，如果一次建置兩個版本，總體建置時間也會倍增。本篇文章我將解釋這部分技術細節，如果你只想建置出 ES2015 的版本，也請繼續看下去。
... 繼續閱讀 ...