angular环境安装配置详解

文章目录：

1. 环境准备
   
2. WebStorm安装与激活
3. Node.js(含npm)安装
4. Angular CLI安装
5. 使用npm命令创建Angular项目并运行
6. 在WebStorm中创建Angular项目并运行
7. 总结

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

一、环境准备

下载地址：http://www.jetbrains.com/webstorm/download/download-thanks.html

下载地址：https://docs.npmjs.com/getting-started/installing-node

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

二、WebStorm安装与激活

下载安装包之后即可进行安装，全程next即可，如果想修改安装路径也可以修改一下。安装完成之后运行程序，未激活的WebStorm有使用限制。在提示激活界面选择License Server ，在输入框中输入网址http://idea.imsxm.com，点击激活即可。打开之后可以进行简单的设置，比如编辑器的字体，字号等。

激活教程：http://www.imsxm.com/jetbrains-license-server.html 

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

三、Node.js(npm)安装 按照官方教程安装即可，安装完成后打开终端，输入命令node -v以及npm -v检测安装的版本，在正式开发之前要确保版本匹配，在angular的官方教程中要求node版本为6.9.x  npm的版本为3.x  这一步基本不会出现问题，但是请安装在容易找到的地址里。

Node.js配置 1.配置prefix和cache目录

示例目录地址为：C:Program Filesnodejs cd C:Program Filesnodejs mkdir node_globalnode_modules //创建目录 mkdir node_cache npm config  set prefix  "C:Program Filesnodejsnode_global" npm config  set cache  "C:Program Filesnodejsnode_cache"

2.配置环境变量

右击“计算机”--->“属性”--->“高级系统设置”--->“环境变量”

在[系统变量]中,设置 NODE_PATH ，新建 NODE_PATH ,值为 C:Program Filesnodejsnode_globalnode_modules 在”用户变量”中,修改用户变量中的path，添加 C:Program Filesnodejsnode_global

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

四、Angular CLI安装 1.CLI需要依赖node-sass，手动下载sass-binary（https://github.com/sass/node-sass/releases/download/v4.5.2/win32-x64-51_binding.node）

将下载的binding.node放到指定目录，例如： C:win32-x64-51_binding.node 执行配置命令： npm config  set sass_binary_path  "C:win32-x64-51_binding.node" npm config  set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的镜像 2.Angular使用typescript进行开发的，需要安装typescript进行支持 全局安装(-g)typescript | typings

1

npm install -g typescript typings 3.全局安装angular-cli

1

npm install -g @angular/cli

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

五、使用npm命令创建Angular项目并运行

创建项目之前需要在命令框中将项目位置定位到你想要的位置（cd 命令或输入盘符直接修改目标盘位置）

创建新项目（my-app）的命令：ng new my-app

这一过程花费时间较长，主要是需要下载很多npm包

创建成功的项目是具有完整的项目结构的，不用进行任何修改即可运行。首先进入项目目录，启动服务器。

cd my-app
 ng serve --open

ng serve为启动服务器的命令，服务器启动之后会一直处于监听状态，能实时监听项目是否进行了修改，如果修改了能自动进行刷新。--open命令打开浏览器并访问地址http://localhost:4200，此时浏览器页面将会显示如下内容：

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

六、在WebStorm中创建Angular项目并运行 在以上各种安装和配置的步骤都完成之后再创建Angular CLI项目，此时WebStorm能够自动检测到Node interpreter的位置以及Angular CLI的位置。

创建完成之后可以在下方的命令行界面看到与第五节相似的提示信息，并且在项目栏展现出完整的项目结构，如下：

运行项目： 选中package.json，单击右键，选择Show npm Scripts，然后点击start启动服务器，启动完成后在浏览器的地址栏中输入http://localhost:4200即可访问项目页面。此时的服务器处于监听状态，能监测到任何对项目的修改并自动刷新页面。