將產品發佈到正式環境 最簡單的方法是 將所有dist/資料夾底下的文件複製一份到伺服器上 如果想順帶設置base href至<base href=”/my/app/”>，則可加下面參數 若有使用Router功能，將所有找不到的頁面都導向index.html（下面會有詳細介紹） 優化我們的Angular專案 加上–prod參數，會能輸出優化過的檔案 這個參數會為我們的專案做這些事情 改使用AOT編譯：預先編譯而不是用JIT的方式 開啟production mode: 可以讓網站執行更快，等同於下這個參數–environment=prod Bundling: 將所有的所使用的library和許多應用綁在一起 縮小檔案：刪除多餘的空白，註釋和可選的令牌。 Uglification：將變數名稱做混淆的動作。 消除死代碼：刪除未引用的模塊和很多未使用的代碼 添加–build-optimizer可進一步減少檔案的大小 如果要使用惰性加載去載入部份的JS檔案，記得不要在需要被首先加載的模組裡面import要被惰性加載的元件，否則會在一開始就被載入。 AOT預設在編譯時會對ngModules做識別並且做惰性加載的設定。 善用bundles工具 source-map-explorer是一個很棒的bundles工具。可以將許多的js綑綁在一起。 首先先安裝…

TypeScript配置 TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript，得先用tsc編譯器轉譯(transpile)成JavaScript，而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json 這邊是官方關於此配置文件的詳細說明：tsconfig.json tsconfig.json 下面為一個tsconfig.json的範例 關於設定檔裡的noImplicitAny意思是是否不允許typescript編譯時隱性將沒有設定類型的變數設定為any。如果設定為true的話，如果typescript裡面有沒有設定類型的變數則會產生錯誤訊息。當這個值設定為true時，記得要將suppressImplicitAnyIndexErrors也設定為true，不然會發生隱式報錯。 lib.d.ts 文件 TypeScript有一個特殊的聲明文件lib.d.ts。包含了JavaScript運行庫和DOM的各種常用Javascript環境聲明。 基於–target，TypeScript添加額外的環境聲明，例如如果目標為es6時將添加Promise。

安裝NPM環境 Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。 因此Node.js和npm是做Angular開發的基礎。 這邊是Node.js下載連結：Downloads NPM 如果在電腦中需要同時運行多個不同版本的npm，可以使用nvm來管理他們：nvm package.json設定 這邊有詳細的說明文檔：Specifics of npm’s package.json handling 下面是一個預設CLI設定檔的範例 這邊說明幾個比較重要的設定值： script: 是一個script commands的列表，這些script commands會在生命週期中的不同時間運行。其內容的key是生命週期事件，value是要執行的命令。可獲得的生命周期列表：請見此 dependencies: 要運行這個應用程式必要一定要安裝的package devDependencies: 只有在開發時需要用到的功能則寫在這邊，當別人要導入我們所開發的專案時，不用一定要下載完整的devDependencies內容。 在dependencies需載入的Angular…

Ahead-of-Time (AOT)編譯 在Angular 2 中有兩種編譯模式： JIT(Just-in-Time)：Angular預設是使用 Just-in-Time (JIT) 即時編譯，等瀏覽器下載完 *.js 檔案後，會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼，接著才會渲染畫面。 AOT(Ahead-of-Time)：在程式發佈之前就透過 Angular Compiler 進行編譯，所以瀏覽器下載完的 *.js 檔案，就可以直接被執行，然後渲染畫面。 下表為這兩種佈署方式的簡單比較表： Characteristic JiT AoT…

什麼是Angular Universal 下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明 雖然Angular是一種構建Web應用的強大方式，但是長期以來，開發人員都知道它在SEO和可訪問性方面的限制。當然，Google的爬蟲能夠執行JavaScript，但是它並不是唯一的爬蟲方案。例如，在將一個連結提交給Slack之後，它的爬蟲會抓取一個預覽，但是並不會執行JavaScript，所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題，Jeff Whelpley和Patrick Stapleton開發了Angular Universal，它允許在服務端進行渲染。 從上面的文字可以了解，Angular Universal可以在server side預先對網頁模版做處理，變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面，也可以事先產生好靜態檔案以供未來使用。 Angular Universal的主要目的有以下三個 方便網路爬蟲（SEO） 提高在手機裝置和效能較差的設備上的性能表現 快速顯示第一頁 Google，Bing，Facebook，Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引，並在搜索內容。Angular Universal可以生成應用程序的靜態版本，無需JavaScript即可輕鬆搜索，鏈接和導航。這也使網站預覽可用，因為每個URL返回一個完全呈現的頁面。 啟用網頁抓取工具通常被稱為 搜索引擎優化（SEO）。 安裝Angular Universal所需工具 @angular/platform-server – 通用服務器端組件。…

關於Service worker Angular在第5版新推出了支援Service worker的功能，主要是可以讓Angular更能符合PWA的概念。 所謂PWA（Progressive Web App）是希望能夠讓Web application盡可能的在各種環境（網路環境、手機作業系統等）下都能順暢且不減功能性的運作。 例如要可以支援離線功能，在使用 App 收信、寫信、刪除信件等動作，都需要將結果丟回伺服器儲存，但在某些環境下並無法一直使用網路連線，因此必須使用一種機制，讓我們仍能順暢的使用這些功能，待網路正常連線，再將剛才所執行的一切動作反應回伺服器。 而Service Worker可以讓Web application做到上面這樣的事情。 使用Service worker所需環境 要使用Angular Service worker，您必須具有以下Angular和CLI版本： Angular 5.0.0或更高版本。 Angular CLI 1.6.0或更高版本。 Web…