From 41de0e0d98f94c58e0a742a62abbe996825b2710 Mon Sep 17 00:00:00 2001 From: Judy Bogart Date: Thu, 20 Sep 2018 11:36:07 -0700 Subject: [PATCH] docs: overview for cli reference section (#26043) PR Close #26043 --- aio/content/cli/index.md | 123 +++++++++++++++++++++++---------------- 1 file changed, 72 insertions(+), 51 deletions(-) diff --git a/aio/content/cli/index.md b/aio/content/cli/index.md index a775146254..b89d7a76e0 100644 --- a/aio/content/cli/index.md +++ b/aio/content/cli/index.md @@ -1,83 +1,104 @@

CLI Command Reference

-The Angular CLI is a command-line tool that you use to initialize, develop, scaffold, and maintain Angular applications. +The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as [Angular Console](https://angularconsole.com). -## Getting Started +## Installing Angular CLI -### Installing Angular CLI +Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately. -The current version of Angular CLI is 6.x. +Install the CLI using the `npm` package manager: + +npm install -g @angular/cli + -* Both the CLI and the projects that you generate with the tool have dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher. -* Install the CLI using npm: - `npm install -g @angular/cli` -* The CLI is an open-source tool: - https://github.com/angular/angular-cli/tree/master/packages/angular/cli +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 -For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub. +## Basic workflow -### Basic workflow +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](cli/generate)) with a short description. -Invoke the tool on the command line through the ng executable. Online help is available on the command line: + +ng help +ng generate --help + -``` -> ng help Lists commands with short descriptions -> ng --help Lists options for a command. -``` +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: -To create, build, and serve a new, basic Angular project on a development server, use the following commands: - -``` -cd -ng new my-project -cd my-project + +ng new my-first-project +cd my-first-project ng serve -``` + In your browser, open http://localhost:4200/ to see the new app run. -### Workspaces and project files +## Workspaces and project files -Angular 6 introduced the workspace directory structure for Angular apps. A workspace defines a project. A project can contain multiple apps, as well as libraries that can be used in any of the apps. +The [ng new](cli/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](cli/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. -Some commands (such as build) must be executed from within a workspace folder, and others (such as new) must be executed from outside any workspace. This requirement is called out in the description of each command where it applies.The `new` command creates a [workspace](guide/glossary#workspace) to contain [projects](guide/glossary#project). A project can be an app or a library, and a workspace can contain multiple apps and libraries. +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. -A newly generated app project contains the source files for a root module, with a root component and template, which you can edit directly, or add to and modify using CLI commands. Use the generate command to add new files for additional components and services, and code for new pipes, directives, and so on. +You can edit the generated files directly, or add to and modify them using CLI commands. +Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on. +Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on apps and libraries, must be executed from within a workspace or project folder. -* Commands such as `add` and `generate`, that create or operate on apps and libraries, must be executed from within a workspace folder. -* Apps in a workspace can use libraries in the same workspace. -* Each project has a `src` folder that contains the logic, data, and assets. - See an example of the [file structure](guide/quickstart#project-file-review) in [Getting Started](guide/quickstart). +When you use the [ng serve](cli/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. -When you use the `serve` command to build an app, the server automatically rebuilds the app and reloads the page when you change any of the source files. +* See more about the [Workspace file structure](guide/file-structure). -### Configuring the CLI +When you use the [ng serve](cli/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. -Configuration files let you customize your project. The CLI configuration file, angular.json, is created at the top level of the project folder. This is where you can set CLI defaults for your project, and specify which files to include when the CLI builds the project. +A single workspace configuration file, `angular.json`, is created at the top level of the workspace. +This is where you can set workspace-wide defaults, and specify configurations to use when the CLI builds a project for different targets. -The CLI config command lets you set and retrieve configuration values from the command line, or you can edit the angular.json file directly. +The `[ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly. -* See the complete schema for angular.json. -* Learn more about configuration options for Angular (link to new guide?) +* See the [complete schema](https://github.com/angular/angular-cli/wiki/angular-workspace) for `angular.json`. + -### Command options and arguments -All commands and some options have aliases, as listed in the descriptions. Option names are prefixed with a double dash (--), but arguments and option aliases are not. - -Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option. Most commands have additional options. +## CLI command-language syntax Command syntax is shown as follows: -``` -ng commandNameOrAlias [options] -``` +`ng` *commandNameOrAlias* *requiredArg* [*optionalArg*] `[options]` -Options take either string or Boolean arguments. Defaults are shown in bold for Boolean or enumerated values, and are given with the description. For example: +* Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command. -``` - --optionNameOrAlias= - --optionNameOrAlias=true|false - --optionNameOrAlias=allowedValue1|allowedValue2|allowedValue3 -``` +* 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` + +* Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option. + +* Argument and option names can be given in either +[camelCase or dash-case](guide/glossary#case-types). +`--myOptionName` is equivalent to `--my-option-name`. + +### Boolean and enumerated options + +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**. For example: + + `--optionNameOrAlias=`**allowedValue1**`|allowedValue2|allowedValue3` + +### 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 + +The [ng generate](cli/generate) and [ng add](cli/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. -Boolean options can also be expressed with a prefix `no-` to indicate a value of false. For example, `--no-prod` is equivalent to `--prod=false`. \ No newline at end of file