AngularCLI安装与升级

之前的项目中，使用的是angular2-webpack-starter框架，随着angular版本的升级、AOT支持等，陆续暴露出问题，比如升级困难，关于如何升级Angular项目版本，可参考如何优雅升级ng2小版本。还有angular2-webpack-starter框架最新版已经支持AOT了，但是souremap有点问题，debugger的时候断点位置不准确，难以调试。以及在开发效率、自动化程度、可配置方面也不及AngularCLI。
angular2-webpack-starter项目拉取下来已经有了一些demo，而且install的时候会受node-sass的困扰。
所以我建议大家还是使用AngularCLI来进行项目开发。
AngularCLI是谷歌angular团队开发的angular开发命令行接口，旨在帮助开发者减少在开发angular过程中配置环境、升级等的麻烦，让开发者可以直接着手项目开发，提高效率、节省时间。后续AngularCLI还会增加需要功能特性，让开发者有更好的体验。
你可以尝试将原来的项目迁移到AngularCLI上来，主要是src目录下的代码和index.html文件，webpack、单元测试、e2e等环境配置不用搬。
首先你需要先安装angular-cli
如果之前装过angular-cli需要先卸载：npm uninstall -g angular-cli
如果之前装过@angular/cli需要先卸载：npm uninstall -g @angular/cli
如果你之前已经尝试安装过node模块，请把项目根目录下的node_moduels目录删掉 然后依次执行以下命令：

npm cache clean
npm i -g cnpm
cnpm i -g @angular/cli
cnpm install
ng serve

从命令行进入进入项目根目录，依次执行以下命令：

npm i -g cnpm
cnpm i -g @angular/cli
cnpm install
ng serve

打开你的浏览器，访问http://localhost:4200/

升级cli:

全局包：

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest(npm往往会导致安装失败，你可以使用cnpm)

本地项目下的包：

npm uninstall @angular/cli
npm install --save-dev @angular/cli@latest(npm往往会导致安装失败，你可以使用cnpm)
//以下三个根据环境三选一
// linux/mac
rm -rf node_modules dist
// Windows命令行窗口
rmdir /S/Q node_modules dist;  # 备注：/s 是代表删除所有子目录跟其中的档案,/q 是不要它在删除档案或目录时，不再问我 Yes or No 的动作
// WindowsPower Shell
rm -r -fo node_modules,dist
npm install

升级到angular最新版本（目前是4.1.3）

// #Windows
// 生产环境
npm install @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest --save
// 开发环境
npm install @angular/compiler-cli@latest typescript@latest --dev--save
// 选择安装
npm install @angular/platform-server@latest @angular/animations@latest --save // 如果用到primeng，升级到4以上版本需要依赖@angular/animations模块
// #linux/mac参照Windows
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

更换一些其他包

npm install zone.js@^0.8.9 --save

执行安装命令

npm install

升级过程中的一些问题及解决办法

1.升级cli中遇到NodeRequire异常

ERROR in xxx/typings.d.ts : cannot find name 'NodeRequire'

可参照http://stackoverflow.com/questions/43104114/cannot-find-name-require-after-upgrading-to-angular4
修改tscinfig.json/tsconfig.app.json文件，添加
"types": ["node"],
"typeRoots": [
"../node_modules/@types"
]

2.node-sass下载异常

进入当前项目目录下

set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install

3.@angular/compiler-cli was not properly install

typescript版本问题，升级到@^2.1.0以上，或直接@latest升级到最新

关于AngularCLI详细的使用，可参照着几篇文章
如何利用angular-cli组织项目结构
使用 Angular CLI 创建一个 CRUD 应用](https://coyee.com/article/11625-angular-2-tutorial-create-a-crud-app-with-angular-cli)