Angular 16 有個新特性，可以大幅簡化取得路由參數的語法，對新手老手來說都是福音，這篇文章我就來說說這個全新路由特性，相信這個特性大家看了都喜歡！😍
... 繼續閱讀 ...
從 Angular 15 開始，預設透過 ng new 建立的專案都不會有之前的 environment.ts 環境變數檔與相關設定，由於看到有人問到這個問題，而且我發現官方文件都沒有相關說明，因此我特別撰文說明如何把這個設定加回去。
... 繼續閱讀 ...
我們有個大型的 Angular 專案，原本在 Azure Pipelines 的 CI 都很順利，但是一個月前開始變的不穩定，常常會掛掉，而掛掉的原因是「記憶體不足」造成的。本篇文章我打算分享本次問題的 Log 內容，並提供一個解決方法。
... 繼續閱讀 ...
我們在 Angular 使用 HttpClient 的時候，難免會需要在呼叫時加入 Query String (查詢字串)，與其用「組字串」的方式來撰寫，倒不如利用 HttpParams 提供的 API 徹底簡化查詢字串操作，同時也可以提升程式碼的可讀性。這篇文章我就來介紹幾個常見用法。
... 繼續閱讀 ...
RxJS 可以將所有 Observable 物件簡單區分成兩種不同類型的，一種是有限事件數量的 Observable 物件，例如 HttpClient 相關 API 在訂閱之後就只會有一筆資料回來，這種類型的 Observable 在訂閱之後是不需要特別取消訂閱的。另一種則是無限事件數量的 Observable 物件，像是 DOM 的事件訂閱，或是使用 RxJS 的 timer 建立運算子(Creation Operators)，或是你在元件中訂閱 Router.events 等等，這些 Observable 都沒有結束的一天，因此需要實作取消訂閱(Unsubscribe)，否則就可能會導致記憶體洩漏等問題。這篇文章我將分享四種不同的 RxJS 取消訂閱方法。
... 繼續閱讀 ...
Angular CLI 從 v8 版本開始，就支援一個「差異化載入」(Differential Loading) 功能，此功能會自動判斷當今世上所有主流瀏覽器中，是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話，Angular CLI 在執行 ng build --prod 的時候，就會建置出分別為 ES5 與 ES2015 兩個版本，並透過 nomodule 屬性達成差異化載入。想當然爾，如果一次建置兩個版本，總體建置時間也會倍增。本篇文章我將解釋這部分技術細節，如果你只想建置出 ES2015 的版本，也請繼續看下去。
... 繼續閱讀 ...
Angular 的 HttpClient 可以說相當簡單易用，不過在實務上開發時又好像不是那麼順。因為 TypeScript 的強型別特性，導致有時候程式雖然可以跑，但在 VSCode 卻會顯示錯誤。今天抽空整理了些常見的地雷與陷阱，幫助大家理解問題發生的原因，未來也可以避免類似的問題再度發生。
... 繼續閱讀 ...
我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動，現場來了將近 200 人，可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動，我發現整體活動安排得不是很理想，尤其是最後專家座談的部分，留給會眾提問的時間太少了，這點我們一定會在日後的活動中改進。本篇文章，我打算回答線上提問的所有問題，幫助大家釐清疑惑。
... 繼續閱讀 ...
我們許多專案，都會有網頁設計師設計版型，然後再交由前端工程師套版。不過有很多版型，都會留有 <a href="#"></a> 這樣的空連結，比較常見的用途都是在「多層次選單」的上層連結。但這樣的連結，在套用至多頁面路由的 SPA 應用程式中時，就會出現問題。由於 SPA 網頁在設計的時候，都會套用 <base href="..."> 元素，設定網頁中所有連結的基礎位址 (Base URL)，當使用者點擊 <a href="#"> 這樣的連結時，就會導致網頁重新整理！本篇文章將解說幾個可能的解決方案。
... 繼續閱讀 ...