[技術支援-8] 產品發佈設定

將產品發佈到正式環境

  • 最簡單的方法是
  • 將所有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綑綁在一起。
首先先安裝

然後建構應用程式

在dist生成綑綁包

運行管理器來生成這個被綑綁的檔案的分析圖

產生的圖如下:

善用效能觀察工具

首推的當然就是google chrome囉!
這邊有相關的教學系列文:認識 Chrome 開發者工具
官網也有推薦使用WebPageTest 來衡量自己網頁的速度

伺服器啟用Routee功能的配置方法

Apache設定方式

添加一個重寫規則.htaccess

NGinx

使用前端控制器模式Web應用程序中try_files描述的方法 修改為:index.html

IIS

添加一個重寫規則web.config

GitHub Pages

我們無法直接配置GitHub Pages服務器,但是可以添加一個404頁面。複製index.html到404.html。
它仍將作為404響應,但瀏覽器將處理該頁面並正確加載應用程序。從服務docs/上創建一個.nojekyll文件

Firebase hosting

添加一個重寫規則

[技術支援-7] TypeScript設定

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。

[技術支援-6] NPM設定

安裝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 Packages

  • @angular/animations:網頁切換動畫效果
  • @angular/common: services, pipes, and directives等都在這邊
  • @angular/compiler:Angular的模板編譯器,在JIT
  • @angular/core: 基本angular框架所需的功能如metadata decorators, Component, Directive, dependency injection,以及元件的lifecycle hooks都在裡面
  • @angular/forms:template-driven和reactive forms的表單驗證功能都在這
  • @angular/http:Angular的舊版即將被棄用的HTTP客戶端
  • @angular/platform-browser:一切DOM和瀏覽器相關的在這,AOT編譯方法也在這
  • @angular/platform-browser-dynamic:JIT編譯器在這
  • @angular/router:路由器功能
  • @angular/upgrade:從angularJS升級所需使用的
  • core-js: Polyfill packages
  • zone.js: 一個為 Zone規範提供的填充庫
  • rxjs: 新版的Angular主要使用的HTTP方法模組
  • bootstrap: bootstrap是一個可以簡單做出UI的視覺框架
  • angular-in-memory-web-api: 一個Angular的支持庫,它能模擬一個遠端服務器的Web API,而不需要依賴一個真實的服務器或發起真實的HTTP調用。對演示、文檔範例和開發的早期階段(那時候我們可能還沒有服務器呢)非常有用。

devDependencies需載入的Packages

列在文件中devDependencies區的包會幫助我們開發該應用程序。我們不用把它們部署到產品環境的應用程序中——雖然這樣做也沒什麼壞處。
另外在devDependencies也需要列出所有在Angular裡列為peerDependencies的package