填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

CLI 概览与命令参考手册

CLI Overview and Command Reference

Angular CLI 是一个命令行界面工具,可用于初始化、开发、构建和维护 Angular 应用。 你可以在命令行窗口中直接使用此工具,也可以通过 Angular Console 这样的交互式界面来间接使用。

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

安装 Angular CLI

Installing Angular CLI

Angular CLI 的主版本会跟随它所支持的 Angular 主版本,不过其小版本可能会独立发布。

Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.

使用 npm 包管理器来安装 CLI:

Install the CLI using the npm package manager:

      
      npm install -g @angular/cli
    

关于版本变更的详情,以及如何从以前版本升级的信息,参阅 GitHub 上的 Releases 页:https://github.com/angular/angular-cli/releases

For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases

基本工作流

Basic workflow

通过 ng 可执行文件可以在命令行上调用此工具。 命令行中还提供了联机帮助。 输入下列命令列出命令或指定命令(如 generate)选项的简短说明。

Invoke the tool on the command line through the ng executable. Online help is available on the command line. Enter the following to list commands or options for a given command (such as generate) with a short description.

      
      ng help
ng generate --help
    

要想创建、构建或在开发服务器上运行一个新的、基本的 Angular 项目,请到这个新工作区的上级目录中运行下列命令:

To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:

      
      ng new my-first-project
cd my-first-project
ng serve
    

在浏览器中,打开 http://localhost:4200/ 查看运行效果。 当你使用 ng serve 命令来构建应用并在本地启动开发服务器时,服务器会自动重新构建此应用,并在修改源码时重新加载此页面。

In your browser, open http://localhost:4200/ to see the new app run. When you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

当你运行 ng new my-first-project 时,将在当前工作目录中创建一个名为 my-first-project 的新文件夹。由于你希望在该文件夹中创建文件,因此在运行命令之前,请确保你在当前工作目录中具有足够的权限。

When you run ng new my-first-project a new folder, named my-first-project, will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.

如果当前工作目录不适合放你的项目,可以先运行 cd <path-to-other-directory> 来切换到更合适的目录。

If the current working directory is not the right place for your project, you can change to a more appropriate directory by running cd <path-to-other-directory> first.

工作区与项目文件

Workspaces and project files

ng new 命令会创建一个 Angular 工作区目录,并生成一个新的应用骨架。 每个工作区中可以包含多个应用和库。 由 ng new 命令创建的初始应用位于工作区的顶层。 你在工作区中生成的其它应用或库,会放在 projects/ 子目录下。

The ng new command creates an Angular workspace folder and generates a new app skeleton. A workspace can contain multiple apps and libraries. The initial app created by the ng new command is at the top level of the workspace. When you generate an additional app or library in a workspace, it goes into a projects/ subfolder.

新生成的应用中包含根模块的源码,还有根组件和模板。 每个应用都有一个 src 目录,其中包含逻辑、数据和静态文件。

A newly generated app contains the source files for a root module, with a root component and template. Each app has a src folder that contains the logic, data, and assets.

你可以直接编辑这些生成的文件,也可以使用 CLI 命令来添加或修改它们。 使用 ng generate 命令也可以添加其它组件和服务,以及管道、指令的源码等。 必须在工作区或项目目录下才能执行 addgenerate 之类的命令,因为这些命令需要在应用或库上进行创建或其它操作。

You can edit the generated files directly, or add to and modify them using CLI commands. Use the ng generate command to add new files for additional components and services, and code for new pipes, directives, and so on. Commands such as add and generate, which create or operate on apps and libraries, must be executed from within a workspace or project folder.

工作区与项目的配置

Workspace and project configuration

工作区的配置文件 angular.json 位于此工作区的顶层。 在这里,你可以设置全工作区范围的默认值,并指定当 CLI 为不同目标构建项目时要用到的配置。

A single workspace configuration file, angular.json, is created at the top level of the workspace. This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.

ng config 让你可以从命令行中设置和获取配置项的值。你也可以直接编辑 angular.json 文件。 注意,此配置文件中的选项名称必须使用小驼峰(camelCase)形式,不过当在命令行中提供它是可以使用小驼峰和中线分隔(dash-case)两种形式。

The ng config command lets you set and retrieve configuration values from the command line, or you can edit the angular.json file directly. Note that option names in the configuration file must use camelCase, while option names supplied to commands can use either camelCase or dash-case.

CLI 命令语法

CLI command-language syntax

命令语法如下:

Command syntax is shown as follows:

ng commandNameOrAlias requiredArg [optionalArg] [options]

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

    Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command.

  • 选项名带有双中线前缀(--)。 选项别名带有单中线前缀(-)。 参数没有前缀。 比如:

          
          ng build my-app -c production
        

    Option names are prefixed with a double dash (--). Option aliases are prefixed with a single dash (-). Arguments are not prefixed. For example:

          
          ng build my-app -c production
        

  • 通常,生成的工件(artifact)名称可以作为命令的参数进行指定,也可以使用 --name 选项。

    Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.

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

    Argument and option names can be given in either camelCase or dash-case. --myOptionName is equivalent to --my-option-name.

逻辑型选项

Boolean options

逻辑型选项有两种形式:--this-option 可以把标志设置为 true,而 --no-this-option 可以把它设置为 false。 如果没有提供选项,该标志就会留在文档中所列出的默认状态。

Boolean options have two forms: --this-option sets the flag to true, --no-this-option sets it to false. If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.

相对路径

Relative paths

用来指定文件的选项可以用绝对路径,也可以用相对于当前目录的相对路径,当前目录通常是工作区或项目的根目录。

Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.

原理图(schematics)

Schematics

ng generateng add 命令会把要生成或要添加到当前项目中的工件或库作为参数。 除了通用选项之外,每个工件或库还可以用原理图定义自己的选项。 原理图的选项和内置命令的选项使用同样的格式。

The ng generate and ng add commands take as an argument the artifact or library to be generated or added to the current project. In addition to any general options, each artifact or library defines its own options in a schematic. Schematic options are supplied to the command in the same format as immediate command options.

命令概览

命令别名说明
add

为你的项目添加对外部库的支持

Adds support for an external library to your project.

analytics

配置 Angular CLI 使用情况度量的收集策略。参见 https://angular.cn/cli/usage-analytics-gathering。

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

buildb

把 Angular 应用编译到给定输出路径下名为 dist/ 的输出目录中。此命令必须在工作空间目录下执行。

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

config

从本工作空间的 angular.json 文件中获取或设置 Angular 的配置值。

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

deploy

为指定的项目或默认项目,执行部署构建器。

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

docd

在浏览器中打开 Angular 官方文档中文版 (angular.cn),并搜索给定的关键字。

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

e2ee

构建 Angular 应用,并启动开发服务器,然后使用 Protractor 运行端到端测试。

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

extract-i18ni18n-extractxi18n

从源码中提取 i18n 消息。

Extracts i18n messages from source code.

generateg

基于某个原理图生成和/或修改文件。

Generates and/or modifies files based on a schematic.

help

列出可用的命令,及其短描述。

Lists available commands and their short descriptionEns.

lintl

针对给定项目目录下的 Angular 应用代码,运行 lint 工具

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

newn

创建一个新工作空间和一个初始 Angular 应用。

Creates a new workspace and an initial Angular application.

run

在你的项目中运行一个带有自定义构建器配置的建筑师目标(Architect target)。

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

serves

构建应用,并启动开发服务器,当文件变化时重新构建。

Builds and serves your app, rebuilding on file changes.

testt

运行某个项目中的单元测试。

Runs unit tests in a project.

update

更新你的应用及其依赖。参见 https://update.angular.io/

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

versionv

输出 Angular CLI 的版本。

Outputs Angular CLI version.