Angular CLI 從 v8 版本開始，就支援一個「差異化載入」(Differential Loading) 功能，此功能會自動判斷當今世上所有主流瀏覽器中，是否支援 ES5 或 ES2015 (ES6) 語法。如果這些瀏覽器還有不支援 ES2015 的版本尚在市場上流通的話，Angular CLI 在執行 ng build --prod 的時候，就會建置出分別為 ES5 與 ES2015 兩個版本，並透過 nomodule 屬性達成差異化載入。想當然爾，如果一次建置兩個版本，總體建置時間也會倍增。本篇文章我將解釋這部分技術細節，如果你只想建置出 ES2015 的版本，也請繼續看下去。
... 繼續閱讀 ...
當 Angular 越用越熟，你將會發現其開發效率極高無比，除了極佳的工具支援外，優異的模組化技術更是不在話下。上週在教 Angular 7 開發實戰：進階開發篇 的時候，有學員許願，說希望我能分享一些 Angular 函式庫的作法，說著說著就這麼願望成真了！ 😆 當越來越多專案都用 Angular 開發時，你一定會發現有越來越多的共用元件出現。本篇文章我將設計出一款同時讓 Reactive Forms 與 Template-driven Forms 皆可使用的表單驗證器，並完整介紹如何用 Angular CLI 從頭到尾建立並發行一個自己的 Angular Library 函式庫！
... 繼續閱讀 ...
現在日常的 JavaScript 已經完全離不開 TypeScript 了，在強型別的保護下，不但不容易寫出錯誤的代碼，還能透過開發工具提供的 IntelliSense 提高開發速度。但是如果手邊的程式碼只能使用 JS 來撰寫，那該怎麼辦呢？像是 Protractor 的設定檔 protractor.conf.js 就是一個典型的例子，本篇文章我將分享如何在現有 JavaScript 檔案下使用 TypeScript 的型別檢查提示。
... 繼續閱讀 ...
網站建置不是件簡單的事，我們都知道網站做好之後，有好多細節需要兼顧，所以許多公司花了大量的時間與金錢，耗用人力對維護中的網站進行不斷的、重複的人工測試，想達到的目的不外乎是希望網站不要出錯，可以給客戶/使用者最好的網站使用體驗。但你是否知道單元測試、整合測試、端對端測試之間的差異在哪裡？本篇文章將闡述他們之間不同的部分。
... 繼續閱讀 ...
最近推出的 Angular CLI 7.3 版本，新增了一個相當亮眼的特性。當你的 Angular 應用程式同時要符合 IE 或舊版瀏覽器時，以往都會用 Polyfill 來填充缺少的 HTML5/JS APIs，但這件事到了 Angular CLI 7.3 又變得更貼心了。不但如此，這個新特性一樣可以用在各種 SPA 框架中，像是 Vue, React 或其他函式庫也都可以套用相同技巧。欲知詳情請繼續看下去。
... 繼續閱讀 ...
Angular 的 HttpClient 可以說相當簡單易用，不過在實務上開發時又好像不是那麼順。因為 TypeScript 的強型別特性，導致有時候程式雖然可以跑，但在 VSCode 卻會顯示錯誤。今天抽空整理了些常見的地雷與陷阱，幫助大家理解問題發生的原因，未來也可以避免類似的問題再度發生。
... 繼續閱讀 ...
我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動，現場來了將近 200 人，可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動，我發現整體活動安排得不是很理想，尤其是最後專家座談的部分，留給會眾提問的時間太少了，這點我們一定會在日後的活動中改進。本篇文章，我打算回答線上提問的所有問題，幫助大家釐清疑惑。
... 繼續閱讀 ...
我們許多專案，都會有網頁設計師設計版型，然後再交由前端工程師套版。不過有很多版型，都會留有 <a href="#"></a> 這樣的空連結，比較常見的用途都是在「多層次選單」的上層連結。但這樣的連結，在套用至多頁面路由的 SPA 應用程式中時，就會出現問題。由於 SPA 網頁在設計的時候，都會套用 <base href="..."> 元素，設定網頁中所有連結的基礎位址 (Base URL)，當使用者點擊 <a href="#"> 這樣的連結時，就會導致網頁重新整理！本篇文章將解說幾個可能的解決方案。
... 繼續閱讀 ...
撰寫 Angular 的開發者，目前應該是最自然接觸 RxJS 的了。每當有機會要用上的時候，就會在這一百多個 RxJS 運算子之間徘迴打轉，因為實在太多相似的 API 可以用，以至於經常鬼打牆寫不出來。今天，我就整理幾個不但常用，命名還很像，更容易用錯的 RxJS 運算子。
... 繼續閱讀 ...
昨天寫了一個小工具，可以自動將現有 Angular CLI 建立的專案，轉換成有 Hot Module Replacement (HMR) 功能的版本，只要簡單一個命令 ng add hmr-enabled 就可以搞定，非常方便。不過我在發布專案到 npm registry 的過程中，卻意外遺漏了幾個重要的檔案，原來是有檔案被 .npmignore 給忽略掉了，到了今天傍晚才修復。我們就立刻來看看這個錯誤是怎樣發生的！
... 繼續閱讀 ...
這兩個月經常在新竹科學園區進行 Angular 企業內訓，有越來越多的企業意識到 Angular 帶來的高價值(High Value)與低總體成本(Low TCO)。不過，在高度資安的防護下，我經常需要協助學員「離線安裝」完整的 Angular 開發環境，而且必須在「無管理員身分」的權限下進行安裝。雖然我已經寫了不少相關文章，但環境設定上還是沒甚麼效率。今天這篇文章，我特地整理詳細的設定步驟，幫助大家更順利的設立 Angular 開發環境。
... 繼續閱讀 ...
在微服務架構下，部署 Angular 應用程式與後端 Web API 應該切割成兩個不同的微服務。但具體的實現方式，通常會透過容器化技術來達成，實作上相對容易許多。像我們公司的特定專案，就是透過 Kubernetes 叢集化技術來實現這個目的。這篇文章，我將分享如何將 Angular 這類 SPA 框架，如何透過 nginx 反向代理與 Docker 容器化技術，徹底做到微服務化。將前後端分離的結果，可以幫助我們簡化 CI/CD 流程，同時降低系統之間的耦合性。
... 繼續閱讀 ...
許多企業在設法導入前端工程的過程中，最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下，所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章，我將分享幾個小技巧，幫助企業開發人員可以在內部實現簡易的 npm 離線快取。
... 繼續閱讀 ...