prefix 域名 最佳實踐 netem cin 存儲 ng- idt 還需

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

一、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.ng serve --hmr
註意開啟之後，只是在angular-cli裏的webpack添加必要的擴展，等價於webpack-dev-server --hot，還需要在應用代碼裏處理hmr邏輯，如可在main.ts裏添加：

if(module.hot) {
  module.hot.accept();
}

3.ng serve --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/，需要這樣設置：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"
}

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