本文转自:https://blog.csdn.net/u013451157/article/details/79444495

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013451157/article/details/79444495

首先介绍一下@angular/cli脚手架的使用。

快速安装

npm install -g @angular/cli
  • 1

创建新项目

ng new angular-demo
  • 1

启动项目

ng serve
  • 1

还可以加上参数:

ng serve --open
  • 1

使用 –open(或-o) 参数可以自动打开浏览器并访问http://localhost:4200/

如果想改变端口号,有两种方法:

1)在命令行中输入ng serve --port 4201

2)在 node_modules 中搜索 schema.json 并打开,找到 serve>port 后修改其中的 default 值即可 
 
当然~

启动项目除了用 ng serve 外还可以用 npm start

如果用这种方式的话更改端口也可以这样配置,改变”start”对应的值: 

新建组件

ng generate component component-name
  • 1

也可缩写为:

ng g c component-name
  • 1

下面是一些命令的缩写:

g —— generate           生成
c —— class 类
d —— directive 指令
m —— module 模块
p —— pipe 管道
s —— service 服务
it —— inline-template 内联模板
is —— inline-style 内联样式
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

启动测试

ng test
  • 1

编译项目

ng build
  • 1

更新 angular-cli(Angular2 升级到 Angular4 历程)

随着 Angular 升级到版本 4, angular-cli 也进入了 1.0 正式版。所以我们需要先更新 angular-cli 的版本。 首先需要删除旧的 angular-cli,如果你的 angular-cli 是在 beta-28 之前的版本,需要在工程目录下执行下面的命令:

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
  • 1
  • 2

angular-cli 在 beta-28 之后改了包名,并入 @angular 的子项目,包名改成了 @angular/cli,所以如果是 beta-28 之后的版本,请执行下面的命令删除:

npm uninstall -g @angular/cli
npm uninstall --save-dev @angular/cli
  • 1
  • 2

然后我们需要安装新的 @angular/cli,但进行之前需要清理一下缓存:

npm cache clean
npm install -g @angular/cli@latest

[转]【Angular4】基础(一):脚手架 Angular CLI的更多相关文章

  1. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

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

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

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

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

  4. angular4(1)angular脚手架

    angular2之后有了类似于vue-cli的脚手架工具,很方便的帮助我们搭建项目: 1.安装angular命令行工具:npm install @angular/cli -g 2.检测angular- ...

  5. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  6. @angular/cli (angular脚手架) 如何降级

    1.卸载 npm uninstall -g @angular/cli 2.清除缓存 npm cache verify 3.查看是否卸载成功 ng v //如果显示ng 不是内部或外部的指令 则证明卸载 ...

  7. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  8. Angular环境准备和Angular cli

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

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

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

随机推荐

  1. 微服务架构day01

    1.微服务架构的基本概念 分布式:将一个项目模块化 区分为多个子项目(自己理解:将业务逻辑层和数据库访问层独立化   通过rpc远程调用(rpc框架  springCould  httpCliend ...

  2. zookeeper配置文件共享中心

    最近频繁的系统上线,每次打包都要把配置文件替换为正式环境的配置文件,虽然说就是复制粘贴的事,架不住文件杂乱,而且多. 期初的想法是有没有办法将配置文件与系统隔离开来,这样在更新时候,就只需要更新代码部 ...

  3. Weex是如何让JS调用产生原生UIView的?

    从官方的Demo,我们知道,要在客户端显示Weex页面,是通过WXSDKInstance的实例实现的.我们先来看看这个类里面都有什么: @interface WXSDKInstance : NSObj ...

  4. Android NDK学习(四):C/C++层调用JAVA

    一.从C/C++层调用JAVA层代码(无参数调用) //在c代码里面调用java代码里面的方法 // java 反射 // 1 . 找到java代码的 class文件 // jclass (*Find ...

  5. PHP基础架构

    PHP基础架构 一.PHP简介 PHP是一种非常流行的高级脚本语言,尤其适合Web开发,快速.灵活和实用是PHP最重要的特点.PHP自1995年由Lerdorf创建以来,在全球得到了非常广泛的应用. ...

  6. Java学习笔记29(集合框架三:泛型)

    泛型的概念: 简单地讲,就是同一个方法(类),可以接受不同的数据类型并运行得到相对应的结果,不会出现安全问题 上一篇有一段这样的代码: 没有定义集合类型.迭代器类型 package demo; imp ...

  7. 如何在cygwin中运行crontab定时脚本[利刃篇]

    用到cygwin,自然是希望能多处理一些类似linux的任务了,那就自然少不了定时任务crontab,看到网上教程不少,自己运行一个测试却也不那么容易,下面就记录我的安装过程,以供参考吧! 1.首先, ...

  8. PCIE 2.0协议概念基本科普

    PCIE的概念:是电脑总线PCI的一种,它沿用现有的PCI编程概念及通信标准,但建基于更快的串行通信系统. 英特尔是该接口的主要支持者.PCIe仅应用于内部互连.由于PCIe是基于现有的PCI系统,只 ...

  9. numpy 介绍

    NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多(该结构也可以用来表示矩 ...

  10. linux下静态链接库和动态链接库

    关于链接库的知识,网上太多资料了,但是并不代表我很熟悉.今天遇到了 一个问题,就是由于静态链接库和ubuntu系统不兼容导致的,虽然花了点时间才搞定 但是,其中暴露的问题也不少. 没有区分好静态链接库 ...