[转]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调试了

原文地址:https://www.cnblogs.com/freeliver54/p/10344049.html

时间: 2024-10-04 10:43:19

[转]windows 10 搭建angular开发环境的相关文章

在Ubuntu 15.10搭建MEAN开发环境

在Ubuntu 15.10搭建MEAN开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 本文主要讲述如何在Ubuntu 15.10系统上搭建MEAN开发环境. 1.安装Node.js和使用nvm安装npm nvm是一个简单的Bash脚本,可用于在同一台主机上安装和维护不同的Node.js版本.执行命令: # wget -qO- https://raw.githubusercontent.com/creatio

Windows下搭建PHP开发环境

Windows下搭建PHP开发环境 一.准备工作-所需软件 ·   Apache  \php\httpd-2.2.25-win32-x86-no_ssl.msi ·   PHP \php\php-5.3.1-Win32-VC6-x86.zip ·   Oracle client 10g\php\client 二.安装软件 安装Apache: 双击安装,与安装其他Windows软件没有什么区别,在填Server Infomation时,并没有特殊规定,只要输入的信息符合格式即可. 安装完成之后,在

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境 本篇博客来给大家介绍如何在Windows下搭建Cocos2d-x Android开发环境,笔者前面写了几篇博客都是针对如何对Android项目进行交叉编译的,对应了Cocos2d-x 2.2.3版本和Cocos2d-x 3.0版本,其实3.0版本跟3.1.1是一样的,只是笔者介绍如何不适用命令行对Cocos2d-x Android项目进行交叉编译,而直接在Eclipse进行交叉编译. 前面几篇博客,如果有需要比较差别的

在windows上搭建django开发环境

参考自:https://docs.djangoproject.com/en/dev/howto/windows/ 环境: windows 8.1 Steps: 安装python 在 http://python.org/download/上下载windows版本进行安装 添加下面的路径到环境变量PATH: C:\Python34\;C:\Python34\Scripts; 安装开发IDE eclipse 下载地址: http://www.eclipse.org/downloads/ 安装eclip

Windows下搭建PHP开发环境,整合Apache+PHP+MySQL(举例软件为32位)

原文来自:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html 在原作者的基础上,只是做了详细的解释.避免走弯路.(注:红色字体为本人加的) 一.准备工作-下载所需软件 Apache  httpd-2.2.22-win32-x86-openssl-0.9.8t.msi PHP       php-5.3.10-Win32-VC9-x86.zip MySQL   mysql-5.5.20-win32.msi 二.安装软件 安装A

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

原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发环境,需要哪个模块自己安装就行了,或者那个软件需要升级,直接升级那个软件就行了,并不影响其他软件,非常方便. 一.准备工作-下载所需软件 Apache  httpd-2.

Windows+Apache搭建PHP开发环境

本文详细介绍了在Windows8.1(X64)下使用Apache2.4.12-x64-vc11/php-5.6.7-Win32-VC11-x64/Mysql5.6.24/phpMyAdmin4.4.2搭建php开发环境. 第一步:下载安装的文件 1. 建议选择无SSL功能的Apache版本来完成开发. 2. Windows下安装MySQL就选择.msi安装包格式,双击根据向导安装即可,简单方便. 3. PHP我们选择用Windows的.zip版本.从安全性和性能来说,都是zip版本的好,一般服务

Windows上搭建android开发环境

在搭建android开发环境时需要四部分内容,框架如下 其中Java SDK和Eclipse在java4android中有过介绍,重点介绍ADT和Android SDK的安装. 安装Android SDK: 打开https://developer.android.com/sdk/index.html#Other下载Android SDK并安装,安装完成后打开Android SDK Manager,下载你需要的SDK版本 打开Eclipse,点击Window→Preferences→Android

Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定义功能 1.4 模块:将应用中的不同部分组织成一个angular框架可以理解的单元 1.5 组件+服务+指令 = 模块 组件+服务+指令 是用来完成业务功能的:模块 是用来打包和分发的 2 开发环境搭建 2.1 安装node.js 很简单,百度即可 安装完后在我们的命令窗口中就可以使用 npm 命令