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 基础(五)

    pandas缺失值处理 import pandas as pd importrandom df01 = pd.DataFrame(np.random.randint(1,9),size = (4,4) ...

  2. iOS8 新特性

    iOS8新特性主要体现在4方面 1.UIAlertController 对alert&actionSheet的封装 UIAlertController.h 提示框按钮的选择 typedef N ...

  3. python控制窗口对角线运动

    import win32con import win32gui import time while True: time.sleep(1) notepad = win32gui.FindWindow( ...

  4. 华为手机,删除安装包apk

    1.下载“文件管理”,完成安装后,打开文件管理. 2.找到安装包,单击. 3.长按想要删除的apk文件,页面上会出现垃圾箱的图标,点击垃圾箱即可完成删除.

  5. 2019dx#4

    Solved Pro.ID Title Ratio(Accepted / Submitted)   1001 AND Minimum Spanning Tree 31.75%(1018/3206)   ...

  6. CodeForces 875 D High Cry

    High Cry 题解: 把思路转换成总-非法方案数. 对于第i个点来说 找到L[i], R[i] 然后 对于所有的在[ L[i], R[i] ]  的值都 < a[i], 然后对于第i个点来说 ...

  7. 用C#实现的几种常用数据校验方法整理(CRC校验;LRC校验;BCC校验;累加和校验)

    CRC即循环冗余校验码(Cyclic Redundancy Check):是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错 ...

  8. Python学习之旅:使用virtualenv创建Python环境及PyQT5环境配置

    一.写在前面 从学 Python 的第一天起,我就知道了使用 pip 命令来安装包,从学习爬虫到学习 Web 开发,安装的库越来越多,从 requests 到 lxml,从 Django 到 Flas ...

  9. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  10. 谁动了我的奶酪?--java实例初始化的顺序问题

    故事背景 有一天,老鼠小白发现了一个奇怪的问题,它的奶酪的生产日期被谁搞丢了,不知道奶酪是否过期,可怎么吃呀? 让我们来看看吧 import java.util.Date;public class C ...