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

本文转自：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