momentjs，可以說是最多人使用的老牌 JavaScript 時間處理類別庫；當然，隨著技術的進步，momentjs 也有不少議題被提出，其中最大的問題就是檔案太過龐大了，且隨著現在前端技術的發展，我們經常使用 webpack 等工具將前端程式進行打包，同時過濾 (tree shaking) 要不要的程式，以減少整體檔案大小。

而 momentjs 由於原始設計的關係，在做 tree shaking 的時候會無法移除掉用不到的 API，同時還有龐大的語系檔，嚴重影響最終 bundle 檔案大小。

抱怨歸抱怨，momentjs 還是非常多人在用，因此只能盡量的做到減少大小，至少不要把龐大的語系檔一起 bundle 進來。

Angular 過去是將 webpack 整個封裝起來的，而隨著版本推移，現在也能自訂 webpack 了，今天就來看一下如何在 Angular 中自訂 webpack，同時移除 momentjs 中過大的語系檔。

透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果，不過對於伺服器端產生的內容，到了 client 依然會重新進行產生，對於比較複雜的非同步處理如 HTTP 呼叫，就會發生重複呼叫，甚至造成畫面閃爍的問題。

針對這個問題，Angular 提出了 Transfer State (狀態轉移) 的做法，將 server 抓取資料的狀態移轉到 client，讓 client 可以直接使用這些狀態資料，而不是重新產生，以避免畫面閃爍等問題。

今天就來看看 Transfer State 的使用方式吧！

隨著 Angular 不斷的改版，原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大，搭配 Prerender 功能，不用再依靠如 Hexo、Scully 等工具，要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易，今天就來簡單看一下 Angular Universal 現在變得多麼簡單，且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧！

Angular 6正式推出了Angular Elements的功能，讓我們可以將Angular元件轉換成標準的Custom Elements功能，在任何其他的HTML頁面中使用，這代表著Angular的應用範圍可以延伸到各種web應用去了！就算團隊中習慣用的是jQuery，我們也能夠把複雜的功能專換成Custom Elements，並且直接用在使用jQuery或其他靜態網站中，非常的方便！！

今天我們就來簡單看看如何使用Angular Elements，以及實際把它運用到一般的HTML頁面，來學習理解Angular Elements的強大吧。

Jest是由Facebook開發出來的測試框架，就算Jest跟React是同一個爸爸，要拿來跑Angular的測試卻也沒有問題！今天就來看看如何把Jest套在Angular的專案上吧。

Angular內建了一個async pipe，讓我們在view中處理非同步資料時更加輕鬆，不論是Promise還是Observable都不需要額外做then或subscribe的動作，只要在view中加入async這個pipe就可以自動把該做的事情都做好，但當當一個非同步的結果會在不同地方顯示時，用async pipe就會發生重複處理的問題，這時就可以搭配RxJs的shareReplay operator來解決這個問題。

Angular本來就是個把測試也考量進去的前端框架，因此提供了不少測試工具，由於現在寫JavaScript勢必會大量使用各種非同步執行的方式撰寫，因此Angular也提供了一些API讓我們在測試非同步執行的程式時更加容易，今天要講的fakeAsync跟tick就是其中一個神奇的工具！

Angular提供了ComponentFactoryResolver，來協助我們在程式中動態的產生不同的Component，而不用死板板的把所有的Component都寫到View裡面，再判斷是否要顯示某個Component，當遇到呈現方式比較複雜的需求時非常好用，寫出來的程式碼也會漂亮很多。今天就來看看如何透過ComponentFactoryResolver來動態產生需要的Component。

在設計Angular程式的時候，我們可以在各種基本的表單上加入**[(ngModel)]**來達到two way binding的效果，不過如果想要在Component中也能使用[(mgModel)]該怎麼辦呢？今天就來談談如何讓自訂的Component也可以直接使用ngModel達到two way binding！