Angular CLI 类似 ember-cli，yeoman 的 app 模板生成器。自己配置整个开发 build tool 比较繁琐，因为 typescript 需要额外配置文件，选 gulp、systemjs、webpack，又要配置。又要写跑 test 的配置，karma、protractor……太麻烦，弄完也要半天的时间。
用 Angular CLI 通通自动化这些繁琐过程。跑 2-3 命令就可以进行开发了
安装 Angular CLI
$ npm install -g @angular/cli
基本命令
$ ng new MYAPP
$ cd MYAPP
$ ng serve
Angular CLI：
| 命令 | 功能 |
|---|---|
ng new APPNAME | 创建新的 app。 参数：--routing 创建路由的 app。目前还是需要手动修改 xx-routing.module.ts 文件。 |
ng build | 复制并组建到 dist 的文件夹，可以上传这个文件夹到伺服器。可选参数： ng build –dev 默认参数 ng build –prod –aot ng build –base-href /myUrl/ 适合子文件夹的 app |
ng serve | 开发伺服器。自动重启。可选参数：跟 ng build 一样。 |
ng g component XYZ | 创建新的组件。@Component() |
ng g directive XYZ | 创建新的指令。 |
ng g pipe XYZ | 创建新的 pipe。 |
ng g service XYZ | 创建新的 service。 |
ng g module XYZ | 创建新的模组。支持 –routing 参数~~，默认会生成一个 component。~~ |
Angular CLI 支持 SCSS、LESS、stylus：
$ ng new PROJECTNAME --style=scss # 创建新的项目
$ ng set defaults.styleExt scss # 现有项目
更新 Angular CLI
$ npm uninstall -g angular-cli @angular/cli
$ npm cache clean
$ npm install -g @angular/cli@latest
讨论#
CLI 实现 appshell 也是用 universal，只是在 build tool 的时候渲染成静态文件。网络再慢，半秒内一定能看到 app 的轮廓。Toolbar、加载图标，等等 ⋯⋯ 游览器下载完所有 script 的文件，Angular 才渲染完整的 app。
有什么用？AngularJS 1.x 每次打开只能看到白画面。要等到 AngularJS 渲染完，才能看到画面。快慢，看 app 大小、优化、网络速度。
各有个好处
你也可以在 HTTP 伺服器安装配置 universal 模组，不用每次更改东西要 build 一次再上传。
CLI 建造的静态文件只要上传到静态 CDN，而 universal 需要伺服器。
Changelog 摘录#
- beta.5
- 2016 年 5 月 22 日：beta 就是多 bugs，beta5 不能运行 ng build –prod，等 1.0.0 发布后再写一篇如何使用。
- beta.30 （隔了 25 个贝塔，文章再次更新。超多改变！）
- Angular v2 已经正式发布了，v4 都已经开工了
--mobileAppshell、Universal 的参数暂时取消掉- 改用了 webpack，支持 ahead of time 编译。
- beta.31
- 更新记录有写加入了 service-worker？！没官方文件说明，不过，你自己可以在
angular-cli.json的apps[0]加入一个参数"serviceWorker": true,，然后再安装@angular/service-worker，重新 build 应该可以看到sw-register.[hash].bundle.js这些文件了。当然 BETA 嘛～ 东西不一定稳定 😂 。
- 更新记录有写加入了 service-worker？！没官方文件说明，不过，你自己可以在
- beta.32
- 移除了
ng updateng init这些命令……而官方推荐的更新方法是，创建一个新的 app，把旧的 app 你写的拷贝过去……😓 ng build --prod不会再产生.gz文件了。
- 移除了
开源就是这样，不是每次更新都要“喂”你的。真的有什么更新，你自己要看看更新了什么。