從 Angular 14 開始，全新架構獨立元件(Standalone Component)騰空出世，帶給 Angular 開發者一個全新感受，用更簡潔的程式碼、更清晰的架構，幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始，更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉傳統元件為獨立元件，甚至於可以連同 AppComponent 也一併轉換成獨立元件，讓整個 Angular 應用程式都變成以獨立元件為主。這篇文章我來說說這套工具的使用方式！
... 繼續閱讀 ...
我們漸漸在不同專案中嘗試 Monorepo 架構，讓前後端分離的專案中可以共用同一個 Repo 來進行專案開發與管理。今天這篇文章我就簡單分享如何利用 Angular CLI 與 .NET CLI 來快速打造一個 Monorepo 的專案。
... 繼續閱讀 ...
由於我公司有使用玉山商業銀行來處理帳務，我經常需要登入玉山全球智匯網以審核放行一些廠商款項，我一直以來都有使用密碼管理器的習慣，確保我的每個網站所使用的密碼都是不一樣的，強化資訊安全。不過，該網站在我用了數幾年之後，從不久之前開始，該網站完全無法自動登入了，深入研究後才發現，原來他們把網頁上的表單欄位的 id 屬性移除了！這篇文章我來說說我解決此問題的過程，也說說前端工程師應注意的事項！
... 繼續閱讀 ...
我最早接觸 LIFF 的時候已經是 2019 的時候了，當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異，我想透過這篇文章梳理一下 LIFF v2 新版本的特性，好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。
... 繼續閱讀 ...
我們有個大型的 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 取消訂閱方法。
... 繼續閱讀 ...