Angular 2.x折騰記 ：(1)初識Angular-cli[官方腳手架]及脫坑要點

前言

  這個系列的進度有些跳躍性，我儘可能直白點解釋，可是我不是官方文檔，直入主題！！！！

什麼是angular-cli

簡言之：就是NG團隊自行維護的一個項目腳手架[內置單元測試及webpack打包工具等]，這貨前身是ember-cli；

官網 / Github

吐槽

我最先是從Angular cli beta18開始用的，截止beta28.3,這個分支已經廢棄，已經遷移,以前npm install angular-cli不推薦；

目前最新的是v1.0.0正式版【2017-3-24】，從舊版本到rc期間坑了太屢次，每次升級各類酸爽；

rc2開始基本變化不大，能夠直接拿來用了。

正式版的配置稍微有些改動，我比較了下基本不大，放心使用

系統環境配置

window

安裝lts版本的nodejs v6.10.0 ， Angular-cli中的node-sass不支持7.x，裝不上的

編譯node-sass編譯報錯

1. 裝visual studio 2015+及python2+
2. 採用國內的cnpm安裝

記得帶版本號，有時候不帶版本會安裝0.0.1版本,cnpm好像會把編譯好node-sass裝上，

不用本地再次編譯 -- 親測屢次可用

3. 安裝windows-build-tools:

windows下的依賴庫，再執行官方安裝命令

Linux下：

• nodejs控制推薦用nvm來管理
  • 先下載nvm的腳本，用curl或者wget都行，前者有些不預裝，後者基本都有
  • 其次，linux下推薦用yarn替代npm，使用起來體驗好不少，速度也快不少

  # 下載公鑰
  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 
  
  # 把源寫進去源請求列表
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 
  
  # 我用的是deepin !!!! 支持一下國產，挺好用哈～～～～
  sudo apt-get update && sudo apt-get install yarn  
  複製代碼

安裝開發依賴

• npm：npm install -g @angular/cli
• cnpm:cnpm install -g @angular/cli@v1.0.0
• yarn:yarn add global @angular/cli 。

初始化項目

腳手架的命令不少，我這裏只列出最經常使用的；

新建東東

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

測試及檢測

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

啓動

ng serve： 啓動腳手架服務，默認端口4200；自定義什麼看幫助額

打包

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

彈出配置文件(還原真實的配置文件)

ng eject : 這個東西的配置不少，能夠彈出各類各樣的源配置和文件 咱們看到的ng開頭的命令都是二重封裝的。。。有時候咱們想要改源文件或者看到原始配置是怎麼樣的這貨就用到了

生成的目錄樹小解釋

總結

• 這個腳手架支持sass和less，手動改下.angular-cli.json就能夠了。或者執行命令改下支持，一個道理的
• 固然能夠配置接口反向代理，推薦仍是把不一樣接口的url寫在不一樣的environment裏面，用nginx作反向代理！ ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)這個老版本是支持的，如今不知道支不支持，寫法以下

{
  "/": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

複製代碼