Angular CLI終極參考指南
如果翻譯內容對你產品困擾，可查看原文The Ultimate Angular CLI Reference Guide
構建項目
開發期間運行ng serve，會在虛擬文件系統中自動構建打包Angular應用。
當你準備發布應用到生產，你需要真實的文件部署到服務器或云上。
構建打包應用用于部署，可運行：
$ ng build
命令將輸出以下內容到控制臺：
3656ms building modules
Hash: 69fb9d88c4f502e01790
Version: webpack 2.1.0-beta.25
Time: 6457ms
Asset Size Chunks Chunk Names
main.bundle.js 2.54 MB 0, 2 [emitted] main
styles.bundle.js 10.2 kB 1, 2 [emitted] styles
inline.js 5.53 kB 2 [emitted] inline
main.map 2.57 MB 0, 2 [emitted] main
styles.map 14.1 kB 1, 2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 472 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.bundle.js, main.map (main) 2.03 MB {1} [initial] [rendered]
chunk {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.81 kB 0
chunk {0} index.html 339 bytes [entry] [rendered]
這條命令做了什么？
- AngularCLI從angular-cli.json文件中加載配置。
- AngularCLI運行webpack構建打包Javascript和CSS代碼。
- 輸出結果到AngularCLI配置中指定的目錄下，默認目錄是dist。
可選參數
- --aot：預編譯（可查看章節future features）。
- --base-href:string,設置index.html文件中的base href參數。
- --environment:string,默認dev，在哪個環境中使用。
- --output-path:string,文件輸出目標路徑。
- --target:string,默認development，在哪個環境中使用。
- --watch:boolean,默認false，監聽文件變化，當監聽到文件變化的時候，重新構建
target
指定的target會影響到構建進程操作，允許值如下所示：
- development:默認值，不壓縮混淆
- production:壓縮混淆代碼
構建生產環節代碼：
$ ng build --target=production
構建出幾個boundl文件，以及壓縮、混淆并在文件名中添加了hash值
3596ms building modules
Hash: 3d5ff21d335b08426087
Version: webpack 2.1.0-beta.25
Time: 9643ms
Asset Size Chunks Chunk Names
main.a8db3859286ec456f5d8.bundle.js 825 kB 0, 2 [emitted] main
styles.b52d2076048963e7cbfd.bundle.js 3.97 kB 1, 2 [emitted] styles
inline.js 1.39 kB 2 [emitted] inline
main.a8db3859286ec456f5d8.bundle.js.gz 187 kB [emitted]
index.html 514 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.a8db3859286ec456f5d8.bundle.js (main) 2.03 MB {1} [initial] [rendered]
chunk {1} styles.b52d2076048963e7cbfd.bundle.js (styles) 9.96 kB {2} [initial] [rendered]
chunk {2} inline.js (inline) 0 bytes [entry] [rendered]
target環境
通過環境你可以指定相應定制的應用環境設置
你可以在angular-cli.json文件中自定義環境。默認為：
- source:使用environments/environment.ts中定義的設置。
- dev: 使用environments/environment.ts中定義的設置。
- prod:使用environments/environment.ts中定義的設置。
environments/environment.ts文件等同于：
export const environment = {
production: false
};
environments/environment.prod.ts文件等同于：
export const environment = {
production: true
};
構建進程默認使用dev環境。
如果你指定了其他的環境，構建進程將使用相應的環境：
Uses environments/environment.ts
$ ng build
Also uses environments/environment.ts
$ ng build --environment=dev
Uses environments/environment.prod.ts
$ ng build --environment=prod
就像在src/main.ts一樣，你可以通過引入environments/environment來獲取environment 設置：
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
構建進程會確保你import的環境是正確的。
部署項目
當你準備部署項目，你可以使用AngularCLI將項目部署到主機供應商上。
目前AngularCLI只支持GitHub Pages:
$ ng github-pages:deploy
這條命令做了什么？
- 應用程序按照生產模式構建打包（生產target+生產environment）。
- 結果輸出到dist目錄。
- 在你的Git倉庫下創建gh-pages分支，與GitHub要求的文件與布局相一致。
- 產生一條Git commit。
- commit pushed到Github上。
如果你的Git倉庫有沒關聯遠程GitHub倉庫，AngularCLI將會給你必要的提示。
可選參數
- --message:string,構建的時候提交的message，必須寫在引號中。
- --target:string,默認development,使用的環境
- --user-page:boolean,默認false,是否以user/org頁面部署到GitHub上
- --skip-build:boolean,默認false,跳過構建直接部署
- --gh-token:string,使用Github的token
- --gh-username:string,使用Github用戶名
- --base-href:string,在index.html文件中使用的base href值
未來將增加支持其他主機供應商（hosting providers）
