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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,778评论 6 342
  • 搜罗一切webpack的好文章好工具 Webpack webpack 优秀中文文章如有好文, 请到此issue里提...
    Lefter阅读 1,484评论 0 29
  • 文/安若木槿 16年年底,我开始了在简书的写作之旅,从此一发不可收拾停不下来了。 我是一个中文系学生,能更为便捷地...
    蜉蝣舟阅读 1,040评论 4 9
  • 云朵的一年级小豆包的生活就这样拉带帷幕了,令她非常高兴的是,那个胖胖的带着眼镜的小男生竟然跟云朵分到了一个班级。 ...
    暖暖的小房子阅读 569评论 0 0