Angular 4开发环境搭建

Angular 4开发环境搭建

---

环境安装步骤

Node.js安装

浏览器中输入nodejs.org网址并下载最新版本的node.js,下载完成之后运行并安装,安装使用默认即可

安装完成之后需要修改nodejs目录的访问权限，假设node.js安装在c:\program file\node.js目录下，在Windows Explorer中选中这个目录并右键，选择“属性”，在属性对话框中选择“安全”，点击“编辑”，让当前Windows用户对这个目录有完全控制能力。如果没有完全权限后面在安装其它组件的时候可能会出错。

完成之后在cmd中运行

npm -v
node -v

确保版本正确运行并显示正确版本号

Angular安装

运行cmd

输入

npm i webpack -g
npm link webpack --save-dev
npm install -g typescript
npm install -g @angular/cli

安装完成之后运行

ng -v

确保版本正确安装

Visual Studio Code安装

浏览器中输入code.visualstdudio.com下载最新的visual studio code，下载完成之后运行并安装,安装使用默认即可

运行cmd

输入

ng new hello

来创建一个测试程序
创建完成之后

cd hello

运行

npm install

结束之后运行

ng server

在浏览器中输入localhost:4200查看程序有没有正确运行

Visual Stduio Code调试程序

在插件中安装Debugger for Chrome

如果没有Chrome请安装最新版本的Chrome

在Visual Stduio Code中打开创建的hello目录

在调试中设置中选择Chrome作为调试器，同时修改Lanuch.json文件,”url”中输入正确的端口号

运行即可开始程序调试