[转]windows 10 搭建angular开发环境
本文转自:https://www.cnblogs.com/lilunpai/articles/7992538.html
一、环境介绍
1、开发环境:Windows10
2、开发ide工具:VS code https://code.visualstudio.com/
二、准备环境
1、下载并安装nodejs(建议下载LTS版本),安装过程中会默认添加path,不要不小心取消掉了。
2、Nodejs安装完成之后,先使用下面两个命令检查安装是否正常,如果正常话应该会显示相应的版本号。
|
1
2
|
node -v 查看node版本 npm -v 查看npm版本 |
3、安装Typescript和Angular CLI
安装之前我们先设置一下淘宝镜像,这样npm下载速度会快一些
|
1
|
npm config set registry https://registry.npm.taobao.org |
接下来,我们就可以真正的安装Typescript了。
|
1
|
npm install -g typescript typings |
之后安装Angular CLI,此处注意不要使用angular-cli
|
1
|
npm install -g @angular/cli |
三、安装失败以及解决办法
1、Angular CLI安装失败,使用下面命令卸载,然后重新安装
npm uninstall @angular/cli
npm cache clean
npm cache verify --force
执行上面命令之后,找到C盘-->用户-->你登录的账户-->AppData-->Roaming-->npm目录并且删除
2、缺少Python环境
a、下载并安装Python,官方下载
b、安装时,最好直接安装到C盘根目录,比如C:\Python27\python.exe
c、检查配置环境变量path路径,电脑->属性->高级配置->环境变量->把安装的Python路径复制到path里面就可以了
四、配置VS code
1、点击菜单中的【调试】按钮,选择【安装其他调试器】,然后搜索 Debugger for Chrome 并安装
2、找到launch.json文件,并修改一下内容

1 {
2 // 使用 IntelliSense 了解相关属性。
3 // 悬停以查看现有属性的描述。
4 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
5 "version": "0.2.0",
6 "configurations": [
7 {
8 "type": "Chrome",
9 "request": "launch",
10 "name": "Launch Chrome with ng serve",
11 "sourceMaps": true,
12 "url": "http://localhost:4200",
13 "webRoot": "${workspaceRoot}"
14 }
15 ]
16 }

3、在VS code 中的终端里面输入 ng serve,项目就会启动
最后就可以直接F5启动并且任意debug调试了
[转]windows 10 搭建angular开发环境的更多相关文章
- Windows下搭建Git开发环境
Windows下搭建Git开发环境主要有以下三种方法: 1,VS,vs2013和vs2015中已经集成了git插件了 2,msysGit+TortoiseGit 3,msysGit+SourceTre ...
- 如何在Windows上搭建Android开发环境
Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...
- [转载]在Windows下搭建Android开发环境
http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 在Windows下搭建Android开发环境 | 浏览:30780 | 更 ...
- Windows下搭建PHP开发环境
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- 【原创】windows下搭建vue开发环境+IIS部署
[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安 ...
- (一)Windows下搭建PHP开发环境及相关注意事项
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- [转]Windows下搭建PHP开发环境
原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- Windows下搭建PHP开发环境-WEB服务器
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
随机推荐
- Linux目录/usr结构说明
在 linux 文件结构中,有一个很神奇的目录 -- /usr. 讨论中,大部分观点认为: usr 是 unix system resources 的缩写: usr 是 user 的缩写: usr 是 ...
- Exp2 后门原理与实践-------20164325王晓蕊
Exp2 后门原理与实践 任务一:使用netcat获取主机操作Shell,cron启动 1.windows获取linux shell 1.1 ipconfig 查看本机查看以太网适配器(8)的ipv ...
- Linux时间戳转换成BCD码(转载)
#include <stdio.h> #include <stdlib.h> #include <time.h> #include <math.h> / ...
- js-图片轮播(极简)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 关于IO的整理
我们知道io只是输入输出,在java语言中分为同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO,现在的IO,一般是用作两种用途:一种是进行文件或者目录的操作(将不同的输入输出源抽象成流,所以流 ...
- 【腾讯Bugly干货分享】WebSocket 浅析
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/7aXMdnajINt0C5dcJy2USg 前言 在W ...
- PHP7 ?:和??的区别
?:和??是PHP添加的新特性,我们可以通过下面的代码来理解 $z = $x ?? $y; //等价于下面 $z = isset($x) ? $x : $y; $z = $x ?: $y; //等价于 ...
- 第87节:Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...
- Java面试集合(五)
1. 继承 在Java中的三大特性中存在一种为继承,继承究竟是用来解决什么问题的呢?在我们写代码的时候,我们会在一些类中使用相同的属性和方法,如两个不同的人(类),共同都有年龄,身高,体重等. 那么我 ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...