【Angular2】环境搭建 + 安装cnpm不成功解决方案

时间:2024-04-08 10:24:31

【背景】

      公司项目前端用到了Angular2,开始Angular2的学习,最开始配置环境,我果然又

经历了和别人不一样的问题,cnpm -v无法查到版本号”,找了小伙伴还是没能解决,不过这次

自己解决了问题,所以总结下来,以资鼓励。

      如果你也遇到了cnpm安装不成功的情况,这篇博客可能会帮到你哦~

      

【安装过程】

   小前提:

      node.js文件需要去官网下载,下载对应自己系统的版本之后,一直点击下一步,安装成功后,

能够在cmd命令窗口中以 node-vnpm-v 两个命令查出版本号就证明安装成功了。

      为什么要用cnpm

      因为npm这个插件的服务器在国外,如果在国内下载的话,网络状况不佳,下载时间长不说还

极有可能出现异常。所以一个解决下载速度慢的方案出来了——淘宝团队生产了一个完整 npmjs.org 

镜像。你可以用此代替官方版本(只读),同步频率目前为10分钟一次,以保证尽量与官方服务同步。

cnpmnpm用法是一样的,只是执行下载命令的时候用cnpm就好。

 

       下面是环境配置的过程:

      1. win+X A,选择管理员权限运行命令提示符。

      2.在命令提示符窗口输入 npm install cnpm -g --registry=https://registry.npm.taobao.org  

      然后会出来好长一串绿色的安装信息,当时没有截图,大概是这个样子的。   

【Angular2】环境搭建 + 安装cnpm不成功解决方案

 

      3.安装之后,输入 cnpm-v 来查看一下版本,证明已经安装成功。这时,问题就出现了!

       正确情况下应该出现 类似  [email protected]   之类的版本号说明信息,但是我却出现了下面的界面。     

【Angular2】环境搭建 + 安装cnpm不成功解决方案

      

       表示一脸懵,再向下进行安装typescripttypings 的安装都需要用到 cnpm 的命令,下面的

cnpm命令都无法奏效,所以这是cnpm安装不成功的意思么,我果然在环境搭建第一步就不平凡了

一把,环境没有办法继续搭建了。

       当时自己也上网查了资料,但是没有合适的解决方案。找小伙伴卸了重新安装,尝试几次解决

也是没有成功,当时就npm命令配完了环境。但是npm也不是个办法,需要下载依赖包什么的,

npm速度还是太慢了。

       第二天,不服气的我又上线了。就对着上面的这个界面一句一句找思路,后来我发现了这个  

红长框框起来的那个。

【Angular2】环境搭建 + 安装cnpm不成功解决方案

  

      哎,我发现这个安装淘宝镜像的地址和我昨天输入的有些许不一样啊,我记得输入的是 https

这个提示说http。但其实淘宝npm镜像网址真的是https。

      我觉得这极有可能是个方法。万一成功了呢,试一试!

      就重新拿这个 npm install cnpm -g -- registry=http://registry.npm.taobao.org 地址安装了

一次。

 

      结果喜人,我按照上面的地址安装了cnpm,虽然版本号依旧没有正确出现,但是之后的cnpm

命令使用奏效了。

      对于问题出现的原因分析,我还不是很懂,只是解决了问题,还不懂为什么要用http格式。

看官有明白的,欢迎评论指教。)

 

       3.然后使用cnpm命令安装typescripttypingstypescript就是你要在Angular里使用的语言。

       cnpm install -g [email protected] typings

【Angular2】环境搭建 + 安装cnpm不成功解决方案

      然后输入 tsc -v 查看版本以证明安装成功。

【Angular2】环境搭建 + 安装cnpm不成功解决方案


      4.下面用cnpm安装@angular/cli ,命令框中输入

                 cnpm install [email protected]/[email protected]

      然后又出现好长一串信息。

                     【Angular2】环境搭建 + 安装cnpm不成功解决方案

      这个CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程.它可以

创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。

      然后还是要检查版本以证明安装成功。输入 ng version,出现下面的效果,就证明你安装

@angluar/cli 成功了。

【Angular2】环境搭建 + 安装cnpm不成功解决方案

      上面步骤就是Angular环境配置的过程,以及我遇到的一点小问题的解决方案。希望对读者有

所帮助。

 

【小结】

       当我斩过这个问题之后,还有其它的小伙伴也遇到了相同的问题,我还帮助了小伙伴解决了这

小问题,哈哈,还是挺开心的。

       Angular2的组件化开发思想真的很棒,希望以后能多整理出来一些关于Angular2的博客分享

给大家~