diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index c5f21e0640..dd0bed2019 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -8,7 +8,7 @@ This guide explains how to specify metadata and apply available compiler options
Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. + Watch compiler author Tobias Bosch explain the Angular compiler at AngularConnect 2016.
@@ -21,7 +21,7 @@ Angular offers two ways to compile your application: 1. **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime. 1. **_Ahead-of-Time_ (AOT)**, which compiles your app at build time. -JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands: +JIT compilation is the default when you run the [`ng build`](cli/build) (build only) or [`ng serve`](cli/serve) (build and serve locally) CLI commands: ng build @@ -30,7 +30,7 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s {@a compile} -For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands: +For AOT compilation, include the `--aot` option with the `ng build` or `ng serve` command: ng build --aot @@ -41,7 +41,7 @@ For AOT compilation, append the `--aot` flags to the _build-only_ or the _build- The `ng build` command with the `--prod` meta-flag (`ng build --prod`) compiles with AOT by default. -See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build). +See the [CLI command reference](cli) and [Building and serving Angular apps](guide/build) for more information. diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index 61250ca633..8559581702 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -82,7 +82,7 @@ or you can register providers with specific modules or components. You register providers in the metadata of the service (in the `@Injectable()` decorator), or in the `@NgModule()` or `@Component()` metadata -* By default, the Angular CLI command `ng generate service` registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition. +* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition. ``` @Injectable({ diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index 80b6f26be3..270985d5b0 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -43,7 +43,7 @@ when the user hovers over that element. You can apply it like this: ### Write the directive code -Create the directive class file in a terminal window with this CLI command. +Create the directive class file in a terminal window with the CLI command [`ng generate directive`](cli/generate). ng generate directive highlight diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md index 939212086b..70c590f662 100644 --- a/aio/content/guide/bootstrapping.md +++ b/aio/content/guide/bootstrapping.md @@ -12,7 +12,7 @@ Every application has at least one Angular module, the _root_ module that you bootstrap to launch the application. By convention, it is usually called `AppModule`. -If you use the CLI to generate an app, the default `AppModule` is as follows: +If you use the [Angular CLI](cli) to generate an app, the default `AppModule` is as follows: ```typescript /* JavaScript imports */ @@ -52,7 +52,7 @@ The `@NgModule` decorator identifies `AppModule` as an `NgModule` class. * **_bootstrap_**—the _root_ component that Angular creates and inserts into the `index.html` host web page. -The default CLI application only has one component, `AppComponent`, so it +The default application created by the Angular CLI only has one component, `AppComponent`, so it is in both the `declarations` and the `bootstrap` arrays. {@a declarations} diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index 8d8b7b3302..df9e9a5c22 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -122,7 +122,7 @@ Note that polyfills cannot magically transform an old, slow browser into a moder ## Enabling polyfills -[Angular CLI](https://github.com/angular/angular-cli/wiki) users enable polyfills through the `src/polyfills.ts` file that +[Angular CLI](cli) users enable polyfills through the `src/polyfills.ts` file that the CLI created with your project. This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements. diff --git a/aio/content/guide/build.md b/aio/content/guide/build.md index 39cb3b3661..bca4781a37 100644 --- a/aio/content/guide/build.md +++ b/aio/content/guide/build.md @@ -8,7 +8,7 @@ You can define different named build configurations for your project, such as *stage* and *production*, with different defaults. -Each named build configuration can have defaults for any of the options that apply to the various build targets, such as `build`, `serve`, and `test`. The CLI `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment. +Each named build configuration can have defaults for any of the options that apply to the various build targets, such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment. The following figure shows how a project has multiple build targets, which can be executed using the named configurations that you define. diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index d59625e1fb..6075b05577 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -164,7 +164,7 @@ They are _not inherited_ by any components nested within the template nor by any -The CLI defines an empty `styles` array when you create the component with the `--inline-style` flag. +The Angular CLI command [`ng generate component`](cli/generate) defines an empty `styles` array when you create the component with the `--inline-style` flag. ng generate component hero-app --inline-style @@ -193,7 +193,7 @@ They are _not inherited_ by any components nested within the template nor by any -The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`. +When you use the Angular CLI command [`ng generate component`](cli/generate) without the `--inline-style` flag, it creates an empty styles file for you and references that file in the component's generated `styleUrls`. ng generate component hero-app @@ -216,7 +216,8 @@ You can also write `` tags into the component's HTML template.
-When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-asset-configuration). +When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the [CLI wiki](https://github.com/angular/angular-cli/wiki/stories-asset-configuration). + Once included, the CLI will include the stylesheet, whether the link tag's href URL is relative to the application root or the component file. @@ -239,7 +240,9 @@ When building with the CLI, you must configure the `angular.json` to include _al Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file. -See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-global-styles) to learn more. +See the [CLI wiki](https://github.com/angular/angular-cli/wiki/stories-global-styles) to learn more. + + ### Non-CSS style files @@ -259,8 +262,10 @@ The CLI build process runs the pertinent CSS preprocessor. When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default. You can configure the CLI to default to your preferred CSS preprocessor -as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors +as explained in the [CLI wiki](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors "CSS Preprocessor integration"). + +
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md index 7d4a7f59be..d4a78df080 100644 --- a/aio/content/guide/dependency-injection.md +++ b/aio/content/guide/dependency-injection.md @@ -68,7 +68,7 @@ See an example in the [DI Cookbook](guide/dependency-injection-in-action#forward ### Create an injectable service class -The [**Angular CLI**](https://cli.angular.io/) can generate a new `HeroService` class in the `src/app/heroes` folder with this command. +The [Angular CLI](cli) can generate a new `HeroService` class in the `src/app/heroes` folder with this command. ng generate service heroes/hero diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index da43d452bc..7882b86f94 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -34,7 +34,7 @@ Another simple way to deploy your Angular app is to use [GitHub Pages](https://h 1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project. Make a note of the user name and project name in GitHub. -1. Build your project using Github project name, with the following CLI command: +1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here: ng build --prod --output-path docs --base-href @@ -99,7 +99,7 @@ The list is by no means exhaustive, but should provide you with a good starting #### Development servers -During development, the `ng serve` command lets you run your app in a local browser. +During development, the [`ng serve`](cli/serve) CLI command lets you run your app in a local browser. The CLI recompiles the application each time you save a file, and reloads the browser with the newly compiled application. @@ -253,8 +253,7 @@ The `--prod` _meta-flag_ engages the following optimization features. The remaining [copy deployment steps](#copy-files) are the same as before. -See [Building and serving Angular apps](guide/build) -for more about CLI build options and what they do. +See [`ng build`](cli/build) for more about CLI build options and what they do. {@a enable-prod-mode} @@ -410,4 +409,4 @@ ng build --watch ``` Like the `ng serve` command, this regenerates output files when source files change. -For complete details of the CLI commands and configuration options, see the [CLI command reference](cli). +For complete details of the CLI commands, see the [CLI command reference](cli). diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md index 703489cc9d..a1e28ec37e 100644 --- a/aio/content/guide/displaying-data.md +++ b/aio/content/guide/displaying-data.md @@ -135,7 +135,7 @@ In either style, the template data bindings have the same access to the componen
- By default, the Angular CLI generates components with a template file. You can override that with: + By default, the Angular CLI command [`ng generate component`](cli/generate) generates components with a template file. You can override that with: ng generate component hero -it diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md index 8c0889c1d2..3604fadb14 100644 --- a/aio/content/guide/elements.md +++ b/aio/content/guide/elements.md @@ -119,7 +119,7 @@ The recently-developed [custom elements](https://developer.mozilla.org/en-US/doc In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the `target: "es2015"` property in their project's `tsconfig.json`. As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code. -Use the [Angular CLI](https://cli.angular.io/) to automatically set up your project with the correct polyfill: `ng add @angular/elements --name=*your_project_name*`. +Use the [Angular CLI](cli) to automatically set up your project with the correct polyfill: `ng add @angular/elements --name=*your_project_name*`. - For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills). - For more information about Angular browser support, see [Browser Support](guide/browser-support). diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md index 6db3df8c21..87c35b776b 100644 --- a/aio/content/guide/feature-modules.md +++ b/aio/content/guide/feature-modules.md @@ -33,7 +33,7 @@ pipes that it shares. ## How to make a feature module -Assuming you already have a CLI generated app, create a feature +Assuming you already have an app that you created with the [Angular CLI](cli), create a feature module using the CLI by entering the following command in the root project directory. Replace `CustomerDashboard` with the name of your module. You can omit the "Module" suffix from the name because the CLI appends it: diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index 62a73a1c41..c61694306f 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -99,7 +99,7 @@ A model can be as simple as a "property bag" that holds facts about a thing of a That describes well the `Hero` class with its three required fields (`id`, `name`, `power`) and one optional field (`alterEgo`). -Using the Angular CLI, generate a new class named `Hero`: +Using the Angular CLI command [`ng generate class`](cli/generate), generate a new class named `Hero`: @@ -132,7 +132,7 @@ An Angular form has two parts: an HTML-based _template_ and a component _class_ to handle data and user interactions programmatically. Begin with the class because it states, in brief, what the hero editor can do. -Using the Angular CLI, generate a new component named `HeroForm`: +Using the Angular CLI command [`ng generate component`](cli/generate), generate a new component named `HeroForm`: diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md index 22b9ce9817..129a43b2d4 100644 --- a/aio/content/guide/frequent-ngmodules.md +++ b/aio/content/guide/frequent-ngmodules.md @@ -71,7 +71,7 @@ of some of the things they contain: When you use these Angular modules, import them in `AppModule`, or your feature module as appropriate, and list them in the `@NgModule` -`imports` array. For example, in the basic app generated by the CLI, +`imports` array. For example, in the basic app generated by the [Angular CLI](cli), `BrowserModule` is the first import at the top of the `AppModule`, `app.module.ts`. diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 558d3a5a64..31e266bf4c 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -130,10 +130,10 @@ A [decorator](guide/glossary#decorator) statement immediately before a field in ## command-line interface (CLI) -The [Angular CLI](https://cli.angular.io/) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment. +The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment. * To begin using the CLI for a new project, see [Getting Started](guide/quickstart). -* To learn more about the full capabilities of the CLI, see the [Angular CLI documentation](https://github.com/angular/angular-cli/wiki). +* To learn more about the full capabilities of the CLI, see the [CLI command reference](cli). {@a component} @@ -621,8 +621,7 @@ For more information, see [Routing and Navigation](guide/router). A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects. -* Angular provides a set of schematics for use with the CLI. -For details, see [Angular CLI documentation](https://github.com/angular/angular-cli/wiki). +* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs. * Library developers can create schematics that enable the CLI to generate their published libraries. For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics). @@ -785,7 +784,7 @@ See [custom element](guide/glossary#custom-element). ## workspace In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries). -The [CLI](guide/glossary#cli) `new` command creates a workspace to contain projects. +The [CLI](guide/glossary#cli) `ng new` command creates a workspace to contain projects. Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. {@a X} diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md index 1537c805a0..9267e20f91 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -23,7 +23,7 @@ When you specify providers in the `@Injectable()` decorator of the service itsel * Learn more about [tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers). -You're likely to inject `UserService` in many places throughout the app and will want to inject the same service instance every time. Providing `UserService` through the `root` injector is a good choice, and is the default that the CLI uses when you generate a service for your app. +You're likely to inject `UserService` in many places throughout the app and will want to inject the same service instance every time. Providing `UserService` through the `root` injector is a good choice, and is the default that the [Angular CLI](cli) uses when you generate a service for your app.
Platform injector
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index 16fa5047a6..4c5f644d5d 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -19,7 +19,7 @@ Angular simplifies the following aspects of internationalization: * Handling plural forms of words. * Handling alternative text. -For localization, you can use the [**Angular CLI**](https://cli.angular.io/) to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. +For localization, you can use the [Angular CLI](cli) to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps: * Extracting localizable text into a file that you can send out to be translated. * Building and serving the app for a given locale, using the translated text. @@ -413,7 +413,7 @@ By default, the command creates a file named `messages.xlf` in your `src/` folde If you don't use the CLI, you have two options: * You can use the `ng-xi18n` tool directly from the `@angular/compiler-cli` package. -For more information, see [i18n in the CLI documentation](https://github.com/angular/angular-cli/wiki/xi18n). +For more information, see the [`ng xi18n` command documentation](cli/xi18n). * You can use the CLI Webpack plugin `AngularCompilerPlugin` from the `@ngtools/webpack` package. Set the parameters `i18nOutFile` and `i18nOutFormat` to trigger the extraction. For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).