一、安装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. day20_函数的闭包 与 装饰器

    #!/usr/bin/env python # -*- coding:utf-8 -*- # # 一些文章 # https://www.cnblogs.com/Vae1242/p/6944338.ht ...

  2. 建立ftp服务器和客户端

    参考:https://www.cnblogs.com/judes/p/9546447.html 补充: 权限设置:如下所示,如果需要上传文件需要勾选write权限,需要在文件中添加内容勾选append ...

  3. Integer 类和 int 基本数据类型的区别

    public static void main(String[] args) { Integer i = 10; Integer j = 10; System.out.println(i == j); ...

  4. 第二十一篇:spring怎么做缓存

     项目背景:你可能遇情景:1.一个做统计的页面,每次刷新需要调接口做查询 ,是联表查询,查出来的数据还需要做一些计算或者加工,不算页面上的图表插件,刷新一次,延迟个几秒钟才出的来2. 一个统计接口如此 ...

  5. 07_mybatis延迟加载

    1. 延迟加载 ​ resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  6. 炮兵阵地 /// 状压DP oj26314

    题目大意: 炮兵阵地 设置炮兵的位置 其上两位 下两位 左两位 右两位 不能同时设置炮兵 这题是 corn fields玉米地 的升级版 可以先看下这题的注释 更详细些 第一种方法是网上大多数题解的解 ...

  7. USACO training course Mother's Milk /// DFS(有点意思) oj10120

    题目大意: 输入 A B C 为三个容器的容量 一开始A B是空的 C是满的 每一次倾倒只能在 盛的容器满 或 倒的容器空 时才停止 输出当A容器空时 C容器内剩余量的所有可能值 Sample Inp ...

  8. 主页面与iframe页面之间的javascript函数的调用

    1:在主页面里调用iframe页里面的javascript函数 <script type="text/javascript"> var childWindow = $( ...

  9. 透视jvm之垃圾回收

    JVM是JAVA世界的核心,了解它有助于我们更好调试,调优和开发程序,最近散仙在看JAVA特种兵一书,看完觉得,作者写的内容还是挺不错,大家感兴趣的,也可以购买本温故而知新下. 在JVM中,我们经常提 ...

  10. ListControl 设置表格行高与字体

    设置行高: CImageList   m_l;  m_l.Create(1,18,TRUE|ILC_COLOR32,1,0);   listCtrl.SetImageList(&m_l,LVS ...