Angular CLI
一 Angular CLI 是啥
Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开发工作流程。能让开发者更容易搭建和运行Angular工程。
Angular CLI 是Angular开发的一个辅助工具。
二 Angular CLI 安装
安装Angular CLI之前，先得安装Node.js和NPM。
Angular需要Node.js的8.x或10.x版本。一般安装Node.js之后npm也顺带给安装上了。我们可以通过node -v 命令和 npm -v 命令来查看node.js或者npm是否安装。
在安装了Node.js和npm之后，咱们就可以用如下命令来安装Angular CLI
# window平台上使用如下命令
npm install -g @angular/cli
# mac或者linux平台上使用如下命令
sudo npm install -g angular-cli
之后可以通过 ng version 命令来验证Angular CLI是否成功安装。
三 Angular CLI 命令
3.1 ng new
ng new <name> [options]
ng n <name> [options]
ng new命令用于创建一个新的Angular项目。
ng new 会创建目录并且创建Angular项目。
| 参数 | 说明 |
|---|---|
| <name> | 目录名称和初始Angular项目的名称 |
| 选项 | 说明 |
|---|---|
| --collection=collection | 别名：-c。用于生成初始应用程序的外部库，比如ng-zorro-antd |
| --commit=true|false | 默认值：true。初始git存储库提交信息 |
| --createApplication=true|false | 默认值：true。如果为true，则在新工作空间的src文件夹中创建一个新的初始应用程序项目。如果为false，则创建一个没有初始应用程序的空工作区。然后，您可以使用ng generate application命令，以便在projects文件夹中创建所有应用程序 |
| --defaults=true|false | 如果为true。则禁用具有默认选项的交互式输入提示 |
| --directory=directory | 用于创建工作空间的目录名称 |
| --dryRun=true|false | 默认值：false,别名：-d。如果为true，则运行并报告活动而不写出结果 |
| --experimentalIvy=true|false | 默认值：false。如果为true，则创建一个使用Ivy渲染引擎的新应用程序 |
| --force=true|false | 默认值：false,别名：-f。是否覆盖现有文件 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --inlineStyle=true|false | 默认值：false,别名：-s。如果为true，则在组件TS文件中包含内联样式。默认情况下，在组件TS文件中创建并引用外部样式文件 |
| --inlineTemplate=true|false | 默认值：false,别名：-t。如果为true，则在组件TS文件中包含模板内联。默认情况下，在组件TS文件中创建并引用外部模板文件 |
| --interactive=true|false | 如果为false。则禁用交互式输入提示 |
| --minimal=true|false | 默认值：false。如果为true，则创建一个没有任何测试框架的项目 |
| --newProjectRoot=newProjectRoot | 默认值：projects。相对于新工作区根目录，将创建新项目的路径 |
| --prefix=prefix | 默认值：app,别名：-p。要应用于初始项目的生成选择器的前缀 |
| --routing=true|false | 默认值：false。如果为true，则为初始项目生成路由模块 |
| --skipGit=true|false | 默认值：false,别名：-g。如果为true，则不初始化git存储库 |
| --skipInstall=true|false | 默认值：false。如果为true，则不安装依赖包 |
| --skipTests=true|false | 默认值：false,别名：-S。如果为true，则不会为新项目生成“spec.ts”测试文件 |
| --style=css|scss|sass|less|styl | 默认值：css。用于样式文件的文件扩展名或预处理器 |
| --verbose=true|false | 默认值：false,别名：-v。如果为true，则向输出日志记录添加更多详细信息 |
| --viewEncapsulation=Emulated|Native|None|ShadowDom | 在初始项目中使用的视图封装策略 |
3.2 ng add
ng add <collection> [options]
为项目添加对外部库的支持。比如 ng add ng-zorro-antd 命令添加ng-zorro-antd ui框架。
| 参数 | 说明 |
|---|---|
| <collection> | 要添加的包，外部库 |
| 选项 | 说明 |
|---|---|
| --defaults=true|false | 如果为true。则禁用具有默认选项的交互式输入提示 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --interactive=true|false | 如果为false。则禁用交互式输入提示 |
3.3 ng generate
ng generate <schematic> [options]
ng g <schematic> [options]
根据schematic的设置生成或修改对应的文件。
| 参数 | 说明 |
|---|---|
| <schematic> | 描述我们要生成的对象是啥 |
| 选项 | 说明 |
|---|---|
| --defaults=true|false | 如果为true，则禁用具有默认选项的交互式输入提示 |
| --dryRun=true|false | 默认值：false,别名：-d。如果为true，则运行并报告活动而不写出结果 |
| --force=true|false | 默认值：false,别名：-f。如果为true，则强制覆盖现有文件 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --interactive=true|false | 如果为false，则禁用交互式输入提示 |
ng generate可以生成或者修改多种类型的文件，通过schematic来指定生成或者修改的文件类型。schematic可以设置的类型有：appShell、application、class、component、directive、enum、guard、interface、library、module、pipe、service、serviceWorker、universal。
3.3.1 appShell
ng generate appShell [options]
ng g appShell [options]
生成用于运行应用程序的服务器端版本的应用程序shell。
| 选项 | 说明 |
|---|---|
| --appDir=appDir | 默认值：app。应用程序目录的名称 |
| --appId=appId | 默认值：serverApp。要在withServerTransition()中使用的应用程序ID |
| --clientProject=clientProject | 相关客户端应用程序的名称 |
| --index=index | 默认值：index.html。index文件的名字 |
| --main=main | 默认值：main.server.ts。主入口点文件的名称 |
| --name=name | 通用应用程序的HTML选择器 |
| --outDir=outDir | 默认值：dist-server。构建结果的输出目录 |
| --root=root | 默认值：src。应用程序的根目录 |
| --rootModuleClassName=rootModuleClassName | 默认值：AppServerModule。根模块类的名称 |
| --rootModuleFileName=rootModuleFileName | 默认值：app.server.module.ts。根模块文件的名称 |
| --route=route | 默认值：shell。用于生成app shell的路径路径 |
| --sourceDir=sourceDir | 默认值：src,别名：-D。源目录的路径 |
| --test=test | 测试入口点文件的名称 |
| --testTsconfigFileName=testTsconfigFileName | 默认值：tsconfig.spec。测试的TypeScript配置文件的名称 |
| --tsconfigFileName=tsconfigFileName | 默认值：tsconfig.server。TypeScript配置文件的名称 |
| --universalProject=universalProject | 相关通用应用程序的名称 |
3.3.2 application
ng generate application <name> [options]
ng g application <name> [options]
在当前工作区的“projects”文件夹下生成一个新的Angular应用。
| 参数 | 说明 |
|---|---|
| <name> | 新app的名称 |
| 选项 | 说明 |
|---|---|
| --experimentalIvy=true|false | 默认值： false。如果为True，则创建一个使用Ivy渲染引擎的新应用 |
| --inlineStyle=true|false | 默认值：false,别名：-s。 如果为true，则在根component.ts文件中包含内联样式。只能嵌入CSS样式。默认值为false，表示在根component.ts文件中创建并引用外部样式文件 |
| --inlineTemplate=true|false | 默认值：false,别名：-t。如果为true，则在根component.ts文件中包含内联模板。默认值为false，表示在根component.ts文件中创建并引用外部模板文件 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成应用程序后应用lint修复 |
| --minimal=true|false | 默认值： false。如果为true，则创建一个没有任何测试框架的简单项目 |
| --prefix=prefix | 默认值： app，别名： -p。应用于生成的选择器的前缀 |
| --routing=true|false | 默认值：false。如果为true，则创建路由NgModule |
| --skipInstall=true|false | 默认值：false。跳过安装依赖包 |
| --skipPackageJson=true|false | 默认值： false。如果为true，则不会向“package.json”文件添加依赖项 |
| --skipTests=true|false | 默认值： false,别名： -S。如果为true，则不会为应用程序创建“spec.ts”测试文件 |
| --style=css|scss|sass|less|styl | 默认值： css。用于样式文件的文件扩展名或预处理器 |
| --viewEncapsulation=Emulated|Native|None|ShadowDom | 要在新应用中使用的视图封装策略 |
3.3.3 class
ng generate class <name> [options]
ng g class <name> [options]
在给定或默认项目中创建类。
| 参数 | 说明 |
|---|---|
| <name> | 类名字 |
| 选项 | 说明 |
|---|---|
| --lintFix=true|false | 默认值：false。如果为true，则在生成类后应用lint修复 |
| --project=project | 项目名称 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为新类创建“spec.ts”测试文件 |
| --type=type | 将开发人员定义的类型添加到文件名中，格式为“name.type.ts” |
3.3.4 component
ng generate component <name> [options]
ng g component <name> [options]
在给定或默认项目中创建组件。
| 参数 | 说明 |
|---|---|
| <name> | 组件名字 |
| 选项 | 说明 |
|---|---|
| --changeDetection=Default|OnPush | 默认值：Default,别名：-c。要在新组件中使用的更改检测策略 |
| --entryComponent=true|false | 默认值：false。如果为true，则新组件是声明NgModule的入口组件 |
| --export=true|false | 默认值：false。如果为true，则声明NgModule导出此组件 |
| --flat=true|false | 默认值：false。如果为true，则在当前项目的顶级创建新文件 |
| --inlineStyle=true|false | 默认值：false，别名：-s。如果为true，则在component.ts文件中包含内联样式。只能嵌入CSS样式。默认情况下，在component.ts文件中创建并引用外部样式文件 |
| --inlineTemplate=true|false | 默认值：false，别名：-t。如果为true，则在component.ts文件中包含内联模板。默认情况下，会在component.ts文件中创建并引用外部模板文件 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成组件后应用lint修复 |
| --module=module | 别名：-m。声明NgModule |
| --prefix=prefix | 别名：-p。要应用于生成的组件选择器的前缀 |
| --project=project | 项目名称 |
| --selector=selector | 用于此组件的HTML选择器 |
| --skipImport=true|false | 默认值：false。如果为true，则不会将此组件导入到拥有的NgModule中 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为新组件创建“spec.ts”测试文件 |
| --style=css|scss|sass|less|styl | 默认值：css.用于样式文件的文件扩展名或预处理器 |
| --viewEncapsulation=Emulated|Native|None|ShadowDom | 别名：-v.要在新组件中使用的视图封装策略 |
3.3.5 directive
ng generate directive <name> [options]
ng g directive <name> [options]
在给定或默认项目中创建新的通用指令。
| 参数 | 说明 |
|---|---|
| <name> | 指令名字 |
| 选项 | 说明 |
|---|---|
| --export=true|false | 默认值：false。如果为true，则声明NgModule会导出此指令 |
| --flat=true|false | 默认值：true。如果为true，则在当前项目的顶级创建新文件 |
| --lintFix=true|false | 默认值：false.如果为true，则在生成指令后应用lint修复 |
| --module=module | 别名：-m.声明NgModule |
| --prefix=prefix | 别名：-p.要应用于生成的选择器的前缀 |
| --project=project | 项目名称 |
| --selector=selector | 用于此指令的HTML选择器 |
| --skipImport=true|false | 默认值：false。如果为true，则不会将此指令导入到拥有的NgModule中 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为新类创建“spec.ts”测试文件 |
3.3.6 enum
ng generate enum <name> [options]
ng g enum <name> [options]
为给定或默认项目生成新的通用枚举。
| 参数 | 名字 |
|---|---|
| <name> | 枚举enum名字 |
| 选项 | 名字 |
|---|---|
| --lintFix=true|false | 默认值：false.如果为true，则在生成枚举后应用lint修复 |
| --project=project | 要在其中创建枚举的项目的名称。默认值是工作区的已配置默认项目 |
3.3.7 guard
ng generate guard <name> [options]
ng g guard <name> [options]
在给定或默认项目中生成新的通用路由守卫定义。
| 参数 | 说明 |
|---|---|
| <name> | 路由守卫的名字 |
| 选项 | 说明 |
|---|---|
| --flat=true|false | 默认值：true。如果为true，则在当前项目的顶级创建新文件 |
| --implements | 指定要实现的接口 |
| --lintFix=true|false | 默认值：false.如果为true，则在生成路由守卫后应用lint修复 |
| --project=project | 项目名称 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为路由守卫创建“spec.ts”测试文件 |
3.3.8 interface
ng generate interface <name> <type> [options]
ng g interface <name> <type> [options]
在给定或默认项目中创建新的通用接口定义。
| 参数 | 说明 |
|---|---|
| <name> | 接口名字 |
| <type> | 将开发人员定义的类型添加到文件名中，格式为“name.type.ts” |
| 选项 | 说明 |
|---|---|
| --lintFix=true|false | 默认值：false。如果为true，则在生成接口后应用lint修复 |
| --project=project | 项目名字 |
3.3.9 library
ng generate library <name> [options]
ng g library <name> [options]
在当前工作空间中创建新的通用库项目
| 参数 | 说明 |
|---|---|
| <name> | 库的名称 |
| 选项 | 说明 |
|---|---|
| --entryFile=entryFile | 默认值：public_api。相对于工作空间根目录创建库的公共API文件的路径 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成库后应用lint修复 |
| --prefix=prefix | 默认值：lib，别名：-p。要应用于生成的选择器的前缀 |
| --skipInstall=true|false | 默认值：false。如果为true，则不安装依赖包 |
| --skipPackageJson=true|false | 默认值：false。如果为true，则不会向“package.json”文件添加依赖项 |
| --skipTsConfig=true|false | 默认值：false。如果为true，则不更新“tsconfig.json”以添加新库的路径映射。在应用程序中使用库需要路径映射，但可以在此处禁用以简化开发 |
3.3.10 module
ng generate module <name> [options]
ng g module <name> [options]
在给定或默认项目中创建新的通用NgModule。
| 参数 | 说明 |
|---|---|
| <name> | NgModule对应的名字 |
| 选项 | 说明 |
|---|---|
| --flat=true|false | 默认值：false。如果为true，则在当前项目根目录的顶级创建新文件 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成模块后应用lint修复 |
| --module=module | 别名：-m。声明NgModule |
| --project=project | 项目名称 |
| --routing=true|false | 默认值：false。如果为true，则创建路由模块 |
| --routingScope=Child|Root | 默认值：Child。新路由模块的作用范围 |
3.3.11 pipe
ng generate pipe <name> [options]
ng g pipe <name> [options]
在给定或默认项目中创建新的通用管道。
| 参数 | 说明 |
|---|---|
| <name> | 管道对应的名字 |
| 选项 | 说明 |
|---|---|
| --export=true|false | 默认值：false。如果为true，则声明NgModule导出此管道 |
| --flat=true|false | 默认值： true。如果为true，则在项目的顶级创建文件 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成管道后应用lint修正 |
| --module=module | 别名：-m.声明NgModule |
| --project=project | 项目名字 |
| --skipImport=true|false | 默认值：false。如果为true，则不会将此管道导入到拥有的NgModule中 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为新管道创建“spec.ts”测试文件 |
3.3.12 service
ng generate service <name> [options]
ng g service <name> [options]
在给定或默认项目中创建新的通用服务。
| 参数 | 说明 |
|---|---|
| <name> | 通用服务对应的名字 |
| 选项 | 说明 |
|---|---|
| --flat=true|false | 默认值：true。如果为true，则在项目的顶级创建文件 |
| --lintFix=true|false | 默认值：false。如果为true，则在生成管道后应用lint修正 |
| --project=project | 项目名称 |
| --skipTests=true|false | 默认值：false。如果为true，则不会为新服务创建“spec.ts”测试文件 |
3.3.13 serviceWorker
ng generate serviceWorker [options]
ng g serviceWorker [options]
将此原理图传递给“run”命令以创建serviceWorker。
serviceWorker是浏览器在后台独立于网页运行的一段脚本。他通过域名标识不同的网页。网页通过注册自己的serviceWorker，可以将一些相对独立的任务丢到serviceWorker里面运行，并最终通过postMessage进行通信。
| 选项 | 说明 |
|---|---|
| --configuration=configuration | 默认值：production。应用服务工作者的配置 |
| --project=project | 项目名称 |
| --target=target | 默认值：build。应用服务工作者的目标 |
3.3.14 universal
ng generate universal [options]
ng g universal [options]
将此原理图传递给“run”命令，为应用程序设置服务器端渲染。
| 选项 | 说明 |
|---|---|
| --appDir=appDir | 默认值：app。应用程序文件夹的名称 |
| --appId=appId | 默认值：serverApp。用于转换的应用程序标识符 |
| --clientProject=clientProject | 相关客户端应用程序的名称。需要代替“项目” |
| --main=main | 默认值：main.server.ts。主入口点文件的名称 |
| --rootModuleClassName=rootModuleClassName | 默认值：AppServerModule。根NgModule类的名称 |
| --rootModuleFileName=rootModuleFileName | 默认值：app.server.module.ts。根NgModule文件的名称 |
| --skipInstall=true|false | 默认值：false。如果为true，则不安装依赖项的包 |
| --test=test | 测试入口点文件的名称 |
| --testTsconfigFileName=testTsconfigFileName | 默认值：tsconfig.spec。测试的TypeScript配置文件的名称 |
| --tsconfigFileName=tsconfigFileName | 默认值：tsconfig.server。TypeScript配置文件的名称 |
3.4 ng build
ng build <project> [options]
ng b <project> [options]
将Angular应用程序编译到给定输出路径中名为dist /的输出目录中。前提是必须在工作空间目录中执行。
执行ng build命令之后将会做下面几件事情：
- Angular CLI 从 .angular-cli.json 文件中加载配置信息
- Angular CLI 运行 Webpack 打包项目相关的 JavaScript 与 CSS 文件
- 打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录
| 参数 | 说明 |
|---|---|
| <project> | 要构建的项目的名称。可以是应用程序或库 |
| 选项 | 说明 |
|---|---|
| --aot=true|false | 默认值：false。是否使用AOT编译。AOT(预编译)；JIT(即使编译) |
| --baseHref=baseHref | 设置 index.html 文件中 <base> 元素的链接地址 |
| --buildEventLog=buildEventLog | 构建事件协议事件的输出文件路径 |
| --buildOptimizer=true|false | 默认值：false。使用'aot'选项时，启用'@ angular-devkit / build-optimizer'优化 |
| --commonChunk=true|false | 默认值：true。使用包含跨多个包使用的代码的单独包 |
| --configuration=configuration | 别名：-c。指定构建目标，在angular.json的“configurations”部分中指定。每个目标都附带该目标的选项默认配置 |
| --deleteOutputPath=true|false | 默认值：true。在构建之前删除输出路径 |
| --deployUrl=deployUrl | 将部署文件的URL |
| --es5BrowserSupport=true|false | 默认值：false。启用有条件加载的ES2015 polyfill。 |
| --extractCss=true|false | 默认值：false。将全局样式中的css提取为css文件而不是js文件 |
| --extractLicenses=true|false | 默认值：false。在单独的文件中提取所有许可证 |
| --forkTypeChecker=true|false | 默认值：true。在fork进程中运行TypeScript类型检查器 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --i18nFile=i18nFile | 用于i18n的本地化文件 |
| --i18nFormat=i18nFormat | 使用--i18n-file指定的本地化文件的格式 |
| --i18nLocale=i18nLocale | 用于i18n的语言环境 |
| --i18nMissingTranslation=i18nMissingTranslation | 如何处理i18n的缺失翻译 |
| --index=index | index HTML 文件对应的名字 |
| --lazyModules | 将延迟加载的NgModule文件列表。将自动发现延迟路由器模块 |
| --main=main | 相对于当前工作空间的应用程序主入口点的完整路径 |
| --namedChunks=true|false | 默认值：true。使用延迟加载的块的文件名 |
| --ngswConfigPath=ngswConfigPath | ngsw-config.json文件路径 |
| --optimization=true|false | 启用构建输出的优化 |
| --outputHashing=none|all|media|bundles | 默认值：none。定义输出文件名缓存清除散列模式 |
| --outputPath=outputPath | 新输出目录的完整路径，相对于当前工作空间。默认情况下，将输出写入当前项目中名为dist /的文件夹 |
| --poll | 启用并定义查看轮询时间段的文件(以毫秒为单位) |
| --polyfills=polyfills | polyfills文件的完整路径，相对于当前工作空间 |
| --preserveSymlinks=true|false | 默认值：false。解析模块时不要使用真实路径 |
| --prod=true|false | 如果为true，则将构建配置设置为生产目标 |
| --profile=true|false | 默认值：false。Chrome Profiler的输出配置文件事件 |
| --progress=true|false | 在构建时将进度记录到控制台 |
| --resourcesOutputPath=resourcesOutputPath | 相对于outputPath，将放置样式资源的路径 |
| --serviceWorker=true|false | 默认值：false。为生产版本生成serviceWorker配置 |
| --showCircularDependencies=true|false | 默认值：true。在构建上显示循环依赖性警告 |
| --sourceMap=true|false | 默认值：true。输出sourcemaps |
| --statsJson=true|false | 默认值：false。生成'stats.json'文件，可以使用'webpack-bundle-analyzer'等工具进行分析 |
| --subresourceIntegrity=true|false | 默认值：false。允许使用子资源完整性验证 |
| --tsConfig=tsConfig | TypeScript配置文件的完整路径，相对于当前工作空间 |
| --vendorChunk=true|false | 默认值：true。使用仅包含供应商库的单独捆绑包 |
| --verbose=true|false | 默认值：false。添加更多详细信息以输出日志记录 |
| --watch=true|false | 默认值：false。文件更改时运行构建 |
3.5 ng config
ng config <jsonPath> <value> [options]
在工作空间的angular.json文件中检索或设置Angular配置值。(查看或者设置angular.json文件中某个配置对应的值)
| 参数 | 说明 |
|---|---|
| <jsonPath> | 以JSON路径格式设置或查询配置键(configuration)。例如：“a[3].foo.bar [2]”。如果未提供新值，则返回此键的当前值。 |
| <value> | 如果提供，则为给指定的配置(configuration)设置新值 |
| 选项 | 说明 |
|---|---|
| --global=true|false | 默认值：false，别名：-g。如果为true，则访问调用方主目录中的全局配置 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
ng config的使用我们举一个简单的例子来说明。比如我们有这样的一个angular.json(我们删掉了很多东西)
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"verify-demo": {
"sourceRoot": "src"
}
},
"defaultProject": "verify-demo"
}
获取 projects.verify-demo.sourceRoot 对应的值
ng config projects.verify-demo.sourceRoot
设置 projects.verify-demo.sourceRoot 对应的值为app
ng config projects.verify-demo.sourceRoot app
3.6 ng doc
ng doc <keyword> [options]
ng d <keyword> [options]
在浏览器中打开官方Angular文档（angular.io），并搜索给定的关键字。
| 参数 | 说明 |
|---|---|
| <keyword> | 要搜索的关键字，如angular.io中的搜索栏中所提供 |
| 选项 | 说明 |
|---|---|
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --search=true|false | 默认值：false，别名：-s。如果为true，则搜索angular.io的所有内容。否则，仅搜索API参考文档 |
3.7 ng e2e
ng e2e <project> [options]
ng e <project> [options]
构建并提供Angular应用程序，然后使用Protractor运行e2e测试。
必须从工作空间目录中执行。如果未提供项目名称，则将对所有项目执行
| 参数 | 说明 |
|---|---|
| <project> | 要构建的项目的名称。可以是应用程序或库 |
| 选项 | 说明 |
|---|---|
| --configuration=configuration | 别名：-c。构建目标，在angular.json的“configurations”部分中指定各个目标 |
| --devServerTarget=devServerTarget | 开发服务器目标以运行测试 |
| --elementExplorer=true|false | 默认值：false。启动Protractor的Element Explorer进行调试 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --host=host | 默认值：localhost。监听地址 |
| --port | 用于为应用程序提供服务的端口 |
| --prod=true|false | 如果为true，则将构建配置设置为生产目标 |
| --protractorConfig=protractorConfig | Protractor配置文件的名称 |
| --specs | Override specs in the protractor config. |
| --suite=suite | Override suite in the protractor config |
| --webdriverUpdate=true|false | 默认值：true。尝试更新webdriver |
3.8 ng help
ng help [options]
列出可用的命令及其简短描述。
| 选项 | 说明 |
|---|---|
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
3.9 ng lint
ng lint <project> [options]
ng l <project> [options]
在给定项目文件夹中的Angular应用程序代码上运行linting工具。
| 参数 | 说明 |
|---|---|
| <project> | lint项目的名称 |
| 选项 | 说明 |
|---|---|
| --configuration=configuration | 别名：-c。要使用的linting配置(angular.json文件里面configuration配置) |
| --exclude | 要从linting中排除的文件 |
| --files | 要包含在linting中的文件 |
| --fix=true|false | 默认值：false。修复了linting错误(可能会覆盖linted文件) |
| --force=true|false | 默认值：false。即使有linting错误也能成功 |
| --format=format | 默认值：prose。输出格式(prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist) |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --silent=true|false | 默认值：false。显示输出文本 |
| --tsConfig=tsConfig | TypeScript配置文件的名称 |
| --tslintConfig=tslintConfig | TSLint配置文件的名称 |
| --typeCheck=true|false | 默认值：false。控制linting的类型检查 |
3.10 ng run
ng run <target> [options]
使用项目中定义的可选自定义构建器配置运行Architect目标。
Architect是CLI用于执行复杂任务（如编译）的工具,根据提供的配置(configurations),CLI命令运行Architect目标，例如build，serve，test和lint。每个命名目标都有一个默认配置，由“options”对象指定，以及“配置”对象中一组可选的命名备用配置。
| 参数 | 说明 |
|---|---|
| <target> | 要运行的Architect目标 |
| 选项 | 说明 |
|---|---|
| --configuration=configuration | 别名：-c。angular.json文件configuration节点配置的名字 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
3.11 ng serve
ng serve <project> [options]
ng s <project> [options]
构建并运行应用程序，而且在工程里面的文件有改动之后会自动rebuild。
当执行ng serve命令后，将发生以下几件事情：
- Angular CLI 从 .angular-cli.json 文件中加载配置信息。
- Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件。
- Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200。
| 参数 | 说明 |
|---|---|
| <project> | 要构建的项目的名称。可以是应用程序或库 |
| 选项 | 说明 |
|---|---|
| --aot=true|false | 默认值：false。是否使用AOT编译。AOT(预编译)；JIT(即使编译) |
| --baseHref=baseHref | 正在构建的应用程序的基础URL |
| --browserTarget=browserTarget | 目标服务 |
| --buildEventLog=buildEventLog | 构建事件协议事件的输出文件路径 |
| --commonChunk=true|false | 使用包含跨多个包使用的代码的单独包 |
| --configuration=configuration | 别名：-c。构建目标，在angular.json的“configuration”部分中指定 |
| --deployUrl=deployUrl | 将部署文件的URL |
| --disableHostCheck=true|false | 默认值：false。不验证连接的客户端是否是允许的主机的一部分 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --hmr=true|false | 默认值：false。启用热模块更换 |
| --hmrWarning=true|false | 默认值：true。启用--hmr选项时显示警告 |
| --host=host | 默认值：localhost。host对应的监听地址 |
| --liveReload=true|false | 默认值：true。是否使用实时重新加载来重新加载页面 |
| --open=true|false | 默认值：false，别名：-o。在默认浏览器中打开网址 |
| --optimization=true|false | 启用构建输出的优化 |
| --poll | 启用并定义查看轮询时间段的文件(以毫秒为单位) |
| --port | 默认值：4200。监听端口 |
| --prod=true|false | 如果为true，则将构建配置设置为生产目标 |
| --progress=true|false | 在构建时将进度记录到控制台 |
| --proxyConfig=proxyConfig | 代理配置文件 |
| --publicHost=publicHost | 指定浏览器客户端将使用的URL |
| --servePath=servePath | 应用程序的路径名 |
| --servePathDefaultWarning=true|false | 默认值：true。当deploy-url / base-href使用不支持的服务路径值时显示警告 |
| --sourceMap=true|false | 默认值：true。输出源图 |
| --ssl=true|false | 默认值：false。使用HTTPS服务 |
| --sslCert=sslCert | 用于提供HTTPS的SSL证书 |
| --sslKey=sslKey | 用于提供HTTPS的SSL密钥 |
| --vendorChunk=true|false | Use a separate bundle containing only vendor libraries |
| --verbose=true|false | 默认值：false。添加更多详细信息以输出日志记录 |
| --watch=true|false | 默认值：true。有改变的时候重新构建 |
3.12 ng test
ng test <project> [options]
ng t <project> [options]
在项目中运行单元测试。
Angular CLI 在新建项目的时候，自动为我们集成了 Karma test runner 测试框架
运行ng test命令之后，将会执行以下几个动作：
- Angular CLI 从 .angular-cli.json 文件中加载配置信息。
- Angular CLI 基于 .angular-cli.json 文件中的 Karma 相关的配置信息，运行 Karma。Karma 的配置文件默认在根目录下，文件名为 karma.conf.js 。
- Karma 打开配置中设定的浏览器，默认是 Chrome。
Karma 然后指示浏览器 (Chrome) 使用 Karma 配置中指定的测试框架运行 src/test.ts。默认情况下，采用的是 Jasmine 框架。创建应用程序时，会自动创建 src/test.ts 文件。它预先配置为加载和配置测试Angular 应用程序所需的代码，并运行 src 目录中以 .spec.ts 结尾的所有文件。 - Karma 将测试结果报告给控制台。
- Karma 监听 src 目录下的文件的变化，然后自动运行单元测试。
| 参数 | 说明 |
|---|---|
| <project> | 要构建的项目的名称。可以是应用程序或库 |
| 选项 | 说明 |
|---|---|
| --browsers=browsers | 覆盖针对哪些浏览器测试运行 |
| --codeCoverage=true|false | 默认值：false。输出代码覆盖率报告 |
| --codeCoverageExclude | 要从代码覆盖范围中排除的Globs |
| --configuration=configuration | 别名：-c。构建目标，在angular.json的“configuration”部分中的某一个 |
| --environment=environment | 定义构建环境 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --karmaConfig=karmaConfig | Karma配置文件的名称 |
| --main=main | 主入口点文件的名称 |
| --poll | 启用并定义查看轮询时间段的文件(以毫秒为单位) |
| --polyfills=polyfills | polyfills文件的名称 |
| --preserveSymlinks=true|false | 默认值：false。解析模块时不要使用真实路径 |
| --prod=true|false | 如果为true，则将构建配置设置为生产目标 |
| --progress=true|false | 在构建时将进度记录到控制台 |
| --reporters | Karma reporters to use. Directly passed to the karma runner |
| --sourceMap=true|false | 默认值：true。Output sourcemaps. |
| --tsConfig=tsConfig | TypeScript配置文件的名称 |
3.13 ng update
ng update [options]
更新您的应用程序及其依赖项。参见https://update.angular.io/。
比如可以通过运行以下命令，对核心框架和CLI的v7执行基本更新
ng update @angular/cli @angular/core
有关更新应用程序的详细信息和指导可以参考https://update.angular.io/。
| 选项 | 说明 |
|---|---|
| --all=true|false | 默认值：false。是否更新package.json中的所有包 |
| --force=true|false | 默认值：false。如果为false，如果安装的软件包与更新不兼容，则会出错 |
| --from=from | 要从中迁移的版本。仅适用于正在更新的单个程序包，且仅适用于仅迁移 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --migrateOnly=true|false | 默认值：false。仅执行迁移，不更新已安装的版本 |
| --next=true|false | 默认值：false。使用最大的版本，包括beta和RC |
| --packageManager=npm|yarn | 默认值：npm。用于注册表设置的首选包管理器配置文件 |
| --packages | 要更新的包的名称 |
| --registry=registry | 要使用的NPM注册表 |
| --to=to | 要应用迁移的版本。仅适用于正在更新的单个程序包，且仅适用于仅迁移。需要指定。默认为检测到的已安装版本 |
| --verbose=true|false | 在更新过程中显示其他详细信息 |
3.14 ng version
ng version [options]
ng v [options]
输出Angular CLI对应的版本
| 选项 | 说明 |
|---|---|
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
3.15 ng xi18n
ng xi18n <project> [options]
从源代码中提取i18n信息。
| 参数 | 说明 |
|---|---|
| <project> | 要构建的项目的名称。可以是应用程序或库 |
| 选项 | 说明 |
|---|---|
| --browserTarget=browserTarget | 提取的目标 |
| --configuration=configuration | 别名：-c。构建目标，在angular.json的“configuration”部分中某个目标 |
| --help=true|false|json|JSON | 默认值：false。在控制台中显示此命令的帮助消息 |
| --i18nFormat=xmb|xlf|xlif|xliff|xlf2|xliff2 | 默认值：xlf。生成文件的输出格式 |
| --i18nLocale=i18nLocale | 指定应用程序的源语言 |
| --outFile=outFile | 要输出的文件的名称 |
| --outputPath=outputPath | 将放置输出的路径 |
| --prod=true|false | 如果为true，则将构建配置设置为生产目标 |
| --progress=true|false | 默认值：true。将进度记录到控制台 |
作者：tuacy
链接：https://www.jianshu.com/p/88821d8ad1ed#
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
@@angular-cli 所有版本
cli 命令行接口 执行后生成基础工程
