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. codeforces 626 G. Raffles(线段树+思维+贪心)

    题目链接:http://codeforces.com/contest/626/problem/G 题解:这题很明显买彩票肯定要买贡献最大的也就是说买p[i]*(num[i]+1)/(num[i]+a[ ...

  2. centos 6.8 下没有yum命令解决方法(报错: -bash: yum: command not found)

    1.去 http://mirrors.163.com/centos/6/os/x86_64/Packages/ 地址下载4个rpm安装包:python-iniparse-0.3.1-2.1.el6.n ...

  3. SSM框架——详细整合教程

    SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 1.基本概念   1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Jav ...

  4. 2019年全国新课标I卷文理科数学LaTeX排版试题与解析

    整体分析,没有偏怪难题之分,中等题偏多,题目较往年有题型改动变化,但难度还称不上很难.具体内容贴上链接! https://mp.weixin.qq.com/s/WKXhCKI_-z3UT-zUwI23 ...

  5. Charles 下载

    本文参考:Charles 下载 Charles 下载 当前最新的版本是v4.2.8:官网下载页面:https://www.charlesproxy.com/latest-release/downloa ...

  6. php判断访问协议是否是https

    可以通过$_SERVER中获取是否是HTTPS协议.   在$_SERVER["SERVER_PROTOCOL"]中拿到的只能是http.$_SERVER['HTTPS'] === ...

  7. charles 启用/禁用断点

    本文参考:charles 启用/禁用断点 1.3. enable/disable breakpoints 和 2.3 breakpoints settings 断点设置是常用的了,没啥好说的了,可以设 ...

  8. C++基础之适配器

    什么是容器适配器? ”适配器是使一种事物的行为类似于另外一种事物行为的一种机制”,适配器对容器进行包装,使其表现出另外一种行为.例如,stack<int, vector<int> & ...

  9. Linux入门基础之 下

    八.Linux 管道.重定向及文本处理 8.1.Linux 多命令协作:管道及重定向 8.1.1 开源文化 开源文化的核心理念之一就是不要重复发明轮子,很多的开源软件都是现有软件.代码.功能的重新组合 ...

  10. css禁止选中文字

    很简单: -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...