iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

针对新的版本提交没有提交的代码

This commit is contained in:
YuCheng Hu 2021-04-03 09:52:53 -04:00
parent 3d12ab7d35
commit 895f2fe818
1827 changed files with 50389 additions and 228838 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.bazelignore
View File

@ -17,6 +17,7 @@ integration/bazel-schematics/demo
# All integration test node_modules folders
integration/bazel/node_modules
integration/bazel-schematics/node_modules
integration/cli-elements-universal/node_modules
integration/cli-hello-world/node_modules
integration/cli-hello-world-ivy-compat/node_modules
integration/cli-hello-world-ivy-i18n/node_modules
@ -44,6 +45,7 @@ integration/typings_test_ts37/node_modules
# All integration test .yarn_local_cache folders
integration/bazel/.yarn_local_cache
integration/bazel-schematics/.yarn_local_cache
integration/cli-elements-universal/.yarn_local_cache
integration/cli-hello-world/.yarn_local_cache
integration/cli-hello-world-ivy-compat/.yarn_local_cache
integration/cli-hello-world-ivy-i18n/.yarn_local_cache
@ -71,6 +73,7 @@ integration/typings_test_ts37/.yarn_local_cache
# All integration test NPM_PACKAGE_MANIFEST.json folders
integration/bazel/NPM_PACKAGE_MANIFEST.json
integration/bazel-schematics/NPM_PACKAGE_MANIFEST.json
integration/cli-elements-universal/NPM_PACKAGE_MANIFEST.json
integration/cli-hello-world/NPM_PACKAGE_MANIFEST.json
integration/cli-hello-world-ivy-compat/NPM_PACKAGE_MANIFEST.json
integration/cli-hello-world-ivy-i18n/NPM_PACKAGE_MANIFEST.json

13
.bazelrc
View File

@ -47,9 +47,13 @@ build --nobuild_runfile_links
# Releases should always be stamped with version control info
# This command assumes node on the path and is a workaround for
# https://github.com/bazelbuild/bazel/issues/4802
build:release --workspace_status_command="yarn -s ng-dev release build-env-stamp"
build:release --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=release"
build:release --stamp
# Snapshots should also be stamped with version control information.
build:snapshot --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
build:snapshot --stamp
###############################
# Output #
###############################
@ -136,6 +140,13 @@ build:remote --remote_executor=remotebuildexecution.googleapis.com
# retry mechanism and we do not want to retry unnecessarily if Karma already tried multiple times.
test:saucelabs --flaky_test_attempts=1
################
# Flag Aliases #
################
# --ng_perf will ask the Ivy compiler to produce performance results for each build.
build --flag_alias=ng_perf=//packages/compiler-cli:ng_perf
####################################################
# User bazel configuration
# NOTE: This needs to be the *last* entry in the config.

2
.bazelversion
View File

@ -1,3 +1,3 @@
3.6.0
4.0.0
# [NB: this comment has to be after the first line, see https://github.com/bazelbuild/bazelisk/issues/117]
# When updating the Bazel version you also need to update the RBE toolchains version in package.bzl

7
.circleci/bazel.linux.rc
View File

@ -20,11 +20,4 @@ build --local_ram_resources=32768
# All build executed remotely should be done using our RBE configuration.
build:remote --google_default_credentials
# Upload to GCP's Build Status viewer to allow for us to have better viewing of execution/build
# logs. This is only done on CI as the BES (GCP's Build Status viewer) API requires credentials
# from service accounts, rather than end user accounts.
build:remote --bes_backend=buildeventservice.googleapis.com
build:remote --bes_timeout=30s
build:remote --bes_results_url="https://source.cloud.google.com/results/invocations/"
build --config=remote

6
.circleci/config.yml
View File

@ -261,7 +261,7 @@ jobs:
- run: yarn -s ts-circular-deps:check
- run: yarn -s ng-dev pullapprove verify
- run: yarn -s ng-dev ngbot verify
- run: yarn -s ng-dev commit-message validate-range --range $CI_COMMIT_RANGE
- run: yarn -s ng-dev commit-message validate-range $CI_GIT_BASE_REVISION $CI_GIT_REVISION
test:
executor:
@ -447,7 +447,7 @@ jobs:
# Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
# Since the parallelism is set to "5", there will be five parallel CircleCI containers.
# with either "0", "1", etc as node index. This can be passed to the "--shard" argument.
- run: yarn --cwd aio example-e2e --setup --local <<# parameters.viewengine >>--viewengine<</ parameters.viewengine >> --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL} --retry 2
- run: yarn --cwd aio example-e2e --setup --local <<# parameters.viewengine >>--viewengine<</ parameters.viewengine >> --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
# This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
aio_preview:
@ -770,7 +770,7 @@ jobs:
no_output_timeout: 15m
- run:
name: Test all windows CI targets
command: yarn bazel test --config=ivy --build_tag_filters=-no-windows --test_tag_filters="-no-ivy-aot,-no-windows,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //tools/ts-api-guardian/...
command: yarn bazel test --config=ivy --build_tag_filters=-no-windows --test_tag_filters="-no-ivy-aot,-no-windows,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //tools/ts-api-guardian/... //packages/localize/...
no_output_timeout: 15m

2
.circleci/env.sh
View File

@ -107,7 +107,7 @@ echo "export CI_SECRET_PAYLOAD_FIREBASE_TOKEN=\"${CI_SECRET_PAYLOAD_FIREBASE_TOK
####################################################################################################
####################################################################################################
## Source `$BASH_ENV` to make the variables available immediately. ##
## ***NOTE: This must remain the the last action in this script*** ##
## ***NOTE: This must remain the last action in this script*** ##
####################################################################################################
####################################################################################################
source $BASH_ENV;

18
.circleci/rebase-pr.js
View File

@ -92,7 +92,7 @@ async function _main() {
* likely correct branch will be the first one encountered in the list.
*/
function getRefFromBranchList(gitOutput) {
const branches = gitOutput.split('\n').map(b => b.split('/').slice(1).join('').trim());
const branches = gitOutput.split('\n').map(b => b.split('/').slice(1).join('/').trim());
return branches.sort((a, b) => {
if (a === 'master') {
return -1;
@ -152,7 +152,7 @@ function getCommonAncestorSha(sha1, sha2) {
*/
function addAndFetchRemote(owner, name) {
const remoteName = `${owner}_${name}`;
exec(`git remote add ${remoteName} https://github.com/${owner}/${name}.git`, false);
exec(`git remote add ${remoteName} https://github.com/${owner}/${name}.git`, true);
exec(`git fetch ${remoteName}`);
return remoteName;
}
@ -194,14 +194,14 @@ function getRefsAndShasForChange() {
*
* Return the trimmed stdout as a string, with an added attribute of the exit code.
*/
function exec(command, allowStderr = true) {
let output = new String();
output.code = 0;
function exec(command, ignoreError = false) {
try {
output += execSync(command, {stdio: ['pipe', 'pipe', 'pipe']}).toString().trim();
return execSync(command, {stdio: 'pipe'}).toString().trim();
} catch (err) {
allowStderr && console.error(err.stderr.toString());
output.code = err.status;
if (ignoreError) {
return '';
}
throw err;
}
return output;
}

2
.devcontainer/README.md
View File

@ -1,4 +1,4 @@
# VSCode Remote Development - Developing inside a Containers
# VSCode Remote Development - Developing inside a Container
This folder contains configuration files that can be used to opt into working on this repository in a [Docker container](https://www.docker.com/resources/what-container) via [VSCode](https://code.visualstudio.com/)'s Remote Development feature (see below).

12
.devcontainer/recommended-Dockerfile
View File

@ -1,6 +1,8 @@
# Image metadata and config.
FROM circleci/node:10-browsers # Ideally, the image version should be what we use on CI.
# See `executors > browsers-executor` in `.circleci/config.yml`.
# Ideally, the image version should be what we use on CI.
# See `executors > browsers-executor` in `.circleci/config.yml`.
FROM circleci/node:10-browsers
LABEL name="Angular dev environment" \
description="This image can be used to create a dev environment for building Angular." \
@ -16,8 +18,10 @@ USER root
# Configure `Node.js`/`npm` and install utilities.
RUN npm config --global set user root
RUN npm install --global yarn@latest # Ideally, the version should be what we use on CI.
# See `commands > overwrite_yarn` in `.circleci/config.yml`.
# Ideally, the version should be what we use on CI.
# See `commands > overwrite_yarn` in `.circleci/config.yml`.
RUN npm install --global yarn@latest
# Go! (And keep going.)

2
.github/ISSUE_TEMPLATE/1-bug-report.md vendored
View File

@ -43,7 +43,7 @@ Share the link to the repo below along with step-by-step instructions to reprodu
Issues that don't have enough info and can't be reproduced will be closed.
You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#submit-issue
-->
## 🔥 Exception or Error

2
.github/angular-robot.yml vendored
View File

@ -187,8 +187,6 @@ triagePR:
# arrays of labels that determine if a PR has been fully triaged
l2TriageLabels:
-
- "effort*"
- "risk*"
- "comp: *"
# options for rerunning CI

2
.github/workflows/lock-closed.yml vendored
View File

@ -10,6 +10,6 @@ jobs:
if: github.repository == 'angular/angular'
runs-on: ubuntu-latest
steps:
- uses: angular/dev-infra/github-actions/lock-closed@0fc6f4d839e93312ed0dd9a2be88d4c11e947a0b
- uses: angular/dev-infra/github-actions/lock-closed@7679cff885633cd33bf5ac7922a5304e8971a5a6
with:
lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}

1
.gitignore vendored
View File

@ -19,6 +19,7 @@ pubspec.lock
.vscode/settings.json
.vscode/tasks.json
*.swo
*.swp
modules/.settings
modules/.vscode
.vimrc

2
.ng-dev/commit-message.ts
View File

@ -4,7 +4,7 @@ import {CommitMessageConfig} from '../dev-infra/commit-message/config';
* The configuration for `ng-dev commit-message` commands.
*/
export const commitMessage: CommitMessageConfig = {
maxLineLength: 120,
maxLineLength: Infinity,
minBodyLength: 20,
minBodyLengthTypeExcludes: ['docs'],
scopes: [

1
.ng-dev/format.ts
View File

@ -18,6 +18,7 @@ export const format: FormatConfig = {
'!**/*.d.ts',
// Do not format generated ng-dev script
'!dev-infra/ng-dev.js',
'!dev-infra/build-worker.js',
// Do not format compliance test-cases since they must match generated code
'!packages/compiler-cli/test/compliance/test_cases/**/*.js',
]

4
.ng-dev/release.ts
View File

@ -4,6 +4,7 @@ import {ReleaseConfig} from '../dev-infra/release/config';
/** Configuration for the `ng-dev release` command. */
export const release: ReleaseConfig = {
publishRegistry: 'https://wombat-dressing-room.appspot.com',
npmPackages: [
'@angular/animations',
'@angular/bazel',
@ -26,10 +27,11 @@ export const release: ReleaseConfig = {
// The buildTargetPackages function is loaded at runtime as the loading the script causes an
// invocation of bazel.
const {buildTargetPackages} = require(join(__dirname, '../scripts/build/package-builder'));
return buildTargetPackages('dist/release-output', false, 'Release');
return buildTargetPackages('dist/release-output', false, 'Release', true);
},
// TODO: This can be removed once there is an org-wide tool for changelog generation.
generateReleaseNotesForHead: async () => {
exec('yarn -s gulp changelog', {cwd: join(__dirname, '../')});
},
releasePrLabels: ['comp: build & ci', 'action: merge', 'PullApprove: disable'],
};

100
.pullapprove.yml
View File

@ -172,6 +172,7 @@ groups:
request: 0 # Do not request any reviews from the reviewer group
required: 1 # Require that all PRs have approval from at least one of the users in the group
author_value: 0 # The author of the PR cannot provide an approval for themself
reviewed_for: ignored # All reviews apply to this group whether noted via Reviewed-for or not
reviewers:
users:
- aikidave # Dave Shevitz
@ -207,7 +208,8 @@ groups:
- petebacondarwin # Pete Bacon Darwin
- pkozlowski-opensource # Pawel Kozlowski
- Splaktar # Michael Prentice
- StephenFluin # Stephen Fluin
- twerske # Emma Twersky
- zarend # Zach Arend
# =========================================================
# Framework: Animations
@ -291,7 +293,7 @@ groups:
users:
- alxhub
- crisbeto
# OOO as of 2020-09-28 - devversion
- devversion
# =========================================================
@ -306,11 +308,9 @@ groups:
contains_any_globs(files.exclude("packages/core/schematics/**"), [
'packages/core/**',
'packages/examples/core/**',
'packages/common/**',
'packages/platform-browser/**',
'packages/examples/platform-browser/**',
'packages/platform-browser-dynamic/**',
'packages/examples/common/**',
'packages/docs/**',
'aio/content/guide/accessibility.md',
'aio/content/examples/accessibility/**',
@ -435,6 +435,30 @@ groups:
# OOO as of 2020-09-28 - pkozlowski-opensource
# =========================================================
# Framework: Common
# =========================================================
fw-common:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files.exclude("packages/core/schematics/**"), [
'packages/common/**',
'packages/examples/common/**',
])
reviewers:
users:
- alxhub
- AndrewKushnir
- atscott
- ~kara # do not request reviews from Kara, but allow her to approve PRs
- mhevery
- jessicajaniuk
# OOO as of 2020-09-28 - pkozlowski-opensource
# =========================================================
# Framework: Http
# =========================================================
@ -455,6 +479,7 @@ groups:
users:
- alxhub
- IgorMinar
- petebacondarwin
# =========================================================
@ -657,7 +682,7 @@ groups:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files.exclude('packages/compiler-cli/**'), [
contains_any_globs(files.exclude('packages/compiler-cli/**').exclude('packages/language-service/**'), [
'packages/**/testing/**',
'aio/content/guide/testing.md',
'aio/content/guide/test-debugging.md',
@ -778,8 +803,9 @@ groups:
])
reviewers:
users:
- ayazhafiz
- kyliau
- atscott
- zarend
# =========================================================
@ -852,6 +878,25 @@ groups:
- mhevery
# =========================================================
# Docs: Contributors
# =========================================================
docs-contributors:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
'aio/content/marketing/contributors.json',
'aio/content/images/bios/**',
])
reviewers:
users:
- mgechev
- twerske
# =========================================================
# Docs: Gettings Started & Tutorial
# =========================================================
@ -876,13 +921,15 @@ groups:
'aio/content/examples/getting-started-v0/**',
'aio/content/examples/getting-started/**',
'aio/content/start/**',
'aio/content/images/guide/start/**'
'aio/content/images/guide/start/**',
'aio/content/examples/what-is-angular/**',
'aio/content/guide/what-is-angular.md'
])
reviewers:
users:
- aikidave
- IgorMinar
- StephenFluin
- jelbourn
# =========================================================
@ -894,10 +941,9 @@ groups:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
contains_any_globs(files.exclude("aio/content/marketing/contributors.json"), [
'aio/content/guide/roadmap.md',
'aio/content/marketing/**',
'aio/content/images/bios/**',
'aio/content/images/marketing/**',
'aio/content/file-not-found.md',
'aio/content/license.md',
@ -907,7 +953,7 @@ groups:
users:
- aikidave
- IgorMinar
- StephenFluin
- mgechev
# =========================================================
# Docs: Observables
@ -1093,9 +1139,14 @@ groups:
'aio/src/**',
'aio/tests/**',
'aio/tools/**',
'aio/content/images/guide/contributors-guide/**',
'aio/content/guide/contributors-guide-overview.md',
'aio/content/guide/docs-style-guide.md',
'aio/content/examples/docs-style-guide/**',
'aio/content/images/guide/docs-style-guide/**',
'aio/content/guide/reviewing-content.md',
'aio/content/guide/updating-content-github-ui.md',
'aio/content/guide/updating-search-keywords.md',
'aio/content/guide/visual-studio-2015.md'
])
reviewers:
@ -1113,7 +1164,7 @@ groups:
conditions:
- *can-be-global-approved
- >
contains_any_globs(files.exclude("CHANGELOG.md").exclude("packages/compiler-cli/**/BUILD.bazel"), [
contains_any_globs(files, [
'*',
'.circleci/**',
'.devcontainer/**',
@ -1123,19 +1174,7 @@ groups:
'.vscode/**',
'.yarn/**',
'dev-infra/**',
'docs/BAZEL.md',
'docs/CARETAKER.md',
'docs/CODING_STANDARDS.md',
'docs/COMMITTER.md',
'docs/DEBUG.md',
'docs/DEBUG_COMPONENTS_REPO_IVY.md',
'docs/DEVELOPER.md',
'docs/FIXUP_COMMITS.md',
'docs/GITHUB_PROCESS.md',
'docs/PR_REVIEW.md',
'docs/SAVED_REPLIES.md',
'docs/TOOLS.md',
'docs/TRIAGE_AND_LABELS.md',
'docs/*.md',
'docs/images/**',
'goldens/*',
'modules/*',
@ -1162,12 +1201,11 @@ groups:
'tools/utils/**',
'tools/yarn/**',
'tools/*',
'**/*.bzl',
'**/*.bazel'
'**/*.bzl'
])
reviewers:
users:
# OOO as of 2020-09-28 - devversion
- devversion
- filipesilva
- gkalpak
- IgorMinar
@ -1186,10 +1224,11 @@ groups:
- >
contains_any_globs(files, [
'goldens/public-api/**',
'CHANGELOG.md',
'docs/NAMING.md',
'aio/content/errors/*.md',
'aio/content/guide/glossary.md',
'aio/content/guide/styleguide.md',
'aio/content/examples/errors/**',
'aio/content/examples/styleguide/**',
'aio/content/images/guide/styleguide/*'
])
@ -1201,6 +1240,7 @@ groups:
- atscott
- jelbourn
- petebacondarwin
- jessicajaniuk
# OOO as of 2020-09-28 - pkozlowski-opensource
reviews:
request: 4 # Request reviews from four people
@ -1229,6 +1269,7 @@ groups:
- atscott
- jelbourn
- petebacondarwin
- jessicajaniuk
# OOO as of 2020-09-28 - pkozlowski-opensource
reviews:
request: 4 # Request reviews from four people
@ -1257,6 +1298,7 @@ groups:
- atscott
- jelbourn
- petebacondarwin
- jessicajaniuk
# OOO as of 2020-09-28 - pkozlowski-opensource

22
.travis.yml
View File

@ -1,22 +0,0 @@
language: node_js
sudo: false
dist: trusty
node_js:
- 12.14.1
addons:
apt:
sources:
- ubuntu-toolchain-r-test
packages:
- g++-4.8
chrome: stable
branches:
except:
- g3
cache: false
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1
- export PATH="$HOME/.yarn/bin:$PATH"
- google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
script:
- "./aio/deploy-cn.sh"

5
.vscode/recommended-launch.json vendored
View File

@ -16,6 +16,7 @@
"remoteRoot": "${workspaceRoot}",
"stopOnEntry": false,
"timeout": 600000,
"outFiles": ["${workspaceFolder}/bazel-out/**/angular/**/*.js"],
},
{
"name": "Attach to bazel test ... --config=debug (no source maps)",
@ -29,6 +30,7 @@
"remoteRoot": "${workspaceRoot}",
"stopOnEntry": false,
"timeout": 600000,
"outFiles": ["${workspaceFolder}/bazel-out/**/angular/**/*.js"],
},
{
"name": "IVY:packages/core/test/acceptance",
@ -46,6 +48,7 @@
"restart": true,
"sourceMaps": true,
"timeout": 600000,
"outFiles": ["${workspaceFolder}/bazel-out/**/angular/**/*.js"],
},
{
"name": "IVY:packages/core/test/render3",
@ -63,6 +66,7 @@
"restart": true,
"sourceMaps": true,
"timeout": 600000,
"outFiles": ["${workspaceFolder}/bazel-out/**/angular/**/*.js"],
},
{
"name": "IVY:packages/core/test",
@ -80,6 +84,7 @@
"restart": true,
"sourceMaps": true,
"timeout": 600000,
"outFiles": ["${workspaceFolder}/bazel-out/**/angular/**/*.js"],
},
]
}

147392
.yarn/releases/yarn-1.22.5.js vendored
View File

File diff suppressed because one or more lines are too long

2
.yarnrc
View File

@ -2,4 +2,4 @@
# yarn lockfile v1
yarn-path ".yarn/releases/yarn-1.22.5.js"
yarn-path ".yarn/releases/yarn-1.22.10.cjs"

3
BUILD.bazel
View File

@ -42,9 +42,12 @@ filegroup(
"@npm//:node_modules/angular-1.5/angular.min.js",
"@npm//:node_modules/angular-1.6/angular.js",
"@npm//:node_modules/angular-1.6/angular.min.js",
"@npm//:node_modules/angular-1.7/angular.js",
"@npm//:node_modules/angular-1.7/angular.min.js",
"@npm//:node_modules/angular-mocks/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.5/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.6/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.7/angular-mocks.js",
],
)

771
CHANGELOG.md
View File

@ -1,3 +1,754 @@
# 12.0.0-next.7 (2021-04-01)
### Bug Fixes
* **common:** temporarily re-export and deprecate `XhrFactory` ([#41393](https://github.com/angular/angular/issues/41393)) ([7dfa446](https://github.com/angular/angular/commit/7dfa446c4ace99f4b64069cf672dcaa3665a1f5b))
* **compiler:** handle case-sensitive CSS custom properties ([#41380](https://github.com/angular/angular/issues/41380)) ([e112e32](https://github.com/angular/angular/commit/e112e320bf6c2b60e8ecea46f80bcaec593c65b7)), closes [#41364](https://github.com/angular/angular/issues/41364)
* **compiler:** include used components during JIT compilation of partial component declaration ([#41353](https://github.com/angular/angular/issues/41353)) ([ff9470b](https://github.com/angular/angular/commit/ff9470b0a0196a3638f19028bba15e002cb0ff27)), closes [#41104](https://github.com/angular/angular/issues/41104) [#41318](https://github.com/angular/angular/issues/41318)
* **language-service:** Only provide Angular property completions in templates ([#41278](https://github.com/angular/angular/issues/41278)) ([0226a11](https://github.com/angular/angular/commit/0226a11c185da2d1e6f7833972d3f12205a6ae59))
* **platform-browser:** configure `XhrFactory` to use `BrowserXhr` ([#41313](https://github.com/angular/angular/issues/41313)) ([e0028e5](https://github.com/angular/angular/commit/e0028e57410281e190caa74e0986320f6591d27b)), closes [#41311](https://github.com/angular/angular/issues/41311)
### Features
* **core:** add migration for `XhrFactory` import ([#41313](https://github.com/angular/angular/issues/41313)) ([95ff5ec](https://github.com/angular/angular/commit/95ff5ecb239d55a239113b0a2e1f7620f6e34676))
* **language-service:** add perf tracing to LanguageService ([#41319](https://github.com/angular/angular/issues/41319)) ([90f85da](https://github.com/angular/angular/commit/90f85da2de72f320653e6292968f70c87876bada))
### BREAKING CHANGES
* **platform-browser:** `XhrFactory` has been moved from `@angular/common/http` to `@angular/common`.
**Before**
```ts
import {XhrFactory} from '@angular/common/http';
```
**After**
```ts
import {XhrFactory} from '@angular/common';
```
# 12.0.0-next.6 (2021-03-24)
### Bug Fixes
* **animations:** cleanup DOM elements when the root view is removed ([#41059](https://github.com/angular/angular/issues/41059)) ([c49b280](https://github.com/angular/angular/commit/c49b28013a6c017c9afc73bbc00bb4fdcf15c70e))
* **compiler-cli:** add `useInlining` option to type check config ([#41043](https://github.com/angular/angular/issues/41043)) ([09aefd2](https://github.com/angular/angular/commit/09aefd29045db77689f4dc16a6abae09a79cfb81)), closes [#40963](https://github.com/angular/angular/issues/40963)
* **core:** detect synthesized constructors that have been downleveled using TS 4.2 ([#41305](https://github.com/angular/angular/issues/41305)) ([274dc15](https://github.com/angular/angular/commit/274dc15452739e4fab2f647804a64d5b797cfed5)), closes [#41298](https://github.com/angular/angular/issues/41298)
* **ngcc:** detect synthesized constructors that have been downleveled using TS 4.2 ([#41305](https://github.com/angular/angular/issues/41305)) ([8d3da56](https://github.com/angular/angular/commit/8d3da56eda12070df1fb473c8609f3a94d77bfd6)), closes [#41298](https://github.com/angular/angular/issues/41298)
* **router:** fragment can be null ([#37336](https://github.com/angular/angular/issues/37336)) ([b555160](https://github.com/angular/angular/commit/b5551609fe02787641bdfdb0a6edfded413a3b52)), closes [#23894](https://github.com/angular/angular/issues/23894) [#34197](https://github.com/angular/angular/issues/34197)
### Features
* **router:** add migration for ActivatedRouteSnapshot.fragment ([#41092](https://github.com/angular/angular/issues/41092)) ([190fa07](https://github.com/angular/angular/commit/190fa07b9a416defb581d2bf76d1deef7baefce6)), closes [#37336](https://github.com/angular/angular/issues/37336)
### BREAKING CHANGES
* **animations:** DOM elements are now correctly removed when the root view is removed.
If you are using SSR and use the app's HTML for rendering, you will need
to ensure that you save the HTML to a variable before destorying the
app.
It is also possible that tests could be accidentally relying on the old behavior by
trying to find an element that was not removed in a previous test. If
this is the case, the failing tests should be updated to ensure they
have proper setup code which initializes elements they rely on.
* **router:** Strict null checks will report on fragment potentially being null.
Migration path: add null check.
## 11.2.7 (2021-03-24)
### Bug Fixes
* **compiler:** correctly process multiple rules containing `:host` selectors ([#41261](https://github.com/angular/angular/issues/41261)) ([f358d6b](https://github.com/angular/angular/commit/f358d6b113e1a8215fcb50dbc3c5db8799699901)), closes [#41237](https://github.com/angular/angular/issues/41237)
* **compiler-cli:** add `useInlining` option to type check config ([#41268](https://github.com/angular/angular/issues/41268)) ([57644e9](https://github.com/angular/angular/commit/57644e95aadbfe9c8f336be77a22f7a5e1859758)), closes [#40963](https://github.com/angular/angular/issues/40963)
* **core:** remove obsolete check for [class] and [className] presence ([#41254](https://github.com/angular/angular/issues/41254)) ([8a53b54](https://github.com/angular/angular/commit/8a53b5454eea7b4db09498d9018687aa0b0ca7f3))
* **language-service:** show suggestion when type inference is suboptimal ([#41072](https://github.com/angular/angular/issues/41072)) ([18cd7a0](https://github.com/angular/angular/commit/18cd7a0c6921983556fe1fffbff93d42ae138007)), closes [angular/vscode-ng-language-service#1155](https://github.com/angular/vscode-ng-language-service/issues/1155) [#41042](https://github.com/angular/angular/issues/41042)
# 12.0.0-next.5 (2021-03-17)
### Bug Fixes
* **core:** Switch `emitDistinctChangesOnlyDefaultValue` to true ([#41121](https://github.com/angular/angular/issues/41121)) ([7096246](https://github.com/angular/angular/commit/70962465b5795f0a192f745016b1c461e7c8790b))
### Features
* **compiler-cli:** introduce HttpContext request context ([#25751](https://github.com/angular/angular/issues/25751)) ([1644d64](https://github.com/angular/angular/commit/1644d64398491d4a324a5eee492d1fd37df52a01))
* **core:** drop support for TypeScript 4.0 and 4.1 ([#41158](https://github.com/angular/angular/issues/41158)) ([fa04894](https://github.com/angular/angular/commit/fa048948be75c30dafebda69efbeb81776460500))
* **core:** support TypeScript 4.2 ([#41158](https://github.com/angular/angular/issues/41158)) ([59ef409](https://github.com/angular/angular/commit/59ef40988e94f3173134368bc7d4e2726cdd8455))
* **ngcc:** support `__read` helper as used by TypeScript 4.2 ([#41201](https://github.com/angular/angular/issues/41201)) ([66e9970](https://github.com/angular/angular/commit/66e997069102a12c607d830c7edf91cb202e5902)), closes [microsoft/TypeScript#41523](https://github.com/microsoft/TypeScript/issues/41523)
* **ngcc:** support `__spreadArray` helper as used by TypeScript 4.2 ([#41201](https://github.com/angular/angular/issues/41201)) ([7b1214e](https://github.com/angular/angular/commit/7b1214eca2dd2f09e723a46bed857fcb7d40bc0b)), closes [microsoft/TypeScript#41523](https://github.com/microsoft/TypeScript/issues/41523) [#40394](https://github.com/angular/angular/issues/40394)
### Performance Improvements
* **common:** remove unused methods from DomAdapter ([#41102](https://github.com/angular/angular/issues/41102)) ([3c66b10](https://github.com/angular/angular/commit/3c66b100dd6f05f53740f596c5eadb999c27c9c4))
### BREAKING CHANGES
* **core:** Switching default of `emitDistinctChangesOnlyDefaultValue`
which changes the default behavior and may cause some applications which
rely on the incorrect behavior to fail.
`emitDistinctChangesOnly` flag has also been deprecated and will be
removed in a future major release.
The previous implementation would fire changes `QueryList.changes.subscribe`
whenever the `QueryList` was recomputed. This resulted in an artificially
high number of change notifications, as it is possible that recomputing
`QueryList` results in the same list. When the `QueryList` gets recomputed
is an implementation detail, and it should not be the thing that determines
how often change event should fire.
Unfortunately, fixing the behavior outright caused too many existing
applications to fail. For this reason, Angular considers this fix a
breaking fix and has introduced a flag in `@ContentChildren` and
`@ViewChildren`, that controls the behavior.
```
export class QueryCompWithStrictChangeEmitParent {
@ContentChildren('foo', {
// This option is the new default with this change.
emitDistinctChangesOnly: true,
})
foos!: QueryList<any>;
}
```
For backward compatibility before v12
`emitDistinctChangesOnlyDefaultValue` was set to `false. This change
changes the default to `true`.
## 11.2.6 (2021-03-17)
### Bug Fixes
* **core:** remove duplicated EMPTY_OBJ constant ([#41153](https://github.com/angular/angular/issues/41153)) ([fa97166](https://github.com/angular/angular/commit/fa97166361b17802f8d1771e18b47ac55a117a53))
* **forms:** properly handle the change to the FormGroup shape ([#40829](https://github.com/angular/angular/issues/40829)) ([60ac964](https://github.com/angular/angular/commit/60ac9643334b83b6b720afd1b7d7fadf02c4e7fc)), closes [#13788](https://github.com/angular/angular/issues/13788)
* **localize:** render correct closing tag placeholder names in XLIFF 2 ([#41152](https://github.com/angular/angular/issues/41152)) ([7dbb550](https://github.com/angular/angular/commit/7dbb550946031d212b334b9e805e198232bc933b)), closes [#41142](https://github.com/angular/angular/issues/41142)
* **localize:** trim extracted `equiv-text` values ([#41180](https://github.com/angular/angular/issues/41180)) ([ed6c09a](https://github.com/angular/angular/commit/ed6c09ae45faa598b505c68bd68fe0d1ba3300c4)), closes [#41176](https://github.com/angular/angular/issues/41176)
* **ngcc:** do not compile JavaScript sources if typings-only processing is repeated ([#41209](https://github.com/angular/angular/issues/41209)) ([be050b2](https://github.com/angular/angular/commit/be050b2582eed2ad036fb4dd679926a146e17264)), closes [#41198](https://github.com/angular/angular/issues/41198)
### Performance Improvements
* **forms:** avoid direct references to the `Validators` class ([#41189](https://github.com/angular/angular/issues/41189)) ([#41220](https://github.com/angular/angular/issues/41220)) ([804b6b6](https://github.com/angular/angular/commit/804b6b66853aa53f446b3e9c3cb921ae8cb794c2))
* **forms:** make `FormBuilder` class tree-shakable ([#41126](https://github.com/angular/angular/issues/41126)) ([ffc93e0](https://github.com/angular/angular/commit/ffc93e0946dc7c5a2a64a25a97dbae551b3ffbec))
* **forms:** make `RadioControlRegistry` class tree-shakable ([#41126](https://github.com/angular/angular/issues/41126)) ([6414590](https://github.com/angular/angular/commit/6414590f8d09d5d33a9022b023e025fc1452f5b5))
* **forms:** make built-in ControlValueAccessors more tree-shakable ([#41146](https://github.com/angular/angular/issues/41146)) ([#41197](https://github.com/angular/angular/issues/41197)) ([5908eda](https://github.com/angular/angular/commit/5908eda7c11ebff169d07598e54f62d7e35f6580))
# 12.0.0-next.4 (2021-03-10)
### Bug Fixes
* **common:** cleanup location change listeners when the root view is removed ([#40867](https://github.com/angular/angular/issues/40867)) ([38524c4](https://github.com/angular/angular/commit/38524c4d29290d3339ad2d7335a0ea84f5701d26)), closes [#31546](https://github.com/angular/angular/issues/31546)
* **core:** remove duplicated EMPTY_OBJ constant ([#41066](https://github.com/angular/angular/issues/41066)) ([bf158e7](https://github.com/angular/angular/commit/bf158e7ff0715aabeae3c2c1ac923bf8cc7e4cfd))
### Features
* **compiler:** emit @__PURE__ or [@pure](https://github.com/pure)OrBreakMyCode annotations in the generated code ([#41096](https://github.com/angular/angular/issues/41096)) ([9c21028](https://github.com/angular/angular/commit/9c210281d4073289ff4633a866e395ca34e97ef9))
* **compiler-cli:** support producing Closure-specific PURE annotations ([#41021](https://github.com/angular/angular/issues/41021)) ([fbc9df1](https://github.com/angular/angular/commit/fbc9df181ea50527cb755382b54b8b45d0f9ef39))
* **core:** manually annotate de-sugarred core tree-shakable providers with [@pure](https://github.com/pure)OrBreakMyCode ([#41096](https://github.com/angular/angular/issues/41096)) ([03d47d5](https://github.com/angular/angular/commit/03d47d570167a5a70b17552ca2c8d531683d900f))
* **core:** more precise type for `APP_INITIALIZER` token ([#40986](https://github.com/angular/angular/issues/40986)) ([ca721c2](https://github.com/angular/angular/commit/ca721c2972f44d903a0e12fae3397ab62769e649)), closes [#40729](https://github.com/angular/angular/issues/40729)
* **localize:** add scripts to migrate away from legacy message IDs ([#41026](https://github.com/angular/angular/issues/41026)) ([1735430](https://github.com/angular/angular/commit/17354304768f3c2b272c4c5d5636b5709287276f))
### BREAKING CHANGES
* **common:** Methods of the `PlatformLocation` class, namely `onPopState` and `onHashChange`,
used to return `void`. Now those methods return functions that can be called
to remove event handlers.
* **core:** The type of the `APP_INITIALIZER` token has been changed to more accurately
reflect the types of return values that are handled by Angular. Previously,
each initializer callback was typed to return `any`, this is now
`Promise<unknown> | Observable<unknown> | void`. In the unlikely event that
your application uses the `Injector.get` or `TestBed.inject` API to inject
the `APP_INITIALIZER` token, you may need to update the code to account for
the stricter type.
Additionally, TypeScript may report the TS2742 error if the `APP_INITIALIZER`
token is used in an expression of which its inferred type has to be emitted
into a .d.ts file. To workaround this, an explicit type annotation is needed,
which would typically be `Provider` or `Provider[]`.
## 11.2.5 (2021-03-10)
### Bug Fixes
* **bazel:** fix incorrect rollup plugin method signature ([#41101](https://github.com/angular/angular/issues/41101)) ([925746b](https://github.com/angular/angular/commit/925746b6d8a84ce7281e9044f88bb1146dc1cd44))
* **language-service:** Only provide dom completions for inline templates ([#41078](https://github.com/angular/angular/issues/41078)) ([a05eb13](https://github.com/angular/angular/commit/a05eb13caa546e23caa2dee37435e549059d17c3))
### Performance Improvements
* **compiler-cli:** avoid module resolution in cycle analysis ([#40948](https://github.com/angular/angular/issues/40948)) ([532ae73](https://github.com/angular/angular/commit/532ae73738ded1764209072c4c1b17553d18f009))
* **compiler-cli:** detect semantic changes and their effect on an incremental rebuild ([#40947](https://github.com/angular/angular/issues/40947)) ([e35ecea](https://github.com/angular/angular/commit/e35eceabac6aef10a0505bcb08572ab0bafa70da)), closes [#34867](https://github.com/angular/angular/issues/34867) [#40635](https://github.com/angular/angular/issues/40635) [#40728](https://github.com/angular/angular/issues/40728)
* **compiler-cli:** ensure module resolution cache is reused for type-check program ([#39693](https://github.com/angular/angular/issues/39693)) ([16f90ca](https://github.com/angular/angular/commit/16f90cac4b78d8a9207ecbbcf515518bc01cb7b2))
* **compiler-cli:** use bound symbol in import graph in favor of module resolution ([#40948](https://github.com/angular/angular/issues/40948)) ([2035b15](https://github.com/angular/angular/commit/2035b15d7a35418ead6347c4e2cc0d9816a643d9))
# 12.0.0-next.3 (2021-03-03)
### Bug Fixes
* **animations:** cleanup DOM elements when the root view is removed ([#41001](https://github.com/angular/angular/issues/41001)) ([a31da48](https://github.com/angular/angular/commit/a31da4850788800ba9735d617e7e3bb621a79c93))
* **common:** allow number or boolean as http params ([#40663](https://github.com/angular/angular/issues/40663)) ([91cdc11](https://github.com/angular/angular/commit/91cdc11aa0347d1b71f2f732e00af9c3ff8078fc)), closes [#23856](https://github.com/angular/angular/issues/23856)
* **core:** remove duplicated EMPTY_ARRAY constant ([#40991](https://github.com/angular/angular/issues/40991)) ([e12d9de](https://github.com/angular/angular/commit/e12d9dec64bc3d02e58f8f85a65a939394fb9531))
* **language-service:** Add plugin option to force strictTemplates ([#41062](https://github.com/angular/angular/issues/41062)) ([e9e7c33](https://github.com/angular/angular/commit/e9e7c33f3c170648ec8c86d859980c7fe78fba39))
* **language-service:** use single entry point for Ivy and View Engine ([#40967](https://github.com/angular/angular/issues/40967)) ([e986a97](https://github.com/angular/angular/commit/e986a9787b7787c3cffef69d06a2e7e1228e3f40))
### Features
* **animations:** add support for disabling animations through BrowserAnimationsModule.withConfig ([#40731](https://github.com/angular/angular/issues/40731)) ([29d8a0a](https://github.com/angular/angular/commit/29d8a0ab09a13600405343037079d151c3a04095))
* **router:** Add more fine-tuned control in `routerLinkActiveOptions` ([#40303](https://github.com/angular/angular/issues/40303)) ([6c05c80](https://github.com/angular/angular/commit/6c05c80f19bc84189cc1d2f2e029f6f13d60dc18)), closes [#13205](https://github.com/angular/angular/issues/13205)
### BREAKING CHANGES
* **common:** The methods of the `HttpParams` class now accept `string | number | boolean`
instead of `string` for the value of a parameter.
If you extended this class in your application,
you'll have to update the signatures of your methods to reflect these changes.
* **router:** The type of the `RouterLinkActive.routerLinkActiveOptions` input was
expanded to allow more fine-tuned control. Code that previously read
this property may need to be updated to account for the new type.
## 11.2.4 (2021-03-03)
### Bug Fixes
* **compiler:** allow binding to autocomplete property on select and textarea elements ([#40928](https://github.com/angular/angular/issues/40928)) ([20fb638](https://github.com/angular/angular/commit/20fb63812ce4d750fe5d71fe7aa70ed5ac9b07c7)), closes [#39490](https://github.com/angular/angular/issues/39490)
* **compiler:** ensure JIT compilation of ɵɵngDeclarePipe() works ([#40929](https://github.com/angular/angular/issues/40929)) ([55eb7b5](https://github.com/angular/angular/commit/55eb7b5681ef4ef921dc690a2a1f0621aaf56e4e))
* **compiler:** recover from an incomplete open tag at the end of a file ([#41054](https://github.com/angular/angular/issues/41054)) ([c675acd](https://github.com/angular/angular/commit/c675acda7f42dba4709d1a7a898313f86ae7ad8e))
* **compiler-cli:** `readConfiguration` existing options should override options in tsconfig ([#40694](https://github.com/angular/angular/issues/40694)) ([#41036](https://github.com/angular/angular/issues/41036)) ([2f3e2df](https://github.com/angular/angular/commit/2f3e2dff33c298cf5824372fe85c1de781c6f1af))
* **compiler-cli:** ensure ngcc can handle wildcard base-paths ([#41033](https://github.com/angular/angular/issues/41033)) ([27d55f6](https://github.com/angular/angular/commit/27d55f6730b923f789798639f8def7f3ce8ad5f4)), closes [#41014](https://github.com/angular/angular/issues/41014)
* **compiler-cli:** extend `angularCompilerOptions` in tsconfig from node ([#40694](https://github.com/angular/angular/issues/40694)) ([#41036](https://github.com/angular/angular/issues/41036)) ([e3ccd56](https://github.com/angular/angular/commit/e3ccd56567fdc7ca00f3a0c7c7e5033b2bece865)), closes [/github.com/microsoft/TypeScript/blob/b346f5764e4d500ebdeff7086e43690ea533a305/src/compiler/commandLineParser.ts#L2603-L2628](https://github.com//github.com/microsoft/TypeScript/blob/b346f5764e4d500ebdeff7086e43690ea533a305/src/compiler/commandLineParser.ts/issues/L2603-L2628) [#36715](https://github.com/angular/angular/issues/36715)
* **language-service:** Add plugin option to force strictTemplates ([#41063](https://github.com/angular/angular/issues/41063)) ([95f748c](https://github.com/angular/angular/commit/95f748c238490edb983df80c8fd2b67f0c6ef24f))
* **language-service:** Always attempt HTML AST to template AST conversion for LS ([#41068](https://github.com/angular/angular/issues/41068)) ([6dd5497](https://github.com/angular/angular/commit/6dd54972d4efa968b84ecf71ac2b306d500a2ed7)), closes [angular/vscode-ng-language-service#1140](https://github.com/angular/vscode-ng-language-service/issues/1140)
* **language-service:** can't provide the Input and Output custom binding property name ([#41005](https://github.com/angular/angular/issues/41005)) ([1b1b65e](https://github.com/angular/angular/commit/1b1b65e1ea4c0b2cde6a267db2ef070395cc09d8))
* **language-service:** don't show external template diagnostics in ts files ([#41070](https://github.com/angular/angular/issues/41070)) ([9322e6a](https://github.com/angular/angular/commit/9322e6a076228cc5ea212f3cbe3bbdb6bb8cea82)), closes [#41032](https://github.com/angular/angular/issues/41032)
* **language-service:** only provide template results on reference requests ([#41041](https://github.com/angular/angular/issues/41041)) ([ef87953](https://github.com/angular/angular/commit/ef87953bc62d43254e3a532b2fe8f16e186f2612))
* **language-service:** provide element completions after open tag < ([#41068](https://github.com/angular/angular/issues/41068)) ([f09e7ab](https://github.com/angular/angular/commit/f09e7abdf0625a565bd890b5aa38274b59d58161)), closes [angular/vscode-ng-language-service#1140](https://github.com/angular/vscode-ng-language-service/issues/1140)
* **ngcc:** do not fail hard when a format-path points to a non-existing or empty file ([#40985](https://github.com/angular/angular/issues/40985)) ([06ff277](https://github.com/angular/angular/commit/06ff277b605760fc0c43346f4997fc5fdfa2ee24)), closes [/github.com/angular/angular/blob/3077c9a1f89c5bd75fb96c16e/packages/compiler-cli/ngcc/src/main.ts#L124](https://github.com//github.com/angular/angular/blob/3077c9a1f89c5bd75fb96c16e/packages/compiler-cli/ngcc/src/main.ts/issues/L124) [#40965](https://github.com/angular/angular/issues/40965)
# 12.0.0-next.2 (2021-02-24)
### Bug Fixes
* **common:** avoid mutating context object in NgTemplateOutlet ([#40360](https://github.com/angular/angular/issues/40360)) ([d3705b3](https://github.com/angular/angular/commit/d3705b3284113f752ee05e9f0d2f6e75c723ea5b)), closes [#24515](https://github.com/angular/angular/issues/24515)
* **core:** allow EmbeddedViewRef context to be updated ([#40360](https://github.com/angular/angular/issues/40360)) ([a3e1719](https://github.com/angular/angular/commit/a3e17190e7e7e0329ed3643299c24d5fd510b7d6)), closes [#24515](https://github.com/angular/angular/issues/24515)
### Features
* **core:** drop support for zone.js 0.10.x ([#40823](https://github.com/angular/angular/issues/40823)) ([aaf9b31](https://github.com/angular/angular/commit/aaf9b31fb472826c279a720cc875007987f9aa6f)), closes [angular/angular-cli#20034](https://github.com/angular/angular-cli/issues/20034)
* **core:** support APP_INITIALIZER work with observable ([#33222](https://github.com/angular/angular/issues/33222)) ([ca17ac5](https://github.com/angular/angular/commit/ca17ac523cc2ed8046931c86a2c12d97fb6796ca)), closes [#15088](https://github.com/angular/angular/issues/15088)
* **router:** Allow for custom router outlet implementations ([#40827](https://github.com/angular/angular/issues/40827)) ([a82fddf](https://github.com/angular/angular/commit/a82fddf1ce6166e0f697e429370eade114094670))
### BREAKING CHANGES
* **core:** Minimum supported `zone.js` version is `0.11.4`
## 11.2.3 (2021-02-24)
### Performance Improvements
* **language-service:** Skip Angular analysis when quick info requested outside a template ([#40956](https://github.com/angular/angular/issues/40956)) ([0dd1fac](https://github.com/angular/angular/commit/0dd1facc3292aec6b0ca6fd65fc73efae2c194fc))
## 11.2.2 (2021-02-22)
### Bug Fixes
* **animations:** error when setting position before starting animation ([#28255](https://github.com/angular/angular/issues/28255)) ([f1c64b3](https://github.com/angular/angular/commit/f1c64b3f38ed38c2d0c7369f6ee5dea5bbc24cf3))
* **http:** emit error on XMLHttpRequest abort event ([#40786](https://github.com/angular/angular/issues/40786)) ([4a32579](https://github.com/angular/angular/commit/4a32579a4d660b774c380314033e15787dfe4631)), closes [#22324](https://github.com/angular/angular/issues/22324)
* **http:** ignore question mark when params are parsed ([#40610](https://github.com/angular/angular/issues/40610)) ([3b884ed](https://github.com/angular/angular/commit/3b884ed1fc1b1c89c1da9aa6ee0e6b21ff4aa024)), closes [#28722](https://github.com/angular/angular/issues/28722)
* **platform-browser:** ensure that Hammer loader is called only once ([#40911](https://github.com/angular/angular/issues/40911)) ([f8055f6](https://github.com/angular/angular/commit/f8055f6fb839e5817a83c484d96afb77bae0aed5)), closes [#25995](https://github.com/angular/angular/issues/25995)
### Performance Improvements
* **core:** use `ngDevMode` to tree-shake warning ([#40876](https://github.com/angular/angular/issues/40876)) ([c8a2e3a](https://github.com/angular/angular/commit/c8a2e3ae1c12cadd505cdd5a12e26a7231682415))
* **language-service:** short-circuit LS operations when we know there is no Angular information to provide ([#40946](https://github.com/angular/angular/issues/40946)) ([73a3ff1](https://github.com/angular/angular/commit/73a3ff11cbca21ec0a64e064c7968c93c0bd8e0a))
<a name="12.0.0-next.1"></a>
# 12.0.0-next.1 (2021-02-17)
### Bug Fixes
* **compiler-cli:** `readConfiguration` existing options should override options in tsconfig ([#40694](https://github.com/angular/angular/issues/40694)) ([b7c4d07](https://github.com/angular/angular/commit/b7c4d07e81277f7aed566e443d1d4e1395c5a2f4))
* **compiler-cli:** extend `angularCompilerOptions` in tsconfig from node ([#40694](https://github.com/angular/angular/issues/40694)) ([5eb1954](https://github.com/angular/angular/commit/5eb195416bf73f2fa59de52531724d8d19392975)), closes [#36715](https://github.com/angular/angular/issues/36715)
### Features
* **common:** support ICU standard "stand alone day of week" with `DatePipe` ([#40766](https://github.com/angular/angular/issues/40766)) ([c56ecab](https://github.com/angular/angular/commit/c56ecab515c28d2ad45c630080bfbf549675528a)), closes [#26922](https://github.com/angular/angular/issues/26922)
* **forms:** add `emitEvent` option for AbstractControl-based class methods ([#31031](https://github.com/angular/angular/issues/31031)) ([4ec045e](https://github.com/angular/angular/commit/4ec045e12b7614b901d4ef643988b86f09dfeee5)), closes [#29662](https://github.com/angular/angular/issues/29662)
* **platform-server:** allow shimming the global env sooner ([#40559](https://github.com/angular/angular/issues/40559)) ([43ecf8a](https://github.com/angular/angular/commit/43ecf8a77bc7e92d3c635b450de904732e938e64)), closes [#24551](https://github.com/angular/angular/issues/24551) [#39950](https://github.com/angular/angular/issues/39950) [#39950](https://github.com/angular/angular/issues/39950)
### BREAKING CHANGES
* **forms:** The `emitEvent` option was added to the following `FormArray` and `FormGroup` methods:
* FormGroup.addControl
* FormGroup.removeControl
* FormGroup.setControl
* FormArray.push
* FormArray.insert
* FormArray.removeAt
* FormArray.setControl
* FormArray.clear
If your app has custom classes that extend `FormArray` or `FormGroup` classes and override the
above-mentioned methods, you may need to update your implementation to take the new options into
account and make sure that overrides are compatible from a types perspective.
<a name="11.2.1"></a>
## 11.2.1 (2021-02-17)
### Bug Fixes
* **compiler:** handle `:host-context` and `:host` in the same selector ([#40494](https://github.com/angular/angular/issues/40494)) ([ab8ea87](https://github.com/angular/angular/commit/ab8ea8707842b98b8154f5cbe942b4b24724b6ca)), closes [#14349](https://github.com/angular/angular/issues/14349)
* **compiler:** support multiple `:host-context()` selectors ([#40494](https://github.com/angular/angular/issues/40494)) ([c20e304](https://github.com/angular/angular/commit/c20e3047a58ce2404551c0b51d539e77687e7283)), closes [#19199](https://github.com/angular/angular/issues/19199)
* **compiler:** support multiple selectors in `:host-context()` ([#40494](https://github.com/angular/angular/issues/40494)) ([fb0ce21](https://github.com/angular/angular/commit/fb0ce2178add49f204486c41ef94936f0f178086))
* **compiler-cli:** set TS original node on imported namespace identifiers ([#40711](https://github.com/angular/angular/issues/40711)) ([87ac052](https://github.com/angular/angular/commit/87ac05290ac12ccca10580d10d092d747dae9b40))
* **core:** address Trusted Types bug in Chrome 83 ([#40815](https://github.com/angular/angular/issues/40815)) ([b5f2070](https://github.com/angular/angular/commit/b5f20700c2b9c5edebbfeac8c656f290e4d5d7ea))
* **http:** complete the request on timeout ([#40771](https://github.com/angular/angular/issues/40771)) ([a2a5b4a](https://github.com/angular/angular/commit/a2a5b4add5e68cebe89a4d2b6eff2d75e4cd23c7))
* **router:** fix load interaction of navigation and preload strategies ([#40389](https://github.com/angular/angular/issues/40389)) ([4906bf6](https://github.com/angular/angular/commit/4906bf6a50f307fb69080d276c3b91a60ba7fbae)), closes [#26557](https://github.com/angular/angular/issues/26557) [#22842](https://github.com/angular/angular/issues/22842) [#26557](https://github.com/angular/angular/issues/26557) [#26557](https://github.com/angular/angular/issues/26557) [#22842](https://github.com/angular/angular/issues/22842) [#26557](https://github.com/angular/angular/issues/26557)
* **router:** fix load interaction of navigation and preload strategies ([#40389](https://github.com/angular/angular/issues/40389)) ([bba1981](https://github.com/angular/angular/commit/bba1981c6e1963e5cd1f2c704bb656ca8fcec531)), closes [#26557](https://github.com/angular/angular/issues/26557) [#22842](https://github.com/angular/angular/issues/22842) [#26557](https://github.com/angular/angular/issues/26557) [#26557](https://github.com/angular/angular/issues/26557) [#22842](https://github.com/angular/angular/issues/22842) [#26557](https://github.com/angular/angular/issues/26557)
<a name="12.0.0-next.0"></a>
# 12.0.0-next.0 (2021-02-10)
### Bug Fixes
* **bazel:** update build tooling for latest changes in rules_nodejs ([#40710](https://github.com/angular/angular/issues/40710)) ([696f7bc](https://github.com/angular/angular/commit/696f7bc))
* **bazel:** update integration test to use rules_nodejs@3.1.0 ([#40710](https://github.com/angular/angular/issues/40710)) ([34de89a](https://github.com/angular/angular/commit/34de89a))
* **bazel:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([2c90391](https://github.com/angular/angular/commit/2c90391))
* **benchpress:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([e721a5d](https://github.com/angular/angular/commit/e721a5d))
* **compiler:** support multiple `:host-context()` selectors ([#40494](https://github.com/angular/angular/issues/40494)) ([07b7af3](https://github.com/angular/angular/commit/07b7af3)), closes [#19199](https://github.com/angular/angular/issues/19199)
* **compiler:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([f728490](https://github.com/angular/angular/commit/f728490))
* **compiler-cli:** update ngcc integration tests for latest changes in rules_nodejs ([#40710](https://github.com/angular/angular/issues/40710)) ([d7f5755](https://github.com/angular/angular/commit/d7f5755))
* **compiler-cli:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([b75d7cb](https://github.com/angular/angular/commit/b75d7cb))
* **core:** make DefaultIterableDiffer keep the order of duplicates ([#23941](https://github.com/angular/angular/issues/23941)) ([a826926](https://github.com/angular/angular/commit/a826926)), closes [#23815](https://github.com/angular/angular/issues/23815)
* **core:** NgZone coaleascing options should trigger onStable correctly ([#40540](https://github.com/angular/angular/issues/40540)) ([22f9e45](https://github.com/angular/angular/commit/22f9e45))
* **elements:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([efd4149](https://github.com/angular/angular/commit/efd4149))
* **http:** complete the request on timeout ([#39807](https://github.com/angular/angular/issues/39807)) ([61a0b6d](https://github.com/angular/angular/commit/61a0b6d)), closes [#26453](https://github.com/angular/angular/issues/26453)
* **http:** emit error on XMLHttpRequest abort event ([#40767](https://github.com/angular/angular/issues/40767)) ([3897265](https://github.com/angular/angular/commit/3897265)), closes [#22324](https://github.com/angular/angular/issues/22324)
* **localize:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([4b469c9](https://github.com/angular/angular/commit/4b469c9))
* **platform-browser:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([7ecfd2d](https://github.com/angular/angular/commit/7ecfd2d))
* **router:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([350dada](https://github.com/angular/angular/commit/350dada))
* **service-worker:** update type castings for JSON.parse usage ([#40710](https://github.com/angular/angular/issues/40710)) ([4f7ff96](https://github.com/angular/angular/commit/4f7ff96))
### Features
* **common:** implement `appendAll()` method on `HttpParams` ([#20930](https://github.com/angular/angular/issues/20930)) ([575a2d1](https://github.com/angular/angular/commit/575a2d1)), closes [#20798](https://github.com/angular/angular/issues/20798)
* **forms:** introduce min and max validators ([#39063](https://github.com/angular/angular/issues/39063)) ([8fb83ea](https://github.com/angular/angular/commit/8fb83ea)), closes [#16352](https://github.com/angular/angular/issues/16352)
* **http:** expose a list of human-readable http status codes ([#23548](https://github.com/angular/angular/issues/23548)) ([6fe3a1d](https://github.com/angular/angular/commit/6fe3a1d)), closes [#23543](https://github.com/angular/angular/issues/23543)
* **language-service:** add command for getting components for a template file ([#40655](https://github.com/angular/angular/issues/40655)) ([5cde4ad](https://github.com/angular/angular/commit/5cde4ad))
* **language-service:** Add diagnostics to suggest turning on strict mode ([#40423](https://github.com/angular/angular/issues/40423)) ([ecae75f](https://github.com/angular/angular/commit/ecae75f))
* **language-service:** Implement `getRenameInfo` ([#40439](https://github.com/angular/angular/issues/40439)) ([4e8198d](https://github.com/angular/angular/commit/4e8198d))
* **language-service:** initial implementation for `findRenameLocations` ([#40140](https://github.com/angular/angular/issues/40140)) ([9a5ac47](https://github.com/angular/angular/commit/9a5ac47))
* **language-service:** view template typecheck block ([#39974](https://github.com/angular/angular/issues/39974)) ([d482f5c](https://github.com/angular/angular/commit/d482f5c))
### BREAKING CHANGES
* **forms:** Previously `min` and `max` attributes defined on the `<input type="number">`
were ignored by Forms module. Now presence of these attributes would
trigger min/max validation logic (in case `formControl`, `formControlName`
or `ngModel` directives are also present on a given input) and
corresponding form control status would reflect that.
<a name="11.2.0"></a>
# 11.2.0 (2021-02-10)
### Bug Fixes
* **animations:** properly track listeners for a removed element ([#40712](https://github.com/angular/angular/issues/40712)) ([74cb759](https://github.com/angular/angular/commit/74cb759))
* **common:** date is not correctly formatted when year is between 0 and 99 ([#40448](https://github.com/angular/angular/issues/40448)) ([bf85f04](https://github.com/angular/angular/commit/bf85f04)), closes [#40377](https://github.com/angular/angular/issues/40377)
* **compiler:** include parenthesis in expression source spans ([#40740](https://github.com/angular/angular/issues/40740)) ([e99c4e2](https://github.com/angular/angular/commit/e99c4e2)), closes [#40721](https://github.com/angular/angular/issues/40721)
* **compiler:** throw error for duplicate template references ([#40538](https://github.com/angular/angular/issues/40538)) ([7e0ff8c](https://github.com/angular/angular/commit/7e0ff8c)), closes [#40536](https://github.com/angular/angular/issues/40536)
* **compiler-cli:** don't crash when we can't resolve a resource ([#40660](https://github.com/angular/angular/issues/40660)) ([95446fb](https://github.com/angular/angular/commit/95446fb)), closes [angular/vscode-ng-language-service#1079](https://github.com/angular/vscode-ng-language-service/issues/1079)
* **core:** properly move embedded views of dynamic component's projectable nodes ([#37167](https://github.com/angular/angular/issues/37167)) ([9ae21ee](https://github.com/angular/angular/commit/9ae21ee)), closes [#37120](https://github.com/angular/angular/issues/37120)
* **localize:** improve invalid syntax in extraction error message ([#40724](https://github.com/angular/angular/issues/40724)) ([24600ff](https://github.com/angular/angular/commit/24600ff))
* **localize:** support downleveled inlined helper localize calls ([#40754](https://github.com/angular/angular/issues/40754)) ([415ad8d](https://github.com/angular/angular/commit/415ad8d)), closes [#40702](https://github.com/angular/angular/issues/40702)
* **router:** stop emitting to event observable on destroy ([#40638](https://github.com/angular/angular/issues/40638)) ([737bc7a](https://github.com/angular/angular/commit/737bc7a)), closes [#40502](https://github.com/angular/angular/issues/40502)
<a name="11.2.0-rc.0"></a>
# 11.2.0-rc.0 (2021-02-03)
This release contains the same set the of changes as 11.2.0-next.1.
<a name="11.2.0-next.1"></a>
# 11.2.0-next.1 (2021-02-03)
### Bug Fixes
* **common:** parse `YYYY-MM` strings as UTC dates ([#40620](https://github.com/angular/angular/issues/40620)) ([4c5f18d](https://github.com/angular/angular/commit/4c5f18d)), closes [#33944](https://github.com/angular/angular/issues/33944)
* **common:** parse `YYYY` strings as UTC dates ([#40629](https://github.com/angular/angular/issues/40629)) ([46d4326](https://github.com/angular/angular/commit/46d4326)), closes [#33944](https://github.com/angular/angular/issues/33944) [#40620](https://github.com/angular/angular/issues/40620)
* **compiler:** Don't set expression text to synthetic `$implicit` when empty ([#40583](https://github.com/angular/angular/issues/40583)) ([9d396f8](https://github.com/angular/angular/commit/9d396f8))
* **compiler:** exclude trailing whitespace from element source spans ([#40513](https://github.com/angular/angular/issues/40513)) ([7a6d1e2](https://github.com/angular/angular/commit/7a6d1e2)), closes [#39148](https://github.com/angular/angular/issues/39148)
* **compiler-cli:** preserve user line endings in diagnostic template parse ([#40597](https://github.com/angular/angular/issues/40597)) ([caafac2](https://github.com/angular/angular/commit/caafac2))
* **core:** ensure the type `T` of `EventEmitter<T>` can be inferred ([#40644](https://github.com/angular/angular/issues/40644)) ([5c54767](https://github.com/angular/angular/commit/5c54767)), closes [#40637](https://github.com/angular/angular/issues/40637)
* **core:** remove duplicated EMPTY_ARRAY constant ([#40587](https://github.com/angular/angular/issues/40587)) ([cabe8be](https://github.com/angular/angular/commit/cabe8be))
### Performance Improvements
* **language-service:** update NgCompiler via resource-only path when able ([#40585](https://github.com/angular/angular/issues/40585)) ([07a3d7a](https://github.com/angular/angular/commit/07a3d7a))
<a name="11.1.2"></a>
## 11.1.2 (2021-02-03)
### Bug Fixes
* **common:** parse `YYYY-MM` strings as UTC dates ([#40620](https://github.com/angular/angular/issues/40620)) ([cafd4f5](https://github.com/angular/angular/commit/cafd4f5)), closes [#33944](https://github.com/angular/angular/issues/33944)
* **common:** parse `YYYY` strings as UTC dates ([#40629](https://github.com/angular/angular/issues/40629)) ([b823049](https://github.com/angular/angular/commit/b823049)), closes [#33944](https://github.com/angular/angular/issues/33944) [#40620](https://github.com/angular/angular/issues/40620)
* **compiler:** Don't set expression text to synthetic `$implicit` when empty ([#40583](https://github.com/angular/angular/issues/40583)) ([5dab521](https://github.com/angular/angular/commit/5dab521))
* **compiler:** exclude trailing whitespace from element source spans ([#40513](https://github.com/angular/angular/issues/40513)) ([726ec88](https://github.com/angular/angular/commit/726ec88)), closes [#39148](https://github.com/angular/angular/issues/39148)
* **compiler-cli:** preserve user line endings in diagnostic template parse ([#40597](https://github.com/angular/angular/issues/40597)) ([00eeebf](https://github.com/angular/angular/commit/00eeebf))
* **core:** ensure the type `T` of `EventEmitter<T>` can be inferred ([#40644](https://github.com/angular/angular/issues/40644)) ([8f9ba8e](https://github.com/angular/angular/commit/8f9ba8e)), closes [#40637](https://github.com/angular/angular/issues/40637)
* **core:** remove duplicated EMPTY_ARRAY constant ([#40587](https://github.com/angular/angular/issues/40587)) ([abdf25c](https://github.com/angular/angular/commit/abdf25c))
### Performance Improvements
* **language-service:** update NgCompiler via resource-only path when able ([#40680](https://github.com/angular/angular/issues/40680)) ([0047eb3](https://github.com/angular/angular/commit/0047eb3))
<a name="11.1.1"></a>
## 11.1.1 (2021-01-27)
### Bug Fixes
* **compiler-cli:** handle pseudo cycles in inline source-maps ([#40435](https://github.com/angular/angular/issues/40435)) ([566206b](https://github.com/angular/angular/commit/566206b)), closes [#40408](https://github.com/angular/angular/issues/40408)
* **compiler-cli:** use `Map` rather than `object` for map of partial linkers ([#40563](https://github.com/angular/angular/issues/40563)) ([33e0f2b](https://github.com/angular/angular/commit/33e0f2b))
* **core:** fix possible XSS attack in development through SSR ([#40525](https://github.com/angular/angular/issues/40525)) ([97ec6e4](https://github.com/angular/angular/commit/97ec6e4))
* **core:** improve injector debug information in `ngDevMode` ([#40476](https://github.com/angular/angular/issues/40476)) ([4bb38c9](https://github.com/angular/angular/commit/4bb38c9))
* **forms:** allow `patchValue()` method of `FormGroup` and `FormArray` classes to skip `null` values ([#40534](https://github.com/angular/angular/issues/40534)) ([2fab148](https://github.com/angular/angular/commit/2fab148)), closes [#36672](https://github.com/angular/angular/issues/36672) [#21021](https://github.com/angular/angular/issues/21021)
* **forms:** properly cleanup in cases when FormControlName has no CVA ([#40526](https://github.com/angular/angular/issues/40526)) ([72fc6aa](https://github.com/angular/angular/commit/72fc6aa)), closes [#39235](https://github.com/angular/angular/issues/39235) [#40521](https://github.com/angular/angular/issues/40521)
* **language-service:** implement realpath to resolve symlinks ([#40593](https://github.com/angular/angular/issues/40593)) ([77efc27](https://github.com/angular/angular/commit/77efc27))
* **language-service:** recognize incomplete pipe bindings with whitespace ([#40346](https://github.com/angular/angular/issues/40346)) ([d88f18e](https://github.com/angular/angular/commit/d88f18e))
* **localize:** include meaning in generated ARB files ([#40546](https://github.com/angular/angular/issues/40546)) ([5661298](https://github.com/angular/angular/commit/5661298)), closes [#40506](https://github.com/angular/angular/issues/40506)
* **router:** always stringify matrix parameters ([#25095](https://github.com/angular/angular/issues/25095)) ([a8a27ef](https://github.com/angular/angular/commit/a8a27ef)), closes [#23165](https://github.com/angular/angular/issues/23165)
* **router:** Fix occasional error when creating url tree in IE 11 and Edge ([#40488](https://github.com/angular/angular/issues/40488)) ([69fd942](https://github.com/angular/angular/commit/69fd942))
* **service-worker:** handle error with console.error ([#40236](https://github.com/angular/angular/issues/40236)) ([37710b9](https://github.com/angular/angular/commit/37710b9))
### Features
* **language-service:** Add diagnostics to suggest turning on strict mode ([#40568](https://github.com/angular/angular/issues/40568)) ([defa627](https://github.com/angular/angular/commit/defa627))
### Performance Improvements
* **compiler-cli:** introduce fast path for resource-only updates ([#40561](https://github.com/angular/angular/issues/40561)) ([156103c](https://github.com/angular/angular/commit/156103c))
* **core:** simplify bloom bucket computation ([#40489](https://github.com/angular/angular/issues/40489)) ([106734a](https://github.com/angular/angular/commit/106734a))
<a name="11.1.0"></a>
# 11.1.0 (2021-01-20)
### Bug Fixes
* **animations:** getAnimationStyle causes exceptions in older browsers ([#29709](https://github.com/angular/angular/issues/29709)) ([66d863f](https://github.com/angular/angular/commit/66d863f))
* **animations:** replace copy of query selector node-list from "spread" to "for" ([#39646](https://github.com/angular/angular/issues/39646)) ([bfa197f](https://github.com/angular/angular/commit/bfa197f)), closes [#38551](https://github.com/angular/angular/issues/38551)
* **common:** add `HttpParamsOptions` to the public api ([#35829](https://github.com/angular/angular/issues/35829)) ([b33b89d](https://github.com/angular/angular/commit/b33b89d)), closes [#20276](https://github.com/angular/angular/issues/20276)
* **common:** Prefer to use pageXOffset / pageYOffset instance of scrollX / scrollY ([#28262](https://github.com/angular/angular/issues/28262)) ([b1d300d](https://github.com/angular/angular/commit/b1d300d))
* **compiler:** correct the `KeySpan` for animation events and properties ([#40347](https://github.com/angular/angular/issues/40347)) ([524415e](https://github.com/angular/angular/commit/524415e))
* **compiler:** incorrectly interpreting some HostBinding names ([#40233](https://github.com/angular/angular/issues/40233)) ([1045465](https://github.com/angular/angular/commit/1045465)), closes [#40220](https://github.com/angular/angular/issues/40220) [#40230](https://github.com/angular/angular/issues/40230) [#18698](https://github.com/angular/angular/issues/18698)
* **compiler:** recover event parse when animation event name is empty ([#39925](https://github.com/angular/angular/issues/39925)) ([15b15be](https://github.com/angular/angular/commit/15b15be))
* **compiler:** avoid duplicate i18n blocks for i18n attrs on elements with structural directives ([#40077](https://github.com/angular/angular/issues/40077)) ([caa4666](https://github.com/angular/angular/commit/caa4666)), closes [#39942](https://github.com/angular/angular/issues/39942)
* **compiler:** handle strings inside bindings that contain binding characters ([#39826](https://github.com/angular/angular/issues/39826)) ([dc6d40e](https://github.com/angular/angular/commit/dc6d40e)), closes [#39601](https://github.com/angular/angular/issues/39601)
* **compiler:** disallow i18n of security-sensitive attributes ([#39554](https://github.com/angular/angular/issues/39554)) ([c8a99ef](https://github.com/angular/angular/commit/c8a99ef))
* **compiler:** ensure that placeholders have the correct sourceSpan ([#39717](https://github.com/angular/angular/issues/39717)) ([0462a61](https://github.com/angular/angular/commit/0462a61)), closes [#39671](https://github.com/angular/angular/issues/39671)
* **compiler:** only promote Trusted Types to constants when necessary ([#39554](https://github.com/angular/angular/issues/39554)) ([4916870](https://github.com/angular/angular/commit/4916870))
* **compiler:** report better error on interpolation in an expression ([#30300](https://github.com/angular/angular/issues/30300)) ([94e790d](https://github.com/angular/angular/commit/94e790d))
* **compiler-cli:** do not duplicate repeated source-files in rendered source-maps ([#40237](https://github.com/angular/angular/issues/40237)) ([3158858](https://github.com/angular/angular/commit/3158858))
* **compiler-cli:** remove classes in .d.ts files from provider checks ([#40118](https://github.com/angular/angular/issues/40118)) ([973bb40](https://github.com/angular/angular/commit/973bb40))
* **animations:** implement getPosition in browser animation builder ([#39983](https://github.com/angular/angular/issues/39983)) ([ca08625](https://github.com/angular/angular/commit/ca08625))
* **compiler-cli:** correct incremental behavior even with broken imports ([#39923](https://github.com/angular/angular/issues/39923)) ([c7c5b2f](https://github.com/angular/angular/commit/c7c5b2f))
* **compiler-cli:** remove the concept of an errored trait ([#39923](https://github.com/angular/angular/issues/39923)) ([6d42954](https://github.com/angular/angular/commit/6d42954))
* **compiler-cli:** track poisoned scopes with a flag ([#39923](https://github.com/angular/angular/issues/39923)) ([0823622](https://github.com/angular/angular/commit/0823622))
* **compiler-cli:** report error when a reference target is missing instead of crashing ([#39805](https://github.com/angular/angular/issues/39805)) ([453b32f](https://github.com/angular/angular/commit/453b32f)), closes [#38618](https://github.com/angular/angular/issues/38618) [#39744](https://github.com/angular/angular/issues/39744)
* **core:** fix possible XSS attack in development through SSR. ([#40136](https://github.com/angular/angular/issues/40136)) ([47d9b6d](https://github.com/angular/angular/commit/47d9b6d))
* **core:** set `ngDevMode` to `false` when calling `enableProdMode()` ([#40124](https://github.com/angular/angular/issues/40124)) ([70b4816](https://github.com/angular/angular/commit/70b4816))
* **core:** Allow passing AbstractType to the inject function ([#37958](https://github.com/angular/angular/issues/37958)) ([a1b6ad0](https://github.com/angular/angular/commit/a1b6ad0))
* **core:** Ensure OnPush ancestors are marked dirty when events occur ([#39833](https://github.com/angular/angular/issues/39833)) ([68d4a74](https://github.com/angular/angular/commit/68d4a74)), closes [#39832](https://github.com/angular/angular/issues/39832)
* **core:** meta addTag() adds incorrect attribute for httpEquiv ([#32531](https://github.com/angular/angular/issues/32531)) ([ff0a90e](https://github.com/angular/angular/commit/ff0a90e))
* **core:** migration error if program contains files outside of the project ([#39790](https://github.com/angular/angular/issues/39790)) ([1a26f6d](https://github.com/angular/angular/commit/1a26f6d)), closes [#39778](https://github.com/angular/angular/issues/39778)
* **core:** not invoking object's toString when rendering to the DOM ([#39843](https://github.com/angular/angular/issues/39843)) ([11cd37f](https://github.com/angular/angular/commit/11cd37f)), closes [#38839](https://github.com/angular/angular/issues/38839)
* **core:** remove duplicated noop function ([#39761](https://github.com/angular/angular/issues/39761)) ([066126a](https://github.com/angular/angular/commit/066126a))
* **core:** support `Attribute` DI decorator in `deps` section of a token ([#37085](https://github.com/angular/angular/issues/37085)) ([f5cbf0b](https://github.com/angular/angular/commit/f5cbf0b)), closes [#36479](https://github.com/angular/angular/issues/36479)
* **core:** remove application from the testability registry when the root view is removed ([#39876](https://github.com/angular/angular/issues/39876)) ([df27027](https://github.com/angular/angular/commit/df27027)), closes [#22106](https://github.com/angular/angular/issues/22106)
* **core:** Support extending differs from root `NgModule` ([#39981](https://github.com/angular/angular/issues/39981)) ([5fc4508](https://github.com/angular/angular/commit/5fc4508)), closes [#25015](https://github.com/angular/angular/issues/25015) [#11309](https://github.com/angular/angular/issues/11309) [#18554](https://github.com/angular/angular/issues/18554)
* **core:** unsubscribe from the `onError` when the root view is removed ([#39940](https://github.com/angular/angular/issues/39940)) ([5a3a154](https://github.com/angular/angular/commit/5a3a154))
* **core:** `QueryList` should not fire changes if the underlying list did not change. ([#40091](https://github.com/angular/angular/issues/40091)) ([76f3633](https://github.com/angular/angular/commit/76f3633))
* **core:** fix fakeAsync() error messages ([#40442](https://github.com/angular/angular/issues/40442)) ([ad2b50b](https://github.com/angular/angular/commit/ad2b50b))
* **forms:** error if control is removed as a result of another one being reset ([#40462](https://github.com/angular/angular/issues/40462)) ([2c5ad5c](https://github.com/angular/angular/commit/2c5ad5c)), closes [#33401](https://github.com/angular/angular/issues/33401)
* **forms:** clean up connection between FormControl/FormGroup and corresponding directive instances ([#39235](https://github.com/angular/angular/issues/39235)) ([a384961](https://github.com/angular/angular/commit/a384961)), closes [#20007](https://github.com/angular/angular/issues/20007) [#37431](https://github.com/angular/angular/issues/37431) [#39590](https://github.com/angular/angular/issues/39590)
* **language-service:** fix go to definition for template variables and references ([#40455](https://github.com/angular/angular/issues/40455)) ([#40491](https://github.com/angular/angular/issues/40491)) ([3e134e4](https://github.com/angular/angular/commit/3e134e4))
* **language-service:** Paths on Windows should be normalized ([#40492](https://github.com/angular/angular/issues/40492)) ([b8e47e2](https://github.com/angular/angular/commit/b8e47e2)), closes [/github.com/angular/vscode-ng-language-service/blob/9fca9c66510974c26d5c21b31adb9fa39ac0a38a/server/src/session.ts#L594](https://github.com//github.com/angular/vscode-ng-language-service/blob/9fca9c66510974c26d5c21b31adb9fa39ac0a38a/server/src/session.ts/issues/L594)
* **language-service:** report non-template diagnostics ([#40331](https://github.com/angular/angular/issues/40331)) ([4db89f4](https://github.com/angular/angular/commit/4db89f4))
* **language-service:** diagnostic and definition should work for absolute url ([#40406](https://github.com/angular/angular/issues/40406)) ([625d2c2](https://github.com/angular/angular/commit/625d2c2))
* **language-service:** reinstate overridden compiler option after change ([#40364](https://github.com/angular/angular/issues/40364)) ([811cacc](https://github.com/angular/angular/commit/811cacc))
* **language-service:** Support 'find references' for two-way bindings ([#40185](https://github.com/angular/angular/issues/40185)) ([ebb7ac5](https://github.com/angular/angular/commit/ebb7ac5))
* **language-service:** Support 'go to definition' for two-way bindings ([#40185](https://github.com/angular/angular/issues/40185)) ([a9d8c22](https://github.com/angular/angular/commit/a9d8c22))
* **language-service:** Support completions of two-way bindings ([#40185](https://github.com/angular/angular/issues/40185)) ([7d74853](https://github.com/angular/angular/commit/7d74853))
* **language-service:** Do not include $event parameter in reference results ([#40158](https://github.com/angular/angular/issues/40158)) ([d466db8](https://github.com/angular/angular/commit/d466db8)), closes [#40157](https://github.com/angular/angular/issues/40157)
* **language-service:** include compilerOptions.rootDir in rootDirs ([#40243](https://github.com/angular/angular/issues/40243)) ([a62416c](https://github.com/angular/angular/commit/a62416c)), closes [angular/vscode-ng-language-service#1039](https://github.com/angular/vscode-ng-language-service/issues/1039)
* **language-service:** LSParseConfigHost.resolve should not concat abs paths ([#40242](https://github.com/angular/angular/issues/40242)) ([0264f76](https://github.com/angular/angular/commit/0264f76))
* **language-service:** return all typecheck files via getExternalFiles ([#40162](https://github.com/angular/angular/issues/40162)) ([183fb7e](https://github.com/angular/angular/commit/183fb7e))
* **language-service:** shorthand syntax with variables ([#40239](https://github.com/angular/angular/issues/40239)) ([12cb39c](https://github.com/angular/angular/commit/12cb39c))
* **language-service:** force compileNonExportedClasses: false in LS ([#40092](https://github.com/angular/angular/issues/40092)) ([028e4f7](https://github.com/angular/angular/commit/028e4f7))
* **language-service:** Prevent matching nodes after finding a keySpan ([#40047](https://github.com/angular/angular/issues/40047)) ([1bf1b68](https://github.com/angular/angular/commit/1bf1b68))
* **language-service:** do not return external template that does not exist ([#39898](https://github.com/angular/angular/issues/39898)) ([2b84882](https://github.com/angular/angular/commit/2b84882))
* **language-service:** do not treat file URIs as general URLs ([#39917](https://github.com/angular/angular/issues/39917)) ([3b70098](https://github.com/angular/angular/commit/3b70098))
* **localize:** ensure extracted messages are serialized in a consistent order ([#40192](https://github.com/angular/angular/issues/40192)) ([212245f](https://github.com/angular/angular/commit/212245f)), closes [#39262](https://github.com/angular/angular/issues/39262)
* **ngcc:** copy (and update) source-maps for unmodified source files ([#40429](https://github.com/angular/angular/issues/40429)) ([e2e3862](https://github.com/angular/angular/commit/e2e3862)), closes [#40358](https://github.com/angular/angular/issues/40358)
* **service-worker:** handle error with ErrorHandler ([#39990](https://github.com/angular/angular/issues/39990)) ([74e42cf](https://github.com/angular/angular/commit/74e42cf)), closes [#39913](https://github.com/angular/angular/issues/39913)
* **router:** correctly handle string command in outlets ([#39728](https://github.com/angular/angular/issues/39728)) ([c33a823](https://github.com/angular/angular/commit/c33a823)), closes [#18928](https://github.com/angular/angular/issues/18928)
* **router:** lazy loaded modules without RouterModule.forChild() won't cause an infinite loop ([#36605](https://github.com/angular/angular/issues/36605)) ([6675b6f](https://github.com/angular/angular/commit/6675b6f)), closes [#29164](https://github.com/angular/angular/issues/29164)
* **router:** remove duplicated getOutlet function ([#39764](https://github.com/angular/angular/issues/39764)) ([5fa7673](https://github.com/angular/angular/commit/5fa7673))
* **service-worker:** correctly handle failed cache-busted request ([#39786](https://github.com/angular/angular/issues/39786)) ([6046419](https://github.com/angular/angular/commit/6046419)), closes [#39775](https://github.com/angular/angular/issues/39775) [#39775](https://github.com/angular/angular/issues/39775)
* **upgrade:** avoid memory leak when removing downgraded components ([#39965](https://github.com/angular/angular/issues/39965)) ([6dc43a4](https://github.com/angular/angular/commit/6dc43a4)), closes [#26209](https://github.com/angular/angular/issues/26209) [#39911](https://github.com/angular/angular/issues/39911) [#39921](https://github.com/angular/angular/issues/39921)
* **upgrade:** fix HMR for hybrid applications ([#40045](https://github.com/angular/angular/issues/40045)) ([b4b21bd](https://github.com/angular/angular/commit/b4b21bd)), closes [#39935](https://github.com/angular/angular/issues/39935)
### Performance Improvements
* **animations:** use `ngDevMode` to tree-shake warning ([#39964](https://github.com/angular/angular/issues/39964)) ([9ebe423](https://github.com/angular/angular/commit/9ebe423))
* **common:** use `ngDevMode` to tree-shake warnings ([#39964](https://github.com/angular/angular/issues/39964)) ([f022efa](https://github.com/angular/angular/commit/f022efa))
* **core:** use `ngDevMode` to tree-shake `checkNoChanges` ([#39964](https://github.com/angular/angular/issues/39964)) ([e1fe9ec](https://github.com/angular/angular/commit/e1fe9ec))
* **core:** use `ngDevMode` to tree-shake warnings ([#39959](https://github.com/angular/angular/issues/39959)) ([8b0cccc](https://github.com/angular/angular/commit/8b0cccc))
* **core:** make DI decorators tree-shakable when used for `useFactory` deps config ([#40145](https://github.com/angular/angular/issues/40145)) ([0664d75](https://github.com/angular/angular/commit/0664d75)), closes [#40143](https://github.com/angular/angular/issues/40143)
* **forms:** use `ngDevMode` to tree-shake `_ngModelWarning` ([#39964](https://github.com/angular/angular/issues/39964)) ([7954c8d](https://github.com/angular/angular/commit/7954c8d))
* **ngcc:** do not copy files that have been processed ([#40429](https://github.com/angular/angular/issues/40429)) ([798aae4](https://github.com/angular/angular/commit/798aae4))
### Features
* **common:** allow any Subscribable in async pipe ([#39627](https://github.com/angular/angular/issues/39627)) ([c7f4abf](https://github.com/angular/angular/commit/c7f4abf))
* **compiler:** recover expression parsing in more malformed pipe cases ([#39437](https://github.com/angular/angular/issues/39437)) ([e336572](https://github.com/angular/angular/commit/e336572))
* **compiler:** support recovery of malformed property writes ([#39103](https://github.com/angular/angular/issues/39103)) ([e44e10b](https://github.com/angular/angular/commit/e44e10b))
* **compiler:** add schema for Trusted Types sinks ([#39554](https://github.com/angular/angular/issues/39554)) ([358c50e](https://github.com/angular/angular/commit/358c50e))
* **compiler:** support error reporting in I18nMetaVisitor ([#39554](https://github.com/angular/angular/issues/39554)) ([bb70a9b](https://github.com/angular/angular/commit/bb70a9b))
* **compiler:** support tagged template literals in code generator ([#39122](https://github.com/angular/angular/issues/39122)) ([ef89274](https://github.com/angular/angular/commit/ef89274))
* **compiler:** allow trailing comma in array literal ([#22277](https://github.com/angular/angular/issues/22277)) ([8d613c1](https://github.com/angular/angular/commit/8d613c1)), closes [#20773](https://github.com/angular/angular/issues/20773)
* **compiler-cli:** implement partial directive declaration linking ([#39518](https://github.com/angular/angular/issues/39518)) ([87e9cd6](https://github.com/angular/angular/commit/87e9cd6))
* **compiler-cli:** partial compilation of directives ([#39518](https://github.com/angular/angular/issues/39518)) ([8c0a92b](https://github.com/angular/angular/commit/8c0a92b))
* **compiler-cli:** add support for using TypeScript 4.1 ([#39571](https://github.com/angular/angular/issues/39571)) ([a7e7c21](https://github.com/angular/angular/commit/a7e7c21))
* **compiler-cli:** support for partial compilation of components ([#39707](https://github.com/angular/angular/issues/39707)) ([e75244e](https://github.com/angular/angular/commit/e75244e))
* **compiler-cli:** expose function to allow short-circuiting of linking ([#40137](https://github.com/angular/angular/issues/40137)) ([7dcf286](https://github.com/angular/angular/commit/7dcf286))
* **compiler-cli:** JIT compilation of component declarations ([#40127](https://github.com/angular/angular/issues/40127)) ([d4327d5](https://github.com/angular/angular/commit/d4327d5))
* **compiler-cli:** JIT compilation of directive declarations ([#40101](https://github.com/angular/angular/issues/40101)) ([9186f1f](https://github.com/angular/angular/commit/9186f1f))
* **core:** add shouldCoalesceRunChangeDetection option to coalesce change detections in the same event loop. ([#39422](https://github.com/angular/angular/issues/39422)) ([5e92d64](https://github.com/angular/angular/commit/5e92d64)), closes [#39348](https://github.com/angular/angular/issues/39348) [#39348](https://github.com/angular/angular/issues/39348)
* **core:** adds get method to QueryList ([#36907](https://github.com/angular/angular/issues/36907)) ([a965589](https://github.com/angular/angular/commit/a965589)), closes [#29467](https://github.com/angular/angular/issues/29467)
* **core:** Add schematic to fix invalid `Route` configs ([#40067](https://github.com/angular/angular/issues/40067)) ([805b4f9](https://github.com/angular/angular/commit/805b4f9))
* **language-service:** log Angular compiler options ([#40364](https://github.com/angular/angular/issues/40364)) ([6a9e328](https://github.com/angular/angular/commit/6a9e328))
* **language-service:** autocomplete pipe binding expressions ([#40032](https://github.com/angular/angular/issues/40032)) ([cbb6eae](https://github.com/angular/angular/commit/cbb6eae))
* **language-service:** autocompletion of element tags ([#40032](https://github.com/angular/angular/issues/40032)) ([e42250f](https://github.com/angular/angular/commit/e42250f))
* **language-service:** autocompletion within expression contexts ([#39727](https://github.com/angular/angular/issues/39727)) ([93a8326](https://github.com/angular/angular/commit/93a8326))
* **language-service:** complete attributes on elements ([#40032](https://github.com/angular/angular/issues/40032)) ([66378ed](https://github.com/angular/angular/commit/66378ed))
* **language-service:** completions for structural directives ([#40032](https://github.com/angular/angular/issues/40032)) ([2a74431](https://github.com/angular/angular/commit/2a74431))
* **language-service:** enable get references for directive and component from template ([#40054](https://github.com/angular/angular/issues/40054)) ([973f797](https://github.com/angular/angular/commit/973f797))
* **language-service:** Add "find references" capability to Ivy integrated LS ([#39768](https://github.com/angular/angular/issues/39768)) ([06a782a](https://github.com/angular/angular/commit/06a782a))
* **language-service:** implement autocompletion for global properties (Ivy) ([#39250](https://github.com/angular/angular/issues/39250)) ([28a0bcb](https://github.com/angular/angular/commit/28a0bcb))
* **language-service:** Implement go to definition for style and template urls ([#39202](https://github.com/angular/angular/issues/39202)) ([563fb6c](https://github.com/angular/angular/commit/563fb6c))
* **localize:** support Application Resource Bundle (ARB) translation file format ([#36795](https://github.com/angular/angular/issues/36795)) ([5684ac5](https://github.com/angular/angular/commit/5684ac5))
* **platform-browser:** add doubletap HammerJS support ([#26362](https://github.com/angular/angular/issues/26362)) ([b5c0f9d](https://github.com/angular/angular/commit/b5c0f9d)), closes [#23954](https://github.com/angular/angular/issues/23954)
* **router:** add `relativeTo` as an input to `routerLink` ([#39720](https://github.com/angular/angular/issues/39720)) ([112324a](https://github.com/angular/angular/commit/112324a)), closes [#13523](https://github.com/angular/angular/issues/13523)
<a name="11.0.9"></a>
## 11.0.9 (2021-01-13)
### Bug Fixes
* **compiler:** incorrectly inferring content type of SVG-specific title tag ([#40259](https://github.com/angular/angular/issues/40259)) ([642c45b](https://github.com/angular/angular/commit/642c45b)), closes [#31503](https://github.com/angular/angular/issues/31503)
* **compiler-cli:** prevent stack overflow in decorator transform for large number of files ([#40374](https://github.com/angular/angular/issues/40374)) ([ff36485](https://github.com/angular/angular/commit/ff36485)), closes [#40276](https://github.com/angular/angular/issues/40276)
* **ngcc:** compute the correct package paths for target entry-points ([#40376](https://github.com/angular/angular/issues/40376)) ([584b78a](https://github.com/angular/angular/commit/584b78a)), closes [#40352](https://github.com/angular/angular/issues/40352) [#40357](https://github.com/angular/angular/issues/40357)
* **router:** better ngZone checking for warning ([#25839](https://github.com/angular/angular/issues/25839)) ([adf42da](https://github.com/angular/angular/commit/adf42da)), closes [#25837](https://github.com/angular/angular/issues/25837)
* **service-worker:** allow checking for updates when constantly polling the server ([#40234](https://github.com/angular/angular/issues/40234)) ([a7befd5](https://github.com/angular/angular/commit/a7befd5)), closes [#40207](https://github.com/angular/angular/issues/40207)
* **service-worker:** ensure SW stays alive while notifying clients about unrecoverable state ([#40234](https://github.com/angular/angular/issues/40234)) ([c01b5ea](https://github.com/angular/angular/commit/c01b5ea))
<a name="11.0.8"></a>
## 11.0.8 (2021-01-11)
### Bug Fixes
* **core:** memory leak if view container host view is destroyed while view ref is not ([#40219](https://github.com/angular/angular/issues/40219)) ([f691e85](https://github.com/angular/angular/commit/f691e85)), closes [#38648](https://github.com/angular/angular/issues/38648)
* **forms:** handle standalone `<form>` tag correctly in `NgControlStatusGroup` directive ([#40344](https://github.com/angular/angular/issues/40344)) ([b3f322f](https://github.com/angular/angular/commit/b3f322f)), closes [#38391](https://github.com/angular/angular/issues/38391)
* **router:** Remove usage of `Object.values` to avoid the need for a polyfill ([#40370](https://github.com/angular/angular/issues/40370)) ([c44dd84](https://github.com/angular/angular/commit/c44dd84))
<a name="11.0.7"></a>
## 11.0.7 (2021-01-07)
### Bug Fixes
* **router:** correctly deactivate children with componentless parent ([#40196](https://github.com/angular/angular/issues/40196)) ([7060ae2](https://github.com/angular/angular/commit/7060ae2)), closes [/github.com/angular/angular/blob/362f45c4bf1bb49a90b014d2053f4c4474d132c0/packages/router/src/operators/activate_routes.ts#L151-L158](https://github.com//github.com/angular/angular/blob/362f45c4bf1bb49a90b014d2053f4c4474d132c0/packages/router/src/operators/activate_routes.ts/issues/L151-L158) [#20694](https://github.com/angular/angular/issues/20694)
* **router:** Remove usage of `Object.entries` to avoid the need for a polyfill ([#40340](https://github.com/angular/angular/issues/40340)) ([6429be1](https://github.com/angular/angular/commit/6429be1))
<a name="11.0.6"></a>
## 11.0.6 (2021-01-06)
### Bug Fixes
* **compiler:** don't report parse error for interpolation inside string in property binding ([#40267](https://github.com/angular/angular/issues/40267)) ([7977509](https://github.com/angular/angular/commit/7977509)), closes [#39826](https://github.com/angular/angular/issues/39826) [#39601](https://github.com/angular/angular/issues/39601)
* **compiler:** incorrectly encapsulating selectors with escape sequences ([#40264](https://github.com/angular/angular/issues/40264)) ([1bfbfaa](https://github.com/angular/angular/commit/1bfbfaa)), closes [#31844](https://github.com/angular/angular/issues/31844)
* **compiler-cli:** handle `\r\n` line-endings correctly in source-mapping ([#40187](https://github.com/angular/angular/issues/40187)) ([b865b32](https://github.com/angular/angular/commit/b865b32)), closes [#40169](https://github.com/angular/angular/issues/40169) [#39654](https://github.com/angular/angular/issues/39654)
* **compiler-cli:** ngcc - remove outdated link ([#40285](https://github.com/angular/angular/issues/40285)) ([0b00d65](https://github.com/angular/angular/commit/0b00d65)), closes [#39837](https://github.com/angular/angular/issues/39837)
* **core:** Call `onDestroy` in production mode as well ([#40120](https://github.com/angular/angular/issues/40120)) ([632fe60](https://github.com/angular/angular/commit/632fe60)), closes [#39876](https://github.com/angular/angular/issues/39876) [#40105](https://github.com/angular/angular/issues/40105)
* **core:** ensure sanitizer works if DOMParser return null body ([#40107](https://github.com/angular/angular/issues/40107)) ([add7cbb](https://github.com/angular/angular/commit/add7cbb)), closes [#39834](https://github.com/angular/angular/issues/39834)
* **core:** error if detectChanges is called at the wrong time under specific circumstances ([#40206](https://github.com/angular/angular/issues/40206)) ([ef13e83](https://github.com/angular/angular/commit/ef13e83)), closes [#38611](https://github.com/angular/angular/issues/38611)
* **core:** take @Host into account while processing `useFactory` arguments ([#40122](https://github.com/angular/angular/issues/40122)) ([#40313](https://github.com/angular/angular/issues/40313)) ([45838c0](https://github.com/angular/angular/commit/45838c0))
* **router:** apply redirects should match named outlets with empty path parents ([#40029](https://github.com/angular/angular/issues/40029)) ([#40315](https://github.com/angular/angular/issues/40315)) ([f542e4e](https://github.com/angular/angular/commit/f542e4e)), closes [#38379](https://github.com/angular/angular/issues/38379) [#38379](https://github.com/angular/angular/issues/38379) [#39952](https://github.com/angular/angular/issues/39952) [#10726](https://github.com/angular/angular/issues/10726) [#30410](https://github.com/angular/angular/issues/30410)
* **router:** Ensure named outlets with empty path parents are recognized ([#40029](https://github.com/angular/angular/issues/40029)) ([#40315](https://github.com/angular/angular/issues/40315)) ([c722c43](https://github.com/angular/angular/commit/c722c43))
* **router:** Router should focus element after scrolling ([#40241](https://github.com/angular/angular/issues/40241)) ([a1dcfc5](https://github.com/angular/angular/commit/a1dcfc5)), closes [#30067](https://github.com/angular/angular/issues/30067)
<a name="11.0.5"></a>
## 11.0.5 (2020-12-16)
### Bug Fixes
* **compiler:** handle strings inside bindings that contain binding characters ([#39826](https://github.com/angular/angular/issues/39826)) ([f5aab2b](https://github.com/angular/angular/commit/f5aab2b)), closes [#39601](https://github.com/angular/angular/issues/39601)
* **core:** fix possible XSS attack in development through SSR. ([#40136](https://github.com/angular/angular/issues/40136)) ([0aa220b](https://github.com/angular/angular/commit/0aa220b))
* **core:** set `ngDevMode` to `false` when calling `enableProdMode()` ([#40124](https://github.com/angular/angular/issues/40124)) ([922f492](https://github.com/angular/angular/commit/922f492))
* **upgrade:** fix HMR for hybrid applications ([#40045](https://github.com/angular/angular/issues/40045)) ([c4c7509](https://github.com/angular/angular/commit/c4c7509)), closes [#39935](https://github.com/angular/angular/issues/39935)
<a name="11.0.4"></a>
## 11.0.4 (2020-12-09)
### Bug Fixes
* **animations:** implement getPosition in browser animation builder ([#39983](https://github.com/angular/angular/issues/39983)) ([5a765f0](https://github.com/angular/angular/commit/5a765f0))
* **compiler-cli:** correct incremental behavior even with broken imports ([#39967](https://github.com/angular/angular/issues/39967)) ([adeeb84](https://github.com/angular/angular/commit/adeeb84))
* **compiler-cli:** remove the concept of an errored trait ([#39967](https://github.com/angular/angular/issues/39967)) ([0aa35ec](https://github.com/angular/angular/commit/0aa35ec))
* **compiler-cli:** track poisoned scopes with a flag ([#39967](https://github.com/angular/angular/issues/39967)) ([178cc51](https://github.com/angular/angular/commit/178cc51))
* **core:** remove application from the testability registry when the root view is removed ([#39876](https://github.com/angular/angular/issues/39876)) ([3680ad1](https://github.com/angular/angular/commit/3680ad1)), closes [#22106](https://github.com/angular/angular/issues/22106)
* **core:** unsubscribe from the `onError` when the root view is removed ([#39940](https://github.com/angular/angular/issues/39940)) ([35309bb](https://github.com/angular/angular/commit/35309bb))
* **language-service:** do not return external template that does not exist ([#39898](https://github.com/angular/angular/issues/39898)) ([6b6fcd7](https://github.com/angular/angular/commit/6b6fcd7))
* **language-service:** do not treat file URIs as general URLs ([#39917](https://github.com/angular/angular/issues/39917)) ([829988b](https://github.com/angular/angular/commit/829988b))
* **service-worker:** handle error with ErrorHandler ([#39990](https://github.com/angular/angular/issues/39990)) ([588dbd3](https://github.com/angular/angular/commit/588dbd3)), closes [#39913](https://github.com/angular/angular/issues/39913)
* **upgrade:** avoid memory leak when removing downgraded components ([#39965](https://github.com/angular/angular/issues/39965)) ([97310d3](https://github.com/angular/angular/commit/97310d3)), closes [#26209](https://github.com/angular/angular/issues/26209) [#39911](https://github.com/angular/angular/issues/39911) [#39921](https://github.com/angular/angular/issues/39921)
### Performance Improvements
* **animations:** use `ngDevMode` to tree-shake warning ([#39964](https://github.com/angular/angular/issues/39964)) ([72aad32](https://github.com/angular/angular/commit/72aad32))
* **common:** use `ngDevMode` to tree-shake warnings ([#39964](https://github.com/angular/angular/issues/39964)) ([bf3de9b](https://github.com/angular/angular/commit/bf3de9b))
* **core:** use `ngDevMode` to tree-shake `checkNoChanges` ([#39964](https://github.com/angular/angular/issues/39964)) ([2fbb684](https://github.com/angular/angular/commit/2fbb684))
* **core:** use `ngDevMode` to tree-shake warnings ([#39959](https://github.com/angular/angular/issues/39959)) ([1e3534f](https://github.com/angular/angular/commit/1e3534f))
* **forms:** use `ngDevMode` to tree-shake `_ngModelWarning` ([#39964](https://github.com/angular/angular/issues/39964)) ([735556d](https://github.com/angular/angular/commit/735556d))
<a name="11.0.3"></a>
## 11.0.3 (2020-12-02)
### Bug Fixes
* **animations:** getAnimationStyle causes exceptions in older browsers ([#29709](https://github.com/angular/angular/issues/29709)) ([cb1d77a](https://github.com/angular/angular/commit/cb1d77a))
* **animations:** replace copy of query selector node-list from "spread" to "for" ([#39646](https://github.com/angular/angular/issues/39646)) ([e95cd2a](https://github.com/angular/angular/commit/e95cd2a)), closes [#38551](https://github.com/angular/angular/issues/38551)
* **common:** Prefer to use pageXOffset / pageYOffset instance of scrollX / scrollY ([#28262](https://github.com/angular/angular/issues/28262)) ([5692607](https://github.com/angular/angular/commit/5692607))
* **compiler:** ensure that placeholders have the correct sourceSpan ([#39717](https://github.com/angular/angular/issues/39717)) ([8ec7156](https://github.com/angular/angular/commit/8ec7156)), closes [#39671](https://github.com/angular/angular/issues/39671)
* **compiler:** report better error on interpolation in an expression ([#30300](https://github.com/angular/angular/issues/30300)) ([6dc74fd](https://github.com/angular/angular/commit/6dc74fd))
* **compiler-cli:** report error when a reference target is missing instead of crashing ([#39805](https://github.com/angular/angular/issues/39805)) ([8634611](https://github.com/angular/angular/commit/8634611)), closes [#38618](https://github.com/angular/angular/issues/38618) [#39744](https://github.com/angular/angular/issues/39744)
* **core:** Ensure OnPush ancestors are marked dirty when events occur ([#39833](https://github.com/angular/angular/issues/39833)) ([01c1bfd](https://github.com/angular/angular/commit/01c1bfd)), closes [#39832](https://github.com/angular/angular/issues/39832)
* **core:** meta addTag() adds incorrect attribute for httpEquiv ([#32531](https://github.com/angular/angular/issues/32531)) ([3114b0a](https://github.com/angular/angular/commit/3114b0a))
* **core:** migration error if program contains files outside of the project ([#39790](https://github.com/angular/angular/issues/39790)) ([7dcc212](https://github.com/angular/angular/commit/7dcc212)), closes [#39778](https://github.com/angular/angular/issues/39778)
* **core:** not invoking object's toString when rendering to the DOM ([#39843](https://github.com/angular/angular/issues/39843)) ([75e22ab](https://github.com/angular/angular/commit/75e22ab)), closes [#38839](https://github.com/angular/angular/issues/38839)
* **core:** remove duplicated noop function ([#39761](https://github.com/angular/angular/issues/39761)) ([26a1337](https://github.com/angular/angular/commit/26a1337))
* **core:** support `Attribute` DI decorator in `deps` section of a token ([#37085](https://github.com/angular/angular/issues/37085)) ([aaa3111](https://github.com/angular/angular/commit/aaa3111)), closes [#36479](https://github.com/angular/angular/issues/36479)
* **router:** correctly handle string command in outlets ([#39728](https://github.com/angular/angular/issues/39728)) ([50c19a2](https://github.com/angular/angular/commit/50c19a2)), closes [#18928](https://github.com/angular/angular/issues/18928)
* **router:** remove duplicated getOutlet function ([#39764](https://github.com/angular/angular/issues/39764)) ([df231ad](https://github.com/angular/angular/commit/df231ad))
* **service-worker:** correctly handle failed cache-busted request ([#39786](https://github.com/angular/angular/issues/39786)) ([7bf73d7](https://github.com/angular/angular/commit/7bf73d7)), closes [#39775](https://github.com/angular/angular/issues/39775) [#39775](https://github.com/angular/angular/issues/39775)
### DEPRECATIONS
* **forms:** Mark the {[key: string]: any} type for the options property of the FormBuilder.group method as deprecated. Using AbstractControlOptions gives the same functionality and is type-safe.
<a name="11.0.2"></a>
## 11.0.2 (2020-11-19)
@ -8,26 +759,6 @@
<a name="11.1.0-next.0"></a>
# 11.1.0-next.0 (2020-11-18)
### Bug Fixes
* **common:** add `HttpParamsOptions` to the public api ([#35829](https://github.com/angular/angular/issues/35829)) ([b33b89d](https://github.com/angular/angular/commit/b33b89d)), closes [#20276](https://github.com/angular/angular/issues/20276)
### Features
* **compiler:** recover expression parsing in more malformed pipe cases ([#39437](https://github.com/angular/angular/issues/39437)) ([e336572](https://github.com/angular/angular/commit/e336572))
* **compiler:** support recovery of malformed property writes ([#39103](https://github.com/angular/angular/issues/39103)) ([e44e10b](https://github.com/angular/angular/commit/e44e10b))
* **compiler-cli:** implement partial directive declaration linking ([#39518](https://github.com/angular/angular/issues/39518)) ([87e9cd6](https://github.com/angular/angular/commit/87e9cd6))
* **compiler-cli:** partial compilation of directives ([#39518](https://github.com/angular/angular/issues/39518)) ([8c0a92b](https://github.com/angular/angular/commit/8c0a92b))
* **core:** add shouldCoalesceRunChangeDetection option to coalesce change detections in the same event loop. ([#39422](https://github.com/angular/angular/issues/39422)) ([5e92d64](https://github.com/angular/angular/commit/5e92d64)), closes [#39348](https://github.com/angular/angular/issues/39348) [#39348](https://github.com/angular/angular/issues/39348)
* **language-service:** Implement go to definition for style and template urls ([#39202](https://github.com/angular/angular/issues/39202)) ([563fb6c](https://github.com/angular/angular/commit/563fb6c))
<a name="11.0.1"></a>
## 11.0.1 (2020-11-18)

4
CONTRIBUTING.md
View File

@ -89,9 +89,9 @@ Before you submit your Pull Request (PR) consider the following guidelines:
We cannot accept code without a signed CLA.
Make sure you author all contributed Git commits with email address associated with your CLA signature.
4. Fork the angular/angular repo.
4. [Fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) the angular/angular repo.
5. Make your changes in a new git branch:
5. In your forked repository, make your changes in a new git branch:
```shell
git checkout -b my-fix-branch master

2
LICENSE
View File

@ -1,6 +1,6 @@
The MIT License
Copyright (c) 2010-2020 Google LLC. https://angular.io/license
Copyright (c) 2010-2021 Google LLC. https://angular.io/license
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

10
README.md
View File

@ -81,6 +81,8 @@ cd [PROJECT NAME]
ng serve
```
Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.
## Quickstart
[Get started in 5 minutes][quickstart].
@ -110,7 +112,7 @@ Read through our [contributing guidelines][contributing] to learn about our subm
### Want to Help?
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
### Code of Conduct
@ -121,7 +123,10 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
Join the conversation and help the community.
- [Twitter][twitter]
- [Discord][discord]
- [Gitter][gitter]
- [YouTube][youtube]
- [StackOverflow][stackoverflow]
- Find a Local [Meetup][meetup]
[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)
@ -147,5 +152,8 @@ Join the conversation and help the community.
[npm]: https://www.npmjs.com/get-npm
[codeofconduct]: CODE_OF_CONDUCT.md
[twitter]: https://www.twitter.com/angular
[discord]: https://discord.gg/angular
[gitter]: https://gitter.im/angular/angular
[stackoverflow]: https://stackoverflow.com/questions/tagged/angular
[youtube]: https://youtube.com/angular
[meetup]: https://www.meetup.com/find/?keywords=angular"

18
WORKSPACE
View File

@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
# Fetch rules_nodejs so we can install our npm dependencies
http_archive(
name = "build_bazel_rules_nodejs",
sha256 = "4952ef879704ab4ad6729a29007e7094aef213ea79e9f2e94cbe1c9a753e63ef",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/2.2.0/rules_nodejs-2.2.0.tar.gz"],
sha256 = "bfacf15161d96a6a39510e7b3d3b522cf61cb8b82a31e79400a84c5abcab5347",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.2.1/rules_nodejs-3.2.1.tar.gz"],
)
# Check the rules_nodejs version and download npm dependencies
@ -21,11 +21,6 @@ check_rules_nodejs_version(minimum_version_string = "2.2.0")
# Setup the Node.js toolchain
node_repositories(
node_repositories = {
"12.14.1-darwin_amd64": ("node-v12.14.1-darwin-x64.tar.gz", "node-v12.14.1-darwin-x64", "0be10a28737527a1e5e3784d3ad844d742fe8b0718acd701fd48f718fd3af78f"),
"12.14.1-linux_amd64": ("node-v12.14.1-linux-x64.tar.xz", "node-v12.14.1-linux-x64", "07cfcaa0aa9d0fcb6e99725408d9e0b07be03b844701588e3ab5dbc395b98e1b"),
"12.14.1-windows_amd64": ("node-v12.14.1-win-x64.zip", "node-v12.14.1-win-x64", "1f96ccce3ba045ecea3f458e189500adb90b8bc1a34de5d82fc10a5bf66ce7e3"),
},
node_version = "12.14.1",
package_json = ["//:package.json"],
)
@ -49,11 +44,6 @@ load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
npm_bazel_protractor_dependencies()
# Load karma dependencies
load("@npm//@bazel/karma:package.bzl", "npm_bazel_karma_dependencies")
npm_bazel_karma_dependencies()
# Setup the rules_webtesting toolchain
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
@ -64,7 +54,7 @@ load("//dev-infra/browsers:browser_repositories.bzl", "browser_repositories")
browser_repositories()
# Setup the rules_sass toolchain
load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
sass_repositories()
@ -81,7 +71,7 @@ rbe_autoconfig(
# Need to specify a base container digest in order to ensure that we can use the checked-in
# platform configurations for the "ubuntu16_04" image. Otherwise the autoconfig rule would
# need to pull the image and run it in order determine the toolchain configuration. See:
# https://github.com/bazelbuild/bazel-toolchains/blob/3.6.0/configs/ubuntu16_04_clang/versions.bzl
# https://github.com/bazelbuild/bazel-toolchains/blob/4.0.0/configs/ubuntu16_04_clang/versions.bzl
base_container_digest = "sha256:f6568d8168b14aafd1b707019927a63c2d37113a03bcee188218f99bd0327ea1",
# Note that if you change the `digest`, you might also need to update the
# `base_container_digest` to make sure marketplace.gcr.io/google/rbe-ubuntu16-04-webtest:<digest>

2
aio/aio-builds-setup/dockerbuild/scripts-js/lib/common/github-teams.ts
View File

@ -57,7 +57,7 @@ export class GithubTeams {
/**
* Check whether the given username is a member of the teams specified by the team slugs.
* @param username The username to check for in the teams.
* @param teamSlugs A collection of slugs that represent the teams to check for the the username.
* @param teamSlugs A collection of slugs that represent the teams to check for the username.
* @returns a Promise that resolves to `true` if the usernane is a member of at least one of the specified teams.
*/
public async isMemberBySlug(username: string, teamSlugs: string[]): Promise<boolean> {

22
aio/aio-builds-setup/dockerbuild/scripts-js/lib/preview-server/preview-server-factory.ts
View File

@ -2,17 +2,17 @@
import * as bodyParser from 'body-parser';
import * as express from 'express';
import * as http from 'http';
import { AddressInfo } from 'net';
import { CircleCiApi } from '../common/circle-ci-api';
import { GithubApi } from '../common/github-api';
import { GithubPullRequests } from '../common/github-pull-requests';
import { GithubTeams } from '../common/github-teams';
import { assert, assertNotMissingOrEmpty, computeShortSha, Logger } from '../common/utils';
import { BuildCreator } from './build-creator';
import { ChangedPrVisibilityEvent, CreatedBuildEvent } from './build-events';
import { BuildRetriever } from './build-retriever';
import { BuildVerifier } from './build-verifier';
import { respondWithError, throwRequestError } from './utils';
import {AddressInfo} from 'net';
import {CircleCiApi} from '../common/circle-ci-api';
import {GithubApi} from '../common/github-api';
import {GithubPullRequests} from '../common/github-pull-requests';
import {GithubTeams} from '../common/github-teams';
import {assert, assertNotMissingOrEmpty, computeShortSha, Logger} from '../common/utils';
import {BuildCreator} from './build-creator';
import {ChangedPrVisibilityEvent, CreatedBuildEvent} from './build-events';
import {BuildRetriever} from './build-retriever';
import {BuildVerifier} from './build-verifier';
import {respondWithError, throwRequestError} from './utils';
const AIO_PREVIEW_JOB = 'aio_preview';

4
aio/aio-builds-setup/dockerbuild/scripts-js/package.json
View File

@ -33,7 +33,7 @@
"shelljs": "^0.8.4",
"source-map-support": "^0.5.19",
"tar-stream": "^2.1.3",
"tslib": "^2.0.1"
"tslib": "^2.1.0"
},
"devDependencies": {
"@types/body-parser": "^1.19.0",
@ -49,6 +49,6 @@
"supertest": "^4.0.2",
"tslint": "^6.1.3",
"tslint-jasmine-noSkipOrFocus": "^1.0.9",
"typescript": "^4.1.2"
"typescript": "^4.2.3"
}
}

16
aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock
View File

@ -2505,10 +2505,10 @@ tslib@^1.8.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
tslib@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
tslib@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
tslint-jasmine-noSkipOrFocus@^1.0.9:
version "1.0.9"
@ -2563,10 +2563,10 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"
typescript@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
typescript@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
undefsafe@^2.0.2:
version "2.0.2"

2
aio/aio-builds-setup/docs/overview--general.md
View File

@ -69,7 +69,7 @@ More info on the possible HTTP status codes and their meaning can be found
### Updating PR visibility
- nginx receives a natification that a PR has been updated and passes it through to the
- nginx receives a notification that a PR has been updated and passes it through to the
preview-server. This could, for example, be sent by a GitHub webhook every time a PR's labels
change.
E.g.: `ngbuilds.io/pr-updated` (payload: `{"number":<PR>,"action":"labeled"}`)

2
aio/aio-builds-setup/docs/overview--scripts-and-commands.md
View File

@ -61,6 +61,6 @@ purposes. Each command is backed by a corresponding script inside
for more info.
- `aio-dev-mode`:
Links external source files (from the Docker host) to interal source files (in the Docker
Links external source files (from the Docker host) to internal source files (in the Docker
container). This makes it easier to use an IDE to edit files in the host that are then
tested in the container. See the [debugging docs](misc--debug-docker-container.md) for more info.

2
aio/aio-builds-setup/docs/overview--security-model.md
View File

@ -69,7 +69,7 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
We perform a number of preliminary checks:
- Was the webhook triggered by the designated CircleCI job (currently `aio_preview`)?
- Was the build successful?
- Are the associated GitHub organisation and repository what we expect (e.g. `angular/angular`)?
- Are the associated GitHub organization and repository what we expect (e.g. `angular/angular`)?
- Has the PR touched any files that might affect the angular.io app (currently the `aio/` or
`packages/` directories, ignoring spec files)?

26
aio/angular.json
View File

@ -44,18 +44,7 @@
"src/assets",
"src/generated",
"src/pwa-manifest.json",
"src/google44a5c950a9a9b940.html",
"src/baidu_verify_AD8wvnfKCx.html",
{
"glob": "custom-elements.min.js",
"input": "node_modules/@webcomponents/custom-elements",
"output": "/assets/js"
},
{
"glob": "native-shim.js",
"input": "node_modules/@webcomponents/custom-elements/src",
"output": "/assets/js"
}
"src/google385281288605d160.html"
],
"styles": [
"src/styles/main.scss"
@ -157,18 +146,7 @@
"src/assets",
"src/generated",
"src/pwa-manifest.json",
"src/google44a5c950a9a9b940.html",
"src/baidu_verify_AD8wvnfKCx.html",
{
"glob": "custom-elements.min.js",
"input": "node_modules/@webcomponents/custom-elements",
"output": "/assets/js"
},
{
"glob": "native-shim.js",
"input": "node_modules/@webcomponents/custom-elements/src",
"output": "/assets/js"
}
"src/google385281288605d160.html"
],
"styles": [
"src/styles/main.scss"

46
aio/content/_fragments/glossary-t2.md
View File

@ -1,46 +0,0 @@
@description
## Transpile
## 转译（transpile)
<div class="l-sub-section">
The process of transforming code written in one form of JavaScript
(such as TypeScript) into another form of JavaScript (such as [ES5](_fragments/glossary-t2#es5)).
把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](_fragments/glossary-t2#es5)）的过程。
</div>
## TypeScript
## TypeScript 语言
<div class="l-sub-section">
A version of JavaScript that supports most [ECMAScript 2015](_fragments/glossary-t2#es2015)
language features such as [decorators](_fragments/glossary-t2#decorator).
JavaScript 的一个版本，支持了几乎所有 [ECMAScript 2015](_fragments/glossary-t2#ecmascript=2015) 语言特性，例如[装饰器 (decorator)](_fragments/glossary-t2#decorator))。
TypeScript is also notable for its optional typing system, which provides
compile-time type checking and strong tooling support (such as "intellisense,"
code completion, refactoring, and intelligent search). Many code editors
and IDEs support TypeScript either natively or with plugins.
TypeScript 还以它的可选类型系统而著称。
该类型系统提供了编译时类型检查和强大的工具支持（例如 “Intellisense”，代码补齐，重构和智能搜索等）。
许多代码编辑器和 IDE 都原生支持 TypeScript 或通过插件提供支持。
TypeScript is the preferred language for Angular development, although
you can use other JavaScript dialects such as [ES5](_fragments/glossary-t2#es5).
TypeScript 是 Angular 的首选语言，当然，你可以使用其它 JavaScript 方言，例如[ES5](_fragments/glossary-t2#es5)。
Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/).
更多信息，见[typescript.org](http://www.typescriptlang.org/)。
</div>

103
aio/content/cli/index.md
View File

@ -1,24 +1,12 @@
# CLI Overview and Command Reference
# CLI 概览与命令参考手册
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 CLI 是一个命令行界面工具，可用于初始化、开发、构建和维护 Angular 应用。
你可以在命令行窗口中直接使用此工具，也可以通过 [Angular Console](https://angularconsole.com) 这样的交互式界面来间接使用。
## Installing Angular CLI
## 安装 Angular CLI
Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.
Angular CLI 的主版本会跟随它所支持的 Angular 主版本，不过其小版本可能会独立发布。
Install the CLI using the `npm` package manager:
使用 `npm` 包管理器来安装 CLI：
<code-example language="bash">
npm install -g @angular/cli
</code-example>
@ -26,20 +14,12 @@ npm install -g @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
关于版本变更的详情，以及如何从以前版本升级的信息，参阅 GitHub 上的 Releases 页：<https://github.com/angular/angular-cli/releases>
## 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.
通过 `ng` 可执行文件可以在命令行上调用此工具。
命令行中还提供了联机帮助。
输入下列命令列出命令或指定命令（如 [generate](cli/generate)）选项的简短说明。
<code-example language="bash">
ng help
ng generate --help
@ -47,8 +27,6 @@ ng generate --help
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:
要想创建、构建或在开发服务器上运行一个新的、基本的 Angular 项目，请到这个新工作区的上级目录中运行下列命令：
<code-example language="bash">
ng new my-first-project
cd my-first-project
@ -58,91 +36,49 @@ ng serve
In your browser, open http://localhost:4200/ to see the new app run.
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.
在浏览器中，打开 <http://localhost:4200/> 查看运行效果。
当你使用 [ng serve](cli/serve) 命令来构建应用并在本地启动开发服务器时，服务器会自动重新构建此应用，并在修改源码时重新加载此页面。
<div class="alert is-helpful">
When you run `ng new my-first-project` a new folder, named `my-first-project`, 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.
When you run `ng new my-first-project` a new folder, named `my-first-project`, 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.
当你运行 `ng new my-first-project` 时，将在当前工作目录中创建一个名为 `my-first-project` 的新文件夹。由于你希望在该文件夹中创建文件，因此在运行命令之前，请确保你在当前工作目录中具有足够的权限。
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
如果当前工作目录不适合放你的项目，可以先运行 `cd <path-to-other-directory>` 来切换到更合适的目录。
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
</div>
## Workspaces and project files
## 工作区与项目文件
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.
[ng new](cli/new) 命令会创建一个 *Angular 工作区*目录，并生成一个新的应用骨架。
每个工作区中可以包含多个应用和库。
由 [ng new](cli/new) 命令创建的初始应用位于工作区的顶层。
你在工作区中生成的其它应用或库，会放在 `projects/` 子目录下。
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.
新生成的应用中包含根模块的源码，还有根组件和模板。
每个应用都有一个 `src` 目录，其中包含逻辑、数据和静态文件。
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.
你可以直接编辑这些生成的文件，也可以使用 CLI 命令来添加或修改它们。
使用 [ng generate](cli/generate) 命令也可以添加其它组件和服务，以及管道、指令的源码等。
必须在工作区或项目目录下才能执行 [add](cli/add) 或 [generate](cli/generate) 之类的命令，因为这些命令需要在应用或库上进行创建或其它操作。
* See more about the [Workspace file structure](guide/file-structure).
欲知详情，参阅[工作区的文件结构](guide/file-structure)。
### Workspace and project configuration
### 工作区与项目的配置
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.
工作区的配置文件 `angular.json` 位于此工作区的顶层。
在这里，你可以设置全工作区范围的默认值，并指定当 CLI 为不同目标构建项目时要用到的配置。
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.
Note that option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands can use either camelCase or dash-case.
[ng config](cli/config) 让你可以从命令行中设置和获取配置项的值。你也可以直接编辑 `angular.json` 文件。
注意，此配置文件中的选项名称必须使用[小驼峰(camelCase)形式](guide/glossary#case-types)，不过当在命令行中提供它是可以使用小驼峰和中线分隔(dash-case)两种形式。
* See more about [Workspace Configuration](guide/workspace-config).
参阅 [工作区配置](guide/workspace-config)。
* See the [complete schema](https://github.com/angular/angular-cli/wiki/angular-workspace) for `angular.json`.
参阅 `angular.json` 的[完整 schema](https://github.com/angular/angular-cli/wiki/angular-workspace)。
## CLI command-language syntax
## CLI 命令语法
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.
大多数命令以及少量选项，会有别名。别名会显示在每个命令的语法描述中。
* Option names are prefixed with a double dash (--).
Option aliases are prefixed with a single dash (-).
Arguments are not prefixed.
@ -151,55 +87,24 @@ Command syntax is shown as follows:
ng build my-app -c production
</code-example>
选项名带有双中线前缀（--）。
选项别名带有单中线前缀（-）。
参数没有前缀。
比如：
<code-example format="." language="bash">
ng build my-app -c production
</code-example>
* Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.
通常，生成的工件（artifact）名称可以作为命令的参数进行指定，也可以使用 --name 选项。
* Argument and option names can be given in either
[camelCase or dash-case](guide/glossary#case-types).
`--myOptionName` is equivalent to `--my-option-name`.
参数和选项的名称可以用[小驼峰或中线分隔的格式](guide/glossary#case-types)给出。
`--myOptionName` 等价于 `--my-option-name`。
### Boolean options
### Boolean and enumerated options
### 逻辑型与枚举型选项
Boolean options have two forms: `--thisOption` sets the flag, `--noThisOption` clears it.
Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.
逻辑型选项有两种形式：`--thisOption` 可以设置标志，而 `--noThisOption` 可以清除标志。
如果没有提供选项，该标志就会留在文档中所列出的默认状态。
Allowed values are given with each enumerated option description, with the default value in **bold**.
每个枚举选项的描述都给出了允许的值，其默认值是**加粗显示的**。
### 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
### 原理图（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.
[ng generate](cli/generate) 和 [ng add](cli/add) 命令会把要生成或要添加到当前项目中的工件或库作为参数。
除了通用选项之外，每个工件或库还可以用*原理图*定义自己的选项。
原理图的选项和内置命令的选项使用同样的格式。

22
aio/content/cli/usage-analytics-gathering.md
View File

@ -1,59 +1,41 @@
# Gathering and Viewing Usage Analytics
# 收集和查看使用情况分析
Users can opt in to share their Angular CLI usage data with [Google Analytics](https://support.google.com/analytics/answer/1008015?hl=en), using the [`ng analytics` CLI command](analytics).
The data is also shared with the Angular team, and used to improve the CLI.
用户可以尝试使用 [CLI 命令 `ng analytics`](analytics) 在 [Google Analytics](https://support.google.com/analytics/answer/1008015?hl=en) 上分享他们的 Angular CLI 使用情况数据。这些数据也会与 Angular 团队共享，以改进 CLI。
The gathering of CLI analytics data is disabled by default, and must be enabled at the project level by individual users.
It cannot be enabled at the project level for all users.
默认情况下，CLI 会禁用分析数据的采集工作，必须由每个用户在项目级别启用它。它无法在项目级别对所有用户启用。
Data gathered in this way can be viewed on the Google Analytics site, but is not automatically visible on your own organization's Analytics site.
As an administrator for an Angular development group, you can configure your instance of Angular CLI to be able to see analytics data for your own team's usage of the Angular CLI.
This configuration option is separate from and in addition to other usage analytics that your users may be sharing with Google.
以这种方式收集的数据可以在 Google Analytics 网站上查看，但不会自动显示在你所属单位的 Google Analytics 网站上。如果你是开发组织的管理员，可以配置你们的 Angular CLI 实例来查看你的团队在使用 Angular CLI 时的分析数据。此配置项与该用户可能与 Google 共享的对其它使用情况的分析是彼此隔离的。
## Enable access to CLI usage data
## 允许访问 CLI 使用情况数据
To configure access to your own users' CLI usage data, use the `ng config` command to add a key to your global [`angular.json` workspace configuration file](guide/workspace-config).
The key goes under `cli.analyticsSharing` at the top level of the file, outside the `projects` sections.
The value of the key is your organization's tracking ID, as assigned by Google Analytics.
This ID is a string that looks like `UA-123456-12`.
要配置对所属用户的 CLI 使用率数据的访问权限，请使用 `ng config` 命令在全局 [`angular.json` 工作空间配置文件中](guide/workspace-config)添加一个键。这个键位于文件顶层的 `cli.analyticsSharing` 下，位于 `projects` 部分之外。此键值是你们组织的跟踪 ID，通过 Google Analytics 指定。此 ID 形如 `UA-123456-12`。
You can choose to use a descriptive string as the key value, or be assigned a random key when you run the CLI command.
For example, the following command adds a configuration key named "tracking".
你也可以选择使用描述性字符串作为键，或者在运行 CLI 命令时给它赋值一个随机的键。例如，下面的命令会添加一个名为 “tracking” 的配置键。
<code-example language="sh" class="code-shell">
ng config --global cli.analyticsSharing.tracking UA-123456-12
</code-example>
To turn off this feature, run the following command:
要关闭此功能，请执行如下命令：
<code-example language="sh" class="code-shell">
ng config --global --remove cli.analyticsSharing
</code-example>
## Per user tracking
## 按用户跟踪
## Per user tracking
You can add a custom user ID to the global configuration, in order to identify unique usage of commands and flags.
If that user enables CLI analytics for their own project, your analytics display tracks and labels their individual usage.
你可以在全局配置中添加一个自定义的用户 ID，以单独区分命令和标志的使用情况。如果该用户也为自己的项目启用了 CLI 分析，那么分析器会分别显示这些跟踪并标记出各自的使用情况。
<code-example language="sh" class="code-shell">
ng config --global cli.analyticsSharing.user SOME_USER_NAME
@ -61,8 +43,6 @@ ng config --global cli.analyticsSharing.user SOME_USER_NAME
To generate a new random user ID, run the following command:
要生成新的随机用户 ID，请执行如下命令：
<code-example language="sh" class="code-shell">
ng config --global cli.analyticsSharing.user ""
</code-example>

9
aio/content/examples/attribute-binding/src/app/my-input-with-attribute-decorator.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { Attribute, Component } from '@angular/core';
@Component({
selector: 'app-my-input-with-attribute-decorator',
template: 'The type of the input is: {{ type }}'
})
export class MyInputWithAttributeDecoratorComponent {
constructor(@Attribute('type') public type: string) { }
}

14
aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts Normal file
View File

@ -0,0 +1,14 @@
@Component({
selector: 'app-nav-bar',
template: `
<nav [style]='navStyle'>
<a [style.text-decoration]="activeLinkStyle">Home Page</a>
<a [style.text-decoration]="linkStyle">Login</a>
</nav>`
})
export class NavBarComponent {
navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
linkStyle = 'underline';
activeLinkStyle = 'overline';
/* . . . */
}

13
aio/content/examples/docs-style-guide/src/app/not-great.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-not-great',
})
// #docregion not-great
export class NotGreatComponent {
buggyFunction() {
// things could be better here...
}
}
// #enddocregion not-great

7
aio/content/examples/errors/cyclic-imports/child.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from '@angular/core';
import { ParentComponent } from './parent.component';
@Component({selector: 'app-child', template: 'The child!'})
export class ChildComponent {
constructor(private parent: ParentComponent) {}
}

8
aio/content/examples/errors/cyclic-imports/module.ts Normal file
View File

@ -0,0 +1,8 @@
import { NgModule } from '@angular/core';
import { ChildComponent } from './child.component';
import { ParentComponent } from './parent.component';
@NgModule({
declarations: [ParentComponent, ChildComponent]
})
export class AppModule {}

4
aio/content/examples/errors/cyclic-imports/parent.component.ts Normal file
View File

@ -0,0 +1,4 @@
import { Component } from '@angular/core';
@Component({selector: 'app-parent', template: '<app-child></app-child>'})
export class ParentComponent {}

62
aio/content/examples/http/src/app/http-interceptors/custom-json-interceptor.ts Normal file
View File

@ -0,0 +1,62 @@
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// #docregion custom-json-interceptor
// The JsonParser class acts as a base class for custom parsers and as the DI token.
@Injectable()
export abstract class JsonParser {
abstract parse(text: string): any;
}
@Injectable()
export class CustomJsonInterceptor implements HttpInterceptor {
constructor(private jsonParser: JsonParser) {}
intercept(httpRequest: HttpRequest<any>, next: HttpHandler) {
if (httpRequest.responseType === 'json') {
// If the expected response type is JSON then handle it here.
return this.handleJsonResponse(httpRequest, next);
} else {
return next.handle(httpRequest);
}
}
private handleJsonResponse(httpRequest: HttpRequest<any>, next: HttpHandler) {
// Override the responseType to disable the default JSON parsing.
httpRequest = httpRequest.clone({responseType: 'text'});
// Handle the response using the custom parser.
return next.handle(httpRequest).pipe(map(event => this.parseJsonResponse(event)));
}
private parseJsonResponse(event: HttpEvent<any>) {
if (event instanceof HttpResponse && typeof event.body === 'string') {
return event.clone({body: this.jsonParser.parse(event.body)});
} else {
return event;
}
}
}
// #enddocregion custom-json-interceptor
// #docregion custom-json-parser
@Injectable()
export class CustomJsonParser implements JsonParser {
parse(text: string): any {
return JSON.parse(text, dateReviver);
}
}
function dateReviver(key: string, value: any) {
// #enddocregion custom-json-parser
if (typeof value !== 'string') {
return value;
}
const match = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value);
if (!match) {
return value;
}
return new Date(+match[1], +match[2] - 1, +match[3]);
// #docregion custom-json-parser
}
// #enddocregion custom-json-parser

21
aio/content/examples/interpolation/src/app/app.component.1.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component } from '@angular/core';
// #docregion var-collision
@Component({
template: `
<div>
<!-- Hello, Padma -->
<h1>Hello, {{customer}}</h1>
<ul>
<!-- Ebony and Chiho in a list-->
<li *ngFor="let customer of customers">{{ customer.value }}</li>
</ul>
</div>
`
})
class AppComponent {
customers = [{value: 'Ebony'}, {value: 'Chiho'}];
customer = 'Padma';
}
// #enddocregion var-collision

38
aio/content/examples/lifecycle-hooks/src/app/after-content-parent.component.ts Normal file
View File

@ -0,0 +1,38 @@
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'after-content-parent',
template: `
<div class="parent">
<h2>AfterContent</h2>
<div *ngIf="show">` +
// #docregion parent-template
`<after-content>
<app-child></app-child>
</after-content>`
// #enddocregion parent-template
+ `</div>
<h4>-- AfterContent Logs --</h4>
<p><button (click)="reset()">Reset</button></p>
<div *ngFor="let msg of logger.logs">{{msg}}</div>
</div>
`,
styles: ['.parent {background: burlywood}'],
providers: [LoggerService]
})
export class AfterContentParentComponent {
show = true;
constructor(public logger: LoggerService) { }
reset() {
this.logger.clear();
// quickly remove and reload AfterContentComponent which recreates it
this.show = false;
this.logger.tick_then(() => this.show = true);
}
}

32
aio/content/examples/lifecycle-hooks/src/app/after-view-parent.component.ts Normal file
View File

@ -0,0 +1,32 @@
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'after-view-parent',
template: `
<div class="parent">
<h2>AfterView</h2>
<after-view *ngIf="show"></after-view>
<h4>-- AfterView Logs --</h4>
<p><button (click)="reset()">Reset</button></p>
<div *ngFor="let msg of logger.logs">{{msg}}</div>
</div>
`,
styles: ['.parent {background: burlywood}'],
providers: [LoggerService]
})
export class AfterViewParentComponent {
show = true;
constructor(public logger: LoggerService) { }
reset() {
this.logger.clear();
// quickly remove and reload AfterViewComponent which recreates it
this.show = false;
this.logger.tick_then(() => this.show = true);
}
}

11
aio/content/examples/lifecycle-hooks/src/app/child-view.component.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
// #docregion child-view
@Component({
selector: 'app-child-view',
template: '<input [(ngModel)]="hero">'
})
export class ChildViewComponent {
hero = 'Magneta';
}
// #enddocregion child-view

9
aio/content/examples/lifecycle-hooks/src/app/child.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '<input [(ngModel)]="hero">'
})
export class ChildComponent {
hero = 'Magneta';
}

45
aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts Normal file
View File

@ -0,0 +1,45 @@
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
@Component({
selector: 'counter-parent',
template: `
<div class="parent">
<h2>Counter Spy</h2>
<button (click)="updateCounter()">Update counter</button>
<button (click)="reset()">Reset Counter</button>
<app-counter [counter]="value"></app-counter>
<h4>-- Spy Lifecycle Hook Log --</h4>
<div *ngFor="let msg of spyLog">{{msg}}</div>
</div>
`,
styles: ['.parent {background: gold;}'],
providers: [LoggerService]
})
export class CounterParentComponent {
value: number;
spyLog: string[] = [];
private logger: LoggerService;
constructor(logger: LoggerService) {
this.logger = logger;
this.spyLog = logger.logs;
this.reset();
}
updateCounter() {
this.value += 1;
this.logger.tick();
}
reset() {
this.logger.log('-- reset --');
this.value = 0;
this.logger.tick();
}
}

28
aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, ViewChild } from '@angular/core';
import { DoCheckComponent } from './do-check.component';
import { Hero } from './hero';
@Component({
selector: 'do-check-parent',
templateUrl: './do-check-parent.component.html',
styles: ['.parent {background: Lavender}']
})
export class DoCheckParentComponent {
hero: Hero;
power: string;
title = 'DoCheck';
@ViewChild(DoCheckComponent) childView: DoCheckComponent;
constructor() {
this.reset();
}
reset() {
this.hero = new Hero('Windstorm');
this.power = 'sing';
if (this.childView) {
this.childView.reset();
}
}
}

3
aio/content/examples/lifecycle-hooks/src/app/hero.ts Normal file
View File

@ -0,0 +1,3 @@
export class Hero {
constructor(public name: string) { }
}

30
aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts Normal file
View File

@ -0,0 +1,30 @@
import { Component, ViewChild } from '@angular/core';
import { Hero } from './hero';
import { OnChangesComponent } from './on-changes.component';
@Component({
selector: 'on-changes-parent',
templateUrl: './on-changes-parent.component.html',
styles: ['.parent {background: Lavender;}']
})
export class OnChangesParentComponent {
hero: Hero;
power: string;
title = 'OnChanges';
@ViewChild(OnChangesComponent) childView: OnChangesComponent;
constructor() {
this.reset();
}
reset() {
// new Hero object every time; triggers onChanges
this.hero = new Hero('Windstorm');
// setting power only triggers onChanges if this value is different
this.power = 'sing';
if (this.childView) {
this.childView.reset();
}
}
}

21
aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.directive.ts Normal file
View File

@ -0,0 +1,21 @@
import { Directive, OnInit } from '@angular/core';
import { LoggerService } from './logger.service';
let nextId = 1;
// #docregion ngOnInit
@Directive()
export class PeekABooDirective implements OnInit {
constructor(private logger: LoggerService) { }
// implement OnInit's `ngOnInit` method
ngOnInit() {
this.logIt(`OnInit`);
}
logIt(msg: string) {
this.logger.log(`#${nextId++} ${msg}`);
}
}
// #enddocregion ngOnInit

7
aio/content/examples/styleguide/src/05-18/app/app.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-hero-list></toh-hero-list>'
})
export class AppComponent { }

20
aio/content/examples/styleguide/src/05-18/app/app.module.ts Normal file
View File

@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroComponent, HeroListComponent } from './heroes';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '05-18', component: AppComponent }])
],
declarations: [
AppComponent,
HeroComponent,
HeroListComponent
],
exports: [AppComponent]
})
export class AppModule {}

24
aio/content/examples/styleguide/src/05-18/app/heroes/hero-list/hero-list.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component } from '@angular/core';
import { Hero } from '../shared/hero.model';
@Component({
selector: 'toh-hero-list',
template: `
<section>
Our list of heroes:
<toh-hero *ngFor="let hero of heroes">
</toh-hero>
Total powers: {{totalPowers}}<br>
Average power: {{avgPower}}
</section>
`
})
export class HeroListComponent {
heroes: Hero[] = [];
totalPowers = 1;
get avgPower() {
return this.totalPowers / this.heroes.length;
}
}

1
aio/content/examples/styleguide/src/05-18/app/heroes/hero-list/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './hero-list.component';

15
aio/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, Input } from '@angular/core';
// #docregion example
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
// The exclamation mark suppresses errors that a property is
// not initialized.
// Ignoring this enforcement can prevent the type checker
// from finding potential issues.
@Input() id!: string;
}
// #enddocregion example

17
aio/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, Input } from '@angular/core';
// #docregion example
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Input() id?: string;
process() {
if (this.id) {
// ...
}
}
}
// #enddocregion example

11
aio/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component, Input } from '@angular/core';
// #docregion example
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Input() id = 'default_id';
}
// #enddocregion example

1
aio/content/examples/styleguide/src/05-18/app/heroes/hero/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './hero.component';

3
aio/content/examples/styleguide/src/05-18/app/heroes/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './hero';
export * from './hero-list';
export * from './shared';

4
aio/content/examples/styleguide/src/05-18/app/heroes/shared/hero.model.ts Normal file
View File

@ -0,0 +1,4 @@
export interface Hero {
id: number;
name: string;
}

1
aio/content/examples/styleguide/src/05-18/app/heroes/shared/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './hero.model';

2
aio/content/examples/styleguide/src/05-18/app/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './heroes';
export * from './app.component';

61
aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,61 @@
import { browser, element, by, logging } from 'protractor';
describe('What is Angular', () => {
const paragraphs = element.all(by.css('p'));
const buttons = element.all(by.css('button'));
const templateButton = buttons.get(1);
const templateText = paragraphs.get(3);
const messageButton = buttons.get(0);
const messageText = paragraphs.get(2);
const ngIfButton = buttons.get(2);
const ngIfText = paragraphs.get(4);
const diButton = buttons.get(3);
beforeEach(() => browser.get(''));
// helper function to test what's logged to the console
async function logChecker(contents) {
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
expect(messages.length).toBeGreaterThan(0);
}
it('should display Hello World', async () => {
expect(await element(by.css('hello-world h2')).getText()).toEqual('Hello World');
});
// Test for alert
it('should display js alert after button click', async () => {
await messageButton.click();
const alert = browser.switchTo().alert();
expect(await alert.getText()).toEqual('Hello, World');
await alert.accept();
});
it('should display blue a sentence', async () => {
expect(await messageText.getCssValue('color')).toEqual('rgba(0, 0, 255, 1)');
});
// Hello World Template section
it('should add 123 to editable p tag', async () => {
await templateButton.click();
await templateText.click();
await templateText.sendKeys('123');
expect(await templateText.getText()).toEqual('You can edit me!123');
});
// Test for ngIf section
it('should display edit instructions after button click', async () => {
await ngIfButton.click();
expect(await ngIfText.getText()).toEqual('You can edit the following paragraph.');
});
// Test for DI section
it('should log the count', async () => {
await diButton.click();
await logChecker(0);
});
});

0
aio/content/examples/what-is-angular/example-config.json Normal file
View File

9
aio/content/examples/what-is-angular/src/app/app.component.html Normal file
View File

@ -0,0 +1,9 @@
<h1>Understanding Angular</h1>
<!-- #docregion hello-world-selector -->
<hello-world></hello-world>
<!-- #enddocregion hello-world-selector -->
<hello-world-interpolation></hello-world-interpolation>
<hello-world-bindings></hello-world-bindings>
<hello-world-template></hello-world-template>
<hello-world-ngif></hello-world-ngif>
<hello-world-di></hello-world-di>

7
aio/content/examples/what-is-angular/src/app/app.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent { }

30
aio/content/examples/what-is-angular/src/app/app.module.ts Normal file
View File

@ -0,0 +1,30 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { HelloWorldTemplateComponent } from './hello-world-template.component';
import { HelloWorldNgIfComponent } from './hello-world-ngif/hello-world-ngif.component';
import { HelloWorldDependencyInjectionComponent } from './hello-world-di/hello-world-di.component';
import { HelloWorldInterpolationComponent } from './hello-world-interpolation/hello-world-interpolation.component';
import { HelloWorldBindingsComponent } from './hello-world-bindings/hello-world-bindings.component';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent,
HelloWorldTemplateComponent,
HelloWorldNgIfComponent,
HelloWorldDependencyInjectionComponent,
HelloWorldInterpolationComponent,
HelloWorldBindingsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

6
aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html Normal file
View File

@ -0,0 +1,6 @@
<!-- #docregion event-binding -->
<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
<!-- #enddocregion -->
<!-- #docregion bindings -->
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
<!-- #enddocregion -->

17
aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-bindings',
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
// #docregion method
sayMessage() {
alert(this.message);
}
// #enddocregion
}

3
aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html Normal file
View File

@ -0,0 +1,3 @@
<h2>Hello World: Dependency Injection</h2>
<button (click)="onLogMe()">Log me!</button>
<p>Be sure to open the console to view the output!</p>

19
aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import { Logger } from '../logger.service';
@Component({
selector: 'hello-world-di',
templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent {
count = 0;
constructor(private logger: Logger) {
}
onLogMe() {
this.logger.writeCount(this.count);
this.count++;
}
}

4
aio/content/examples/what-is-angular/src/app/hello-world-example.html Normal file
View File

@ -0,0 +1,4 @@
<hello-world>
<h2>Hello World</h2>
<p>This is my first component!</p>
</hello-world>

3
aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html Normal file
View File

@ -0,0 +1,3 @@
<!-- #docregion say-hello -->
<p>{{ message }}</p>
<!-- #enddocregion say-hello -->

9
aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
message = 'Hello, World!';
}

9
aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html Normal file
View File

@ -0,0 +1,9 @@
<h2>Hello World: ngIf!</h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>

21
aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts Normal file
View File

@ -0,0 +1,21 @@
// #docplaster
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = 'I\'m read only!';
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = 'I\'m read only!';
}
}
}

24
aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts Normal file
View File

@ -0,0 +1,24 @@
// #docplaster
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-template',
template: `
<h2>Hello World Template</h2>
<button (click)="onEditClick()">Make text editable!</button>
<p [contentEditable]="canEdit">{{ message }}</p>
`
})
export class HelloWorldTemplateComponent {
message = 'I am read only!';
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = 'I am read only!';
}
}
}

14
aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts Normal file
View File

@ -0,0 +1,14 @@
// #docplaster
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`,
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
}

8
aio/content/examples/what-is-angular/src/app/logger.service.ts Normal file
View File

@ -0,0 +1,8 @@
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class Logger {
writeCount(count: number) {
console.warn(count);
}
}

13
aio/content/examples/what-is-angular/src/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Helloworld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

12
aio/content/examples/what-is-angular/src/main.ts Normal file
View File

@ -0,0 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

8
aio/content/examples/what-is-angular/stackblitz.json Normal file
View File

@ -0,0 +1,8 @@
{
"description": "What is Angular?",
"files":[
"!**/*.d.ts",
"!**/*.js"
],
"tags":["overview", "angular"]
}

18
aio/content/file-not-found.md
View File

@ -1,16 +1,10 @@
@description
<div class="nf-container l-flex-wrap flex-center">
<div class="center-layout-wide">
<div class="nf-container l-flex-wrap flex-center">
<img src="assets/images/support/angular-404.svg" width="300" height="300"/>
<div class="nf-response l-flex-wrap">
<h1 class="no-anchor no-toc">Page Not Found</h1>
<p>We're sorry. The page you are looking for cannot be found.</p>
<h1 class="no-anchor no-toc">Page Not Found</h1>
<p>We're sorry. The page you are looking for cannot be found.</p>
</div>
</div>
<aio-file-not-found-search></aio-file-not-found-search>
</div>
<aio-file-not-found-search></aio-file-not-found-search>

100
aio/content/guide/accessibility.md
View File

@ -1,46 +1,30 @@
# Accessibility in Angular
# Angular 中的无障碍功能
The web is used by a wide variety of people, including those who have visual or motor impairments.
A variety of assistive technologies are available that make it much easier for these groups to
interact with web-based software applications.
In addition, designing an application to be more accessible generally improves the user experience for all users.
Web 会被各种各样的人使用，包括有视觉或运动障碍的人。有多种辅助技术能使这些人更轻松地和基于 Web 的软件应用进行交互。另外，将应用设计得更易于访问通常也能改善所有用户的体验。
For an in-depth introduction to issues and techniques for designing accessible applications, see the [Accessibility](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility) section of the Google's [Web Fundamentals](https://developers.google.com/web/fundamentals/).
关于如何设计无障碍应用的问题和技术的深入介绍，请参阅 Google [网络基础知识](https://developers.google.com/web/fundamentals/)的[无障碍功能](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility)部分。
This page discusses best practices for designing Angular applications that
work well for all users, including those who rely on assistive technologies.
本页讨论了设计 Angular 应用的最佳实践，这些实践对所有用户（包括依赖辅助技术的用户）都适用。
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
本页所描述的范例程序，参阅<live-example></live-example>。
</div>
## Accessibility attributes
## 无障碍属性（Attribute）
Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
to provide semantic meaning where it might otherwise be missing.
Use [attribute binding](guide/attribute-binding) template syntax to control the values of accessibility-related attributes.
建立无障碍的 Web 体验通常会涉及设置 [ARIA 属性（Attribute）](https://developers.google.com/web/fundamentals/accessibility/semantics-aria) 以提供可能会丢失的语义。使用 [Attribute 绑定](guide/attribute-binding模板语法来控制与无障碍性相关的属性（Attribute）值。
When binding to ARIA attributes in Angular, you must use the `attr.` prefix, as the ARIA
specification depends specifically on HTML attributes rather than properties of DOM elements.
在 Angular 中绑定 ARIA 属性（Attribute）时，必须使用 `attr.` 前缀，因为 ARIA 规范针对的是 HTML 属性（Attribute），而不是 DOM 元素的属性（Property）。
```html
<!-- Use attr. when binding to an ARIA attribute -->
<button [attr.aria-label]="myActionLabel">...</button>
@ -49,73 +33,45 @@ specification depends specifically on HTML attributes rather than properties of
Note that this syntax is only necessary for attribute _bindings_.
Static ARIA attributes require no extra syntax.
注意，此语法仅对于属性（Attribute）*绑定*是必需的。静态 ARIA 属性（Attribute）不需要额外的语法。
```html
<!-- Static ARIA attributes require no extra syntax -->
<button aria-label="Save document">...</button>
```
NOTE:
注意：
<div class="alert is-helpful">
By convention, HTML attributes use lowercase names (`tabindex`), while properties use camelCase names (`tabIndex`).
按照约定，HTML 属性（Attribute）使用小写名称（ `tabindex` ），而 Property 使用 camelCase 名称（ `tabIndex` ）。
See the [Binding syntax](guide/binding-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties.
关于 Attribute 和 Property 之间差异的更多背景信息，请参阅[模板语法](guide/html-attribute-vs-dom-property一章。
</div>
## Angular UI components
## Angular UI 组件
## Angular UI components
The [Angular Material](https://material.angular.io/) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
For example:
由 Angular 团队维护的 [Angular Material](https://material.angular.io/) 库是旨在提供完全无障碍的一组可复用 UI 组件。[组件开发工具包（CDK）](https://material.angular.io/cdk/categories)中包括 `a11y` 软件包，该软件包提供了支持无障碍领域的各种工具。例如：
* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region. See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
`LiveAnnouncer` 用于使用 `aria-live` 区域向屏幕阅读器用户朗读消息。关于 [aria-live 领域的](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live)更多信息，请参阅 W3C 文档。
* The `cdkTrapFocus` directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
`cdkTrapFocus` 指令能将 Tab 键焦点捕获在元素内。使用它可为必须限制焦点的模态对话框之类的组件创建无障碍体验。
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
关于这些工具和其它工具的完整详细信息，请参阅 [Angular CDK 无障碍功能概述](https://material.angular.io/cdk/a11y/overview)。
### Augmenting native elements
### 增强原生元素
Native HTML elements capture a number of standard interaction patterns that are important to accessibility.
When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
原生 HTML 元素捕获了许多对无障碍性很重要的标准交互模式。在制作 Angular 组件时，应尽可能直接复用这些原生元素，而不是重新实现已获良好支持的行为。
For example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native `<button>` element.
This most commonly applies to `<button>` and `<a>`, but can be used with many other types of element.
例如，你可以创建一个组件，它使用属性（Attribute）选择器指向原生 `<button>` 元素，而不是为各种新按钮创建自定义元素。通常这适用于 `<button>` 和 `<a>`，但也可以用于许多其它类型的元素。
You can see examples of this pattern in Angular Material: [`MatButton`](https://github.com/angular/components/blob/50d3f29b6dc717b512dbd0234ce76f4ab7e9762a/src/material/button/button.ts#L67-L69), [`MatTabNav`](https://github.com/angular/components/blob/50d3f29b6dc717b512dbd0234ce76f4ab7e9762a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L139), [`MatTable`](https://github.com/angular/components/blob/50d3f29b6dc717b512dbd0234ce76f4ab7e9762a/src/material/table/table.ts#L22).
你可以在 Angular Material 中看到此模式的范例：[`MatButton`](https://github.com/angular/components/blob/master/src/material/button/button.ts#L66-L68)，[`MatTabNav`](https://github.com/angular/components/blob/master/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L67)，[`MatTable`](https://github.com/angular/components/blob/master/src/material/table/table.ts#L17)。
### Using containers for native elements
### 将容器用于原生元素
Sometimes using the appropriate native element requires a container element.
For example, the native `<input>` element cannot have children, so any custom text entry components need
to wrap an `<input>` with additional elements.
@ -124,122 +80,76 @@ this makes it impossible for users of the component to set arbitrary properties
Instead, you can create a container component that uses content projection to include the native control in the
component's API.
有时要使用的原生元素需要一个容器元素。例如，原生 `<input>` 元素不能有子元素，因此任何自定义的文本输入组件都需要用其它元素来包装 `<input>`。尽管你可能只在自定义组件的模板中包含 `<input>`，但这将使该组件的用户无法为 `input` 元素设置任意 Property 和 Attribute。相反，你可以创建一个使用内容投影的容器组件，以将原生控件包含在组件的 API 中。
You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
你可以把 [`MatFormField`](https://material.angular.io/components/form-field/overview) 作为该模式的例子。
## Case study: Building a custom progress bar
## 案例研究：构建自定义进度条
The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes.
以下范例显示如何通过使用宿主（host）绑定来控制与无障碍性相关的属性（Attribute），来把简单的进度条无障碍化。
* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
该组件使用标准的 HTML 属性（Attribute）`role` 和 ARIA 属性（Attribute）来定义要启用无障碍支持的元素。ARIA 属性（Attribute）`aria-valuenow` 绑定到用户的输入。
<code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
在模板中，`aria-label` 属性（Attribute）可以确保屏幕阅读器能访问该控件。
<code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
## Routing and focus management
## 路由和焦点管理
Tracking and controlling [focus](https://developers.google.com/web/fundamentals/accessibility/focus/) in a UI is an important consideration in designing for accessibility.
When using Angular routing, you should decide where page focus goes upon navigation.
在设计无障碍性时，在 UI 中跟踪和控制[焦点](https://developers.google.com/web/fundamentals/accessibility/focus/)是很重要的考虑因素。使用 Angular 路由时，你需要确定页面焦点在导航上的位置。
To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.
Use the `NavigationEnd` event from the `Router` service to know when to update
focus.
为了避免仅仅依靠视觉提示，你需要确保路由代码会在页面导航之后更新焦点。使用 `Router` 服务中的 `NavigationEnd` 事件可以知道何时该更新焦点。
The following example shows how to find and focus the main content header in the DOM after navigation.
以下范例显示了导航后如何在 DOM 中查找并把焦点移动到主体内容的头部。
```ts
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
const mainHeader = document.querySelector('#main-content-header')
if (mainHeader) {
mainHeader.focus();
}
});
```
```
In a real application, the element that receives focus will depend on your specific
application structure and layout.
The focused element should put users in a position to immediately move into the main content that has just been routed into view.
You should avoid situations where focus returns to the `body` element after a route change.
在实际的应用程序中，哪些元素获得焦点将取决于该应用特有的结构和布局。获得焦点的元素应使用户能够立即移动到刚刚进入视野的主要内容。你应该避免当路由变化后焦点重新回到 `body` 元素的情况。
## Additional resources
## 额外资源
* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
[无障碍功能 - Google 网络基础知识](https://developers.google.com/web/fundamentals/accessibility)
* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria/)
[ARIA 规范和写作惯例](https://www.w3.org/TR/wai-aria/)
* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
[Material Design - 无障碍功能](https://material.io/design/usability/accessibility.html)
* [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
[Smashing 杂志](https://www.smashingmagazine.com/search/?q=accessibility)
* [Inclusive Components](https://inclusive-components.design/)
[包容性组件](https://inclusive-components.design/)
* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources/)
[无障碍功能的资源和代码范例](https://dequeuniversity.com/resources/)
* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web/)
* [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
[Rob Dodson 的 A11y 播客](https://www.youtube.com/watch?v=HtTyRajRuyY)
* [Codelyzer](http://codelyzer.com/rules/) provides linting rules that can help you make sure your code meets accessibility standards.
[Codelyzer](http://codelyzer.com/rules/)提供了一些 lint 规则，可以帮助你确保代码符合无障碍性标准。
Books
图书
* "A Web for Everyone: Designing Accessible User Experiences", Sarah Horton and Whitney Quesenbery
* "Inclusive Design Patterns", Heydon Pickering
## More on accessibility
## 关于无障碍性的更多信息
You may also be interested in the following:
你可能也对以下内容感兴趣：
* [Audit your Angular app's accessibility with codelyzer](https://web.dev/accessible-angular-with-codelyzer/).
[使用 codelyzer 审核 Angular 应用程序的无障碍性](https://web.dev/accessible-angular-with-codelyzer/)。

582
aio/content/guide/ajs-quick-reference.md
View File

File diff suppressed because it is too large Load Diff

124
aio/content/guide/angular-compiler-options.md
View File

@ -1,15 +1,9 @@
# Angular compiler options
# Angular 编译器选项
When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the [TypeScript configuration file](guide/typescript-configuration).
使用 [AoT 编译](guide/aot-compiler) 时，可以通过在 [TypeScript 配置文件中](guide/typescript-configuration)指定*模板*编译器选项来控制如何编译应用程序。
The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
模板选项对象 `angularCompilerOptions` 和为 TypeScript 编译器提供标准选项的 `compilerOptions` 对象是兄弟。
```json
{
"compilerOptions": {
@ -22,28 +16,19 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
...
}
}
```
```
{@a tsconfig-extends}
## Configuration inheritance with extends
## 用 `extends` 语法配置继承方式
Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
像 TypeScript 编译器一样，Angular 的 AOT 编译器也支持对 TypeScript 配置文件中的 `angularCompilerOptions` 进行 `extends`。`extends` 属性位于顶层，和 `compilerOptions` 和 `angularCompilerOptions` 平级。
A TypeScript configuration can inherit settings from another file using the `extends` property.
The configuration options from the base file are loaded first, then overridden by those in the inheriting configuration file.
使用 `extends` 属性，TypeScript 配置可以从另一个文件中继承设置。首先从基础文件中加载配置项，然后被继承自它的配置文件中的配置项覆写。
For example:
比如：
```json
{
"extends": "../tsconfig.json",
@ -61,103 +46,64 @@ For example:
For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
欲知详情，请参阅 [TypeScript 手册](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。
## Template options
## 模板选项
The following options are available for configuring the AOT template compiler.
以下选项可用于配置 AoT 模板编译器。
### `allowEmptyCodegenFiles`
When `true`, generate all possible files even if they are empty. Default is `false`. Used by the Bazel build rules to simplify how Bazel rules track file dependencies. Do not use this option outside of the Bazel rules.
如果为 `true`，则生成所有可能的文件 —— 即使它们为空。默认值为 `false`。Bazel 的构建规则使用它来简化 Bazel 规则跟踪文件依赖性的方式。不要在 Bazel 规则之外使用此选项。
### `annotationsAs`
Modifies how Angular-specific annotations are emitted to improve tree-shaking. Non-Angular annotations are not affected. One of `static fields` (the default) or `decorators`.
修改 Angular 专有注解的生成方式，以改善摇树优化。非 Angular 注解不受影响。可选值为 `static fields`（默认值）或 `decorators`。
* By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes.
默认情况下，编译器会用类中的静态字段替换装饰器，这允许像 [Closure 编译器](https://github.com/google/closure-compiler)这样的高级摇树器删除未使用的类。
* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the`__decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note that the resulting code will not properly tree-shake.
`decorators` 值会将装饰器保留在原处，这将使编译速度更快。TypeScript 会发出对 `__decorate` 辅助程序的调用。使用 `--emitDecoratorMetadata` 进行运行时反射（但请注意，生成的代码将无法正确摇树）。
* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note that the resulting code will not properly tree-shake.
### `annotateForClosureCompiler`
When `true`, use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted JavaScript with [JSDoc](https://jsdoc.app/) comments needed by the
[Closure Compiler](https://github.com/google/closure-compiler). Default is `false`.
如果为 `true`，则使用 [Tsickle](https://github.com/angular/tsickle) 来用 [JSDoc](http://usejsdoc.org/) 对生成的 JavaScript 代码进行注解，这些注释是供 [Closure 编译器](https://github.com/google/closure-compiler) 使用的。默认值为 `false`。
### `disableExpressionLowering`
When `true` (the default), transforms code that is or could be used in an annotation, to allow it to be imported from template factory modules. See [metadata rewriting](guide/aot-compiler#metadata-rewriting) for more information.
如果为 `true`（默认值），则转换在注解中使用或允许使用的代码，以允许从模板的工厂模块导入代码。欲知详情，请参阅[元数据重写](guide/aot-compiler#metadata-rewriting)。
When `false`, disables this rewriting, requiring the rewriting to be done manually.
如果为 `false`，则禁用此重写，你必须手动进行重写。
### `disableTypeScriptVersionCheck`
When `true`, the compiler does not check the TypeScript version and does not report an error when an unsupported version of TypeScript is used. Not recommended, as unsupported versions of TypeScript might have undefined behavior. Default is `false`.
如果为 `true`，则在使用不受支持的 TypeScript 版本时，编译器不会检查 TypeScript 版本，并且不会报错。不建议使用，因为不受支持的 TypeScript 版本可能具有未定义的行为。默认值为 `false`。
### `enableI18nLegacyMessageIdFormat`
Instructs the Angular template compiler to generate legacy ids for messages that are tagged in templates by the `i18n` attribute.
See [Localizing your app](guide/i18n#mark-text-for-translations) for more information about marking messages for localization.
指示 Angular 模板编译器为模板中用 `i18n` 属性标出的消息生成旧版 ID。关于为本地化而对消息进行标记的更多信息，请参阅[本地化你的应用程序。](guide/i18n#mark-text-for-translations)
Set this option to `false` unless your project relies upon translations that were previously generated using legacy ids. Default is `true`.
除非你的项目依赖先前已用旧版 ID 生成的翻译，否则请将此选项设置为 `false`。默认值为 `true` 。
The pre-Ivy message extraction tooling generated a variety of legacy formats for extracted message ids.
These message formats have a number of issues, such as whitespace handling and reliance upon information inside the original HTML of a template.
Ivy 之前版本的消息提取工具为所提取的消息 id 生成了多种旧格式。这些消息格式存在许多问题，例如对空白字符的处理和对模板原始 HTML 内部信息的依赖。
The new message format is more resilient to whitespace changes, is the same across all translation file formats, and can be generated directly from calls to `$localize`.
This allows `$localize` messages in application code to use the same id as identical `i18n` messages in component templates.
新的消息格式对空白字符的改动更宽容，在所有翻译文件格式中都相同，并且可以直接通过调用 `$localize` 生成。这允许应用程序代码中的 `$localize` 消息使用与组件模板中 `i18n` 消息完全相同的 id。
### `enableIvy`
Enables the [Ivy](guide/ivy) compilation and rendering pipeline. Default is `true`, as of version 9. In version 9, you can [opt out of Ivy](guide/ivy#opting-out-of-angular-ivy) to continue using the previous compiler, View Engine.
启用 [Ivy](guide/ivy) 编译和渲染管道。从版本 9 开始，默认值为 `true`。在版本 9 中，你可以[选择不用 Ivy](guide/ivy#opting-out-of-angular-ivy) 而是继续使用以前的编译器 View Engine。
For library projects generated with the CLI, the `prod` configuration default is `false` in version 9.
对于使用 CLI 生成的*库*项目，`prod` 配置默认在版本 9 中为 `false`。
### `enableResourceInlining`
When `true`, replaces the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
当为 `true` 时，将所有 `@Component` 装饰器中的 `templateUrl` 和 `styleUrls` 属性替换为 `template` 和 `styles` 属性中的内联内容。
When enabled, the `.js` output of `ngc` does not include any lazy-loaded template or style URLs.
启用后，`ngc` 的 `.js` 输出不会包含任何惰性加载的模板或样式 URL。
For library projects generated with the CLI, the dev configuration default is `true`.
对于使用 CLI 生成的库项目，dev 配置下默认为 `true`。
{@a enablelegacytemplate}
@ -165,164 +111,104 @@ For library projects generated with the CLI, the dev configuration default is `t
When `true`, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is `false`. Might be required by some third-party Angular libraries.
如果为 `true`，则启用 Angular 4.0 中为了避免与同名的 DOM 元素冲突而不推荐使用的 `<template>` 元素（推荐改用 `<ng-template>`）。默认值为 `false`。某些第三方 Angular 库可能需要它。
### `flatModuleId`
The module ID to use for importing a flat module (when `flatModuleOutFile` is `true`). References generated by the template compiler use this module name when importing symbols
from the flat module. Ignored if `flatModuleOutFile` is `false`.
用于导入扁平模块的模块 ID（当 `flatModuleOutFile` 为 `true` 时）。从扁平模块中导入符号时，模板编译器生成的引用将使用该模块的名称。如果 `flatModuleOutFile` 为 `false` 则忽略。
### `flatModuleOutFile`
When `true`, generates a flat module index of the given file name and the corresponding flat module metadata. Use to create flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option is used, the `package.json` for the library should refer
to the generated flat module index instead of the library index file.
为 `true` 时，将生成指定文件名和相应扁平模块元数据的扁平模块索引。用于创建像 `@angular/core` 和 `@angular/common` 这样打包的扁平模块。使用此选项时，库的 `package.json` 应引用生成的扁平模块索引而不是库的索引文件。
Produces only one `.metadata.json` file, which contains all the metadata necessary
for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat
module index is used to import symbols that includes both the public API from the library index
module index is used to import symbols that include both the public API from the library index
as well as shrowded internal symbols.
它只会生成一个 `.metadata.json` 文件，该文件包含从库索引中导出的符号所需的全部元数据。在生成的 `.ngfactory.js` 文件中，扁平模块索引用于导入符号，这些符号既包括库索引中的公共 API，也包括缩进的内部符号。
By default the `.ts` file supplied in the `files` field is assumed to be the library index.
If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced.
默认情况下，`files` 字段中提供的 `.ts` 文件会被当做库索引。如果指定了多个 `.ts` 文件，则使用 `libraryIndex` 选择要使用的文件。如果提供了多个不带 `libraryIndex` `.ts` 文件，则会产生错误。
A flat module index `.d.ts` and `.js` is created with the given `flatModuleOutFile` name in the same location as the library index `.d.ts` file.
使用指定的 `flatModuleOutFile` 名在与库索引 `.d.ts` 文件相同的位置创建扁平模块索引 `.d.ts` 和 `.js`。
For example, if a library uses the `public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field would be `["public_api.ts"]`.
The `flatModuleOutFile` option could then be set to (for example) `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files.
The `module` field of the library's `package.json` would be `"index.js"` and the `typings` field
would be `"index.d.ts"`.
例如，如果一个库使用 `public_api.ts` 文件作为模块的库索引，则 `tsconfig.json` 的 `files` 字段就是 `["public_api.ts"]`。然后，比如把 `flatModuleOutFile` 选项设置为 `"index.js"`，这将生成 `index.d.ts` 和 `index.metadata.json` 文件。该库的 `package.json` 的 `module` 字段中就会是 `"index.js"`，而 `typings` 字段将是 `"index.d.ts"`。
### `fullTemplateTypeCheck`
When `true` (recommended), enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler, which uses TypeScript to validate binding expressions. For more information, see [Template type checking](guide/template-typecheck).
为 `true`（推荐）时，会启用模板编译器的[绑定表达式验证](guide/aot-compiler#binding-expression-validation)阶段，该阶段使用 TypeScript 来验证绑定表达式。欲知详情，请参阅[模板类型检查](guide/template-typecheck)。
Default is `false`, but when you use the CLI command `ng new`, it is set to `true` by default in the generated project's configuration.
默认值为 `false`，但是当你使用 CLI 命令 `ng new` 时，默认生成的项目配置中会将其设置为 `true`。
Default is `false`, but when you use the CLI command `ng new --strict`, it is set to `true` in the generated project's configuration.
### `generateCodeForLibraries`
When `true` (the default), generates factory files (`.ngfactory.js` and `.ngstyle.js`)
for `.d.ts` files with a corresponding `.metadata.json` file.
如果为 `true`（默认值），就会为 `.d.ts` 和相应的 `.metadata.json` 生成工厂文件（`.ngfactory.js` 和 `.ngstyle.js`）。
When `false`, factory files are generated only for `.ts` files. Do this when using factory summaries.
如果为 `false`，则仅为 `.ts` 文件生成工厂文件。当要使用工厂摘要（summary）时，请这么设置。
### `preserveWhitespaces`
When `false` (the default), removes blank text nodes from compiled templates, which results in smaller emitted template factory modules. Set to `true` to preserve blank text nodes.
如果为 `false`（默认值），则从编译的模板中删除空白文本节点，这将生成较小的模板工厂模块。设置为 `true` 以保留空白文本节点。
### `skipMetadataEmit`
When `true`, does not produce `.metadata.json` files. Default is `false`.
为 `true` 时，不生成 `.metadata.json` 文件。默认值为 `false`。
The `.metadata.json` files contain information needed by the template compiler from a `.ts`
file that is not included in the `.d.ts` file produced by the TypeScript compiler.
This information includes, for example, the content of annotations (such as a component's template), which TypeScript emits to the `.js` file but not to the `.d.ts` file.
`.metadata.json` 文件包含模板编译器从 `.ts` 文件中获得的信息，该信息未包含在 TypeScript 编译器生成的 `.d.ts` 文件中。该信息包括注解的内容（例如组件的模板）等，TypeScript 会将该注解的内容发送到 `.js` 文件中，但不会发送到 `.d.ts` 文件。
You can set to `true` when using factory summaries, because the factory summaries
include a copy of the information that is in the `.metadata.json` file.
你可以在使用工厂摘要（summary）中将其设置为 `true`，因为工厂摘要中包括 `.metadata.json` 文件中信息的副本。
Set to `true` if you are using TypeScript's `--outFile` option, because the metadata files
are not valid for this style of TypeScript output. However, we do not recommend using `--outFile` with Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead.
如果要使用 TypeScript 的 `--outFile` 选项，则设置为 `true`，因为元数据文件对于这种 TypeScript 输出风格无效。但是，我们不建议将 `--outFile` 和 Angular 一起使用。请使用打包程序，例如 [webpack](https://webpack.js.org/)。
### `skipTemplateCodegen`
When `true`, does not emit `.ngfactory.js` and `.ngstyle.js` files. This turns off most of the template compiler and disables the reporting of template diagnostics.
为 `true` 时，不生成 `.ngfactory.js` 和 `.ngstyle.js` 文件。这将关闭大多数模板编译器，并禁用模板诊断报告。
Can be used to instruct the template compiler to produce `.metadata.json` files for distribution with an `npm` package while avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to `npm`.
可用于指示模板编译器生成 `.metadata.json` 文件，以使用 `npm` 软件包进行分发，同时避免产生无法分发至 `npm` 的 `.ngfactory.js` 和 `.ngstyle.js` 文件。
For library projects generated with the CLI, the dev configuration default is `true`.
对于使用 CLI 生成的库项目，dev 配置默认为 `true`。
### `strictMetadataEmit`
When `true`, reports an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false`.
Default is `false`. Use only when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`.
为 `true` 时，如果 `"skipMetadataEmit"` 为 `false` 则向 `.metadata.json` 文件中报告错误。默认值为 `false`。只在 `"skipMetadataEmit"` 为 `false` 且 `"skipTemplateCodeGen"` 为 `true` 时使用。
Default is `false`. Use only when `"skipMetadataEmit"` is `false` and `"skipTemplateCodegen"` is `true`.
This option is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
该选项是为了验证为生成 `npm` 包而产生的 `.metadata.json` 文件。这种验证是严格的，并且会报告元数据中的错误，以免当模板编译器使用它时再出错。你可以通过在某个导出符号的注释文档中使用 `@dynamic` 注解来暂时防止（suppress）该选项报告错误。
It is valid for `.metadata.json` files to contain errors.
The template compiler reports these errors if the metadata is used to determine the contents of an annotation.
The metadata collector cannot predict the symbols that are designed for use in an annotation, so it preemptively includes error nodes in the metadata for the exported symbols.
The template compiler can then use the error nodes to report an error if these symbols are used.
`.metadata.json` 文件即使包含错误也是有效的。如果这些元数据用来确定注解的内容，则模板编译器会报告这些错误。元数据收集器无法预测哪些符号是为了在注解中使用而设计，因此它会先在元数据中为导出的符号中包含错误节点。然后，如果使用了这些符号，则模板编译器可以使用这些错误节点来报告错误。
If the client of a library intends to use a symbol in an annotation, the template compiler does not normally report this until the client uses the symbol.
This option allows detection of these errors during the build phase of
the library and is used, for example, in producing Angular libraries themselves.
如果库的客户代码打算在注解中使用某个符号，则模板编译器通常不会在客户方用到该符号之前就报错。此选项允许你在库的构建阶段就检测到这些错误，例如用于生成 Angular 库本身时。
For library projects generated with the CLI, the dev configuration default is `true`.
对于使用 CLI 生成的库项目，dev 配置中默认为 `true`。
### `strictInjectionParameters`
When `true` (recommended), reports an error for a supplied parameter whose injection type cannot be determined. When `false` (currently the default), constructor parameters of classes marked with `@Injectable` whose type cannot be resolved produce a warning.
如果为 `true`（推荐），则报告所提供的参数的错误，无法确定该参数的注入类型。如果为 `false`（当前为默认值），则标记为 `@Injectable` 但其类型无法解析的类的构造函数参数会产生警告。
When you use the CLI command `ng new --strict`, it is set to `true` in the generated project's configuration.
当你使用 CLI 命令 `ng new` 时，默认生成的项目配置中将其设置为 `true`。
### `strictTemplates`
When `true`, enables [strict template type checking](guide/template-typecheck#strict-mode). Strict mode is only available when using [Ivy](guide/ivy) (Angular version 9 and later).
如果为 `true`，则在 Angular 9 中启用[严格的模板类型检查](guide/template-typecheck#strict-mode)。仅当使用 [Ivy](guide/ivy) 时，才能使用严格模式。
Additional strictness flags allow you to enable and disable specific types of strict template type checking. See [troubleshooting template errors](guide/template-typecheck#troubleshooting-template-errors).
其它严格性标志允许你启用和禁用特定类型的严格模板类型检查。请参阅[排除模板错误](guide/template-typecheck#troubleshooting-template-errors)。
When you use the CLI command `ng new --strict`, it is set to `true` in the generated project's configuration.
当你使用 CLI 命令 `ng new --strict` 时，默认生成的项目配置中将其设置为 `true`。
### `trace`
When `true`, prints extra information while compiling templates. Default is `false`.
如果为 `true`，则在编译模板时输出额外的信息。默认值为 `false`。

298
aio/content/guide/animations.md
View File

@ -1,260 +1,146 @@
# Introduction to Angular animations
# Angular 动画简介
Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways:
动画用于提供运动的幻觉：HTML 元素随着时间改变样式。精心设计的动画可以让你的应用更有趣，更易用，但它们不仅仅是装饰性的。动画可以通过几种方式改善你的应用和用户体验：
* Without animations, web page transitions can seem abrupt and jarring.
没有动画，Web 页面的转场就会显得突兀、不协调。
* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions.
运动能极大地提升用户体验，因此动画可以让用户察觉到应用对他们的操作做出了响应。
* Good animations intuitively call the user's attention to where it is needed.
良好的动画可以直观的把用户的注意力吸引到要留意的地方。
Typically, animations involve multiple style *transformations* over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
典型的动画会涉及多种随时间变化的转换。HTML 元素可以移动、变换颜色、增加或缩小、隐藏或从页面中滑出。
这些变化可以同时发生或顺序发生。你可以控制每次转换的持续时间。
Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page.
Angular 的动画系统是基于 CSS 功能构建的，这意味着你可以 "动" 浏览器认为可动的任何属性。包括位置、大小、变形、颜色、边框等。W3C 在它的 [CSS Transitions（转场）](https://www.w3.org/TR/css-transitions-1/) 页中维护了一个可动属性的列表。
## About this guide
## 关于本指南
This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
本指南覆盖了基本的 Angular 动画特性，让你能开始为你的项目添加 Angular 动画。
The features described in this guide &mdash; and the more advanced features described in the related Angular animations guides &mdash; are demonstrated in an example app available as a <live-example></live-example>.
本指南中描述的特性，以及相关的 Angular 动画章节中描述的更多高级特性，都在一个范例 <live-example></live-example> 中进行了演示。
#### Prerequisites
#### 前提条件
The guide assumes that you're familiar with building basic Angular apps, as described in the following sections:
本指南假设你已经能熟练构建基本的 Angular 应用，也就是下列章节中所讲的那些：
* [Tutorial](tutorial)
[教程](tutorial)
* [Architecture Overview](guide/architecture)
[架构概览](guide/architecture)
## Getting started
## 快速上手
The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. When you create a new project using the CLI, these dependencies are automatically added to your project.
Angular 主要的动画模块是 `@angular/animations` 和 `@angular/platform-browser`。当你使用 CLI 创建新项目时，这些依赖会自动添加到你的项目中。
To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
为了把 Angular 动画添加到你的项目中，把这些与动画相关的模块和标准的 Angular 功能一起导入进来。
### Step 1: Enabling the animations module
### 步骤一：启用动画模块
Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
导入 `BrowserAnimationsModule`，它能把动画能力引入 Angular 应用的根模块中。
<code-example path="animations/src/app/app.module.1.ts" header="src/app/app.module.ts" language="typescript"></code-example>
<div class="alert is-helpful">
**Note:** When you use the CLI to create your app, the root application module `app.module.ts` is placed in the `src/app` folder.
**注意：**当你使用 CLI 创建应用时，应用的根模块 `app.module.ts` 位于 `src/app` 目录下。
</div>
### Step 2: Importing animation functions into component files
### 步骤二：把动画功能导入组件文件中
If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
如果你准备在组件文件中使用特定的动画函数，请从 `@angular/animations` 中导入这些函数。
<code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="imports" language="typescript">
</code-example>
<div class="alert is-helpful">
**Note:** See a [summary of available animation functions](guide/animations#animation-api-summary) at the end of this guide.
**注意：**参阅本章末尾的[可用动画函数汇总表](guide/animations#animation-api-summary)。
</div>
### Step 3: Adding the animation metadata property
### 步骤三：添加动画的元数据属性
In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property.
在组件的 `@Component()` 装饰器中，添加一个名叫 `animations:` 的元数据属性。
你可以把用来定义动画的触发器放进 `animations` 元数据属性中。
<code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="decorator" language="typescript">
</code-example>
## Animating a simple transition
## 简单转场动画
Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's transparent and green.
我们来做一个简单的转场动作，它把单个 HTML 元素从一个状态变成另一个状态。
比如，你可以指定按钮根据用户的最后一个动作显示成**Open**或**Closed**状态。当按钮处于 `open` 状态时，它是可见的，并且是黄色的。当它处于 `closed` 状态时，它是透明的，并且是绿色的。
In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
在 HTML 中，这些属性都使用普通的 CSS 样式，比如颜色（color）和透明度（opacity）。在 Angular 中，使用 `style()` 函数来指定一组用作动画的 CSS 样式。
你可以为动画状态指定一组样式，并为该状态指定一个名字，比如 `open` 或 `closed`。
<div class="lightbox">
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
</div>
### Animation state and styles
### 动画状态和样式
Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function.
使用 Angular 的 `state()` 函数来定义不同的状态，供每次转场结束时调用。该函数接受两个参数：一个唯一的名字，比如 `open` 或 `closed` 和一个 `style()` 函数。
Use the `style()` function to define a set of styles to associate with a given state name. Note that the style attributes must be in [*camelCase*](guide/glossary#case-conventions).
使用 `style()` 函数来定义一组与指定的状态名相关的样式。注意，样式的属性必须是[*小驼峰*](guide/glossary#case-conventions) 格式的。
Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow.
我们来看看 Angular 的 `state()` 函数如何与 `style()` 函数联用，来设置 CSS 样式的属性。
在下面的代码片段中，该状态的多个样式属性都是同时设置的。在 `open` 状态中，该按钮的高度是 200 像素，透明度是 1，背景色是黄色。
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state1" language="typescript">
</code-example>
In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green.
在 `closed` 状态中，按钮的高度是 100 像素，透明度是 0.5，背景色是绿色。
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state2" language="typescript">
</code-example>
### Transitions and timing
### 转场与时序
In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
在 Angular 中，你可以设置多个样式而不必用动画。不过，如果没有进一步细化，按钮的转换会立即完成 —— 没有渐隐、没有收缩，也没有其它的可视化效果来指出正在发生变化。
To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
要让这些变化不那么突兀，我们需要定义一个动画*转场*来要求这些状态之间的变化在一段时间内发生。`transition()` 接受两个参数：第一个参数接受一个表达式，它定义两个转场状态之间的方向；第二个参数接受一个或一系列 `animate()` 函数。
Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function.
使用 `animate()` 函数来定义长度、延迟和缓动效果，并指定一个样式函数，以定义转场过程中的样式。
你还可以使用 `animate()` 函数来为多步动画定义 `keyframes()` 函数。这些定义放在 `animate()` 函数的第二个参数中。
#### Animation metadata: duration, delay, and easing
#### 动画元数据：持续时间、延迟和缓动效果
The `animate()` function (second argument of the transition function) accepts the `timings` and `styles` input parameters.
`animate()` 函数（作为转场函数的第二个参数）可以接受 `timings` 和 `styles` 参数。
The `timings` parameter takes a string defined in three parts.
`timings` 参数接受一个由三部分组成的字符串。
>`animate ('duration delay easing')`
The first part, `duration`, is required. The duration can be expressed in milliseconds as a simple number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows:
第一部分 `duration`（持续时间）是必须的。这个持续时间可以表示成一个不带引号的纯数字（表示毫秒），或一个带引号的有单位的时间（表示秒数）。比如，0.1 秒的持续时间有如下表示方式：
* As a plain number, in milliseconds: `100`
作为纯数字，毫秒为单位：`100`
* In a string, as milliseconds: `'100ms'`
作为字符串，毫秒为单位：`'100ms'`
* In a string, as seconds: `'0.1s'`
作为字符串，秒为单位：`'0.1s'`
The second argument, `delay`, has the same syntax as `duration`. For example:
第二个参数 `delay` 的语法和 `duration` 一样。比如：
* Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
等待 100 毫秒，然后运行 200 毫秒表示为：`'0.2s 100ms'`
The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net/) during its runtime. For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses.
第三个参数 `easing` 控制动画在运行期间如何进行[加速和减速](http://easings.net/)。比如 `ease-in` 表示动画开始时很慢，然后逐渐加速。
* Wait for 100ms, run for 200ms. Use a deceleration curve to start out fast and slowly decelerate to a resting point: `'0.2s 100ms ease-out'`
等待 100 毫秒，运行 200 毫秒。按照减速曲线运动，快速启动并逐渐减速，直到静止：`'0.2s 100ms ease-out'`
* Run for 200ms, with no delay. Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: `'0.2s ease-in-out'`
运行 200 毫秒，不等待。按照标准曲线运动，开始很慢，中间加速，最后逐渐减速：`'0.2s ease-in-out'`
* Start immediately, run for 200ms. Use an acceleration curve to start slow and end at full velocity: `'0.2s ease-in'`
立即开始，运行 200 毫秒。按照加速曲线运动，开始很慢，最后达到全速：`'0.2s ease-in'`
<div class="alert is-helpful">
**Note:** See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
**注意：**要了解缓动曲线的更多信息，请参阅 Angular Material Design 网站下的[自然缓动曲线](https://material.io/design/motion/speed.html#easing)主题。
</div>
This example provides a state transition from `open` to `closed` with a one second transition between states.
下面的例子提供了一个从 `open` 到 `closed` 的持续一秒的状态转场。
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" language="typescript"
region="transition1">
</code-example>
In the code snippet above, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. In this case, the state change from `open` to `closed` takes one second, expressed here as `1s`.
在上面的代码片段中，`=>` 操作符表示单向转场，而 `<=>` 表示双向转场。在转场过程中，`animate()` 指定了转场需要花费的时间。在这里，从 `open` 到 `closed` 状态的转换要花费 1 秒中，表示成 `1s`。
This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc.
下面的例子添加了一个从 `closed` 到 `open` 的状态转场，转场动画持续 0.5 秒。
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" language="typescript"
region="transition2">
</code-example>
@ -263,42 +149,23 @@ region="transition2">
**Note:** Some additional notes on using styles within `state` and `transition` functions.
**注意：**在 `state` 和 `transition` 函数中使用样式时有一些需要注意的地方。
* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation has completed.
请用 `state()` 来定义那些每个转场结束时的样式，这些样式在动画完成后仍会保留。
* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation.
使用 `transition()` 来定义那些中间样式，以便在动画过程中产生运动的错觉。
* When animations are disabled, `transition()` styles can be skipped, but `state()` styles can't.
当禁用了动画时，也会忽略 `transition()` 中的样式，但 `state()` 中的样式不会。
* You can include multiple state pairs within the same `transition()` argument:<br/> `transition( 'on => off, off => void' )`.
你可以在同一个 `transition()` 参数中包含多个状态对：<br/>`transition( 'on => off, off => void' )`。
</div>
### Triggering the animation
### 触发动画
An animation requires a *trigger*, so that it knows when to start. The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template.
动画需要*触发器*，以便知道该在何时开始。`trigger()` 函数会把一些状态和转场组合在一起，并为这个动画命名，这样你就可以在 HTML 模板中把它附加到想要触发动画的元素上了。
The `trigger()` function describes the property name to watch for changes. When a change occurs, the trigger initiates the actions included in its definition. These actions can be transitions or other functions, as we'll see later on.
`trigger()` 函数描述了监听变化时要使用的触发器名称。当这个触发器名称所绑定的值发生了变化时，触发器就会启动它所定义的操作。这些操作可能是转场，也可能是其它功能，我们稍后就会看到。
In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.
在这个例子中，我们将把该触发器命名为 `openClose`，并把它附加到 `button` 元素上。该触发器描述了 `open` 和 `closed` 两个状态，以及两个转场效果的时序。
<div class="lightbox">
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
</div>
@ -306,69 +173,44 @@ In this example, we'll name the trigger `openClose`, and attach it to the `butto
<div class="alert is-helpful">
**Note:** Within each `trigger()` function call, an element can only be in one state at any given time. However, it's possible for multiple triggers to be active at once.
**注意：**在每个 `trigger()` 函数调用中，元素在任意时刻只能处于其中的一个状态。但是，元素可以在同一时刻激活多个触发器。
</div>
### Defining animations and attaching them to the HTML template
### 定义动画，并把它们附加到 HTML 模板中
Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
这些控制 HTML 元素如何运动的动画是在组件的元数据中定义的。请在 `@Component()` 装饰器的 `animations:` 属性下用代码定义你要用的动画。
<code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" language="typescript" region="component"></code-example>
When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
为组件定义好这些动画触发器之后，你可以给触发器名称加上 `@` 前缀并包在方括号里，来把它附加到组件模板中的元素上。然后，你可以使用 Angular 的标准属性绑定语法（如下所示），来把这个触发器绑定到模板表达式上。这里的 `triggerName` 就是触发器的名称，而 `expression` 的求值结果是前面定义过的动画状态之一。
```
<div [@triggerName]="expression">...</div>;
```
The animation is executed or triggered when the expression value changes to a new state.
当该表达式的值变成了新的状态时，动画就会执行或者叫触发。
The following code snippet binds the trigger to the value of the `isOpen` property.
下列代码片段把该触发器绑定到了 `isOpen` 属性的值上。
<code-example path="animations/src/app/open-close.component.1.html" header="src/app/open-close.component.html"
region="compare">
</code-example>
In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
在这个例子中，当 `isOpen` 表达式求值为一个已定义状态 `open` 或 `closed` 时，就会通知 `openClose` 触发器说状态变化了。然后，就由 `openClose` 中的代码来处理状态变更，并启动状态变更动画。
For elements entering or leaving a page (inserted or removed from the DOM), you can make the animations conditional. For example, use `*ngIf` with the animation trigger in the HTML template.
对于那些进入或离开页面的元素（插入到 DOM 中或从中移除），你可以让动画变成有条件的。例如，在 HTML 模板中可以和 `*ngIf` 一起使用动画触发器。
<div class="alert is-helpful">
**Note:** In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator.
**注意：**在组件文件中，要把用来定义动画的触发器设置为 `@Component()` 装饰器的 `animations:` 属性的值。
In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated.
在 HTML 模板文件中，使用这个触发器的名称来把所定义的这些动画附加到想要添加动画的 HTML 元素上。
</div>
### Code review
### 代码回顾
Here are the code files discussed in the transition example.
下面是转场动画范例中讨论过的代码文件。
<code-tabs>
<code-pane header="src/app/open-close.component.ts" path="animations/src/app/open-close.component.ts" language="typescript"
@ -386,218 +228,104 @@ region="trigger">
### Summary
### 小节
You learned to add animation to a simple transition between two states, using `style()` and `state()` along with `animate()` for the timing.
你已经学会了如何在两个状态之间添加简单的转场动画，只要使用 `style()` 和 `state()`，并使用 `animate()` 来定义时序就可以了。
You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers).
你还可以到 "动画" 组下学习 Angular 动画的高级特性，不妨先从[转场与触发器](guide/transition-and-triggers)中讲述的高级技巧开始。
{@a animation-api-summary}
## Animations API summary
## 动画 API 小节
The functional API provided by the `@angular/animations` module provides a domain-specific language (DSL) for creating and controlling animations in Angular applications. See the [API reference](api/animations) for a complete listing and syntax details of the core functions and related data structures.
`@angular/animations` 模块提供的这些功能性 API 提供了一种领域特定语言（DSL），用于在 Angular 应用中创建和控制动画效果。到 [API 参考手册](api/animations)中查看完整的列表以及这些核心功能、相关数据结构的详细语法。
<table>
<tr>
<th style="vertical-align: top">
Function name
函数名
</th>
<th style="vertical-align: top">
What it does
用途
</th>
</tr>
<tr>
<td><code>trigger()</code></td>
<td>
Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to <code>triggerName</code>. Use the first argument to declare a unique trigger name. Uses array syntax.
开始动画，并充当所有其它动画函数的容器。HTML 模板可以绑定到 <code>triggerName</code>。使用第一个参数来声明唯一的触发器名称。要使用数组语法。
</td>
<td>Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to <code>triggerName</code>. Use the first argument to declare a unique trigger name. Uses array syntax.</td>
</tr>
<tr>
<td><code>style()</code></td>
<td>
Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.
定义一个或多个要用于动画中的 CSS 样式。用于在动画期间控制 HTML 元素的视觉外观。要使用对象语法。
</td>
<td>Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.</td>
</tr>
<tr>
<td><code><a href="api/animations/state" class="code-anchor">state()</a></code></td>
<td>
Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.
创建一组有名字的 CSS 样式，它会在成功转换到指定的状态时应用到元素上。该状态可以在其它动画函数中通过名字进行引用。
</td>
<td>Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.</td>
</tr>
<tr>
<td><code>animate()</code></td>
<td>
Specifies the timing information for a transition. Optional values for <code>delay</code> and <code>easing</code>. Can contain <code>style()</code> calls within.
指定转场的时序信息。<code>delay</code> 和 <code>easing</code> 是可选值。其中可以包含 <code>style()</code> 调用。
</td>
<td>Specifies the timing information for a transition. Optional values for <code>delay</code> and <code>easing</code>. Can contain <code>style()</code> calls within.</td>
</tr>
<tr>
<td><code>transition()</code></td>
<td>
Defines the animation sequence between two named states. Uses array syntax.
定义两个命名状态之间的动画序列。使用数组语法。
</td>
<td>Defines the animation sequence between two named states. Uses array syntax.</td>
</tr>
<tr>
<td><code>keyframes()</code></td>
<td>
Allows a sequential change between styles within a specified time interval. Use within <code>animate()</code>. Can include multiple <code>style()</code> calls within each <code>keyframe()</code>. Uses array syntax.
允许以特定的时间间隔对样式进行顺序更改。用于 <code>animate()</code> 中。每个 <code>keyframe()</code> 中都可以包含多个 <code>style()</code> 调用。使用数组语法。
</td>
<td>Allows a sequential change between styles within a specified time interval. Use within <code>animate()</code>. Can include multiple <code>style()</code> calls within each <code>keyframe()</code>. Uses array syntax.</td>
</tr>
<tr>
<td><code><a href="api/animations/group" class="code-anchor">group()</a></code></td>
<td>
Specifies a group of animation steps (<em>inner animations</em>) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within <code>sequence()</code> or <code>transition().</code>
指定要并行运行的一组动画步骤（<em>内部动画</em>）。
该动画只有当所有内部动画步骤都完成之后才会继续。用于 <code>sequence()</code> 或 <code>transition()</code> 中。
</td>
<td>Specifies a group of animation steps (<em>inner animations</em>) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within <code>sequence()</code> or <code>transition().</code></td>
</tr>
<tr>
<td><code>query()</code></td>
<td>
Use to find one or more inner HTML elements within the current element.
用于找出当前元素中的一个或多个内部 HTML 元素。
</td>
<td>Use to find one or more inner HTML elements within the current element. </td>
</tr>
<tr>
<td><code>sequence()</code></td>
<td>
Specifies a list of animation steps that are run sequentially, one by one.
指定一个动画步骤列表，它们会逐个顺序执行。
</td>
<td>Specifies a list of animation steps that are run sequentially, one by one.</td>
</tr>
<tr>
<td><code>stagger()</code></td>
<td>
Staggers the starting time for animations for multiple elements.
交错安排多元素动画的开始时间。
</td>
<td>Staggers the starting time for animations for multiple elements.</td>
</tr>
<tr>
<td><code>animation()</code></td>
<td>
Produces a reusable animation that can be invoked from elsewhere. Used together with <code>useAnimation()</code>.
生成可在其它地方调用的可复用动画。与 <code>useAnimation()</code> 一起使用。
</td>
<td>Produces a reusable animation that can be invoked from elsewhere. Used together with <code>useAnimation()</code>.</td>
</tr>
<tr>
<td><code>useAnimation()</code></td>
<td>
Activates a reusable animation. Used with <code>animation()</code>.
激活一个可复用动画。和 <code>animation()</code> 一起使用。
</td>
<td>Activates a reusable animation. Used with <code>animation()</code>.</td>
</tr>
<tr>
<td><code>animateChild()</code></td>
<td>
Allows animations on child components to be run within the same timeframe as the parent.
允许子组件上的动画和父组件在同一个时间范围（timeframe）内执行。
</td>
<td>Allows animations on child components to be run within the same timeframe as the parent.</td>
</tr>
</table>
## More on Angular animations
## 关于 Angular 动画的更多知识
You may also be interested in the following:
你可能还对下列内容感兴趣：
* [Transition and triggers](guide/transition-and-triggers)
[转场与触发器](guide/transition-and-triggers)
* [Complex animation sequences](guide/complex-animation-sequences)
[复杂动画序列](guide/complex-animation-sequences)
* [Reusable animations](guide/reusable-animations)
[可复用动画](guide/reusable-animations)
* [Route transition animations](guide/route-animations)
[路由转场动画](guide/route-animations)
<div class="alert is-helpful">
Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in).
到这个 [Demo](http://animationsftw.in/#/) 中查看 2017 年 11 月的 AngularConnect 大会上完整的动画及其[演示](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&feature=youtu.be&t=2h47m53s)。
</div>

1048
aio/content/guide/aot-compiler.md
View File

File diff suppressed because it is too large Load Diff

272
aio/content/guide/aot-metadata-errors.md
View File

@ -1,47 +1,33 @@
# AOT metadata errors
# AOT 元数据错误
The following are metadata errors you may encounter, with explanations and suggested corrections.
你可能遇到一些元数据错误，下面是对它们的解释和纠正建议。
[<t>Expression form not supported</t><t>不支持此表达式格式</t>](#expression-form-not-supported)<br>
[<t>Reference to a local (non-exported) symbol</t><t>引用了局部（未导出的）符号</t>](#reference-to-a-local-symbol)<br>
[<t>Only initialized variables and constants</t><t>只允许初始化过的变量和常量</t>](#only-initialized-variables)<br>
[<t>Reference to a non-exported class</t><t>引用了未导出的类</t>](#reference-to-a-non-exported-class)<br>
[<t>Reference to a non-exported function</t><t>引用了未导出的函数</t>](#reference-to-a-non-exported-function)<br>
[<t>Function calls are not supported</t><t>不支持函数调用</t>](#function-calls-not-supported)<br>
[<t>Destructured variable or constant not supported</t><t>不支持解构变量或常量</t>](#destructured-variable-not-supported)<br>
[<t>Could not resolve type</t><t>不能解析此类型</t>](#could-not-resolve-type)<br>
[<t>Name expected</t><t>期待是名字</t>](#name-expected)<br>
[<t>Unsupported enum member name</t><t>不支持的枚举成员名</t>](#unsupported-enum-member-name)<br>
[<t>Tagged template expressions are not supported</t><t>不支持带标签函数的模板表达式</t>](#tagged-template-expressions-not-supported)<br>
[<t>Symbol reference expected</t><t>期待是符号引用</t>](#symbol-reference-expected)<br>
<hr>
[Expression form not supported](#expression-form-not-supported)<br>
[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)<br>
[Only initialized variables and constants](#only-initialized-variables)<br>
[Reference to a non-exported class](#reference-to-a-non-exported-class)<br>
[Reference to a non-exported function](#reference-to-a-non-exported-function)<br>
[Function calls are not supported](#function-calls-not-supported)<br>
[Destructured variable or constant not supported](#destructured-variable-not-supported)<br>
[Could not resolve type](#could-not-resolve-type)<br>
[Name expected](#name-expected)<br>
[Unsupported enum member name](#unsupported-enum-member-name)<br>
[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
[Symbol reference expected](#symbol-reference-expected)<br>
{@a expression-form-not-supported}
## Expression form not supported
## 不支持表达形式 (Expression form not supported)
<div class="alert is-helpful">
*The compiler encountered an expression it didn't understand while evaluating Angular metadata.*
编译器在对 Angular 元数据求值时遇到了一个它不能理解的表达式。
</div>
Language features outside of the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
can produce this error, as seen in the following example:
如以下范例所示，使用了编译器的[受限表达式语法](guide/aot-compiler#expression-syntax)之外的语言特性可能会产生此错误：
```ts
// ERROR
export class Fooish { ... }
...
@ -50,46 +36,29 @@ const prop = typeof Fooish; // typeof is not valid in metadata
// bracket notation is not valid in metadata
{ provide: 'token', useValue: { [prop]: 'value' } };
...
```
You can use `typeof` and bracket notation in normal application code.
You just can't use those features within expressions that define Angular metadata.
你可以在普通的应用代码中使用 `typeof` 和方括号标记法来指定属性名，但是这些特性不能在定义 Angular 元数据的表达式中使用。
Avoid this error by sticking to the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
when writing Angular metadata
and be wary of new or unusual TypeScript features.
通过在编写 Angular 元数据时坚持使用编译器的[受限表达式语法](guide/aot-compiler#expression-syntax)来避免此错误，并小心新的或不常用的 TypeScript 功能。
<hr>
{@a reference-to-a-local-symbol}
## Reference to a local (non-exported) symbol
## 引用本地（未导出的）符号 (Reference to a local (non-exported) symbol)
<div class="alert is-helpful">
_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
*如果要引用局部（未导出的）符号 'symbol name'，请考虑导出它。*
</div>
The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
编译器遇到了局部定义的未导出或未初始化的符号。
Here's a `provider` example of the problem.
下面就是存在该问题的 `provider` 范例。
```ts
// ERROR
let foo: number; // neither exported nor initialized
@ -101,41 +70,26 @@ let foo: number; // neither exported nor initialized
]
})
export class MyComponent {}
```
The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
编译器会在单独的模块中生成这个 `userValue` 提供者的代码。*那个*工厂模块不能访问*这个*源码模块，无法访问这个（未导出的）`foo` 变量。
You could fix the problem by initializing `foo`.
你可以通过初始化 `foo` 来修正这个错误。
```ts
let foo = 42; // initialized
```
The compiler will [fold](guide/aot-compiler#code-folding) the expression into the provider as if you had written this.
编译器会将表达式[折叠](guide/aot-compiler#code-folding)到提供者中，就像你自己写的一样。
```ts
providers: [
{ provide: Foo, useValue: 42 }
]
```
Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
另外，你也可以通过导出 `foo` 来解决它，这样 `foo` 将会在运行期间你真正知道它的值的时候被赋值。
```ts
// CORRECTED
export let foo: number; // exported
@ -147,21 +101,15 @@ export let foo: number; // exported
]
})
export class MyComponent {}
```
Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
添加 `export` 的方式通常用于需要在元数据中引用变量时，如 `providers` 和 `animations`，这样编译器就可以在这些表达式中生成对已导出变量的引用了。它不需要知道这些变量的*值*。
Adding `export` doesn't work when the compiler needs the _actual value_
in order to generate code.
For example, it doesn't work for the `template` property.
当编译器需要知道*真正的值*以生成代码时，添加 `export` 的方式就是无效的。比如这里的 `template` 属性。
```ts
// ERROR
export let someTemplate: string; // exported but not initialized
@ -170,45 +118,28 @@ export let someTemplate: string; // exported but not initialized
template: someTemplate
})
export class MyComponent {}
```
The compiler needs the value of the `template` property _right now_ to generate the component factory.
The variable reference alone is insufficient.
Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
编译器*现在就*需要 `template` 属性的值来生成组件工厂。
仅仅有对该变量的引用是不够的。
给这个声明加上 `export` 前缀只会生成一个新的错误 "[`Only initialized variables and constants can be referenced`【只能引用初始化过的变量和常量】](#only-initialized-variables)"。
<hr>
{@a only-initialized-variables}
## Only initialized variables and constants
## 只支持初始化过的变量和常量 (Only initialized variables and constants)
<div class="alert is-helpful">
_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
*只能引用已初始化过的变量和常量，因为模板编译器需要该变量的值。*
</div>
The compiler found a reference to an exported variable or static field that wasn't initialized.
It needs the value of that variable to generate code.
编译器发现某个到已导出的变量或静态字段的引用是没有初始化过的。而它需要根据那个变量的值来生成代码。
The following example tries to set the component's `template` property to the value of
the exported `someTemplate` variable which is declared but _unassigned_.
下面的例子试图把组件的 ` template` 属性设置为已导出的 `someTemplate` 变量的值，而这个值虽然声明过，却没有初始化过。
```ts
// ERROR
export let someTemplate: string;
@ -217,15 +148,11 @@ export let someTemplate: string;
template: someTemplate
})
export class MyComponent {}
```
You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
如果你从其它模块中导入了 `someTemplate`，但那个模块中忘了初始化它，就会看到这个错误。
```ts
// ERROR - not initialized there either
import { someTemplate } from './config';
@ -234,7 +161,6 @@ import { someTemplate } from './config';
template: someTemplate
})
export class MyComponent {}
```
The compiler cannot wait until runtime to get the template information.
@ -242,15 +168,9 @@ It must statically derive the value of the `someTemplate` variable from the sour
so that it can generate the component factory, which includes
instructions for building the element based on the template.
编译器不能等到运行时才得到该模板的信息。
它必须从源码中静态获得这个 `someTemplate` 变量的值，以便生成组件工厂，组件工厂中需要包含根据这个模板来生成元素的代码。
To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
要纠正这个错误，请在*同一行*的初始化子句中初始化这个变量的值。
```ts
// CORRECTED
export let someTemplate = '<h1>Greetings from Angular</h1>';
@ -259,36 +179,23 @@ export let someTemplate = '<h1>Greetings from Angular</h1>';
template: someTemplate
})
export class MyComponent {}
```
<hr>
{@a reference-to-a-non-exported-class}
## Reference to a non-exported class
## 引用未导出过的类 (Reference to a non-exported class)
<div class="alert is-helpful">
_Reference to a non-exported class <class name>. Consider exporting the class._
*如果要引用未导出的类 <class name>，请考虑导出它。*
</div>
Metadata referenced a class that wasn't exported.
元数据引用了一个未导出的类。
For example, you may have defined a class and used it as an injection token in a providers array
but neglected to export that class.
比如，你可能定义了一个类并在某个 `providers` 数组中把它用作了依赖注入令牌，但是忘了导出这个类。
```ts
// ERROR
abstract class MyStrategy { }
@ -297,17 +204,13 @@ abstract class MyStrategy { }
{ provide: MyStrategy, useValue: ... }
]
...
```
Angular generates a class factory in a separate module and that
factory [can only access exported classes](guide/aot-compiler#exported-symbols).
To correct this error, export the referenced class.
Angular 在单独的模块中生成类工厂，并且该工厂[只能访问导出的类](guide/aot-compiler#exported-symbols)。要更正此错误，请导出所引用的类。
```ts
// CORRECTED
export abstract class MyStrategy { }
@ -316,31 +219,20 @@ export abstract class MyStrategy { }
{ provide: MyStrategy, useValue: ... }
]
...
```
<hr>
{@a reference-to-a-non-exported-function}
## Reference to a non-exported function
## 引用未导出过的函数 (Reference to a non-exported function)
<div class="alert is-helpful">
*Metadata referenced a function that wasn't exported.*
元数据中引用了未导出的函数。
</div>
For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
比如，你可能已经把某个服务提供者的 `useFactory` 属性设置成了一个局部定义但忘了导出的函数。
```ts
// ERROR
function myStrategy() { ... }
@ -349,17 +241,13 @@ function myStrategy() { ... }
{ provide: MyStrategy, useFactory: myStrategy }
]
...
```
Angular generates a class factory in a separate module and that
factory [can only access exported functions](guide/aot-compiler#exported-symbols).
To correct this error, export the function.
Angular 在单独的模块中生成类工厂，该工厂[只能访问导出的函数](guide/aot-compiler#exported-symbols)。要更正此错误，请导出此函数。
```ts
// CORRECTED
export function myStrategy() { ... }
@ -368,32 +256,21 @@ export function myStrategy() { ... }
{ provide: MyStrategy, useFactory: myStrategy }
]
...
```
<hr>
{@a function-calls-not-supported}
## Function calls are not supported
## 不支持函数调用 (Function calls are not supported)
<div class="alert is-helpful">
_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
*不支持函数调用。考虑把这个函数或 lambda 表达式替换成一个对已导出函数的引用。*
</div>
The compiler does not currently support [function expressions or lambda functions](guide/aot-compiler#function-expression).
For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
编译器当前不支持[函数表达式或 lambda 函数](guide/aot-compiler#function-expression)。例如，你不能将提供者的 `useFactory` 设置为这样的匿名函数或箭头函数。
```ts
// ERROR
...
providers: [
@ -401,15 +278,10 @@ For example, you cannot set a provider's `useFactory` to an anonymous function o
{ provide: OtherStrategy, useFactory: () => { ... } }
]
...
```
You also get this error if you call a function or method in a provider's `useValue`.
如果你在某个提供者的 `useValue` 中调用函数或方法，也会导致这个错误。
```ts
// ERROR
import { calculateValue } from './utilities';
@ -418,15 +290,11 @@ import { calculateValue } from './utilities';
{ provide: SomeValue, useValue: calculateValue() }
]
...
```
To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
要改正这个问题，就要从模块中导出这个函数，并改成在服务提供者的 `useFactory` 中引用该函数。
```ts
// CORRECTED
import { calculateValue } from './utilities';
@ -442,35 +310,22 @@ export function someValueFactory() {
{ provide: SomeValue, useFactory: someValueFactory }
]
...
```
<hr>
{@a destructured-variable-not-supported}
## Destructured variable or constant not supported
## 不支持解构变量或常量 (Destructured variable or constant not supported)
<div class="alert is-helpful">
_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
*模板编译器不支持引用导出的解构语法的变量或常量。考虑简化这一点，以避免解构语法。*
</div>
The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
编译器不支持引用通过[解构](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring)赋值的方式得到的变量。
For example, you cannot write something like this:
比如，你不能这么写：
```ts
// ERROR
import { configuration } from './configuration';
@ -482,15 +337,11 @@ const {foo, bar} = configuration;
{provide: Bar, useValue: bar},
]
...
```
To correct this error, refer to non-destructured values.
要纠正这个错误，就要引用非解构方式的变量。
```ts
// CORRECTED
import { configuration } from './configuration';
...
@ -499,87 +350,48 @@ import { configuration } from './configuration';
{provide: Bar, useValue: configuration.bar},
]
...
```
<hr>
{@a could-not-resolve-type}
## Could not resolve type
## 无法解析类型 (Could not resolve type)
<div class="alert is-helpful">
*The compiler encountered a type and can't determine which module exports that type.*
编译器遇到了某个类型，但是不知道它是由哪个模块导出的。
</div>
This can happen if you refer to an ambient type.
For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
这通常会发生在你引用环境类型时。
比如，`Window` 类型就是在全局 `.d.ts` 文件中声明的环境类型。
You'll get an error if you reference it in the component constructor,
which the compiler must statically analyze.
如果你在组件的构造函数中引用它就会导致一个错误，因为编译器必须对构造函数进行静态分析。
```ts
// ERROR
@Component({ })
export class MyComponent {
constructor (private win: Window) { ... }
}
```
TypeScript understands ambient types so you don't import them.
The Angular compiler does not understand a type that you neglect to export or import.
TypeScript 能理解这些环境类型，所以你不用导入它们。
但 Angular 编译器不理解你没有导入或导出过的类型。
In this case, the compiler doesn't understand how to inject something with the `Window` token.
这种情况下，编译器就无法理解如何使用这个 `Window` 令牌来进行注入。
Do not refer to ambient types in metadata expressions.
不要在元数据表达式中引用环境类型。
If you must inject an instance of an ambient type,
you can finesse the problem in four steps:
如果你必须注入某个环境类型的实例，可以用以下四步来巧妙解决这个问题：
1. Create an injection token for an instance of the ambient type.
为环境类型的实例创建一个注入令牌。
1. Create a factory function that returns that instance.
创建一个返回该实例的工厂函数。
1. Add a `useFactory` provider with that factory function.
使用该工厂函数添加一个 `useFactory` 提供者。
1. Use `@Inject` to inject the instance.
使用 `@Inject` 来注入这个实例。
Here's an illustrative example.
下面的例子说明了这一点。
```ts
// CORRECTED
import { Inject } from '@angular/core';
@ -595,20 +407,14 @@ export function _window() { return window; }
export class MyComponent {
constructor (@Inject(WINDOW) private win: Window) { ... }
}
```
The `Window` type in the constructor is no longer a problem for the compiler because it
uses the `@Inject(WINDOW)` to generate the injection code.
对于编译器来说，构造函数中出现 `Window` 类型已不再是个问题，因为它现在使用 `@Inject(WINDOW)` 来生成注入代码。
Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
Angular 也用 `DOCUMENT` 令牌做了类似的事情，所以你也可以注入浏览器的 `document` 对象（或它的一个抽象层，取决于该应用运行在哪个平台）。
```ts
import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@ -616,69 +422,43 @@ import { DOCUMENT } from '@angular/common';
export class MyComponent {
constructor (@Inject(DOCUMENT) private doc: Document) { ... }
}
```
<hr>
{@a name-expected}
## Name expected
## 期望的名字 (Name expected)
<div class="alert is-helpful">
*The compiler expected a name in an expression it was evaluating.*
*编译器在正在计算的表达式中期望有一个名字。*
</div>
This can happen if you use a number as a property name as in the following example.
如果将数字用作属性名称，则可能发生这种情况，如以下范例所示。
```ts
// ERROR
provider: [{ provide: Foo, useValue: { 0: 'test' } }]
```
Change the name of the property to something non-numeric.
把该属性的名字改为非数字类型。
```ts
// CORRECTED
provider: [{ provide: Foo, useValue: { '0': 'test' } }]
```
<hr>
{@a unsupported-enum-member-name}
## Unsupported enum member name
## 不支持的枚举成员名称 (Unsupported enum member name)
<div class="alert is-helpful">
*Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata.*
Angular 不能确定你在元数据中引用的[枚举成员](https://www.typescriptlang.org/docs/handbook/enums.html)的值。
</div>
The compiler can understand simple enum values but not complex values such as those derived from computed properties.
编译器可以理解简单的枚举值，但不能理解复杂的，比如从那些计算属性中派生出来的。
```ts
// ERROR
enum Colors {
Red = 1,
@ -693,73 +473,45 @@ enum Colors {
{ provide: StrongColor, useValue: Colors.Blue } // bad
]
...
```
Avoid referring to enums with complicated initializers or computed properties.
避免引用那些使用了复杂初始化对象或计算属性的枚举。
<hr>
{@a tagged-template-expressions-not-supported}
## Tagged template expressions are not supported
## 不支持带标签的模板表达式 (Tagged template expressions are not supported)
<div class="alert is-helpful">
_Tagged template expressions are not supported in metadata._
*元数据中不支持带标签函数的模板表达式。*
</div>
The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as the following.
编译器遇到了 JavaScript ES2015 [带标记的模板表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals)，如下所示。
```ts
// ERROR
const expression = 'funky';
const raw = String.raw`A tagged template ${expression} string`;
...
template: '<div>' + raw + '</div>'
...
```
[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
is a _tag function_ native to JavaScript ES2015.
[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) 是一个 ES2015 原生的*标签函数*。
The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
AOT 编译器不支持带标签函数的模板表达式，避免在元数据表达式中使用它们。
<hr>
{@a symbol-reference-expected}
## Symbol reference expected
## 期待符号的引用 (Symbol reference expected)
<div class="alert is-helpful">
*The compiler expected a reference to a symbol at the location specified in the error message.*
编译器期待在错误信息指出的位置是一个符号引用。
</div>
This error can occur if you use an expression in the `extends` clause of a class.
当你在类的 `extends` 子句中使用表达式时就会出现这个错误。
<!--
Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).

61
aio/content/guide/app-shell.md
View File

@ -1,73 +1,70 @@
# App shell
# 应用外壳
App shell is a way to render a portion of your application via a route at build time.
It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
应用外壳是一种在构建期间借助路由渲染部分应用的方法。它可以通过快速启动一个静态渲染页面（所有页面的公共骨架）来改善用户体验。与此同时，浏览器会下载完整的客户端版本，并在代码加载后自动切换到完整版。
This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript.
这能让用户快速看到应用中第一个有意义的画面，因为浏览器可以很简单地渲染出 HTML 和 CSS，而无需初始化任何 JavaScript。
Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).
欲知详情，参阅[应用外壳模型](https://developers.google.com/web/fundamentals/architecture/app-shell)。
## Step 1: Prepare the application
## 第 1 步：准备本应用
You can do this with the following CLI command:
可以用下列 CLI 命令来执行本操作：
<code-example language="bash">
ng new my-app --routing
</code-example>
For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
对于既有应用，你必须手动添加 `RouterModule` 并在应用中定义 `<router-outlet>`。
## Step 2: Create the app shell
## 第 2 步：创建应用外壳
Use the CLI to automatically create the app shell.
使用 CLI 自动创建一个应用外壳。
<code-example language="bash">
ng generate app-shell
</code-example>
* `client-project` takes the name of your client application.
`client-project` 是你这个客户端应用的名字。
After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
执行完这个命令，你会发现 `angular.json` 配置文件中已经增加了两个新目标，并做了一些其它更改。
<code-example language="json">
"server": {
"builder": "@angular-devkit/build-angular:server",
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/my-app-server",
"outputPath": "dist/my-app/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"development": {
"outputHashing": "none",
},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"defaultConfiguration": "production",
"options": {
"browserTarget": "my-app:build",
"serverTarget": "my-app:server",
"route": "shell"
},
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development",
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
@ -78,24 +75,16 @@ After running this command you will notice that the `angular.json` configuration
## Step 3: Verify the app is built with the shell content
## 第 3 步：验证该应用是使用应用外壳的内容构建的
Use the CLI to build the `app-shell` target.
使用 CLI 构建目标 `app-shell`。
<code-example language="bash">
ng run my-app:app-shell
ng run my-app:app-shell:development
</code-example>
Or to use the production configuration.
或使用产品环境配置。
<code-example language="bash">
ng run my-app:app-shell:production
</code-example>
To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.
要验证构建的输出，请打开 `dist/my-app/index.html`。寻找默认的文本 `app-shell works!` 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。
To verify the build output, open `dist/my-app/browser/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.

161
aio/content/guide/architecture-components.md
View File

@ -1,341 +1,190 @@
# Introduction to components and templates
# 组件简介
A *component* controls a patch of screen called a [*view*](guide/glossary#view "Definition of view").
For example, individual components define and control each of the following views from the [Tour of Heroes tutorial](tutorial):
*组件*控制屏幕上被称为[*视图*](guide/glossary#view "Definition of view")的一小片区域。比如，[教程](tutorial/index)中的下列视图都是由一个个组件所定义和控制的：
* The app root with the navigation links.
带有导航链接的应用根组件。
* The list of heroes.
英雄列表。
* The hero editor.
英雄编辑器。
You define a component's application logic&mdash;what it does to support the view&mdash;inside a class.
The class interacts with the view through an API of properties and methods.
你在类中定义组件的应用逻辑，为视图提供支持。
组件通过一些由属性和方法组成的 API 与视图交互。
For example, `HeroListComponent` has a `heroes` property that holds an array of heroes.
Its `selectHero()` method sets a `selectedHero` property when the user clicks to choose a hero from that list.
The component acquires the heroes from a service, which is a TypeScript [parameter property](https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) on the constructor.
The service is provided to the component through the dependency injection system.
比如，`HeroListComponent` 中有一个 名为 `heroes` 的属性，它储存着一个数组的英雄数据。
`HeroListComponent` 还有一个 `selectHero()` 方法，当用户从列表中选择一个英雄时，它会设置 `selectedHero` 属性的值。
该组件会从服务获取英雄列表，它是一个 TypeScript 的构造器[参数型属性](http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties)。本服务通过依赖注入系统提供给该组件。
<code-example path="architecture/src/app/hero-list.component.ts" header="src/app/hero-list.component.ts (class)" region="class"></code-example>
Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`.
当用户在应用中穿行时，Angular 就会创建、更新、销毁一些组件。
你的应用可以通过一些可选的[生命周期钩子](guide/lifecycle-hooks)（比如 `ngOnInit()`）来在每个特定的时机采取行动。
## Component metadata
## 组件的元数据
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until you mark it as one with the `@Component` decorator.
`@Component` 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。
在下面的范例代码中，你可以看到 `HeroListComponent` 只是一个普通类，完全没有 Angular 特有的标记或语法。
直到给它加上了 `@Component` 装饰器，它才变成了组件。
The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a *template* with the component, either directly with inline code, or by reference. Together, the component and its template describe a *view*.
组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。
具体来说，它把一个*模板*（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。
该组件及其模板，共同描述了一个*视图*。
In addition to containing or pointing to the template, the `@Component` metadata configures, for example, how the component can be referenced in HTML and what services it requires.
除了包含或指向模板之外，`@Component` 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。
Here's an example of basic metadata for `HeroListComponent`.
下面的例子中就是 `HeroListComponent` 的基础元数据：
<code-example path="architecture/src/app/hero-list.component.ts" header="src/app/hero-list.component.ts (metadata)" region="metadata"></code-example>
This example shows some of the most useful `@Component` configuration options:
这个例子展示了一些最常用的 `@Component` 配置选项：
* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains `<app-hero-list></app-hero-list>`, then
Angular inserts an instance of the `HeroListComponent` view between those tags.
`selector`：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。
比如，如果应用的 HTML 中包含 `<app-hero-list></app-hero-list>`，Angular 就会在这些标签中插入一个 `HeroListComponent` 实例的视图。
* `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*.
`templateUrl`：该组件的 HTML 模板文件相对于这个组件文件的地址。
另外，你还可以用 `template` 属性的值来提供内联的 HTML 模板。
这个模板定义了该组件的*宿主视图*。
* `providers`: An array of [providers](guide/glossary#provider) for services that the component requires. In the example, this tells Angular how to provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display.
`providers`：当前组件所需的服务[提供者](guide/glossary#provider)的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 `HeroService` 实例，以获取要显示的英雄列表。
## Templates and views
## 模板与视图
<img src="generated/images/guide/architecture/template.png" alt="Template" class="left">
You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
你要通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。
Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.
视图通常会分层次进行组织，让你能以 UI 分区或页面为单位进行修改、显示或隐藏。
与组件直接关联的模板会定义该组件的*宿主视图*。该组件还可以定义一个*带层次结构的视图*，它包含一些*内嵌的视图*作为其它组件的宿主。
<div class="lightbox">
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
</div>
A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
带层次结构的视图可以包含同一模块（NgModule）中组件的视图，也可以（而且经常会）包含其它模块中定义的组件的视图。
## Template syntax
## 模板语法
A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use *data binding* to coordinate the app and DOM data, *pipes* to transform data before it is displayed, and *directives* to apply app logic to what gets displayed.
模板很像标准的 HTML，但是它还包含 Angular 的[模板语法](guide/template-syntax)，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。
你的模板可以使用*数据绑定*来协调应用和 DOM 中的数据，使用*管道*在显示出来之前对其进行转换，使用*指令*来把程序逻辑应用到要显示的内容上。
For example, here is a template for the Tutorial's `HeroListComponent`.
比如，下面是本教程中 `HeroListComponent` 的模板：
<code-example path="architecture/src/app/hero-list.component.html" header="src/app/hero-list.component.html"></code-example>
This template uses typical HTML elements like `<h2>` and `<p>`, and also includes Angular template-syntax elements, `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<app-hero-detail>`. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.
这个模板使用了典型的 HTML 元素，比如 `<h2>` 和 `<p>`，还包括一些 Angular 的模板语法元素，如 `*ngFor`，`{{hero.name}}`，`click`、`[hero]` 和 `<app-hero-detail>`。这些模板语法元素告诉 Angular 该如何根据程序逻辑和数据在屏幕上渲染 HTML。
* The `*ngFor` directive tells Angular to iterate over a list.
`*ngFor` 指令告诉 Angular 在一个列表上进行迭代。
* `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. See more about [data binding](#data-binding) below.
`{{hero.name}}`、`(click)` 和 `[hero]` 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参阅稍后的[数据绑定](#data-binding)部分。
* The `<app-hero-detail>` tag in the example is an element that represents a new component, `HeroDetailComponent`.
`HeroDetailComponent` (code not shown) defines the hero-detail child view of `HeroListComponent`.
Notice how custom components like this mix seamlessly with native HTML in the same layouts.
模板中的 `<app-hero-detail>` 标签是一个代表新组件 `HeroDetailComponent` 的元素。
`HeroDetailComponent`（代码略）定义了 `HeroListComponent` 的英雄详情子视图。
注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。
### Data binding
### 数据绑定
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.
如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。
手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 有前端 JavaScript 开发经验的程序员一定深有体会。
Angular supports *two-way data binding*, a mechanism for coordinating the parts of a template with the parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides.
Angular 支持*双向数据绑定*，这是一种对模板中的各个部件与组件中的各个部件进行协调的机制。
往模板 HTML 中添加绑定标记可以告诉 Angular 该如何连接它们。
The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.
下图显示了数据绑定标记的四种形式。每种形式都有一个方向 —— 从组件到 DOM、从 DOM 到组件或双向。
<div class="lightbox">
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
</div>
This example from the `HeroListComponent` template uses three of these forms.
这个来自 `HeroListComponent` 模板中的例子使用了其中的三种形式：
<code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (binding)" region="binding"></code-example>
* The `{{hero.name}}` [*interpolation*](guide/interpolation)
displays the component's `hero.name` property value within the `<li>` element.
`{{hero.name}}` 这个[*插值*](guide/interpolation)在 `<li>` 标签中显示组件的 `hero.name` 属性的值。
* The `[hero]` [*property binding*](guide/property-binding) passes the value of
`selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
`[hero]`[*属性绑定*](guide/property-binding)把父组件 `HeroListComponent` 的 `selectedHero` 的值传到子组件 `HeroDetailComponent` 的 `hero` 属性中。
* The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
当用户点击某个英雄的名字时，`(click)` [*事件绑定*](guide/user-input#binding-to-user-input-events)会调用组件的 `selectHero` 方法。
Two-way data binding (used mainly in [template-driven forms](guide/forms))
combines property and event binding in a single notation.
Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive.
**双向数据绑定**（主要用于[模板驱动表单](guide/forms)中），它会把属性绑定和事件绑定组合成一种单独的写法。下面这个来自 `HeroDetailComponent` 模板中的例子通过 `ngModel` 指令使用了双向数据绑定：
<code-example path="architecture/src/app/hero-detail.component.html" header="src/app/hero-detail.component.html (ngModel)" region="ngModel"></code-example>
In two-way binding, a data property value flows to the input box from the component as with property binding.
The user's changes also flow back to the component, resetting the property to the latest value,
as with event binding.
在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。
Angular processes *all* data bindings once for each JavaScript event cycle,
from the root of the application component tree through all child components.
Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定，它会从组件树的根部开始，递归处理全部子组件。
<div class="lightbox">
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
</div>
Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。
<div class="lightbox">
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
</div>
### Pipes
### 管道
Angular pipes let you declare display-value transformations in your template HTML. A class with the `@Pipe` decorator defines a function that transforms input values to output values for display in a view.
Angular 的管道可以让你在模板中声明显示值的转换逻辑。
带有 `@Pipe` 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。
Angular defines various pipes, such as the [date](api/common/DatePipe) pipe and [currency](api/common/CurrencyPipe) pipe; for a complete list, see the [Pipes API list](api?type=pipe). You can also define new pipes.
Angular 自带了很多管道，比如 [date](api/common/DatePipe) 管道和 [currency](api/common/CurrencyPipe) 管道，完整的列表参阅 [Pipes API 列表](api?type=pipe)。你也可以自己定义一些新管道。
To specify a value transformation in an HTML template, use the [pipe operator (|)](guide/pipes).
要在 HTML 模板中指定值的转换方式，请使用 [管道操作符 (|)](guide/pipes)。
`{{interpolated_value | pipe_name}}`
`{{interpolated_value | pipe_name}}`
You can chain pipes, sending the output of one pipe function to be transformed by another pipe function. A pipe can also take arguments that control how it performs its transformation. For example, you can pass the desired format to the `date` pipe.
你可以把管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换。
管道还能接收一些参数，来控制它该如何进行转换。比如，你可以把要使用的日期格式传给 `date` 管道：
```
```
<!-- Default format: output 'Jun 15, 2015'-->
<p>Today is {{today | date}}</p>
<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>
<!-- shortTime format: output '9:43 AM'-->
<p>The time is {{today | date:'shortTime'}}</p>
```
### Directives
### 指令
<img src="generated/images/guide/architecture/directive.png" alt="Directives" class="left">
Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by *directives*. A directive is a class with a `@Directive()` decorator.
Angular 的模板是*动态的*。当 Angular 渲染它们的时候，会根据*指令*给出的指示对 DOM 进行转换。
指令就是一个带有 `@Directive()` 装饰器的类。
A component is technically a directive.
However, components are so distinctive and central to Angular applications that Angular
defines the `@Component()` decorator, which extends the `@Directive()` decorator with
template-oriented features.
组件从技术角度上说就是一个指令，但是由于组件对 Angular 应用来说非常独特、非常重要，因此 Angular 专门定义了 `@Component()` 装饰器，它使用一些面向模板的特性扩展了 `@Directive()` 装饰器。
In addition to components, there are two other kinds of directives: *structural* and *attribute*.
Angular defines a number of directives of both kinds, and you can define your own using the `@Directive()` decorator.
除组件外，还有两种指令：*结构型指令*和*属性型指令*。
Angular 本身定义了一系列这两种类型的指令，你也可以使用 `@Directive()` 装饰器来定义自己的指令。
Just as for components, the metadata for a directive associates the decorated class with a `selector` element that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.
像组件一样，指令的元数据把它所装饰的指令类和一个 `selector` 关联起来，`selector` 用来把该指令插入到 HTML 中。
在模板中，指令通常作为属性出现在元素标签上，可能仅仅作为名字出现，也可能作为赋值目标或绑定目标出现。
#### Structural directives
#### 结构型指令
*Structural directives* alter layout by adding, removing, and replacing elements in the DOM.
The example template uses two built-in structural directives to add application logic to how the view is rendered.
*结构型指令*通过添加、移除或替换 DOM 元素来修改布局。
这个范例模板使用了两个内置的结构型指令来为要渲染的视图添加程序逻辑：
<code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (structural)" region="structural"></code-example>
* [`*ngFor`](guide/structural-directives#inside-ngfor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
[`*ngFor`](guide/structural-directives#inside-ngfor) 是一个迭代器，它要求 Angular 为 `heroes` 列表中的每个英雄渲染出一个 `<li>`。
* [`*ngIf`](guide/structural-directives#ngif-case-study) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
[`*ngIf`](guide/structural-directives#ngif-case-study) 是个条件语句，只有当选中的英雄存在时，它才会包含 `HeroDetail` 组件。
* [`*ngFor`](guide/built-in-directives#ngFor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
* [`*ngIf`](guide/built-in-directives#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
#### Attribute directives
#### 属性型指令
*Attribute directives* alter the appearance or behavior of an existing element.
In templates they look like regular HTML attributes, hence the name.
*属性型指令*会修改现有元素的外观或行为。
在模板中，它们看起来就像普通的 HTML 属性一样，因此得名“属性型指令”。
The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically `<input>`) by setting its display value property and responding to change events.
`ngModel` 指令就是属性型指令的一个例子，它实现了双向数据绑定。
`ngModel` 修改现有元素（一般是 `<input>`）的行为：设置其显示属性值，并响应 change 事件。
<code-example path="architecture/src/app/hero-detail.component.html" header="src/app/hero-detail.component.html (ngModel)" region="ngModel"></code-example>
Angular has more pre-defined directives that either alter the layout structure
(for example, [ngSwitch](guide/built-in-directives#ngSwitch))
or modify aspects of DOM elements and components
(for example, [ngStyle](guide/built-in-directives#ngStyle) and [ngClass](guide/built-in-directives#ngClass)).
Angular 还有很多预定义指令，有些修改布局结构（比如 [ngSwitch](guide/built-in-directives#ngSwitch)），有些修改 DOM 元素和组件的样子（比如 [ngStyle](guide/built-in-directives#ngStyle) 和 [ngClass](guide/built-in-directives#ngClass)）。
(for example, [ngStyle](guide/built-in-directives#ngstyle) and [ngClass](guide/built-in-directives#ngClass)).
<div class="alert is-helpful">
Learn more in the [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives) guides.
欲知详情，参阅[属性型指令](guide/attribute-directives)和[结构型指令](guide/structural-directives)这两章。
</div>

78
aio/content/guide/architecture-modules.md
View File

@ -1,76 +1,40 @@
# Introduction to modules
# NgModule 简介
Angular apps are modular and Angular has its own modularity system called *NgModules*.
NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
Angular 应用是模块化的，它拥有自己的模块化系统，称作 *NgModule*。
一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。
它可以包含一些组件、服务提供者或其它代码文件，其作用域由包含它们的 NgModule 定义。
它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。
Every Angular app has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. You launch your app by *bootstrapping* the root NgModule.
每个 Angular 应用都至少有一个 NgModule 类，也就是[根模块](guide/bootstrapping)，它习惯上命名为 `AppModule`，并位于一个名叫 `app.module.ts` 的文件中。*引导*这个根模块就可以启动你的应用。
While a small application might have only one NgModule, most apps have many more *feature modules*. The *root* NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.
虽然小型的应用可能只有一个 NgModule，不过大多数应用都会有很多*特性模块*。应用的*根模块*之所以叫根模块，是因为它可以包含任意深度的层次化子模块。
## NgModule metadata
## `@NgModule` 元数据
An NgModule is defined by a class decorated with `@NgModule()`. The `@NgModule()` decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.
NgModule 是一个带有 `@NgModule()` 装饰器的类。`@NgModule()` 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。
* `declarations`: The [components](guide/architecture-components), *directives*, and *pipes* that belong to this NgModule.
`declarations`（可声明对象表） —— 那些属于本 NgModule 的[组件](guide/architecture-components)、*指令*、*管道*。
* `exports`: The subset of declarations that should be visible and usable in the *component templates* of other NgModules.
`exports`（导出表） —— 那些能在其它模块的*组件模板*中使用的可声明对象的子集。
* `imports`: Other modules whose exported classes are needed by component templates declared in *this* NgModule.
`imports`（导入表） —— 那些导出了*本*模块中的组件模板所需的类的其它模块。
* `providers`: Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level.)
`providers` —— 本模块向全局服务中贡献的那些[服务](guide/architecture-services)的创建器。
这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供者，这通常是首选方式。）
* `bootstrap`: The main application view, called the *root component*, which hosts all other app views. Only the *root NgModule* should set the `bootstrap` property.
`bootstrap` —— 应用的主视图，称为*根组件*。它是应用中所有其它视图的宿主。只有*根模块*才应该设置这个 `bootstrap` 属性。
Here's a simple root NgModule definition.
下面是一个简单的根 NgModule 定义：
<code-example path="architecture/src/app/mini-app.ts" region="module" header="src/app/app.module.ts"></code-example>
<div class="alert is-helpful">
`AppComponent` is included in the `exports` list here for illustration; it isn't actually necessary in this example. A root NgModule has no reason to *export* anything because other modules don't need to *import* the root NgModule.
把 `AppComponent` 放到 `exports` 中是为了演示导出的语法，这在本例子中实际上是没必要的。
根模块没有任何理由*导出*任何东西，因为其它模块永远不需要*导入*根模块。
</div>
## NgModules and components
## NgModule 和组件
NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.
NgModule 为其中的组件提供了一个*编译上下文环境*。根模块总会有一个根组件，并在引导期间创建它。
但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。
<div class="lightbox">
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
</div>
@ -79,10 +43,6 @@ NgModule 为其中的组件提供了一个*编译上下文环境*。根模块总
A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.
组件及其模板共同定义*视图*。组件还可以包含*视图层次结构*，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。
一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。
这种情况很常见，特别是对一些 UI 库来说。
<div class="lightbox">
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
</div>
@ -91,90 +51,54 @@ A component and its template together define a *view*. A component can contain a
When you create a component, it's associated directly with a single view, called the *host view*. The host view can be the root of a view hierarchy, which can contain *embedded views*, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.
当你创建一个组件时，它直接与一个叫做*宿主视图*的视图关联起来。
宿主视图可以是视图层次结构的根，该视图层次结构可以包含一些*内嵌视图*，这些内嵌视图又是其它组件的宿主视图。
这些组件可以位于相同的 NgModule 中，也可以从其它 NgModule 中导入。
树中的视图可以嵌套到任意深度。
<div class="alert is-helpful">
**Note:** The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.
**注意：** 视图的这种层次结构是 Angular 在 DOM 和应用数据中检测与响应变更时的关键因素。
**Note:** The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.
</div>
## NgModules and JavaScript modules
## NgModule 和 JavaScript 的模块
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are *complementary* module systems that you can use together to write your apps.
NgModule 系统与 JavaScript（ES2015）用来管理 JavaScript 对象的模块系统不同，而且也没有直接关联。
这两种模块系统不同但*互补*。你可以使用它们来共同编写你的应用。
In JavaScript each *file* is a module and all objects defined in the file belong to that module.
The module declares some objects to be public by marking them with the `export` key word.
Other JavaScript modules use *import statements* to access public objects from other modules.
JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象都从属于那个模块。
通过 `export` 关键字，模块可以把它的某些对象声明为公共的。
其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。
<code-example path="architecture/src/app/app.module.ts" region="imports"></code-example>
<code-example path="architecture/src/app/app.module.ts" region="export"></code-example>
<div class="alert is-helpful">
<a href="https://exploringjs.com/es6/ch_modules.html">Learn more about the JavaScript module system on the web.</a>
<a href="http://exploringjs.com/es6/ch_modules.html">学习更多关于 JavaScript 模块的知识。</a>
</div>
## Angular libraries
## Angular 自带的库
<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left">
Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the `@angular` prefix. Install them with the node package manager `npm` and import parts of them with JavaScript `import` statements.
Angular 会作为一组 JavaScript 模块进行加载，你可以把它们看成库模块。每个 Angular 库的名称都带有 `@angular` 前缀。
使用 `npm` 包管理器安装 Angular 的库，并使用 JavaScript 的 `import` 语句导入其中的各个部分。
<br class="clear">
For example, import Angular's `Component` decorator from the `@angular/core` library like this.
例如，像下面这样，从 `@angular/core` 库中导入 Angular 的 `Component` 装饰器：
<code-example path="architecture/src/app/app.component.ts" region="import"></code-example>
You also import NgModules from Angular *libraries* using JavaScript import statements.
For example, the following code imports the `BrowserModule` NgModule from the `platform-browser` library.
还可以使用 JavaScript 的导入语句从 Angular *库*中导入 Angular *模块*。
比如，下列代码从 `platform-browser` 库中导入了 `BrowserModule` 这个 NgModule。
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module"></code-example>
In the example of the simple root module above, the application module needs material from within
`BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
在上面这个简单的根模块范例中，应用的根模块需要来自 `BrowserModule` 中的素材。要访问这些素材，就要把它加入 `@NgModule` 元数据的 `imports` 中，代码如下：
<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports"></code-example>
In this way you're using the Angular and JavaScript module systems *together*. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
通过这种方式，你可以*同时*使用 Angular 和 JavaScript 的这两种模块系统。
虽然这两种模块系统容易混淆（它们共享了同样的词汇 `import` 和 `export`），不过只要多用用你就会熟悉它们各自的语境了。
<div class="alert is-helpful">
Learn more from the [NgModules](guide/ngmodules) guide.
更多信息，参阅 [NgModules](guide/ngmodules)。
</div>

84
aio/content/guide/architecture-next-steps.md
View File

@ -1,171 +1,87 @@
# Next steps: tools and techniques
# 后续步骤：工具与技巧
After you understand the basic Angular building blocks, you can learn more
about the features and tools that can help you develop and deliver Angular applications.
在了解了基本的 Angular 构建块之后，你可以进一步了解可以帮助你开发和交付 Angular 应用的特性和工具。
* Work through the [Tour of Heroes](tutorial) tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.
参考“[英雄之旅”](tutorial/index)教程，了解如何将这些基本构建块放在一起，来创建设计精良的应用。
* Check out the [Glossary](guide/glossary) to understand Angular-specific terms and usage.
查看[词汇表](guide/glossary)，了解 Angular 特有的术语和用法。
* Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.
根据你的开发阶段和感兴趣的领域，使用该文档更深入地学习某些关键特性。
## Application architecture
## 应用架构
* The **Main Concepts** section located in the table of contents contains several topics that explain how to connect the application data in your [components](guide/glossary#component) to your page-display [templates](guide/glossary#template), to create a complete interactive application.
目录中的**主要概念**部分包含一系列主题，用于解释如何把[组件](guide/glossary#component)中的应用数据与页面显示[模板](guide/glossary#template)联系起来，以创建一个完整的交互式应用。
* The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
[NgModules](guide/ngmodules)一章中提供了关于 Angular 应用模块化结构的深度信息。
* The [Routing and navigation](guide/router) guide provides in-depth information on how to construct applications that allow a user to navigate to different [views](guide/glossary#view) within your single-page app.
[路由与导航](guide/router)一章中提供了一些深度信息，教你如何构造出一个允许用户导航到单页面应用中不同[视图](guide/glossary#view) 的应用。
* The [Dependency injection](guide/dependency-injection) guide provides in-depth information on how to construct an application such that each component class can acquire the services and objects it needs to perform its function.
[依赖注入](guide/dependency-injection)一章提供了一些深度信息，教你如何让每个组件类都可以获取实现其功能所需的服务和对象。
## Responsive programming
## 响应式编程
The [template syntax](guide/template-syntax) and related topics contain details about how to display your component data when and where you want it within a view, and how to collect input from users that you can respond to.
**“组件和模板”**一章提供了[模板语法](guide/template-syntax)的指南和详细信息，用于在视图中随时随地显示组件数据，并从用户那里收集输入，以便做出响应。
Additional pages and sections describe some basic programming techniques for Angular apps.
其它页面和章节则描述了 Angular 应用的一些基本编程技巧。
* [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.
[生命周期钩子](guide/lifecycle-hooks)：通过实现生命周期钩子接口，可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。
* [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.
[可观察对象（Observable）和事件处理](guide/observables)：如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息，比如用户交互事件和异步操作结果。
* [Angular elements](guide/elements): How to package components as *custom elements* using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.
[Angular 自定义元素](guide/elements)：如何使用 Web Components 把组件打包成*自定义元素*，Web Components 是一种以框架无关的方式定义新 HTML 元素的 Web 标准。
* [Forms](guide/forms-overview): Support complex data entry scenarios with HTML-based input validation.
[表单](guide/forms-overview)：通过基于 HTML 的输入验证，来支持复杂的数据录入场景。
* [Animations](guide/animations): Use Angular's animation library to animate component behavior
without deep knowledge of animation techniques or CSS.
[动画](guide/animations)：使用 Angular 的动画库，你可以让组件支持动画行为，而不用深入了解动画技术或 CSS。
## Client-server interaction
## “客户端-服务器”交互
Angular provides a framework for single-page apps, where most of the logic and data resides on the client.
Most apps still need to access a server using the `HttpClient` to access and save data.
For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.
Angular 为单页面应用提供了一个框架，其中的大多数逻辑和数据都留在客户端。大多数应用仍然需要使用 `HttpClient` 来访问服务器，以访问和保存数据。对于某些平台和应用，你可能还希望使用 PWA（渐进式 Web 应用）模型来改善用户体验。
* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
[HTTP](guide/http)：与服务器通信，通过 HTTP 客户端来获取数据、保存数据，并调用服务端的动作。
* [Server-side rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
[服务器端渲染](guide/universal)：Angular Universal 通过服务器端渲染（SSR）在服务器上生成静态应用页面。这允许你在服务器上运行 Angular 应用，以提高性能，并在移动设备和低功耗设备上快速显示首屏，同时也方便了网页抓取工具。
* [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
[Service Worker 和 PWA](guide/service-worker-intro)：使用 Service Worker 来减少对网络的依赖，并显著改善用户体验。
* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread.
[Web worker](guide/web-worker)：学习如何在后台线程中运行 CPU 密集型的计算。
## Support for the development cycle
## 为开发周期提供支持
* [CLI Command Reference](cli): The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
[CLI 命令参考手册](cli)：Angular CLI 是一个命令行工具，可用于创建项目、生成应用和库代码，以及执行各种持续开发任务，如测试、打包和部署。
* [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.
[编译](guide/aot-compiler)：Angular 为开发环境提供了 JIT（即时）编译方式，为生产环境提供了 AOT（预先）编译方式。
* [Testing platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework.
[测试平台](guide/testing)：对应用的各个部件运行单元测试，让它们好像在和 Angular 框架交互一样。
* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
[部署](guide/deployment)：学习如何把 Angular 应用部署到远端服务器上。
* [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
[安全指南](guide/security)：学习 Angular 对常见 Web 应用的弱点和工具（比如跨站脚本攻击）提供的内置防护措施。
* [Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools.
[国际化](guide/i18n) ：借助 Angular 的国际化（i18n）工具，可以让你的应用支持多本地环境。
* [Accessibility](guide/accessibility): Make your app accessible to all users.
[无障碍性](guide/accessibility)：让所有用户都能访问你的应用。
## File structure, configuration, and dependencies
## 文件结构、配置和依赖
* [Workspace and file structure](guide/file-structure): Understand the structure of Angular workspace and project folders.
[工作区与文件结构](guide/file-structure)：理解 Angular 工作区与项目文件夹的结构。
* [Building and serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
[构建与运行](guide/build)：学习为项目定义不同的构建和代理服务器设置的配置方式，比如开发、预生产和生产。
* [npm packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
[npm 包](guide/npm-packages)：Angular 框架、Angular CLI 和 Angular 应用中用到的组件都是用 [npm](https://docs.npmjs.com/) 打包的，并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 `package.json` 文件，它会指定一组初始的包，它们可以一起使用，共同支持很多常见的应用场景。
* [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
[TypeScript 配置](guide/typescript-configuration)：TypeScript 是 Angular 应用开发的主要语言。
* [Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers.
[浏览器支持](guide/browser-support)：让你的应用能和各种浏览器兼容。
## Extending Angular
## 扩展 Angular
* [Angular libraries](guide/libraries): Learn about using and creating re-usable libraries.
[Angular 库](guide/libraries)：学习如何使用和创建可复用的库。
* [Schematics](guide/schematics): Learn about customizing and extending the CLI's generation capabilities.
学习[原理图](guide/schematics) ：学习如何自定义和扩展 CLI 的生成（`generate`）能力。
* [CLI builders](guide/cli-builder): Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.
[CLI 构建器](guide/cli-builder)：学习如何自定义和扩展 CLI 的能力，让它使用工具来执行复杂任务，比如构建和测试应用。

96
aio/content/guide/architecture-services.md
View File

@ -1,28 +1,18 @@
# Introduction to services and dependency injection
# 服务与依赖注入简介
*Service* is a broad category encompassing any value, function, or feature that an app needs.
A service is typically a class with a narrow, well-defined purpose.
It should do something specific and do it well.
*服务*是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。
Angular distinguishes components from services to increase modularity and reusability.
By separating a component's view-related functionality from other kinds of processing,
you can make your component classes lean and efficient.
Angular 把组件和服务区分开，以提高模块性和复用性。
通过把组件中和视图有关的功能与其它类型的处理分离开，你可以让组件类更加精简、高效。
Ideally, a component's job is to enable the user experience and nothing more.
A component should present properties and methods for data binding,
in order to mediate between the view (rendered by the template)
and the application logic (which often includes some notion of a *model*).
理想情况下，组件的工作只管用户体验，而不用顾及其它。
它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些*模型*的概念）的中介者。
A component can delegate certain tasks to services, such as fetching data from the server,
validating user input, or logging directly to the console.
By defining such processing tasks in an *injectable service class*, you make those tasks
@ -30,151 +20,97 @@ available to any component.
You can also make your app more adaptable by injecting different providers of the same kind of service,
as appropriate in different circumstances.
组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。
通过在不同的环境中注入同一种服务的不同提供者，你还可以让你的应用更具适应性。
Angular doesn't *enforce* these principles. Angular does help you *follow* these principles
by making it easy to factor your application logic into services and make those services
available to components through *dependency injection*.
Angular 不会*强迫*你遵循这些原则。Angular 只会通过*依赖注入*来帮你更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。
## Service examples
## 服务范例
Here's an example of a service class that logs to the browser console.
下面是一个服务类的范例，用于把日志记录到浏览器的控制台：
<code-example path="architecture/src/app/logger.service.ts" header="src/app/logger.service.ts (class)" region="class"></code-example>
Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server.
服务也可以依赖其它服务。比如，这里的 `HeroService` 就依赖于 `Logger` 服务，它还用 `BackendService` 来获取英雄数据。`BackendService` 还可能再转而依赖 `HttpClient` 服务来从服务器异步获取英雄列表。
<code-example path="architecture/src/app/hero.service.ts" header="src/app/hero.service.ts (class)" region="class"></code-example>
## Dependency injection (DI)
## 依赖注入（dependency injection）
<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left">
DI is wired into the Angular framework and used everywhere to provide new components with the services or other things they need.
Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class.
DI 被融入 Angular 框架中，用于在任何地方给新建的组件提供服务或所需的其它东西。
组件是服务的消费者，也就是说，你可以把一个服务*注入*到组件中，让组件类得以访问该服务类。
To define a class as a service in Angular, use the `@Injectable()` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*.
Similarly, use the `@Injectable()` decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) *has* a dependency.
在 Angular 中，要把一个类定义为服务，就要用 `@Injectable()` 装饰器来提供元数据，以便让 Angular 可以把它作为*依赖*注入到组件中。
同样，也要使用 `@Injectable()` 装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）*拥有*一个依赖。
* The *injector* is the main mechanism. Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. You don't have to create injectors.
*注入器*是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。
* An injector creates dependencies, and maintains a *container* of dependency instances that it reuses if possible.
该注入器会创建依赖、维护一个*容器*来管理这些依赖，并尽可能复用它们。
* A *provider* is an object that tells an injector how to obtain or create a dependency.
*提供者*是一个对象，用来告诉注入器应该如何获取或创建依赖。
For any dependency that you need in your app, you must register a provider with the app's injector,
so that the injector can use the provider to create new instances.
For a service, the provider is typically the service class itself.
你的应用中所需的任何依赖，都必须使用该应用的注入器来注册一个提供者，以便注入器可以使用这个提供者来创建新实例。
对于服务，该提供者通常就是服务类本身。
<div class="alert is-helpful">
A dependency doesn't have to be a service&mdash;it could be a function, for example, or a value.
依赖不一定是服务 —— 它还可能是函数或值。
</div>
When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of `HeroListComponent` needs `HeroService`.
当 Angular 创建组件类的新实例时，它会通过查看该组件类的构造函数，来决定该组件依赖哪些服务或其它依赖项。
比如 `HeroListComponent` 的构造函数中需要 `HeroService`：
<code-example path="architecture/src/app/hero-list.component.ts" header="src/app/hero-list.component.ts (constructor)" region="ctor"></code-example>
When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
当 Angular 发现某个组件依赖某个服务时，它会首先检查是否该注入器中已经有了那个服务的任何现有实例。如果所请求的服务尚不存在，注入器就会使用以前注册的服务提供者来制作一个，并把它加入注入器中，然后把该服务返回给 Angular。
When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
当所有请求的服务已解析并返回时，Angular 可以用这些服务实例为参数，调用该组件的构造函数。
The process of `HeroService` injection looks something like this.
`HeroService` 的注入过程如下所示：
<div class="lightbox">
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
</div>
### Providing services
### 提供服务
You must register at least one *provider* of any service you are going to use.
The provider can be part of the service's own metadata, making that service available everywhere,
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
对于要用到的任何服务，你必须至少注册一个*提供者*。服务可以在自己的元数据中把自己注册为提供者，这样可以让自己随处可用。或者，你也可以为特定的模块或组件注册提供者。要注册提供者，就要在服务的 `@Injectable()` 装饰器中提供它的元数据，或者在 `@NgModule()` 或 `@Component()` 的元数据中。
* 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.
默认情况下，Angular CLI 的 [`ng generate service`](cli/generate) 命令会在 `@Injectable()` 装饰器中提供元数据来把它注册到根注入器中。本教程就用这种方法注册了 HeroService 的提供者：
```
@Injectable({
providedIn: 'root',
})
```
```
@Injectable({
providedIn: 'root',
})
```
When you provide the service at the root level, Angular creates a single, shared instance of `HeroService`
When you provide the service at the root level, Angular creates a single, shared instance of `HeroService`
and injects it into any class that asks for it.
Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app
by removing the service from the compiled app if it isn't used, a process known as *tree-shaking*.
当你在根一级提供服务时，Angular 会为 HeroService 创建一个单一的共享实例，并且把它注入到任何想要它的类中。这种在 `@Injectable` 元数据中注册提供者的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小。
* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule()` decorator.
当你使用[特定的 NgModule](guide/architecture-modules) 注册提供者时，该服务的同一个实例将会对该 NgModule 中的所有组件可用。要想在这一层注册，请用 `@NgModule()` 装饰器中的 `providers` 属性：
```
@NgModule({
providers: [
BackendService,
Logger
],
...
})
```
```
@NgModule({
providers: [
BackendService,
Logger
],
...
})
```
* When you register a provider at the component level, you get a new instance of the
service with each new instance of that component.
At the component level, register a service provider in the `providers` property of the `@Component()` metadata.
当你在组件级注册提供者时，你会为该组件的每一个新实例提供该服务的一个新实例。
要在组件级注册，就要在 `@Component()` 元数据的 `providers` 属性中注册服务提供者。
<code-example path="architecture/src/app/hero-list.component.ts" header="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
<code-example path="architecture/src/app/hero-list.component.ts" header="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
For more detailed information, see the [Dependency Injection](guide/dependency-injection) section.
要了解更多细节，请参阅[依赖注入](guide/dependency-injection)一节。

158
aio/content/guide/architecture.md
View File

@ -1,306 +1,156 @@
# Introduction to Angular concepts
# 架构概览
Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
Angular is written in TypeScript.
It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。
Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。
The architecture of an Angular application relies on certain fundamental concepts.
The basic building blocks of the Angular framework are Angular components that are organized into *NgModules*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
Angular 的基本构造块是 *NgModule*，它为*组件*提供了编译的上下文环境。
NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。
应用至少会有一个用于引导应用的*根模块*，通常还会有很多*特性模块*。
* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。
每个应用都至少有一个根组件。
* Components use *services*, which provide specific functionality not directly related to views. Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient.
组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供者可以作为*依赖*被*注入*到组件中，
这能让你的代码更加模块化、更加可复用、更加高效。
Modules, components and services are classes that use *decorators*. These decorators mark their type and provide metadata that tells Angular how to use them.
模块、组件和服务都是使用*装饰器*的类，这些*装饰器*会标出它们的类型并提供元数据，以告知 Angular 该如何使用它们。
* The metadata for a component class associates it with a *template* that defines a view. A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display.
组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。
模板把普通的 HTML 和 Angular *指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在渲染 HTML 之前先修改这些 HTML。
* The metadata for a service class provides the information Angular needs to make it available to components through *dependency injection (DI)*.
服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。
An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.
应用的组件通常会定义很多视图，并进行分级组织。Angular 提供了 `Router` 服务来帮助你定义视图之间的导航路径。
路由器提供了先进的浏览器内导航功能。
<div class="alert is-helpful">
See the [Angular Glossary](guide/glossary) for basic definitions of important Angular terms and usage.
参阅 [Angular 词汇表](guide/glossary) 以了解对 Angular 重要名词和用法的基本定义。
</div>
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
要想查看本页所讲的范例程序，参阅<live-example></live-example>。
</div>
## Modules
## 模块
Angular *NgModules* differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
Angular 定义了 `NgModule`，它和 JavaScript（ES2015） 的模块不同而且有一定的互补性。
NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。
NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。
Every Angular app has a *root module*, conventionally named `AppModule`, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.
每个 Angular 应用都有一个*根模块*，通常命名为 `AppModule`。根模块提供了用来启动应用的引导机制。
一个应用通常会包含很多特性模块。
Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the `Router` NgModule.
像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用。
比如，要在你的应用中使用路由器（Router）服务，就要导入 `Router` 这个 NgModule。
Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of *lazy-loading*&mdash;that is, loading modules on demand&mdash;to minimize the amount of code that needs to be loaded at startup.
把你的代码组织成一些清晰的特性模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。
另外，这项技术还能让你获得*惰性加载*（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。
<div class="alert is-helpful">
For a more detailed discussion, see [Introduction to modules](guide/architecture-modules).
更深入的讨论，参阅[模块简介](guide/architecture-modules)。
</div>
## Components
## 组件
Every Angular application has at least one component, the *root component* that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML *template* that defines a view to be displayed in a target environment.
每个 Angular 应用都至少有一个组件，也就是*根组件*，它会把组件树和页面中的 DOM 连接起来。
每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML *模板*相关联，该模板定义了一个供目标环境下显示的视图。
The `@Component()` decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.
`@Component()` 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。
<div class="alert is-helpful">
Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.
装饰器是一些用于修饰 JavaScript 类的函数。Angular 定义了许多装饰器，这些装饰器会把一些特定种类的元数据附加到类上，以便 Angular 了解这些类的含义以及该如何使用它们。
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">Learn more about decorators on the web.</a>
<a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0">到网上学习关于装饰器的更多知识。</a>
</div>
### Templates, directives, and data binding
### 模板、指令和数据绑定
A template combines HTML with Angular markup that can modify HTML elements before they are displayed.
Template *directives* provide program logic, and *binding markup* connects your application data and the DOM.
There are two types of data binding:
模板会把 HTML 和 Angular 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修改它们。
模板中的*指令*会提供程序逻辑，而*绑定标记*会把你应用中的数据和 DOM 连接在一起。
有两种类型的数据绑定：
* *Event binding* lets your app respond to user input in the target environment by updating your application data.
*事件绑定*让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
* *Property binding* lets you interpolate values that are computed from your application data into the HTML.
*属性绑定*让你将从应用数据中计算出来的值插入到 HTML 中。
Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, are also reflected in your program data.
在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式，以修改 HTML 元素和 DOM。
Angular 支持*双向数据绑定*，这意味着 DOM 中发生的变化（比如用户的选择）同样可以反映回你的程序数据中。
Your templates can use *pipes* to improve the user experience by transforming values for display.
For example, use pipes to display dates and currency values that are appropriate for a user's locale.
Angular provides predefined pipes for common transformations, and you can also define your own pipes.
你的模板也可以用*管道*转换要显示的值以增强用户体验。比如，可以使用管道来显示适合用户所在本地环境的日期和货币格式。
Angular 为一些通用的转换提供了预定义管道，你还可以定义自己的管道。
<div class="alert is-helpful">
For a more detailed discussion of these concepts, see [Introduction to components](guide/architecture-components).
要了解对这些概念的深入讨论，参阅[组件介绍](guide/architecture-components)。
</div>
{@a dependency-injection}
## Services and dependency injection
## 服务与依赖注入
## Services and dependency injection
For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows other providers to be **injected** as dependencies into your class.
对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建*服务*类。
服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖*被注入到*客户组件中。
*Dependency injection* (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
*依赖注入*（或 DI）让你可以保持组件类的精简和高效。有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。
<div class="alert is-helpful">
For a more detailed discussion, see [Introduction to services and DI](guide/architecture-services).
更深入的讨论，参阅[服务和 DI 简介](guide/architecture-services)。
</div>
### Routing
### 路由
The Angular `Router` NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. It is modeled on the familiar browser navigation conventions:
Angular 的 `Router` 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。
它的工作模型基于人们熟知的浏览器导航约定：
* Enter a URL in the address bar and the browser navigates to a corresponding page.
在地址栏输入 URL，浏览器就会导航到相应的页面。
* Click links on the page and the browser navigates to a new page.
在页面中点击链接，浏览器就会导航到一个新页面。
* Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.
点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。
The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies.
不过路由器会把类似 URL 的路径映射到视图而不是页面。
当用户执行一个动作时（比如点击链接），本应该在浏览器中加载一个新页面，但是路由器拦截了浏览器的这个行为，并显示或隐藏一个视图层次结构。
If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can *lazy-load* the module on demand.
如果路由器认为当前的应用状态需要某些特定的功能，而定义此功能的模块尚未加载，路由器就会按需*惰性加载*此模块。
The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser's history, so the back and forward buttons work as well.
路由器会根据你应用中的导航规则和数据状态来拦截 URL。
当用户点击按钮、选择下拉框或收到其它任何来源的输入时，你可以导航到一个新视图。
路由器会在浏览器的历史日志中记录这个动作，所以前进和后退按钮也能正常工作。
To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.
要定义导航规则，你就要把*导航路径*和你的组件关联起来。
路径（path）使用类似 URL 的语法来和程序数据整合在一起，就像模板语法会把你的视图和程序数据整合起来一样。
然后你就可以用程序逻辑来决定要显示或隐藏哪些视图，以根据你制定的访问规则对用户的输入做出响应。
<div class="alert is-helpful">
<div class="alert is-helpful">
For a more detailed discussion, see [Routing and navigation](guide/router).
For a more detailed discussion, see [Routing and navigation](guide/router).
</div>
更深入的讨论，参阅[路由与导航](guide/router)。
</div>
<hr/>
## What's next
## 接下来呢？
You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.
你已经学完了 Angular 应用的主要构造块的基础知识。
下面这张图展示了这些基础部分之间是如何关联起来的。
<div class="lightbox">
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
</div>
* Together, a component and template define an Angular view.
组件和模板共同定义了 Angular 的视图。
* A decorator on a component class adds the metadata, including a pointer to the associated template.
组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。
* Directives and binding markup in a component's template modify views based on program data and logic.
组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。
* The dependency injector provides services to a component, such as the router service that lets you define navigation among views.
依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。
Each of these subjects is introduced in more detail in the following pages.
这些主题的详情在下列页面中有介绍：
* [Introduction to Modules](guide/architecture-modules)
[模块简介](guide/architecture-modules)
* [Introduction to Components](guide/architecture-components)
[组件简介](guide/architecture-components)
* [Templates and views](guide/architecture-components#templates-and-views)
[模板与视图](guide/architecture-components#templates-and-views)
* [Component metadata](guide/architecture-components#component-metadata)
[组件元数据](guide/architecture-components#component-metadata)
* [Data binding](guide/architecture-components#data-binding)
[数据绑定](guide/architecture-components#data-binding)
* [Directives](guide/architecture-components#directives)
[指令](guide/architecture-components#directives)
* [Pipes](guide/architecture-components#pipes)
[管道](guide/architecture-components#pipes)
* [Introduction to services and dependency injection](guide/architecture-services)
[服务与依赖注入简介](guide/architecture-services)
When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps: tools and techniques](guide/architecture-next-steps).
当你熟悉了这些基础构造块之后，就可以在本文档中进一步查看它们的详情了。
要学习能帮你构建和发布 Angular 应用的更多工具和技巧，参阅[后续步骤：工具与技巧](guide/architecture-next-steps)。
</div>

Some files were not shown because too many files have changed in this diff Show More