ng-cli新建项目
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新建项目的更多相关文章
- angular开发环境搭建及新建项目
最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...
- angular6新建项目
mkdir angular6project cd angular6project ng new demo 新建一个普通项目 ng new demo --routing 新建一个带路由的项 ...
- vue新建项目
一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular-cli新建项目目录结构详解
Angular-cli新建项目目录结构详解 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...
- angular - 新建项目 - 2
ng new testNg 新建项目后,从网络上拉取模板(最后缓存下来,我们下次创建项目的时间将会减少80%) 安装过程中,需要我们提供Git账号和姓名 最后,我们进入 useNg 然后,启动服务器 ...
- vue3.x版本新建项目相关知识和注意事项
前言你前提应该懂下面基础知识:下载node.js 下好后自带npm 命令 终端查看命令 npm -v 即可看到安装版本安装淘宝镜像:npm install -g cnpm --registry=htt ...
- 第六十八篇:vue-cli新建项目
好家伙,之前只是一股脑得用,连里面的可选配置项都不清楚,今天来把它搞清楚 1.单页面应用 1.1.什么是单页面应用程序 单页面应用程序(英文名: Single Page Application)简称S ...
- 每次新建项目出现appcompat_v7 解决方法
ADT升级版本后每次新建项目出现appcompat_v7 , 解决方案如下 问题生成:
- MVC3 新建项目
一.安装工具 二.新建项目 step1:新建MVC3项目 打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...
随机推荐
- HTML(三)链接,<head>,css样式
HTML链接 HTML 超链接 一个未访问过的链接显示为蓝色字体并带有下划线 访问过的链接显示为紫色并带有下划线 点击链接时,链接显示为红色并带有下划线 注意:如果为这些超链接设置了 CSS 样式,展 ...
- 区间dp专题
HDU4283You Are the One区间dp, 记忆话搜索运行时间: #include <iostream> #include <cstdio> #include ...
- POJ 3067 Japan (树状数组求逆序对)
POJ - 3067 题意:有(1-n)个城市自上到下在左边, 另有(1-m)个城市自上到下在右边,共有m条高速公路,现求这m条直线的交点个数,交点不包括在城市处相交. 题解:先将高速公路读入,然后按 ...
- 计蒜客 ACM训练联盟周赛 第一场 Alice和Bob的Nim游戏 矩阵快速幂
题目描述 众所周知,Alice和Bob非常喜欢博弈,而且Alice永远是先手,Bob永远是后手. Alice和Bob面前有3堆石子,Alice和Bob每次轮流拿某堆石子中的若干个石子(不可以是0个), ...
- hdu 1182 A Bug's Life(简单种类并查集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1829 题意:就是给你m条关系a与b有性关系,问这些关系中是否有同性恋 这是一道简单的种类并查集,而且也 ...
- 用户上传gif动图分解成多张帧图片,并合并生成新gif图片
背景 为什么要制作这么一款工具 首先公司最近在做一款表情包的产品,需要将文字生成到gif图片中,并可以控制文字显示的位置,并将不同的文字显示在不同的图片上 制作成网页端工具,随时随地,方便使用 探索 ...
- 04 python之函数详解
一.函数初识 函数的产生:函数就是封装一个功能的代码片段. li = ['spring', 'summer', 'autumn', 'winter'] def function(): count = ...
- eclipse的properties文件中文被转码问题
如图所示:首次在properties里打中文注释,结果一输入中文就自动被转码,于是查看了一下项目的编码是UTF-8的,而eclipse中默认的properties文件编码是ISO的,所以修改一下即可 ...
- 使用Idea第一次创建一个Mavne工程时没有src目录
在使用idea创建一个maven工程时没有src目录,可能出现的问题很多,我先把我自己的问题分享上来 因为没有src,可能是因为maven插件还没下载到本地仓库.maven插件的版本和jdk版本冲突或 ...
- android 实现 波纹效果+图片左右无限滑动缩放效果
项目中用到的 ,记录下.说不定下次又用到了.就提取出来了. 录制效果一般,将就看吧.代码地址如下 https://yunpan.cn/ckQaXMpYwdUnn (提取码:7ac7)