docs: change links to cli wiki to link to new aio docs (#26489)
PR Close #26489
This commit is contained in:
parent
0ef1f7ef0d
commit
beebf7fe14
|
@ -8,7 +8,7 @@ This guide explains how to specify metadata and apply available compiler options
|
|||
|
||||
<div class="alert is-helpful"
|
||||
|
||||
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
|
||||
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular compiler</a> at AngularConnect 2016.
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -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:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
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:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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).
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate directive highlight
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -164,7 +164,7 @@ They are _not inherited_ by any components nested within the template nor by any
|
|||
|
||||
</div>
|
||||
|
||||
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.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
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
|
|||
|
||||
</div>
|
||||
|
||||
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`.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate component hero-app
|
||||
|
@ -216,7 +216,8 @@ You can also write `<link>` tags into the component's HTML template.
|
|||
|
||||
<div class="alert is-critical">
|
||||
|
||||
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).
|
||||
<!-- 2018-10-16: The link above is still the best source for this information. -->
|
||||
|
||||
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.
|
||||
<!-- 2018-10-16: The link above is still the best source for this information. -->
|
||||
|
||||
|
||||
### 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").
|
||||
<!-- 2018-10-16: The link above is still the best source for this information. -->
|
||||
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate service heroes/hero
|
||||
|
|
|
@ -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:
|
||||
<code-example language="none" class="code-shell">
|
||||
ng build --prod --output-path docs --base-href <project_name>
|
||||
</code-example>
|
||||
|
@ -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).
|
||||
|
|
|
@ -135,7 +135,7 @@ In either style, the template data bindings have the same access to the componen
|
|||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
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:
|
||||
|
||||
<code-example hideCopy language="sh" class="code-shell">
|
||||
ng generate component hero -it
|
||||
|
|
|
@ -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).
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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`:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
|
@ -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`:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
|
|
|
@ -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`.
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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.
|
||||
|
||||
<div class="alert-is-helpful">
|
||||
<header>Platform injector</header>
|
||||
|
|
|
@ -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).
|
||||
|
|
Loading…
Reference in New Issue