本文转自: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开发环境的更多相关文章

  1. Windows下搭建Git开发环境

    Windows下搭建Git开发环境主要有以下三种方法: 1,VS,vs2013和vs2015中已经集成了git插件了 2,msysGit+TortoiseGit 3,msysGit+SourceTre ...

  2. 如何在Windows上搭建Android开发环境

    Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...

  3. [转载]在Windows下搭建Android开发环境

    http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 在Windows下搭建Android开发环境 | 浏览:30780 | 更 ...

  4. Windows下搭建PHP开发环境

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  5. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  6. (一)Windows下搭建PHP开发环境及相关注意事项

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  7. [转]Windows下搭建PHP开发环境

    原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...

  8. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  9. Windows下搭建PHP开发环境-WEB服务器

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

随机推荐

  1. php中出现乱码

    对于初学着来说,编辑中文php时,会出现乱码 在php代码中加入 随后在浏览器中,就会看到如下页面 这样就解决了php 中文乱码的问题.

  2. 《java从入门到精通》学习记录

    目录 <Java从入门到精通>学习记录 3 基础的基础部分: 3 一. 常量与变量 3 1. 掌握: 3 (1) .常量与变量的声明方式: 3 (2) .变量的命名规则: 3 (3) .变 ...

  3. 二进制安装mysql5.7

    1.创建用户和组 groupadd mysql useradd -r -g mysql mysql 2.上传二进制包至/usr/local下解压并改名为mysql tar zxvf mysql-5.7 ...

  4. submit插件安装的问题与集成了插件的submit

    写在最前面,方法有二种.一种是在线安装,这种办法我尝试过,受网速和软件卡顿的问题,进行不顺利.第二种就是我下面介绍的这种,手动安装. 最精华的在后面,可以直接跳转到最后.我找了很久的,最新版的汉化,而 ...

  5. BI项目记(二):给我接套数据

    这次故事的主角还是小D,小D工作在一家传统公司的信息部门,负责数据仓库系统的运维和开发. 话说有一天,小D被教导老板的office,老板给布置了一个任务,让小D在现有数据仓库里接入刚上线的两个系统的数 ...

  6. ASP.NET MVC项目实现BasePage基类用作ASPX.CS网页继承

    在ASP.NET MVC项目开发,还是需要创建一些Web Page来实现一些功能,如呈现报表等... 但是一旦项目的.ASPX网页太多了,其中的程序代码也会有代码冗余,出现这些情况,我们得需要对这些代 ...

  7. Python编程练习:平方值格式化

    问题描述:获得用户输入的一个整数N,计算N的平方值:结果采用宽度20字符方式居中输出,空余字符采用减号(-)填充.如果结果超过20个字符,则以结果宽度为准. 示例: 源码: a = int(input ...

  8. Retrofit官方文档翻译

    Retrofit官方文档翻译 官方文档网址 http://square.github.io/retrofit/ 介绍 Retrofit 将你的 HTTP API 转换为 Java 接口. public ...

  9. go语言面向对象编程之类型系统

    go语言类型系统 类型系统,顾名思义是指一个语言的类型体系结构,一个典型的类型系统通常包含如下基本内容 基础类型:如byte,int,bool,float等 复合类型:如数组,指针,结构体 可以指向任 ...

  10. 第53节:Java当中的IO流(上)

    Java当中的IO流 在Java中,字符串string可以用来操作文本数据内容,字符串缓冲区是什么呢?其实就是个容器,也是用来存储很多的数据类型的字符串,基本数据类型包装类的出现可以用来解决字符串和基 ...