• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

上手angular2.0之angular/cli 配置

angular2.0正式版推出有一段时间了,angular4.0也刚刚推出正式版,与1.x版本相比差别还是挺大的,性能优化的也比较显著,具体的差异变化可参考:angular.js1与angular.js2之间的一些差别。所以说我大前端发展日新月异,继续跟进掌握。下面是过程中的一些坑,思之记之,也提醒其他dev别掉坑里了;

配置/安装 angular/cli是学习angular2.0+的开始(其他配置方式也可以,不过既然有这个platform了为什么不用那,官方推荐),经过亲身经历,在神奇的天朝在angular/cli上栽过跟头的dev绝对不在少数,一起来梳理梳理;

先简介下angular-cli,因为现在angular开发全跑起来用到了node下的许多拓展程序,比如发布/测试/文件管理/监听(webpack,browserify,karma)等,于是官方就推出了这样的一套集合(platform),方便项目管理开发;

首先确保你的node是v6.9.0+,npm版本是v3.9.0+,node是v6.9.0+,npm版本是v3.9.0+;node是v6.9.0+,npm版本是v3.9.0+,重要的事情说三遍,不然后面很多莫名其妙的问题…(泪目中…);确认node/npm版本的命令很简单,node -v和npm -v就可以了;

下面就可以安装angular-cli了,命令很简单:

npm install -g @angular/cli

恩,然并卵,因为里面有个包‘node-sass’是被墙掉的,不使用科学上网的话这样是装不好的,可以使用npm config list来配置代理路径来解决;这一关筛掉了很多小白;

当然天朝人民智慧是无限的,可以用设置全局cnpm来解决这个问题:

npm install -g cnpm --registry=https://registry.npm.taobao.org

但是值得注意的是,虽然cnpm号称每10分钟与官网同步一次,但是两者安装的时候相当一部分的时候是有差异的,也就是“cnpm!==npm”,返回的问题不一样,使用多的dev应该都会遇到这个问题,如果cnpm安装的还有问题,这里又筛掉了一部分…如果你这样安装运行不了,我劝你把全局angular-cli卸载掉重装…

npm uninstall -g @angular/cli

查看angular-cli安装情况:

ng -v

上手angular2.0之angular/cli 配置

看到这个就是安装好了,更多指令可以ng-help查看;

然后通过命令来新创建本地项目:

ng new yourproname

创建出来是这样的:

上手angular2.0之angular/cli 配置

项目包都在src里面,结构和文件大家可以装下看下,注意这里也是需要node_modules也就是npm/cnpm install的;

到此为止项目就算建好了,运行ng serve 就可以跑起来了,默认端口是4200,访问localhost:4200就可以看到 app works (空项目)的提示,当然前提是上面提到的都顺利;

而且对于性能和编译方面的要求正式版的angular-cli都配好了,直接运行就好了:

ng serve --prod --aot

后面的参宿目的在于压缩和预编译/最小化编译;

打包的命令是:

ng build --prod --aot

打好地方包可以丢到服务器上运行了,本地测iis是没问题的;

本地运行成功如下:

上手angular2.0之angular/cli 配置


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明上手angular2.0之angular/cli 配置
喜欢 (7)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 从百度进来的,博客不错哦!
    衣皇后2017-04-04 09:49 回复 Windows 7 | 搜狗浏览器 2.X
  2. 这个好,正需要,帮我解决了问题,感谢!
    葫芦岛网站建设2017-04-04 08:08 回复 Windows 7 | Firefox 52.0