【2019-11-6】CLI 命令

CLI命令-所有ng *

一、CLI命令语法

1、大多数命令以及少量选项，会有别名，别名会显示在每个命令的语法描述中

2、选项名中带有双中线前缀 （--），选项别名中带有单中线前缀（-）。参数没有前缀，eg

ng build my-app -c production

3、通常，生成的工件（artifact）名称可以作为命令的参数进行指定，也可以使用--name选项

4、参数和选项的名称可以用小驼峰或中线分割的格式给出。 --myOptionName 等价于 --my-option-name

二、详细命令结束

1、ng add

--- 给项目添加额外的库， ng add <Library>,ng add使用软件包管理器下载新的依赖包并调用安装脚本，它可以通过更改配置和添加额外的依赖包(如 polyfills)来更新你的应用

ng add 与 npm install 的区别， for example

①npm install @angular/material --只会安装包以及更新package.json和package-lock.json文件

②ng add @angular/material：

Step1：安装包以及更新package.json和package-lock.json文件 //相当于 npm install

Step2：设置 Angular Material 和主题

Step3：更新angular.json //自动将material需要的样式文件路径添加到styles

Step4： 更新app/module.ts //增加设置的动画模块

Step5：更新index.html //增加需要的link链接

Step6：更新styles.css文件 //设置全局样式

--- 选项

① --defaults = true | false //默认值是false ，当为true，禁止与用户交互的输入提示，直接使用默认值

② --interactive = true | false //默认值是true ，当为false，禁止与用户交互的输入提示，直接使用默认值

③ --registry = registry //使用自已的npm注册列表

2、ng build

--- 编译 一个angular app到指定的输出目录，必须在工作空间内执行该命令

ng build <project> //若一个工作空间有多个项目，只输入ng build命令，则只会编译第一个项目

--- 选项
① --aot = true | false // 是否使用预编译

②--baseHref=baseHref //应用编译时使用的base url

③--prod=true|false //默认false , true表示使用生产模式进行编译

④--watch //当文件发生改变时 ，自动重新编译

3、ng config

--- 在工作区的angular.json文件中检索或者设置angular.json

ng config <jsonPath> <value>

① ng config // 查看angular.json配置文件

②ng config <jsonPath> //用jsonPath的语法在angular.json配置文件中进行查看 其key对应的值

③ng config <jsonPath> value // 用jsonPath 的语法查找key， 然后修改key的值为 value

--- 选项

① --global = true | false //默认是false，当为true，则访问调用者主目录的全局配置

4、ng doc

--- 在浏览器打开官方文档并对关键字进行搜索

ng doc <keyword> // keyword是必填项

--- 选项

① --search=true | false // 默认值是false ,当为true , 在官方文档所有查找，否则只在API文档中进行查找

5、ng e2e

--- 编译和运行一个angular app ,然后使用Protractor进行端到端的测试

ng e / ng e2e // 默认执行工作空间中的所有项目

ng e2e <project> //执行指定的项目

--- 选项

①--host=host //监听的 host , eg --host=10.132.2.148 , 默认值是localhost

②--port // 用于提供应用程序的端口 , eg 3000 , 默认是4200

③--specs //覆盖在protractor.conf.js中配置的specs

④--suite=suit // 覆盖在protractor.conf.js中配置的suit

⑤--webdriverUpdate=true | false // 更新webdriver,默认是true

6、ng generate

基于schematic（原理图）生成或者更新文件

ng generate <schematic>
ng g <schematic>

--- 选项

① --defaults = true | false //默认值是false ，当为true，禁止与用户交互的输入提示，直接使用默认值

② --interactive = true | false //默认值是true ，当为false，禁止与用户交互的输入提示，直接使用默认值

③ --force=true | false // 默认值为false，当为true，强制覆盖已存在的文件

支持的achematic有：

6-1、appShell // 详情请参考应用外壳

6-2、application

--- 选项

①--prefix=prefix // 一个前缀加在组件selector, eg : selector: 'app-root' app is a prefix

②--routing=true|false //默认是false

③--skipInstall=true|false //默认是false , 是否跳过安装依赖包

④----skipPackageJson=true|false //默认是false , 是否给package.json文件添加依赖关系

⑤--skipTests=true|false //默认是false , 是否给app创建测试文件

⑥--style=
css|scss|sass|less|styl // 样式文件的扩展名 ， 默认是css

6-3、class

给指定或者默认的项目创建class

ng g class tt-yy // Class name is TtYy , file name is tt-yy.ts

ng generate class tt -- type= ff.uu // Class name is Tt , file name is tt.ff.uu.ts

--- 选项

①--project=project // 项目名称

②--skipTests=true|false // 当为true, 将不会创建 spec.ts文件

③--type=type //给文件名添加自定义类型，格式最终为name.type.ts

6-4、component

ng g component XX

给指定或者默认的项目创建组件

--- 选项

①--entryComponent=true|false // 为true ,则会在ngModule中声明为入口组件 , 默认值是false

②--export=true|false //为true，则ngModule会导出该组件 , 默认值是false

③--flat=true|false //为true，不会创建以组件命名的文件夹，直接在当前项目的src/app下创建相关文件 , 默认值是false

④--inlineStyle=true|false //为true, 指定样式为内联样式，即不会自动生成样式文件，内联样式只支持css格式 , 默认值是false

⑤--inlineTemplate=true|false //为true, 模板文件在ts文件定义，不会自动生成.html文件 , 默认值是false

⑥--lintFix=true|false //为true, 在生成组件之后，进行lint修复, 默认值是false

⑦--module=module //声明指定的NgModule

⑧--prefix=prefix //指定组件选择器名的前缀字符

⑨--project=project //指定项目名称

⑩--selector=selector // 给生成点的组件指定选择器名

⑪--skipImport=true|false // 为true , 则不会给所属的NgModule导入此组件 , 默认值是false

⑫--skipTests=true|false // 为true , 则不会自动生成 spec.ts测试文件, 默认值是false

⑬-style=
css|scss|sass|less|style //指定样式文件的后缀名，默认是css

6-5、directive

给指定或者默认的项目创建指令

ng g directive XX

--- 选项 // 含义与组件中的选项一样

①--export=true|false

②--flat=true|false //默认值为true

③--lintFix=true|false

④--module=module

⑤--prefix=prefix

⑥--project=project

⑦--selector=selector

⑧--skipImport=true|false

⑨--skipTests=true|false

6-6、enum

给指定或者默认的项目创建枚举值

ng generate enum //创建枚举值文件 , for example

Step1: ng g enum testcaseType //生成testcase-type.ts文件

export enum TestcaseType {
Feature
Bug
}
Step2：在其他ts文件中导入此枚举值： import { TestcaseType } from './use-case-type';

Step3：使用枚举值：UseCaseType.Feature

--- 选项

①--lintFix=true|false

②--project=project

6-7、guard

给指定或者默认的项目添加路由守卫

ng g guard auth-guard

--- 选项

① --flat=true|false //默认值是 true

②--implements //选择要创建的守卫接口

③--lintFix=true|false

④--project=project

⑤--skipTests=true|false

6-8、interface

给指定或者默认的项目创建interface

ng g interface tt-yy // interface name is TtYy , file name is tt-yy.ts

ng generate interface tt ff.uu // interface name is Tt , file name is tt.ff.uu.ts

--- 选项

①--project=project // 项目名称

②--lintFix=true|false

③--prefix=prefix

6-9、library

ng g library XX

在当前工作空间中创建库

--- 选项

①--entryFile=entryFile // 修改Public API 文件的名字

②--lintFix=true|false

③--prefix=prefix

④--skipInstall=true|false

⑤--skipPackageJson=true|false

⑥--skipTsConfig=true|false //当为true，不会更新tsConfig.json文件

6-10、module

给指定或者默认的项目创建module

--- 选项

①--flat=true|false //默认值是false

②---lintFix=true|false

③--module=module

// ng g module zd1 --module=zd2 意思是创建zd1模块，并在zd2模块中的NgModule中导入zd1

④--project=project

⑤--routing=true|false //默认值是false

⑥--routingScope=Child|Root //默认值是Child

6-11、pipe

给指定或者默认的项目创建pipe

--- 选项

①--export=true|false //默认值是false

②--flat=true|false //默认值是true

③--module=module

// ng g pipe zd1 --module=zd2 意思是创建zd1 pipe，并在zd2模块中的NgModule中的declarations 添加zd1

④--project=project

⑤--lintFix=true|false //默认值是false

⑥--skipImport=true|false //默认值是false

⑦ --skipTests=true|false //默认值是false

6-12、service

给指定或者默认的项目创建service

--- 选项

①--lintFix=true|false //默认值是false

②--flat=true|false //默认值是true

③--skipTests=true|false //默认值是false

④--project=project

6-13、serviceWorker

6-14、unbiversal

6-15、webWorker

7、ng help

ng命令的帮助文档

ng serve --help

8、ng new

创建一个新的工作空间 和初始的angular app

ng new [Name] // name是新的工作空间和初始项目的名称

--- 选项

①--skipInstall=true|false //为true，则不会安装 依赖库 dependency packages.

②--commit=true|false

③--createApplication=true|false

④--defaults=true|false

⑤--directory=directory //创建工作空间的目录

⑥--inlineStyle=true|false

⑦--inlineTemplate=true|false

⑧--interactive=true|false

⑨--newProjectRoot=newProjectRoot // 创建新项目时的路径(相对于工作空间)，默认是projects ， angular.json文件可以看到此属性

⑩--prefix=prefix // 初始app的selector的前缀 ，app.component.ts 默认是app-root

⑪--routing=true|false

⑫--skipTests=true|false // 为true , 则不会自动生成 spec.ts测试文件, 默认值是false

⑬-style=
css|scss|sass|less|style //指定样式文件的后缀名，默认是css

9、ng run

ng run kk: build // kk是项目名称， build是targer 命令

10、ng serve

编译并运行app, 当文件发生改变，自动进行编译，重启项目

ng serve kk

--- 选项

①--host=host //监听的ip， 默认是localhost

②--open=true|false //默认值是false, 当为true，会自动打开默认浏览器

③--port //监听的端口，默认是4200

④--watch=true|false //监听文件变化，重新编译，默认是true

11、ng test

执行项目的单元测试

--- 选项

①--codeCoverage=true|false //默认值为false， 当为true,输出代码覆盖率

②--watch=true|false

12、ng update

升级angular版本，以及依赖库

13、ng version

输出angular CLI版本号