[版权声明] 本站内容采用 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络，纯学习研究使用。如有侵犯您的权益，请及时联系我，我将尽快处理。
如转载请注明来自： Broly的博客，本文链接： VSCode+Node.js+Angular2开发环境
前不久Angular2发布了正式版，而且Angular4不会颠覆式改变语法（对比Angular1和Angular2），所以感觉不会坑的情况下，决定学习Angular2。第一件事当然是搭建个开发环境，但是网上的教程不是很多或者版本比较旧，不适用当前，最后自己摸索出来了：
其他相关博文：
一、测试环境
- Windows 10
- VSCode v1.11.1
- Node.js v6.10.2
- NPM v3.10.10
- tsc v2.2.2
二、安装Node.js、NPM、TSC
直接去官网下载安装包：https://nodejs.org/en/download/
安装好之后，打开命令提示符：Win+R -> cmd ，然后安装tsc，
|
1 |
npm install -g typescript |
三、安装Visual Studio Code
同样去官网下载VSCode并安装： https://code.visualstudio.com/Download
四、下载Angular2提供的quickstart
官网提供的文档：https://angular.cn/docs/ts/latest/guide/setup.html
|
1 2 3 |
git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install |
五、VSCode中配置运行环境
首先在VSCode的资源管理器，打开quickstart文件夹。
按F1键，出来输入框后，输入launch，选择“打开launch.json”，编辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ // Use IntelliSense to learn about possible Node.js debug attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server", "cwd": "${workspaceRoot}/" } ] } |
注意：cwd后面要加上 / 斜杠，不然最后运行的时候会找不到路径。（至少我测试是这样）
按F1键，出来输入框后，输入task，选择“配置任务运行程序”，再选择“TypeScript - Watch Mode”，编辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": [ "-w", "-p", "." ], "showOutput": "silent", "isBackground": true, "problemMatcher": "$tsc-watch", "watch": true } |
六、运行程序
此时已经算是配置完成了，按F5运行可以看到效果：
参考链接：《Getting Started With Angular 2 Application Using Visual Studio Code》
如果本文对您有所帮助，可以请作者喝杯咖啡，感谢支持^_^
《VSCode+Node.js+Angular2开发环境》有3个想法