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. Python 基础 (三)

    字典排序 dict = {'a':1,'c':3,'b':2} 字典没有sort方法,可使用sorted排序,默认通过key排序 dict = sorted(dict),print(dict)key的 ...

  2. css 元素实际宽高

    首先定义一个div. 然后稍微装修一下 下面开始区分 一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...

  3. POJ 2488 A Knight's Journey (DFS)

    poj-2488 题意:一个人要走遍一个不大于8*8的国际棋盘,他只能走日字,要输出一条字典序最小的路径 题解: (1)题目上说的"The knight can start and end ...

  4. NetCore下的HTTP请求IHttpClientFactory

    使用方式 IHttpClientFactory有四种模式: 基本用法 命名客户端 类型化客户端 生成的客户端 基本用法 在 Startup.ConfigureServices 方法中,通过在 ISer ...

  5. 007 Python程序语法元素分析

    目录 一.概述 二.程序的格式框架 2.1 代码高亮 2.2 缩进 2.3 注释 2.4 缩进.注释 三.命名与保留字 3.1 变量 3.2 命名 3.3 保留字 3.4 变量.命名.保留字 四.数据 ...

  6. java多线程之Executor框架

    Executor框架简介 Executor框架的结构 Executor框架主要由3大部分组成: 任务: 包括被执行的任务需要实现的接口:Runable 接口.Callable接口: 任务的执行: 包括 ...

  7. centos安装流量监控软件,并指定端口号监控

    yum install -y iptraf 安装好以后使用进入界面: iptraf-ng enter回车,比如22端口,就是22 22 然后退出 重新登录 ok!

  8. Winform中设置ZedGraph曲线图的字体样式是避免出现边框

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  9. Winform中将Bitmap对象通过picture显示图片

    场景 使用Zxing生成二维码时,返回的是Bitmap,现在要将其显示. Winform中显示照片的控件是pictureBox 实现 //二维码要存储的内容 string codeString = & ...

  10. SpringBoot的一个小彩蛋

    彩蛋这种东西还算比较常见,在电影或者游戏里面我们也遇见过不少.今天就简单介绍一下SpringBoot里面的一个小彩蛋. 玩过SpringBoot的同志都知道,SpringBoot的启动界面是这酱紫的: ...