一、安装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. php设置时区和strtotime转化为时间戳函数

    date_default_timezone_set('PRC');//设置中华人民共和国标准时间 strtotime — 将任何英文文本的日期时间描述解析为 Unix 时间戳 格式:int strto ...

  2. duilib教程之duilib入门简明教程15.自绘控件

    在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如菜单控件 ...

  3. flask中abort()函数的使用

    一.介绍 #从flask中导入abort from flask import abort abort()函数的作用 可以让开发者在检测到web访问错误时,立即将错误信息返回回去,返回的错误码必须是已知 ...

  4. react diff 极简版

    为什么react这么快呢 ? 因为react用了虚拟DOM: 但是每次虚拟DOM转真实DOM不也是很浪费性能吗 ? nice,所以关键点在Diff算法这里,去对比新旧DOM树,而后通过补丁去更新到真实 ...

  5. csp-s模拟测试87

    csp-s模拟测试87 考场状态还可以$T1$我当时以为我秒切,$T2$确认自己思路不对后毅然决然码上,$T3$暴力挂了太可惜了. 03:01:28 03:16:07 03:11:38 140 03: ...

  6. myeclipse CTRL+1功能

    有时候,在myeclipse或者eclipse中自动编译代码有错误,我们把鼠标放在错误一行能够自动显示出问题原因,但是有时显示问题让人有些匪夷所思,不知所云何物. 此时可以使用<ctrl> ...

  7. JAVA判断一个对象生存还是死亡

    JAVA中判断一个对象是否死亡的算法有两种: 引用计数算法 可达性分析算法 一.引用计数算法所谓引用计数算法就是,给一个对象定义一个引用计数器,每当该对象被引用一次引用计数器就加1,如果一个对象的引用 ...

  8. MME、PGW、SGW和PCRF的介绍

    1.简介原文连接:https://blog.csdn.net/Rong_Toa/article/details/94983607 用户面和控制面板分离2.什么是HSS?HSS有什么主要功能?HSS与H ...

  9. java-day07

    API 应用程序编程接口 Scanner类 将键盘输入的数据到程序中 1.导包 2.创建 Scanner 对象名 = new Scanner(); 3.使用 int num = 对象名.nextInt ...

  10. P1280 尼克的任务 /// DP(选择性地)

    题目大意: https://www.luogu.org/problemnew/show/P1280 题解 手推一遍思路更清晰 #include <bits/stdc++.h> using ...