Angular 搭建本地开发环境，并在VSCode运行第一个Angular项目

本文将介绍如何在window环境Angular环境，并在VSCode上创建第一个Angular项目，并运行起来。

一、 部署 Node.js 安装环境

1.1 下载Node.js安装包

1.2 安装Node.js环境

1.3 验证是否安装成功

1.4 配置环境变量

二、 用VSCode运行Angular项目

2.1 安装VSCode

2.2 打开VSCode终端，安装Angular脚手架

2.3 新建Angular项目

2.4 运行项目

一、 部署 Node.js 安装环境
1.1 下载Node.js安装包
从官网下载安装包：

https://nodejs.org/en/download/

从百度网盘下载：

链接：https://pan.baidu.com/s/1y9Rv-3xcuxd9v-ZkASePsg 

提取码：9jg1 
 

1.2 安装Node.js环境
双击安装包，一直Next直到结束

1.3 验证是否安装成功
在键盘按下【win+R】键，输入cmd，回车，打开控制台窗口。

# 查看node.js版本号
node -v
# 查看npm版本号
npm -v

 

1.4 配置环境变量
配置环境变量主要是修改npm安装的全局模块的所在路径和缓存cache的路径。通过配置npm全局安装路径，在执行npm install

express【-g】 全局安装时，会将要安装的模块安装到配置好的路径中，避免占用C盘空间。

1.4.1 找到Node的安装目录下，创建目录：node_cache文件夹和 node_global文件夹 

1.4.2 在控制台上设置

下面路径为上面的文件夹路径

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
 

1.4.3 设置环境变量

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框后，

① 【系统变量】下新建【NODE_PATH】，输入【D:\nodejs\node_global\node_modules】，

②   将【用户变量】下的【Path】修改为【D:\nodejs\node_global】

其中的地址为Node.js的实际安装路径。

1.4.4 验证环境变量是否生效

# 安装express模块，查看安装位置是否是全局变量配置的路径
npm install express -g     # -g是全局安装的意思
 

二、 用VSCode运行Angular项目
2.1 安装VSCode
从官网下载安装包

https://code.visualstudio.com/Download

从百度网盘下载

链接：https://pan.baidu.com/s/1J85J0NjTe5XRcjrN2KHvuA 

提取码：jidh 
 

2.2 打开VSCode终端，安装Angular脚手架
打开VSCode软件后，用快捷键【shift + ctrl + Y】调出调试控制台，点击终端

用命令安装Angular脚手架

# 安装angular脚手架
npm install -g @angular/cli

 

2.3 新建Angular项目
进入要安装项目的目录，如：

# 新建Angular项目
ng new ng-sample
输入y

向下键控制，选择scss

2.4 运行项目
2.4.1 进入创建的项目目录

# 进入项目目录
cd ng-sample

2.4.2 启动项目

# 启动项目
ng serve

# 停止项目
控制台快捷键：ctrl+C

打包发布项目

ng build

2.4.3 访问网站

打开浏览器，输入 http://localhost:4200/

error:0308010C:digital envelope routines::unsupported的几种方法

二、原因分析
主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。

三、解决方案
**方案1：**打开IDEA 终端，直接输入

# Linux & Mac OS：
export NODE_OPTIONS=--openssl-legacy-provider

# Windows：
set NODE_OPTIONS=--openssl-legacy-provider
1
2
3
4
5
**方案2：**打开IDEA 终端，直接输入（问题解决）

$env:NODE_OPTIONS="--openssl-legacy-provider"
1
**方案3：**卸载当前版本，安装合适的版本(node.js)

**方案4：**解决方式（仅限 windows）:

在项目中 package.json 的 scripts 中新增 SET NODE_OPTIONS=–openssl-legacy-provider

添加前：

"scripts": {
"dev": "vue-cli-service serve",

"build:prod": "vue-cli-service build"

},
1
2
3
4
5
6
添加后：

"scripts": {
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},
1
2
3
4

————————————————

原文链接：https://blog.csdn.net/qq_34416331/article/details/102942501