安装命令行

npm install -g @angular/cli

检查命令行

ng v

使用这个命令可以检查 angular cli是否安装成功。我检查的时候发现没有安装成功，提示我使用的node.js版本为6.9.2，不支持angular cli v6，至少需要node.js的版本在8.9以上，重新安装了最新的node.js后，angular cli才可以正常使用

创建项目

ng new app1

使用这个命令行会自动构建项目，大概需要5分钟左右的时间，流量需要大概100M左右

启动项目

cd app1

ng serve --open

启动以后，就可以访问http://localhost:4200访问项目了

创建及使用组件

ng generate component module1

或者使用简写

ng g c module1

创建完组件后，会在src/app文件夹创建一个module1的文件夹，并生成对应的文件，在module1.components.ts文件内有描述selector: 'app-module1'

那么在app.component.html文件就可以加入这么一句代码引入这个组件<app-module1></app-module1>

Angular CLI的安装及使用的更多相关文章

  1. Angular/cli的安装

    Angular cli 是一个命令行工具,用来创建,打包,发布项目. Angular cli 安装之前必须先安装Node 6.9.0及以上版本,NPM 3 及以上版本. 在cmd控制台窗口执行命令no ...

  2. Angular/cli 安装（windows环境）。

    1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...

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

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

  4. 如何安装 Angular CLI 并且检查 CLI 的版本

    想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本? 可以使用命令: npm install -g @angular/cli 进行安装. 使用命令 ng version ...

  5. 安装Angular CLI开发工具

    目前,无论你使用什么前端框架,都必然要用到NodeJS工具,Angular也不例外,与其他框架不同的是,Angular一开始就使用"全家桶"式的设计思路,因此@angular/cl ...

  6. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  7. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

  8. Angular CLI 命令行工具

    工欲善其事必先利其器.好的工具让开发更加简单便捷. 1.全局安装angular cli npm install -g @angular/cli 2.安装完成后就可以使用angular-cli命令行工具 ...

  9. .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...

随机推荐

  1. hdu 4025 Equation of XOR 状态压缩

    思路: 设: 方程为 1*x1 ^ 1*x2 ^ 0*x3 = 0; 0*x1 ^ 1*x2 ^ 1*x3 = 0; 1*x1 ^ 0*x2 ^ 0*x3 = 0 把每一列压缩成一个64位整数,因为x ...

  2. alpha冲刺——代码规范、冲刺任务与计划（追光的人）

    代码规范 代码规范整合了自身项目实践还有诸多好的大公司的代码规范.如阿里巴巴开发手册.华为Java规范.W3C前端规范等. 由于内容过于详细和细致,为了方便查看,将其放置在了showDoc网站上(同时 ...

  3. request.setAttribute()、session.setAttribute()和request.getParameter()的联系与区别(记录)

    1.session.setAttribute()和session.getAttribute()配对使用,作用域是整个会话期间,在所有的页面都使用这些数据的时候使用. 2.request.setAttr ...

  4. HDU 4714 Tree2cycle （树形DP）

    Tree2cycle Time Limit: 15000/8000 MS (Java/Others)    Memory Limit: 102400/102400 K (Java/Others)Tot ...

  5. C#中汉字排序简单示例（拼音/笔划）

    可以按照区域语言修改排序规则. class Program { static void Main(string[] args) { string[] arr = { "趙(ZHAO)&quo ...

  6. linux下如何挂接（mount）光盘镜像文件、移动硬盘、U盘、Windows网络共享和NFS网络共享

    首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的.      命令格式:      mount [-t vfstype] [-o options ...

  7. 在Windows下编译Emacs

    在Windows下编译Emacs Windows下编译好的Emacs主要有两个版本,一个来自http://nqmacs.sourceforge.net/,另一个来自http://www.crasseu ...

  8. html 中怎么设置div的位置

    利用CSS的position属性对元素定位,以下是position 属性规定元素的定位类型. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 ...

  9. [转]C++之运算符重载(1)

    在前一节中曾提到过,C++中运行时的多态性主要是通过虚函数来实现的,而编译时的多态性是由函数重载和运算符重载来实现的.这一系列我将主要讲解C++中有关运算符重载方面的内容.在每一个系列讲解之前,都会有 ...

  10. Guava Files 源码分析(一)

    Files中的工厂 Files类中对InputStream, OutputStream以及Reader,Writer的操作封装了抽象工厂模式,抽象工厂是InputSupplier与OutputSupp ...