搭建Angular环境
一、安装nodejs
登录nodejs官网,下载对应系统版本;安装,只要一直下一步即可。

在nodejs中自带了npm,不需要独立安装npm。
输入node -v /npm -v 查看node和npm是否安装成功;出现版本号即安装成功。
二、安装cnpm(淘宝滤镜)
在DOS窗口中(window键+R),直接输入回车执行
npm install cnpm -g -registry=https://registry.npm.taobao.org

安装完成,输入cnpm -v查看是否安装成功!

查看版本号之后,关闭命令提示符窗口重新打开,否则,安装完毕后直接使用会出现错误。
说明
由于npm安装插件是从国外服务器下载,受网络影响很大,可能出现异常,继而淘宝团队生产一个完整的npmjs.org镜像,用cnpm代替npm,cnpm与nodejs的npm用法一致,只是在执行命令时,将npm改为cnpm。
三、安装typescript和typings
在DOS中,直接输入回车安装(angular-cli是用typescript写的,所以要先安装typescript和typings):
cnpm install -g typescript typings

运行完毕之后,查看版本确定是否安装成功,在命令提示符中直接输入:tsc -v

四、安装angular-cli
直接在DOS中,输入回车安装:
cnpm install -g angular-cli@latest // latest安装最新版本
注意:如果你之前安装失败过,最好在安装angular-cli之前先卸载干净,用以下两句:
npm uninstall -g angular-cli
npm cache clean
在检查你全局的那些npm 文件下还残留下图这两个文件,有的话也要删掉,删掉后再用“npm install -g angular-cli@latest”安装最新的angular-cli即可。

安装完毕后,用ng -v或者ng --help查看是否安装成功。

显示如上表示已经安装完成。
五、创建并运行项目
切换目录:D:
进入到某个路径:cd D:\project
创建项目:
ng new my-app // my-app为你的项目名
cd my-app
ng serve // 启动项目 或者 ng serve --open 启动项目并运行

接下来在浏览器地址栏中输入http://localhost:4200就可以查看项目了。
六、问题归纳
问题一:有时候会出现在使用ng serve运行项目的时候报错:

解决方法:
打开终端/控制台窗口,输入下列命令:
npm install -g @angular/cli
搭建Angular环境的更多相关文章
- angular环境搭建时的坑
安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...
- 93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3
转自:https://www.cnblogs.com/wawahaha/p/3946023.html 前言 Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型 ...
- ng-cli搭建angular项目框架
原文地址 https://www.jianshu.com/p/0a8f4b0f29b3 环境准备 以下步骤都不需要事先创建文件夹,只是环境的准备过程,只有到需要搭建项目的时候才需要创建文件夹用来存放项 ...
- Flume1 初识Flume和虚拟机搭建Flume环境
前言: 工作中需要同步日志到hdfs,以前是找运维用rsync做同步,现在一般是用flume同步数据到hdfs.以前为了工作简单看个flume的一些东西,今天下午有时间自己利用虚拟机搭建了 ...
- 搭建LNAMP环境(七)- PHP7源码安装Memcached和Memcache拓展
上一篇:搭建LNAMP环境(六)- PHP7源码安装MongoDB和MongoDB拓展 一.安装Memcached 1.yum安装libevent事件触发管理器 yum -y install libe ...
- 搭建LNAMP环境(二)- 源码安装Nginx1.10
上一篇:搭建LNAMP环境(一)- 源码安装MySQL5.6 1.yum安装编译nginx需要的包 yum -y install pcre pcre-devel zlib zlib-devel ope ...
- 搭建LNAMP环境(一)- 源码安装MySQL5.6
1.yum安装编译mysql需要的包 yum -y install gcc-c++ make cmake bison-devel ncurses-devel perl 2.为mysql创建一个新的用户 ...
- Linux 14.04lts 环境下搭建交叉编译环境arm-linux-gcc-4.5.1
交叉编译工具链是为了编译.链接.处理和调试跨平台体系结构的程序代码,在该环境下编译出嵌入式Linux系统所需要的操作系统.应用程序等,然后再上传到目标板上. 首 先要明确gcc 和arm-linux- ...
随机推荐
- thinkphp empty标签
empty标签用于判断某个变量是否为空,用法: 大理石平台检验标准 <empty name="name"> name为空值 </empty> 如果判断没有赋 ...
- [ZJOI 2018]历史
题意:给定一棵树和点的\(Access\)次数,求切换链的最大值. 考虑修改时实边与虚边的贡献,用\(LCT\)维护此树. // luogu-judger-enable-o2 #include< ...
- 云-腾讯云-实时音视频:实时音视频(TRTC)
ylbtech-云-腾讯云-实时音视频:实时音视频(TRTC) 支持跨终端.全平台之间互通,从零开始快速搭建实时音视频通信平台 1.返回顶部 1. 腾讯实时音视频(Tencent Real-Time ...
- Android按钮绑定四种方式
public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCr ...
- Daemon 守护线程(27-11)
t2.setDaemon(True)不再等待里面的sleep(5). 当设成setDaemon(True)这个线程就不等了. 例子一: import threadingfrom time import ...
- 运算符的基本概念以及常用Scanner、随机数Random、选择结构的初步了解
运算符 分类 算术运算符 位运算符 关系运算符|比较运算符 逻辑运算符 条件运算符 赋值运算符 其中优先级顺序从上到下,可以记忆口诀:单目乘除位关系,逻辑三目后赋值 操作数: 运算符左右两边的数 表达 ...
- 1.关于Python的发展历史你知道吗?
1989,为了度过圣诞假期,Guido开始编写Python语言编译器.Python这个名字来自Guido的喜爱的电视连续剧<蒙蒂蟒蛇的飞行马戏团>.他希望新的语言Python能够满足他在C ...
- Lost's revenge HDU - 3341 AC自动机+DP(需要学会如何优雅的压缩状态)
题意: 给你n个子串和一个母串,让你重排母串最多能得到多少个子串出现在重排后的母串中. 首先第一步肯定是获取母串中每个字母出现的次数,只有A T C G四种. 这个很容易想到一个dp状态dp[i][A ...
- Cefsharp实现快捷键功能
原文:Cefsharp实现快捷键功能 1 . 实现IKeyboardHandler接口 public class KeyBoardHander : IKeyboardHandler { public ...
- visual studio 注释模板
/*----------------------------------------------------------------* 项目名称 :$rootnamespace$* 项目描述 :* 类 ...