填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫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.