tip:所有的命令是红色标签 , 链接为蓝色标签

使用ng-cli创建新的项目一般需要安装一些新的东西后才可以进行创建成功

1.需要先安装node.js  链接: https://nodejs.org/ 找到合适自己电脑的版笨,进行下载安装

2.安装完成之后,在开始菜单中输入cmd 进入命令,输入node -v  查看是否安装成功,如果安装成功会出现版本信息,最新的node.js集成了npm,也就是说安装好了node同时npm也安装好了,同时,输入 npm -v 查看版本信息

3.当确认本机安装好node.js之后,可以使用npm 进行安装typeScript  npm install -g typeScript

接下来安装ng-cli

4.npm install -g @angular/cli

5.验证是否安装成功 检测命令:ng version  系统会自动输出版本信息:

@abgular/cli:1.1.1 版本信息

node:7.00

os:darwin 64

5.安装好ng-cli之后就需要安装新的项目,要知道你是否有项目的目录,如果有项目的目录就需要使用ng init 的命令来新建,如果没有则需要使用 ng new +新的项目

  ng init 在当前的目录中常见新的应用

  ng new 创建新的目录,然后在新的目录中运行ng init 命令

  • 这里在不知道是否创建了目录的时候使用 ng init 如果出现报错的情况下,则是表示没有已创建的目录,则需要改为 ng new +新的项目名称

当运行ng new的时候出现以下操作

  1) 新的项目目录被创建

  2)项目的源文件和目录将会被创建

  3)项目的所有依赖【package.json中配置的依赖性】也会自动被创建

  4)自动配置好项目中的typeScript开发环境和karma单元测试环境以及peotractor测试环境

  5)environment相关文件进行初始化

6 使用命令进入到新建的文件项目中

  cd +刚才新建的项目中

7.项目运行: ng serve

在这里的时候输入的命令之后,可能会存在输入命令无法在输入进去,需要使用ctrl+D一次 或  ctrl+C两次 或输入“ .exit”命令调出,会给出响应的显示,这是只要进行对应提示输出即可

8.在浏览器中输入localhost:4200 进行查看项目创建成功

9.在创建目录中可以使用 tree 查看项目结构

  

ng-cli新建项目的更多相关文章

  1. angular开发环境搭建及新建项目

    最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...

  2. angular6新建项目

    mkdir  angular6project cd angular6project ng new demo      新建一个普通项目 ng new demo --routing  新建一个带路由的项 ...

  3. vue新建项目

    一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Angular-cli新建项目目录结构详解

    Angular-cli新建项目目录结构详解 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...

  6. angular - 新建项目 - 2

    ng new testNg 新建项目后,从网络上拉取模板(最后缓存下来,我们下次创建项目的时间将会减少80%) 安装过程中,需要我们提供Git账号和姓名 最后,我们进入 useNg 然后,启动服务器 ...

  7. vue3.x版本新建项目相关知识和注意事项

    前言你前提应该懂下面基础知识:下载node.js 下好后自带npm 命令 终端查看命令 npm -v 即可看到安装版本安装淘宝镜像:npm install -g cnpm --registry=htt ...

  8. 第六十八篇:vue-cli新建项目

    好家伙,之前只是一股脑得用,连里面的可选配置项都不清楚,今天来把它搞清楚 1.单页面应用 1.1.什么是单页面应用程序 单页面应用程序(英文名: Single Page Application)简称S ...

  9. 每次新建项目出现appcompat_v7 解决方法

    ADT升级版本后每次新建项目出现appcompat_v7 , 解决方案如下 问题生成:

  10. MVC3 新建项目

    一.安装工具 二.新建项目 step1:新建MVC3项目 打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...

随机推荐

  1. MySQL如何选择合适的索引

    先来看一个栗子 EXPLAIN select * from employees where name > 'a'; 如果用name索引查找数据需要遍历name字段联合索引树,然后根据遍历出来的主 ...

  2. Badboy - 从excel中读取数据

    参考: http://leafwf.blog.51cto.com/872759/1119161 http://www.51testing.com/html/00/130600-1367743.html ...

  3. P3980 [NOI2008]志愿者招募 费用流 (人有多大胆地有多大产

    https://www.luogu.org/problemnew/show/P3980 感觉费用流比网络流的图更难想到,要更大胆.首先由于日期是连续的,所以图中的点是横向排列的. 这道题有点绕道走的意 ...

  4. CF - 652F Ants on a Circle

    题目传送门 题解: 先观察蚂蚁相撞, 可以发现, 如果我们将相撞的2个蚂蚁互换位置的话,蚂蚁相当于没有碰撞体积,直接穿过去了.所以我们可以直接计算出最终哪些位置上会有蚂蚁. 接下来就需要知道蚂蚁们的最 ...

  5. ZOJ 3872 Beauty of Array 连续子序列求和

    Edward has an array A with N integers. He defines the beauty of an array as the summation of all dis ...

  6. 一篇文章看懂JS执行上下文

     壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.lo ...

  7. JS枚举对象属性的方法及其区别

    愉快的中秋节要过去了,国庆倒计时两个周!!! 闲话不多说,那今天我们来看一看JS中枚举对象属性的方法有哪些以及他们的区别 首先在JS里面枚举对象属性一共有三种方法 for in: 会遍历对象中所有的可 ...

  8. 「小技巧」使用Git从其他分支merge个别文件

    小明发现在实际项目开发过程中,总会遇到各种各样的情况,比如一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,分别开发. 项目背景 产品经理:我们本次开发三个功能 ...

  9. golang中Array与Slice

    在golang中有数组和Slice两种数据结构,Slice是基于数组的实现,是长度动态不固定的数据结构,本质上是一个对数组字序列的引用,提供了对数组的轻量级访问.那么在go的函数中以数组或Slice为 ...

  10. Android 点九图机制讲解及在聊天气泡中的应用

    点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...