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/[email protected]
• 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
  }
}