CLI 概覽與命令參考手冊link

CLI Overview and Command Referencelink

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 CLIlink

Installing Angular CLIlink

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:

      
        content_copy
      
      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

基本工作流link

Basic workflowlink

透過 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.

      
        content_copy
      
      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:

      
        content_copy
      
      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.

工作區與專案檔案link

Workspaces and project fileslink

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 命令也可以新增其它元件和服務，以及管道、指令的原始碼等。 必須在工作區或專案目錄下才能執行 add 或 generate 之類別的命令，因為這些命令需要在應用或函式庫上進行建立或其它操作。

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.

• 欲知詳情，參閱工作區的檔案結構。

  See more about the Workspace file structure.

工作區與專案的配置link

Workspace and project configurationlink

工作區的配置檔案 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.

• 參閱 工作區配置。

  See more about Workspace Configuration.

• 參閱 angular.json 的完整 schema。

  See the complete schema for angular.json.

CLI 命令語法link

CLI command-language syntaxlink

命令語法如下：

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

        
          content_copy
        
        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

        
          content_copy
        
        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.

邏輯型與列舉型選項link

Boolean and enumerated optionslink

邏輯型選項有兩種形式：--thisOption 可以設定標誌，而 --noThisOption 可以清除標誌。 如果沒有提供選項，該標誌就會留在文件中所列出的預設狀態。

Boolean options have two forms: --thisOption sets the flag, --noThisOption clears it. If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.

每個列舉選項的描述都給出了允許的值，其預設值是加粗顯示的。

Allowed values are given with each enumerated option description, with the default value in bold.

相對路徑link

Relative pathslink

用來指定檔案的選項可以用絕對路徑，也可以用相對於當前目錄的相對路徑，當前目錄通常是工作區或專案的根目錄。

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）link

Schematicslink

ng generate 和 ng 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.