【Angular4】基础（一）：脚手架 Angular CLI

红太狼 2022-05-30 04:37 202阅读 0赞

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

#### 快速安装 ####

npm install -g @angular/cli

#### 创建新项目 ####

ng new angular-demo

#### 启动项目 ####

ng serve

还可以加上参数：

ng serve --open

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

如果想改变端口号，有两种方法：

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

2）在 node\_modules 中搜索 schema.json 并打开，找到 serve>port 后修改其中的 default 值即可  
![这里写图片描述][70]  
当然~

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

如果用这种方式的话更改端口也可以这样配置，改变”start”对应的值：  
![这里写图片描述][70 1]

#### 新建组件 ####

ng generate component component-name

也可缩写为：

ng g c component-name

下面是一些命令的缩写：

g —— generate           生成
    c —— class              类
    d —— directive          指令
    m —— module             模块
    p —— pipe               管道
    s —— service            服务
    it —— inline-template   内联模板
    is —— inline-style      内联样式

#### 启动测试 ####

ng test

#### 编译项目 ####

ng build

--------------------

#### 更新 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

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

npm uninstall -g @angular/cli
    npm uninstall --save-dev @angular/cli

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

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

[70]: /images/20220530/7e1afe59645547e2bed35797db8faf04.png
[70 1]: /images/20220530/07910bc68df44aa78a5ec85c9faf1198.png

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular介绍、安装Angular Cli、创建Angular项目入门教程

场景 Angualr 是一款来自谷歌的开源的web 前端框架，诞生于2009 年，由Misko Hevery 等人创建，后为Google 所收购。是一款优秀的前端J

怼烎@/ 2023年10月07日 12:51/ 0 赞/ 3 阅读

相关 angular2升级angular4

angular2升级到angular4 angular2升级到angular4有必要吗？答案是很有必要。升级到4不会在像angular1升级到angular2那样麻烦，而

「爱情、让人受尽委屈。」/ 2022年06月13日 00:53/ 0 赞/ 192 阅读

相关 Angular CLI简介

一、简介 Angular CLI用于简单，快速构建Angular2项目，只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。 Git 源代码地址：[https:/

痛定思痛。/ 2022年06月03日 23:42/ 0 赞/ 172 阅读

相关 angular-angular入门（一）

小编我最近做的项目中前端用到了angular，全因心中无货，特来补货。【Angular】 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angu

ゞ浴缸里的玫瑰/ 2022年05月30日 04:48/ 0 赞/ 216 阅读

相关【Angular4】基础（一）：脚手架 Angular CLI

首先介绍一下@angular/cli脚手架的使用。快速安装 npm install -g @angular/cli 创建新项目 ng new

红太狼/ 2022年05月30日 04:37/ 0 赞/ 203 阅读

相关 Angular 开发环境配置 – Angular CLI安装

Angular 提供了一个命令行工具，可以简化我们的程序开发。我们今后的开发也会使用这一工具，因此我们需要首先安装这个名为 Angular CLI 的开发工具。一首

谁借莪１个温暖的怀抱￠/ 2022年05月24日 11:50/ 0 赞/ 214 阅读

相关 Angular CLI

一 Angular CLI 是啥 Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开

冷不防/ 2022年01月23日 00:45/ 0 赞/ 220 阅读

相关 Angular--.angular-cli.json页面说明书

前言内容总结 end 前言最近一直在学习使用Angular的开发，因为初学，所以在这方面有很多都不清楚，之前总结了一篇关于WebSto

不念不忘少年蓝@/ 2021年09月27日 05:52/ 0 赞/ 335 阅读

相关 Angular 4环境准备与Angular cli创建项目详解

本文介绍的是为`Angular4.0`准备环境和学会使用`Angular cli`来创建项目的相关内容，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍： 1.

水深无声/ 2021年06月26日 16:06/ 0 赞/ 472 阅读

相关 Angular学习(一)【Angular-CLI，简单解析】

认识 Angular-CLI 开发 Angular 需要很多的工具，比如 `Typescript 、 Webpack 、 Karma` 等等，这些工具自己去配置会很麻烦，

雨点打透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 422 阅读