angular-cli，顾名思义，用于angular应用开发的脚手架,我们可以在命令行执行对应的命令。

• angular-cli主版本，跟angular保持一致。譬如angular9 → angular-cli 9
• 但是，子版本独立的。

  @angular/cli@9.1.9
  added 269 packages from 206 contributors in 77.894s

环境搭建

安装

1

npm install -g @angular/cli

卸载

1
2

npm uninstall -g @angular/cli
npm cache clean

校验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

> ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.9
Node: 10.19.0
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.9
@angular-devkit/core         9.1.9
@angular-devkit/schematics   9.1.9
@schematics/angular          9.1.9
@schematics/update           0.901.9
rxjs                         6.5.4

cli命令介绍

ng 命令列表

1.add

Adds support for an external library to your project.

2.analytics

Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.

3.build(b)

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

4.deploy

Invokes the deploy builder for a specified project or for the default project in the workspace.

5.config

Retrieves or sets Angular configuration values in the angular.json file for the workspace.

6.doc (d)

Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.

7.e2e (e)

Builds and serves an Angular app, then runs end-to-end tests using Protractor.

8.generate (g)

Generates and/or modifies files based on a schematic.

ng g [schematic] [options]
schematic 列表如下(=== options均以两个-分隔 === )：

appShell

• ss

application

• ss

class - 产生新的ts文件

• ng g class [name] [options]
• ng g class classTest –lintFix=true # 文件创建后，应用lint fix功能

1
2
3
4
5
6
7
8
9

# 得到如下ts文件
export class ClassTest {
}
# spec.ts文件
describe('ClassTest', () => {
     it('should create an instance', () => {
     expect(new ClassTest()).toBeTruthy();
     });
});

• ng g class classTest –project=projectTest # 设置项目名
• ng g class classTest –skipTests=true #不创建spec.ts的测试文件
• ng g class classTest –type=model # 修改ts，形如 classTest.model.ts

1
2
3
4
5
6
7
8

> ng g class --type=model
? What name would you like to use for the class? Test2
CREATE src/app/test2.model.spec.ts (156 bytes)
CREATE src/app/test2.model.ts (23 bytes)

> ng g cl test3 --type=bar
CREATE src/app/test3.bar.spec.ts (154 bytes)
CREATE src/app/test3.bar.ts (23 bytes)

component

• ng g c [name] [options]
• ng g c user –prefix=we # 指定组件的选择器
• ng g c user –selector=idata # 指定组件的选择器前缀
• ng g c user –export=true # 导出组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

> ng g c user --selector=idata --prefix=we --export=true
CREATE src/app/user/user.component.scss (0 bytes)
CREATE src/app/user/user.component.html (19 bytes)
CREATE src/app/user/user.component.spec.ts (614 bytes)
CREATE src/app/user/user.component.ts (265 bytes)
UPDATE src/app/app.module.ts (495 bytes)
@Component({
  selector: 'idata',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

> ng g c user2 --prefix=we --export=true
@Component({
  selector: 'we-user2',
  templateUrl: './user2.component.html',
  styleUrls: ['./user2.component.scss']
})
export class User2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
# 可见，prefix 于selector互斥

directive

• ng g d [name] [options]

enum

• ng g e [name] [options]

guard

interceptor

interface

• ng g i [name] [options]

library

module

pipe

• ng g p [name] [options]

service

• ng g s [name] [options]

serviceWorker

webWorker

9.help

Lists available commands and their short descriptions.

10.lint (l)

Runs linting tools on Angular app code in a given project folder.

11.new (n)

Creates a new workspace and an initial Angular app.

ng n

• 创建新的angular工程

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  $ ng n my-first-project ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS ] CREATE angular-demo/README.md (1028 bytes) CREATE angular-demo/.editorconfig (274 bytes) CREATE angular-demo/.gitignore (631 bytes) CREATE angular-demo/angular.json (3702 bytes) CREATE angular-demo/package.json (1254 bytes) CREATE angular-demo/tsconfig.json (489 bytes) CREATE angular-demo/tslint.json (3125 bytes) CREATE angular-demo/browserslist (429 bytes) CREATE angular-demo/karma.conf.js (1024 bytes) CREATE angular-demo/tsconfig.app.json (210 bytes) ..... Packages installed successfully. Successfully initialized git.

12.run

Runs an Architect target with an optional custom builder configuration defined in your project.

13.serve (s)

Builds and serves your app, rebuilding on file changes.

14.test (t)

Runs unit tests in a project.

15.update

Updates your application and its dependencies. See https://update.angular.io/

16.version (v)

Outputs Angular CLI version.

17.xi18n (i18n-extract)

Extracts i18n messages from source code.