早期 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 的版本，也請繼續看下去。
... 繼續閱讀 ...
當 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 卻會顯示錯誤。今天抽空整理了些常見的地雷與陷阱，幫助大家理解問題發生的原因，未來也可以避免類似的問題再度發生。
... 繼續閱讀 ...