一、安装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环境的更多相关文章

  1. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  2. 快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...

  3. 93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    转自:https://www.cnblogs.com/wawahaha/p/3946023.html 前言 Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型 ...

  4. ng-cli搭建angular项目框架

    原文地址 https://www.jianshu.com/p/0a8f4b0f29b3 环境准备 以下步骤都不需要事先创建文件夹,只是环境的准备过程,只有到需要搭建项目的时候才需要创建文件夹用来存放项 ...

  5. Flume1 初识Flume和虚拟机搭建Flume环境

    前言:       工作中需要同步日志到hdfs,以前是找运维用rsync做同步,现在一般是用flume同步数据到hdfs.以前为了工作简单看个flume的一些东西,今天下午有时间自己利用虚拟机搭建了 ...

  6. 搭建LNAMP环境(七)- PHP7源码安装Memcached和Memcache拓展

    上一篇:搭建LNAMP环境(六)- PHP7源码安装MongoDB和MongoDB拓展 一.安装Memcached 1.yum安装libevent事件触发管理器 yum -y install libe ...

  7. 搭建LNAMP环境(二)- 源码安装Nginx1.10

    上一篇:搭建LNAMP环境(一)- 源码安装MySQL5.6 1.yum安装编译nginx需要的包 yum -y install pcre pcre-devel zlib zlib-devel ope ...

  8. 搭建LNAMP环境(一)- 源码安装MySQL5.6

    1.yum安装编译mysql需要的包 yum -y install gcc-c++ make cmake bison-devel ncurses-devel perl 2.为mysql创建一个新的用户 ...

  9. Linux 14.04lts 环境下搭建交叉编译环境arm-linux-gcc-4.5.1

    交叉编译工具链是为了编译.链接.处理和调试跨平台体系结构的程序代码,在该环境下编译出嵌入式Linux系统所需要的操作系统.应用程序等,然后再上传到目标板上. 首 先要明确gcc 和arm-linux- ...

随机推荐

  1. kubernetes istio之gateway

    [root@master istio-]# kubectl apply -f samples/httpbin/httpbin.yaml service/httpbin created deployme ...

  2. mysql 新特性之geometry

    1.获取矩形两个点的数据(左上角和右下角) SELECT  *    FROM    t_location    WHERE   MBRContains                    (    ...

  3. VS2010-MFC(文档、视图和框架:各对象之间的关系)

    转自:http://www.jizhuomi.com/software/223.html 前面一节进行了文档.视图和框架的概述,本节主要讲解文档.视图.框架结构中各对象之间的关系. 各个对象之间的关系 ...

  4. 杂项-日志:日志(log)

    ylbtech-杂项-日志:日志(log) 1.返回顶部 1. 概述 网络设备.系统及服务程序等,在运作时都会产生一个叫log的事件记录:每一行日志都记载着日期.时间.使用者及动作等相关操作的描述. ...

  5. day 54 Django基础四之模板系统

    Django基础四之模板系统   本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法   模板渲染的官方文档 关于模 ...

  6. POJ 2398 map /// 判断点与直线的位置关系

    题目大意: poj2318改个输出 输出 a: b 即有a个玩具的格子有b个 可以先看下poj2318的报告 用map就很方便 #include <cstdio> #include < ...

  7. 16-1-es5

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. angular 页签

    HTML: <link rel="stylesheet" href="views/show/tab.css"/> <div> <u ...

  9. JS时间比较大小

    目录 1. 时间比较 2. 时间戳比较 3. 日期比较方法 4. 参考 1. 时间比较 var curTime = new Date(); //把字符串格式转化为日期类 var starttime = ...

  10. 2016.8.19上午初中部NOIP普及组比赛总结

    2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...