全端開發人員天梯

之前我們撰寫了第一個 Schematics，也簡單介紹了好用的工具，接著我們開始來學習一些更進階的 Schematics 撰寫與應用，今天我們來看看如何讓 Schematics 接收參數，讓寫出來的工具更有彈性！

今天來介紹一個自己開發來幫助增加 Schematics 開發生產力的 Visual Studio Code 套件 - Schematics Snippets。

上篇文章我們介紹了Schematics 的基礎今天我們來快速學學如何撰寫第一個 Schematics。

Schematics 是 Angular CLI 用來產生程式碼骨架的基礎，在接下來的幾篇文章中，我會分享如何使用 Schematics 來幫助專案或團隊產生一些必要的重複程式碼，以及一些個人在使用上的經驗及技巧。

今天就先來簡單介紹一下到底什麼是 Schematics 與基本的觀念吧！

Angular PWA 套件幫助我們以非常簡易的方式，將 Service Worker 註冊到我們的應用程式中，然而一些特定的下，我們會需要做一些細節的調整，尤其是 Service Worker 的註冊時機點，今天就來看看使用 Angular PWA 該如何改變 Service Worker 註冊到應用程式的時間！

Angular 8 之後，將原來延遲載入路由模組的方式做了變動，改使用 dynamic import 的方法。這樣的方法替我們在開發時帶來非常大的優勢！隨著編輯器的資源，不管是模組路徑的設定還是選擇模組的方式，都擁有的自動完成的功能！

不僅如此，如果不想透過路由設定就想達到在程式中動態載入模組也變得比過去簡單許多。今天就讓我們來看看該如何自行在程式中動態載入模組吧。

最近在開發 Angular 程式時，遇到了一個詭異的情況，其實主要是來自對於 HTML 底層的一些觀念沒有弄清楚，跟保哥討論釐清後，雖然不是 Angular 的問題，但要是一個沒注意，很容易不小心發生問題，因此在這篇文章記錄一下！！

我們都知道在 Angular 中如果想要透過 ajax 呼叫 API，可以透過 HttpClient 服務來達成，同時在此之前我們也提過可以使用 HTTP_INTERCEPTORS 來攔截處理所有的 HTTP 請求。但有時候我們會希望不要透過 HTTP_INTERCEPTORS，幫我們處理那麼多事情，這有辦法解決嗎？今天就來介紹兩種方式來解決這個問題！

Angular Universal 可以幫助我們以 server side 的方式把 Angular 畫面先產生好回傳給用戶端，而 Firebase 本身提供了 Firebase Hosting 服務，能讓我們輕易的部署靜態網站，若要部署 Angular Universal 的 express server的話，還可以搭配 Firebase Functions 功能。

透過這樣的整合，我們可以把前端 SPA 架構的 Angular 網站都部署到 Firebase 上面，同時享有 Angular Universal 的 server side rendering (SSR、伺服器渲染) 功能，讓 SEO 排名更好，在做社群分享(如 facebook) 時，也能更正確的抓到資訊！

今天就來分享一下將 Angular 程式部署到 Firebase，並同時支援 Angular Universal 的方法。

昨天我們講了幾個常用 RxJS operators，今天再來看看一些其他在 Angular 常見的應用吧！