AngularCLI介紹及配置文件主要參數含義解析

使用Angular CLI能夠快速，簡單的搭建一個angular2或angular4項目，是隻要掌握幾行命令就能構建出前端架構的最佳實踐，它本質也是使用了webpack來編譯，打包，壓縮等構建的事情，適合想用webpack的特性又不想學習webpack那些複雜的配置的開發者；

1、AngularCLI主要特性

1 Angular CLI 能夠快速搭建框架，建立module，service，class，directive等；

2 具備webpack的功能，代碼分割（code splitting），按需加載；

3 代碼打包壓縮；

4 模塊測試，端到端測試；

5 熱部署，有改動當即從新編譯，不用刷新瀏覽器；並且速度很快

6 有開發環境，測試環境，生產環境的配置，不用本身操心； 

7 sass，less的預編譯Angular CLI都會自動識別後綴來編譯；

8 typescript的配置，Angular CLI在建立應用時均可以本身配置；

9 在建立好的工程也能夠作一些個性化的配置，webpack的具體配置還不支持，將來可能會增長；

10 Angular CLI建立的工程結構是最佳實踐，生產可用；

開始搭建，基礎工具的安裝：

你須要安裝NodeJS 5.0以上版本,NPM 3.0以上版本；

安裝 Angular CLI

windows： npm install -g angular-cli     //全局安裝

macOS: sudo npm install -g angular-cli

建立Angular2工程

ng new new_project       //new_project是你的項目名；

 

經常使用命令  ng generate (或 ng g)命令來建立Angular各類組件

範圍	命令	做用
new	ng new new_project	初始化新項目
Component	ng g component my-new-component	新建一個組件
Module	ng g module my-module	新建一個模塊
Directive	ng g directive my-new directive	新建一個指令
Pipe	ng g pipe my-new-pipe	新建一個管道
Service	ng g service my-new-srevice	新建一個服務
Class	ng g class my-new-class	新建一個類
Interface	ng g interface my-new-interface	新建一個接口
Enum	ng g enum my-new enum	新建一個枚舉

 

 

測試及檢測

 

範圍	命令	做用
e2e	ng e2e	執行端到端測試-本身寫測試用例
test	ng test	執行單元測試
lint	ng lint	調用tslint跑整個項目，能夠收穫一堆警告和錯誤，-force, -fix -format能夠幫助格式和修復部分問題

 

 

 

 

 

 

 

啓動

ng serve   :   啓動腳手架服務，默認端口是4200,

 

打包編譯 

ng build : 開發模式打包  ，調用的環境文件是 /src/environments/environments.ts;  編譯出來的結果將被存儲在dist/目錄

ng build --prod : 之前調用aot打包還須要帶上--aot, 從beta31開始， --prod模式下自動調用aot打包，調用的環境文件是/src/environments/environments.prod.ts

ng build 能夠指定兩種編譯目標： (--target=production or --target=development) 和 (--environment=dev or --environment=prod)，一個環境文件跟後者一塊兒使用.
默認狀況下, 編譯開發目標和環境均被使用.

在angular-cli.json中的如下配置能夠決定那個環境配置文件將被使用：

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

這些選項一樣適用於命令行， 若是你沒有爲 environment 顯示的傳遞一個值,
那麼，默認將是 dev 對development 、prod 對production.

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

 

生成的目錄樹小解釋

 

angular-cli 的核心配置文件.angular-cli.json常見配置參數解釋

{

"project": { "name": "ng-admin", //項目名稱 "ejected": false // 標記該應用是否已經執行過eject命令把webpack配置釋放出來 },

"apps": [ { "root": "src", // 源碼根目錄 "outDir": "dist", // 編譯後的輸出目錄，默認是dist/ "assets": [ // 記錄資源文件夾，構建時複製到`outDir`指定的目錄 "assets", "favicon.ico" ], "index": "index.html", // 指定首頁文件，默認值是"index.html" "main": "main.ts", // 指定應用的入門文件 "polyfills": "polyfills.ts", // 指定polyfill文件 "test": "test.ts", // 指定測試入門文件 "tsconfig": "tsconfig.app.json", // 指定tsconfig文件 "testTsconfig": "tsconfig.spec.json", // 指定TypeScript單測腳本的tsconfig文件
 "tsconfig":"tsconfig.app.json",

      "prefix": "app", // 使用`ng generate`命令時，自動爲selector元數據的值添加的前綴名 "deployUrl": "//cdn.com.cn", // 指定站點的部署地址，該值最終會賦給webpack的output.publicPath，經常使用於CDN部署 "styles": [ // 引入全局樣式，構建時會打包進來，經常使用於第三方庫引入的樣式 "styles.css" ], "scripts": [ // 引入全局腳本，構建時會打包進來，經常使用語第三方庫引入的腳本 ], "environmentSource": "environments/environment.ts", // 基礎環境配置 "environments": { // 子環境配置文件 "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ],

"e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } },

"defaults": { // 執行`ng generate`命令時的一些默認值
    "styleExt": "scss", // 默認生成的樣式文件後綴名
    "component": {
      "flat": false, // 生成組件時是否新建文件夾包裝組件文件，默認爲false（即新建文件夾）
      "spec": true, // 是否生成spec文件，默認爲true
      "inlineStyle": false, // 新建時是否使用內聯樣式，默認爲false
      "inlineTemplate": false, // 新建時是否使用內聯模板，默認爲false
      "viewEncapsulation": "Emulated", // 指定生成的組件的元數據viewEncapsulation的默認值
      "changeDetection": "OnPush", // 指定生成的組件的元數據changeDetection的默認值
    }
  }

}

二. 經常使用命令的通用關鍵參數解釋
1.ng serve --host (self)
指定本地Server綁定的域名，默認值：localhost.若是但願使用self來訪問你的站點，須加入以上參數
2.selfng serve --hmr
注意開啓以後，只是在angular-cli裏的webpack添加必要的擴展，等價於webpack-dev-server --hot，還須要在應用代碼裏處理hmr邏輯，如可在main.ts裏添加：
webpack-dev-server --hotmain.ts

3.ng serve if(module.hot) {
  module.hot.accept();
}--aot
開啓aot
4.ng serve --proxy-config proxy.conf.json
指定後臺轉發地址，即nginx的proxy_pass代理功能。開發時爲避免ajax跨域，須要指定後臺接口的轉發地址。
proxy.config.json文件示例以下：

下面兩條等價：{
  "/api": { // 匹配前綴
    "target": "http://localhost:3000", // 轉發地址
    "secure": false
  }
}

5.--base-href
指定站點的起始路徑，若是你但願你的站點根路徑爲www.abc.com/mypath/，須要這樣設置：www.abc.com/mypath/ng build --base-href /mypath/
6.--target
指定構建的目標，默認值是development，若是指定爲production，構建時會加入treeshaking、代碼壓縮混淆等。

ng build --target=production
ng build --prod 

下面兩句等價：7.--environment
指定應用執行環境。CLI會根據指定的值加載對應的環境配置文件。

ng build --environment=prod
ng build --env=prod
構建時會加載angular-cli.json指定的環境配置文件：

"environments": { 
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}