一、安装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. day13 python-001 简介及循环、判断、复制等

    Python之路,Day1 = Python基础1 本节内容 1.Python历史简介以及安装.环境变量的配置: 2.Pycharm的简单设置: 3.变量的使用及定义: 4.获取键盘输入及打印: 5. ...

  2. vs数据库连接问题

    在swagger上测试时报错:数据库连接不上 原因:在项目中修改过connectionstring,但是每次编译时本地文件中并没有更新 修改: 修改配置文件属性:不复制 —> 始终复制

  3. socket2里面,有些函数带WSA开头,有些不带。请问有何区别?

    WSASocket可以使用WinSock特有功能,比如重叠IO,用dwflags指定.    WSA的A是指api,用于区别spi,因为在spi中还有wspsocket,wspaccept等... 在 ...

  4. OpenLayers的view与layer:控制显示内容

    view与layer都可以进行显示内容的控制.这两者负责的功能是由区别的. view即显示的地图容器,有以下几个属性: center:[经度,纬度] ,对应的设置函数为view.setCenter() ...

  5. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

  6. 19.SimLogin_case07

    # 模拟登录豆瓣 from urllib.request import urlretrieve import requests from bs4 import BeautifulSoup from o ...

  7. svn+post-commit实现自动部署(转)

    一.安装 #yum install subversion 检查是否安装了svn #subversion –v 创建svn库和对应的目录 #mkdir /svn/www.test.com #svnadm ...

  8. Linux安装Java与Eclipse

    Linux安装Java和Eclipse 一.准备工作 1.下载jdk  https://www.oracle.com/technetwork/java/javase/downloads/jdk8-do ...

  9. 【默默努力】ig-wxz-and-hotdog

    这个是一个非常跟热点的小游戏,思聪吃热狗.这个游戏的话,我感觉思路还挺简单的,天上会掉热狗和障碍物, 思聪在下面张开嘴巴,进行左右移动,接热狗.如果吃到的是热狗就得一分,如果思聪吃到的不是热狗,是障碍 ...

  10. 【daydayup】weTalk

    先看一下项目效果 这个是我运行的作者的项目的wetalk-server项目,他还有wetalk-client 项目 先放下作者的github项目地址:https://github.com/mangyu ...