Angular开发：安装开发环境、常用命令介绍

Love The Way You Lie 2021-09-28 04:22 403阅读 0赞

# Angular开发：安装开发环境 #

### 文章目录 ###

*  Angular开发：安装开发环境
 *  1、前言
 *  2、学习准备
 *  3、环境搭建
 *   *  3.1、安装nodejs
     *   *  下载nodejs
         *  安装完成后，配置nodejs环境变量
         *  配置完成后，打开cmd使用，测试
     *  3.2、安装cnmp
     *   *  3.3 安装Angularcli
         *   *  3.3 如果已安装老版本angular cli，可以通过以下方式卸载
 *  4、入门常用angular开发命令
 *  5、创建Ng项目
 *  6、可能遇到的错误！！！
 *   *  6.1、npm 安装 angular/cli 失败
     *  6.2、创建项目 npm i 的时候失败
     *  6.3、创建项目后用 npm i 或者 cnpm i 后项目没法运行
     *   *  6.4 Error出现“: Please take the following steps to avoid issues:"npm install --save-dev @angular/cli@latest"”提示

# 1、前言 #

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等  
人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当  
中。  
根据项目数统计 angular（1.x 、2.x 、4.x、5.x、6.x、7.x）是现在网上使用量最大的框  
架。  
Angualr 基于 TypeScript 和 react、vue 相比 Angular 更适合中大型企业级项目。

--------------------

# 2、学习准备 #

装备基础：html 、css 、js、es6、 Typescript ，当然亦不一定一定要先学，可以在项目开发中不断学习此知识。

--------------------

# 3、环境搭建 #

--------------------

## 3.1、安装nodejs ##

前往nodejs官方https://nodejs.org/en/

### 下载nodejs ###

Recommented For Most Users是推荐下载版本，  
Lastst Features 是最新开发特性版本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]  
这里下载nodejs LTS windown 64 bit版本。

### 安装完成后，配置nodejs环境变量 ###

将nodejs目录下bin配置到系统环境变量path中，这个具体参考网上配置系统环境变量。  
步骤：  
1、关闭cmd，打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”  
2、进入环境变量对话框后，在系统变量下新建"NODE\_PATH"，比如：输入”E:\\Program Files\\nodejs\\“。  
3、系统path添加全部索引%NODE\_PATH%;  
4、然后运行测试命令node -v就会输出当前安装版本号。

### 配置完成后，打开cmd使用，测试 ###

#查看node版本
    node -v

![在这里插入图片描述][20190201221730243.png]

## 3.2、安装cnmp ##

由于Angular CLi的一些资源被墙掉，所以这里我们使用淘宝的镜像去下载安装，否则会很慢并且很容易出问题。配置npm淘宝镜像：[https://npm.taobao.org/][https_npm.taobao.org]  
配置方式如下

#安装淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org

### 3.3 安装Angularcli ###

然后开始安装，要用cnpm命令

#安装angular cli
    cnpm install -g @angular/cli@latest

检查是安装成功

ng help

如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]

#### 3.3 如果已安装老版本angular cli，可以通过以下方式卸载 ####

##卸载angular cli
    npm uninstall -g angular-cli
    #卸载angular cli dev 
    npm uninstall --save-dev angular-cli
    #卸载新版本@angular cli 
    npm uninstall -g @angular/cli
    #清除下npm缓存
    npm cache clean

# 4、入门常用angular开发命令 #

#获取相关命令信息
    ng help
    #新建一个Angular项目
    ng new projectName
    #编译项目并运行，默认端口4200
    ng serve
    #在项目中创建新的代码，可以创建模块，组件等等，可简写ng 
    ng generate xxx
    #安装ng插件
    npm install xxx

# 5、创建Ng项目 #

然后通过以下命令创建应用，过程可能会比较久，看网络情况。

#创建ng应用
    ng new test-app

创建完成后，进入目录运行项目

#运行ng应用
    ng serve

运行正常后，然后打开浏览器访问localhost:4200 即可。

如果要跳过 npm i 安装：

ng new angulardemo --skip-install

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]

# 6、可能遇到的错误！！！ #

可能遇到的错误

## 6.1、npm 安装 angular/cli 失败 ##

解决方案：用 cnpm 安装

## 6.2、创建项目 npm i 的时候失败 ##

解决方案 1：ctrl+c 结束项目，cd 到项目里面，用 cnpm i 安装依赖  
解决方案 2：创建项目的时候 --skip-install

## 6.3、创建项目后用 npm i 或者 cnpm i 后项目没法运行 ##

解决方案：用 yarn 替代 cnpm 和 npm  
1 cnpm instal @angular/cli (我的 npm 会报错)；  
2 ng new 的时候阻止自动安装 ng 包，只创建 ng 目录  
3 安装 yarn npm install -g yarn / cnpm install -g yarn  
4 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn  
注意：yarn 命令 等同于 npm install / cnpm install 使用 yarn 前提是先安装 yarn , 安装使用 cnpm install -g yarn 就可以安装

### 6.4 Error出现“: Please take the following steps to avoid issues:“npm install --save-dev @angular/cli@latest””提示 ###

输入命令行语句：  
npm install --save-dev @angular/cli@latest  
验证  
ng -v

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/7a6b461e1d014340b7e25ce86fc13071.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/742804bc1c2c413fbd5d21d6d94dd9ee.png
[20190201221730243.png]: /images/20210923/893529b3e2134b6a98b36b5d8f40d5dd.png
[https_npm.taobao.org]: https://npm.taobao.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]: /images/20210923/1e6bc9cf90d04082b9fc815771da35fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]: /images/20210923/91d0c8d8b0074e5ebd4e616ac43f27a1.png