安装命令行

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. bzoj 2998 第k小字串

    这道题用后缀数组貌似会T. 后缀自动机做法: t==0:第k小的本质不同字串 首先把后缀自动机建出来,我们会得到一个DAG,并且只存在一个点入度为0(我们称之为根),可以证明字符串的任意一个本质不同的 ...

  2. jsoncpp 0.5 ARM移植

    1.下载jsonapp 0.5 https://github.com/open-source-parsers/jsoncpp 2.编译 platform 没有包含 arm 平台,需要把源码提取出来,独 ...

  3. SMACH专题（三）----几种State类型

    状态机提供了若干种状态,包括了Generic State,CBState,SimpleActionState (ROS),ServiceState (ROS),MonitorState (ROS).下 ...

  4. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  5. MultCloud – 支持数据互传的网盘管理

    MultCloud https://www.multcloud.com/ 是一款在线服务,可以在一个地方管理众多网盘,支持国产百度盘, 最具有特色的地方是你可以直接在 MultCloud 里操作将 D ...

  6. 为DropDownListFor设置选中项

    在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...

  7. C#编程（四）

    原文地址:http://blog.csdn.net/shanyongxu/article/details/46400067 C#预定义数据类型 C#中的可用类型以及及其定义非常严格,C#中获得数据类型 ...

  8. 安装arcgis10.5不能启动服务的解决方案转

    柚子的二分口粮地 来自:http://www.cnblogs.com/youzi-xuchongyou/p/7218422.html 安装arcgis10.5不能启动服务的解决方案 最近由于公司需要, ...

  9. Selenium2+python自动化39-关于面试的题

    前言 最近看到群里有小伙伴贴出一组面试题,最近又是跳槽黄金季节,小编忍不住抽出一点时间总结了下, 回答不妥的地方欢迎各位高手拍砖指点.   一.selenium中如何判断元素是否存在? 首先selen ...

  10. docker Redis的主从配置

    redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member:score的散列集合,其中member为成员 ...