本文转自: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. linux使用framebuffer的代码

    #include <linux/fb.h> #include <sys/mman.h> #include <sys/ioctl.h> #include <st ...

  2. STM32 HAL库的使用心得

    1.I2C函数中HAL_I2C_Mem_Write和HAL_I2C_Master_Transmit有啥区别?{ 使用HAL_I2C_Mem_Write等于 先使用HAL_I2C_Master_Tran ...

  3. hive 日常技巧

    --删除表中重复数据 delete from vitae a where (a.peopleId,a.seq) in (select peopleId,seq from vitae group by ...

  4. django2+python3+uwsgi+centos7部署网站

    Centos7中安装Python虚拟环境 2018年08月27日 00:09:36 kaichenkai 阅读数:984 1.为什么要搭建虚拟环境? 问题:如果在一台电脑上, 想开发多个不同的项目, ...

  5. springcloud config 提取公共参数

    每个微服务都有自己的配置文件application-local.yml和bootstrap.yml, 这个两个配置文件的读取顺序是先读取bootstrap.yml文件,在读取application-l ...

  6. 【java源码】解读HashTable类背后的实现细节

    HashTable这个类实现了哈希表从key映射到value的数据结构形式.任何非null的对象都可以作为key或者value. 要在hashtable中存储和检索对象,作为key的对象必须实现has ...

  7. BCrypt加密算法

    用户表的密码通常使用MD5等不可逆算法加密后存储,为防止彩虹表破解更会先使用一个特定的字符串(如域名)加密,然后再使用一个随机的salt(盐值)加密. 特定字符串是程序代码中固定的,salt是每个密码 ...

  8. 《设计模式》学习&理解&总结

    教程地址:http://www.runoob.com/design-pattern/design-pattern-tutorial.html 教程书籍:<Android 设计模式解析与实战> ...

  9. 8.快速索引、listview

    实现这样的效果 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  10. SVM算法简单应用

    第一部分:线性可分 通俗解释:可以用一条直线将两类分隔开来 一个简单的例子,直角坐标系中有三个点,A,B点为0类,C点为1类: from sklearn import svm # 三个点 x = [[ ...