最近接手一個專案，需要將舊 Angular 9 專案加入之前客戶沒有實作的 lazy loading 功能，專案包含了將近 600 個頁面，之後還會增加。

重構的過程是很順利的，不過在 lazy loading 架構完成後，卻出現了 production build 時間大幅增加的問題，花費了不少時間研究，總算是以較低的代價換回了 build 速度。

這篇文章就來分享一下整個過程和結論。

Angular CLI 可以幫助我們透過 ng 指令完成許多繁雜的工作，像是啟動開發用的伺服器 (ng serve)、將 Angular 專案建置成純前端網站 (ng build) 、或是進行單元測試 (ng test) 等等，這些指令其實背後都是一段又一段的程式，再搭配 Angular 的 CLI Builder API 整合起來的，而透過 CLI Builder API 也可以幫助我們將一些專案內經常運行的程式也整合到 Angular CLI 內，甚至可以藉此擴充原本內建的 Angular CLI 指令，今天就來看一下如何使用 CLI Builder API 吧！

Angular CLI 基本上已經成為開發 Angular 應用程式的標準配備了，我們會透過 Angular CLI 建立專案、檔案骨架，或是用來執行以及打包應用程式，以及運行測試等等。透過 Angular CLI 可以減少許多開發時期以及執行程式的前置準備時間成本，讓生活變得更加美好！

而到了 Angular CLI 第 6 版後，多了非常多和過去不同的設定，雖然在常用的功能體驗上完全沒有不同，但卻有了更多可以調整的地方，今天就來更加深入理解 Angular CLI 的相關指令、設定與應用吧。

Angular Material 6 在今天 (2018/05/04) 正式登場，從 Angular 本身、Angular CLI 到 Angular Material，全部都一次推出第 6 版！這個版本除了對齊版號以外，也投下了非常多驚人的震撼彈，許多都是跟程式架構與產生(schematics)有關！原本的安裝或升級都能夠藉此架構大幅節省心力，今天就讓我們看看，從 Angular 6 與 Angular Material 6 之後，要使用 Angular Material 到底變得有多簡單吧！

今天我們將開始正式邁入Angular Material的世界，要學習使用Angular Material打造高品質及高質感的網頁，當然要從安裝Angular Material套件開始，本篇文章就來介紹基本的Angular Material安裝步驟，並簡單加入一個元件來體驗一下有質感是怎樣的一個感覺！

今天來談談如何在NativeScript專案中，使用Angular CLI建立component、directive和module等程式，節省開發時間。

在過去的文章我們已經學到—Angular的應用程式是由一個一個的component所堆積組合起來的，這麼做的好處不用多說就是關注點分離，讓你專心在目前的功能上，也不用擔心影響到其他的component，但是當你的程式架構越來越龐大時，管理這些數以百計的components就變成一門學問了，這時候我們就可以透過模組化的機制，更有組織的管理你的所有components，這也就是我們今天要談的主題—Module。

上一篇文章我們介紹了Angular中內建的Pipe，讓我們更容易在View中直接改變資料的顯示方式，今天我們來說明如何設計自己的Pipe。

在web應用程式中使用CSS可以說是在基本不過的事情，就算移到的Angular，CSS當然還是依然會大量的被使用；使用CSS感覺好像沒什麼好聊的，不過Angular可是個花費了數年且結合了社群的腦力激盪開發最終才release的框架，對於處理CSS自然有更獨到方便管理的做法，今天就來談談在Angular中使用CSS的一些技巧吧！

之前的文章介紹過Angular CLI的基本用法之後，本篇文章開始就來寫一個簡單的TodoApp，藉此來練習Angular的各種特色。