5 lines
15 KiB
JSON
5 lines
15 KiB
JSON
{
|
|
"id": "cli",
|
|
"title": "CLI Overview and Command Reference",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/cli/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n<h1 id=\"cli-overview-and-command-reference\">CLI Overview and Command Reference<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#cli-overview-and-command-reference\"><i class=\"material-icons\">link</i></a></h1>\n<p>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.</p>\n<h2 id=\"installing-angular-cli\">Installing Angular CLI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#installing-angular-cli\"><i class=\"material-icons\">link</i></a></h2>\n<p>Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.</p>\n<p>Install the CLI using the <code>npm</code> package manager:\n<code-example language=\"bash\">\nnpm install -g @angular/cli\n</code-example></p>\n<p>For details about changes between versions, and information about updating from previous releases,\nsee the Releases tab on GitHub: <a href=\"https://github.com/angular/angular-cli/releases\">https://github.com/angular/angular-cli/releases</a></p>\n<h2 id=\"basic-workflow\">Basic workflow<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#basic-workflow\"><i class=\"material-icons\">link</i></a></h2>\n<p>Invoke the tool on the command line through the <code>ng</code> executable.\nOnline help is available on the command line.\nEnter the following to list commands or options for a given command (such as <a href=\"cli/generate\">generate</a>) with a short description.</p>\n<code-example language=\"bash\">\nng help\nng generate --help\n</code-example>\n<p>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:</p>\n<code-example language=\"bash\">\nng new my-first-project\ncd my-first-project\nng serve\n</code-example>\n<p>In your browser, open <a href=\"http://localhost:4200/\">http://localhost:4200/</a> to see the new app run.\nWhen you use the <a href=\"cli/serve\">ng serve</a> 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.</p>\n<div class=\"alert is-helpful\">\n<p> When you run <code>ng new my-first-project</code> a new folder, named <code>my-first-project</code>, 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.</p>\n<p> If the current working directory is not the right place for your project, you can change to a more appropriate directory by running <code>cd <path-to-other-directory></code> first.</p>\n</div>\n<h2 id=\"workspaces-and-project-files\">Workspaces and project files<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#workspaces-and-project-files\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"cli/new\">ng new</a> command creates an <em>Angular workspace</em> folder and generates a new app skeleton.\nA workspace can contain multiple apps and libraries.\nThe initial app created by the <a href=\"cli/new\">ng new</a> command is at the top level of the workspace.\nWhen you generate an additional app or library in a workspace, it goes into a <code>projects/</code> subfolder.</p>\n<p>A newly generated app contains the source files for a root module, with a root component and template.\nEach app has a <code>src</code> folder that contains the logic, data, and assets.</p>\n<p>You can edit the generated files directly, or add to and modify them using CLI commands.\nUse the <a href=\"cli/generate\">ng generate</a> command to add new files for additional components and services, and code for new pipes, directives, and so on.\nCommands such as <a href=\"cli/add\">add</a> and <a href=\"cli/generate\">generate</a>, which create or operate on apps and libraries, must be executed from within a workspace or project folder.</p>\n<ul>\n<li>See more about the <a href=\"guide/file-structure\">Workspace file structure</a>.</li>\n</ul>\n<h3 id=\"workspace-and-project-configuration\">Workspace and project configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#workspace-and-project-configuration\"><i class=\"material-icons\">link</i></a></h3>\n<p>A single workspace configuration file, <code>angular.json</code>, is created at the top level of the workspace.\nThis 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.</p>\n<p>The <a href=\"cli/config\">ng config</a> command lets you set and retrieve configuration values from the command line, or you can edit the <code>angular.json</code> file directly.\nNote that option names in the configuration file must use <a href=\"guide/glossary#case-types\">camelCase</a>, while option names supplied to commands can use either camelCase or dash-case.</p>\n<ul>\n<li>See more about <a href=\"guide/workspace-config\">Workspace Configuration</a>.</li>\n<li>See the <a href=\"https://github.com/angular/angular-cli/wiki/angular-workspace\">complete schema</a> for <code>angular.json</code>.</li>\n</ul>\n<h2 id=\"cli-command-language-syntax\">CLI command-language syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#cli-command-language-syntax\"><i class=\"material-icons\">link</i></a></h2>\n<p>Command syntax is shown as follows:</p>\n<p><code>ng</code> <em>commandNameOrAlias</em> <em>requiredArg</em> [<em>optionalArg</em>] <code>[options]</code></p>\n<ul>\n<li>\n<p>Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command.</p>\n</li>\n<li>\n<p>Option names are prefixed with a double dash (--).\nOption aliases are prefixed with a single dash (-).\nArguments are not prefixed.\nFor example:\n<code-example language=\"bash\">\nng build my-app -c production\n</code-example></p>\n</li>\n<li>\n<p>Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.</p>\n</li>\n<li>\n<p>Argument and option names can be given in either\n<a href=\"guide/glossary#case-types\">camelCase or dash-case</a>.\n<code>--myOptionName</code> is equivalent to <code>--my-option-name</code>.</p>\n</li>\n</ul>\n<h3 id=\"boolean-options\">Boolean options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#boolean-options\"><i class=\"material-icons\">link</i></a></h3>\n<p>Boolean options have two forms: <code>--this-option</code> sets the flag to <code>true</code>, <code>--no-this-option</code> sets it to <code>false</code>.\nIf neither option is supplied, the flag remains in its default state, as listed in the reference documentation.</p>\n<h3 id=\"relative-paths\">Relative paths<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#relative-paths\"><i class=\"material-icons\">link</i></a></h3>\n<p>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.</p>\n<h3 id=\"schematics\">Schematics<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#schematics\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <a href=\"cli/generate\">ng generate</a> and <a href=\"cli/add\">ng add</a> commands take as an argument the artifact or library to be generated or added to the current project.\nIn addition to any general options, each artifact or library defines its own options in a <em>schematic</em>.\nSchematic options are supplied to the command in the same format as immediate command options.</p>\n\n</div>\n\n<h2 id=\"command-overview\">Command Overview<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"cli#command-overview\"><i class=\"material-icons\">link</i></a></h2>\n<table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Command</th>\n <th>Alias</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/add\"><code class=\"no-auto-link\">add</code></a></td>\n <td></td>\n <td><p>Adds support for an external library to your project.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/analytics\"><code class=\"no-auto-link\">analytics</code></a></td>\n <td></td>\n <td><p>Configures the gathering of Angular CLI usage metrics. See <a href=\"https://angular.io/cli/usage-analytics-gathering\">https://angular.io/cli/usage-analytics-gathering</a>.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/build\"><code class=\"no-auto-link\">build</code></a></td>\n <td><code class=\"no-auto-link\">b </code></td>\n <td><p>Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/config\"><code class=\"no-auto-link\">config</code></a></td>\n <td></td>\n <td><p>Retrieves or sets Angular configuration values in the angular.json file for the workspace.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/deploy\"><code class=\"no-auto-link\">deploy</code></a></td>\n <td></td>\n <td><p>Invokes the deploy builder for a specified project or for the default project in the workspace.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/doc\"><code class=\"no-auto-link\">doc</code></a></td>\n <td><code class=\"no-auto-link\">d </code></td>\n <td><p>Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/e2e\"><code class=\"no-auto-link\">e2e</code></a></td>\n <td><code class=\"no-auto-link\">e </code></td>\n <td><p>Builds and serves an Angular app, then runs end-to-end tests using Protractor.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/extract-i18n\"><code class=\"no-auto-link\">extract-i18n</code></a></td>\n <td><code class=\"no-auto-link\">i18n-extract </code><code class=\"no-auto-link\">xi18n </code></td>\n <td><p>Extracts i18n messages from source code.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/generate\"><code class=\"no-auto-link\">generate</code></a></td>\n <td><code class=\"no-auto-link\">g </code></td>\n <td><p>Generates and/or modifies files based on a schematic.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/help\"><code class=\"no-auto-link\">help</code></a></td>\n <td></td>\n <td><p>Lists available commands and their short descriptions.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/lint\"><code class=\"no-auto-link\">lint</code></a></td>\n <td><code class=\"no-auto-link\">l </code></td>\n <td><p>Runs linting tools on Angular app code in a given project folder.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/new\"><code class=\"no-auto-link\">new</code></a></td>\n <td><code class=\"no-auto-link\">n </code></td>\n <td><p>Creates a new workspace and an initial Angular application.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/run\"><code class=\"no-auto-link\">run</code></a></td>\n <td></td>\n <td><p>Runs an Architect target with an optional custom builder configuration defined in your project.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/serve\"><code class=\"no-auto-link\">serve</code></a></td>\n <td><code class=\"no-auto-link\">s </code></td>\n <td><p>Builds and serves your app, rebuilding on file changes.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/test\"><code class=\"no-auto-link\">test</code></a></td>\n <td><code class=\"no-auto-link\">t </code></td>\n <td><p>Runs unit tests in a project.</p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/update\"><code class=\"no-auto-link\">update</code></a></td>\n <td></td>\n <td><p>Updates your application and its dependencies. See <a href=\"https://update.angular.io/\">https://update.angular.io/</a></p>\n</td>\n </tr>\n\n <tr>\n <td><a class=\"code-anchor\" href=\"cli/version\"><code class=\"no-auto-link\">version</code></a></td>\n <td><code class=\"no-auto-link\">v </code></td>\n <td><p>Outputs Angular CLI version.</p>\n</td>\n </tr>\n\n</tbody>\n</table>\n\n<!-- links to this doc:\n - cli/add\n - cli/analytics\n - cli/build\n - cli/config\n - cli/deploy\n - cli/doc\n - cli/e2e\n - cli/extract-i18n\n - cli/generate\n - cli/help\n - cli/lint\n - cli/new\n - cli/run\n - cli/serve\n - cli/test\n - cli/update\n - cli/version\n - guide/aot-compiler\n - guide/architecture-next-steps\n - guide/bootstrapping\n - guide/browser-support\n - guide/build\n - guide/dependency-injection\n - guide/docs-style-guide\n - guide/elements\n - guide/feature-modules\n - guide/frequent-ngmodules\n - guide/glossary\n - guide/i18n\n - guide/ngmodule-vs-jsmodule\n - guide/ngmodules\n - guide/pipes\n - guide/providers\n - guide/reactive-forms\n - guide/router\n - guide/router-tutorial-toh\n - guide/service-worker-config\n - guide/service-worker-devops\n - guide/service-worker-getting-started\n - guide/setup-local\n - guide/styleguide\n - guide/testing\n - guide/upgrade-setup\n - guide/workspace-config\n - tutorial\n-->\n<!-- links from this doc:\n - cli#basic-workflow\n - cli#boolean-options\n - cli#cli-command-language-syntax\n - cli#cli-overview-and-command-reference\n - cli#command-overview\n - cli#installing-angular-cli\n - cli#relative-paths\n - cli#schematics\n - cli#workspace-and-project-configuration\n - cli#workspaces-and-project-files\n - cli/add\n - cli/analytics\n - cli/build\n - cli/config\n - cli/deploy\n - cli/doc\n - cli/e2e\n - cli/extract-i18n\n - cli/generate\n - cli/help\n - cli/lint\n - cli/new\n - cli/run\n - cli/serve\n - cli/test\n - cli/update\n - cli/version\n - guide/file-structure\n - guide/glossary#case-types\n - guide/workspace-config\n - http://localhost:4200/\n - https://angular.io/cli/usage-analytics-gathering\n - https://github.com/angular/angular-cli/releases\n - https://github.com/angular/angular-cli/wiki/angular-workspace\n - https://github.com/angular/angular/edit/master/aio/content/cli/index.md?message=docs%3A%20describe%20your%20change...\n - https://update.angular.io/\n-->"
|
|
} |