angular 环境搭建

一时失言乱红尘 2023-06-16 08:05 87阅读 0赞

1.  安装Node.js
2.  安装cnpm
3.  安装 typescript
4.  安装Angular CLI

# 环境搭建 #

### 第一步： 下载安装node.js ###

我们可以通过  [Node.js官网][Node.js]  来下载对应的版本 下载之后一直点击 “下一步” 最后即可安装完成

我们这个时候使用  **cmd命令窗口**中使用  node命令来检查一下 我们的node是否安装成功

node -v

![20191125143843449.png][]

出现版本号即为安装 node.js成功！

### 第二步：安装cnpm  ###

什么是cnpm？    在安装cnpm之前 先要知道  npm

**npm 是 Node.js的包管理工具** 我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

但是由于npm安装插件都是从国外服务器中下载，angular 的一些资源都被墙掉了，而且网速特别慢，**所以我国的淘宝团队就生产了一个完成的 npmjs.org镜像  用cnpm代替 npm**  在执行命令的时候 将npm 改为 cnpm

**安装cnpm**

在cmd命令窗口中输入：

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

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

输入 cnpm -v 来检测是否安装正常

![20191125144922668.png][]

### 第三步： 安装Typescript  ###

在cmd命令中输入：

cnpm install -g typescript typings

安装完成之后输入 ：

tsc -v  检查

![20191125150117630.png][]

出现版本号即为安装成功！

### 第四步：  安装 @angular/cli ###

如果在之前你有安装过其他版本的 angular 那么需要先把旧的卸载

卸载命令：

npm uninstall @angular/cli

清空缓存：

npm cache clean

**安装指定版本的angular**，因为我自身所在项目需要的版本是 6.2.4 所以我以这个版本的为例

输入命令：

cnpm install  angular/cli@6.2.4 -g

注意： 如果你之前安装的是低版本，那么使用命令升级即可：

cnpm install --global @angular/cli@6.2.4

需要静静的等待几分钟

到这里 我们angular的环境已经搭建完成了

### **最后我们输入   ng -v    命令    来检查一下刚刚搭建的angular环境：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1][]

# 出现上面的图样 大功告成！  #

[Node.js]: https://nodejs.org/en/
[20191125143843449.png]: https://img-blog.csdnimg.cn/20191125143843449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125144836621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[20191125144922668.png]: https://img-blog.csdnimg.cn/20191125144922668.png
[20191125150117630.png]: https://img-blog.csdnimg.cn/20191125150117630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125150905143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70