fix: merge from v10.0

This commit is contained in:
Zhicheng WANG 2020-06-27 09:45:25 +08:00
commit 4eb5431162
5023 changed files with 75537 additions and 76555 deletions

View File

@ -1,3 +1,3 @@
2.1.1
3.2.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

View File

@ -12,7 +12,7 @@ We use this as a symmetric AES encryption key to encrypt tokens like
a GitHub token that enables publishing snapshots.
To create the github_token file, we take this approach:
- Find the angular-builds:token in http://valentine
- Find the angular-builds:token in the internal pw database
- Go inside the CircleCI default docker image so you use the same version of openssl as we will at runtime: `docker run --rm -it circleci/node:10.12`
- echo "https://[token]:@github.com" > credentials
- openssl aes-256-cbc -e -in credentials -out .circleci/github_token -k $KEY

View File

@ -19,4 +19,12 @@ build --local_ram_resources=14336
# 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

View File

@ -32,7 +32,7 @@ var_4_win: &cache_key_win_fallback v7-angular-win-node-12-{{ checksum ".bazelver
# Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
# cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
var_5: &components_repo_unit_tests_cache_key v7-angular-components-448523bffffecd2b53a3d2854c3051b6b7a3934f
var_5: &components_repo_unit_tests_cache_key v7-angular-components-f428c00465dfcf8a020237f22532480eedbd2cb6
var_6: &components_repo_unit_tests_cache_key_fallback v7-angular-components-
# Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
@ -67,9 +67,6 @@ var_10: &only_on_master
# **NOTE 1**: Pin to exact images using an ID (SHA). See https://circleci.com/docs/2.0/circleci-images/#using-a-docker-image-id-to-pin-an-image-to-a-fixed-version.
# (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)
# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
# **NOTE 3**: If you change the version of the `*-browsers` docker image, make sure the
# `--versions.chrome` arg in `integration/bazel-schematics/test.sh` specifies a
# ChromeDriver version that is compatible with the Chrome version in the image.
executors:
default-executor:
parameters:
@ -120,7 +117,7 @@ commands:
sudo apt-get update
# Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)
# and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)
# which are dependendies of chrome & needed for karma & protractor headless chrome tests.
# which are dependencies of chrome & needed for karma & protractor headless chrome tests.
# This is a very small install which takes around 7s in comparing to using the full
# circleci/node:x.x.x-browsers image.
sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1
@ -163,7 +160,7 @@ commands:
description: Sets up a domain that resolves to the local host.
steps:
- run:
name: Preparing environment for running tests on Saucelabs.
name: Preparing environment for running tests on Sauce Labs.
command: |
# For SauceLabs jobs, we set up a domain which resolves to the machine which launched
# the tunnel. We do this because devices are sometimes not able to properly resolve
@ -175,13 +172,13 @@ commands:
setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
- run:
# Sets up a local domain in the machine's host file that resolves to the local
# host. This domain is helpful in Saucelabs tests where devices are not able to
# host. This domain is helpful in Sauce Labs tests where devices are not able to
# properly resolve `localhost` or `127.0.0.1` through the sauce-connect tunnel.
name: Setting up alias domain for local host.
command: echo "127.0.0.1 $SAUCE_LOCALHOST_ALIAS_DOMAIN" | sudo tee -a /etc/hosts
# Normally this would be an individual job instead of a command.
# But startup and setup time for each invidual windows job are high enough to discourage
# But startup and setup time for each individual windows job are high enough to discourage
# many small jobs, so instead we use a command for setup unless the gain becomes significant.
setup_win:
description: Setup windows node environment
@ -380,6 +377,10 @@ jobs:
test_aio:
executor: default-executor
parameters:
debugArtifactsDir:
type: string
default: aio/dist/size-debug-artifacts
steps:
- custom_attach_workspace
- init_environment
@ -398,6 +399,15 @@ jobs:
- run: yarn --cwd aio test-a11y-score-localhost
# Check the bundle sizes.
- run: yarn --cwd aio payload-size
# When `payload-size` check fails, copy the files that were checked into `debugArtifactsDir`.
- run:
when: on_fail
name: Prepare JS bundles to be stored as artifacts
command: node aio/scripts/prepare-size-debug-artifacts aio << parameters.debugArtifactsDir >>
# Store files in `debugArtifactsDir` (if any) as artifacts for debugging purposes.
- store_artifacts:
path: << parameters.debugArtifactsDir >>
destination: aio
# Run unit tests for Firebase redirects
- run: yarn --cwd aio redirects-test
@ -413,6 +423,9 @@ jobs:
test_aio_local:
parameters:
debugArtifactsDir:
type: string
default: aio/dist/size-debug-artifacts
viewengine:
type: boolean
default: false
@ -431,6 +444,15 @@ jobs:
- run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
# Check the bundle sizes.
- run: yarn --cwd aio payload-size aio-local<<# parameters.viewengine >>-viewengine<</ parameters.viewengine >>
# When `payload-size` check fails, copy the files that were checked into `debugArtifactsDir`.
- run:
when: on_fail
name: Prepare JS bundles to be stored as artifacts
command: node aio/scripts/prepare-size-debug-artifacts aio-local<<# parameters.viewengine >>-viewengine<</ parameters.viewengine >> << parameters.debugArtifactsDir >>
# Store files in `debugArtifactsDir` (if any) as artifacts for debugging purposes.
- store_artifacts:
path: << parameters.debugArtifactsDir >>
destination: aio
test_aio_tools:
executor: default-executor
@ -599,8 +621,8 @@ jobs:
- run:
name: Decrypt github credentials
# We need ensure that the same default digest is used for encoding and decoding with
# openssl. Openssl versions might have different default digests which can cause
# decryption failures based on the installed openssl version. https://stackoverflow.com/a/39641378/4317734
# OpenSSL. OpenSSL versions might have different default digests which can cause
# decryption failures based on the installed OpenSSL version. https://stackoverflow.com/a/39641378/4317734
command: 'openssl aes-256-cbc -d -in .circleci/github_token -md md5 -k "${KEY}" -out ~/.git_credentials'
- run: ./scripts/ci/publish-build-artifacts.sh
@ -734,8 +756,8 @@ jobs:
- run: yarn --cwd packages/zone.js promisetest
- run: yarn --cwd packages/zone.js promisefinallytest
- run: yarn bazel build //packages/zone.js:npm_package &&
cp dist/bin/packages/zone.js/npm_package/dist/zone-mix.js ./packages/zone.js/test/extra/ &&
cp dist/bin/packages/zone.js/npm_package/dist/zone-patch-electron.js ./packages/zone.js/test/extra/ &&
cp dist/bin/packages/zone.js/npm_package/bundles/zone-mix.umd.js ./packages/zone.js/test/extra/ &&
cp dist/bin/packages/zone.js/npm_package/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/ &&
yarn --cwd packages/zone.js electrontest
- run: yarn --cwd packages/zone.js jesttest

View File

@ -74,7 +74,7 @@ setPublicVar COMPONENTS_REPO_TMP_DIR "/tmp/angular-components-repo"
setPublicVar COMPONENTS_REPO_URL "https://github.com/angular/components.git"
setPublicVar COMPONENTS_REPO_BRANCH "master"
# **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
setPublicVar COMPONENTS_REPO_COMMIT "448523bffffecd2b53a3d2854c3051b6b7a3934f"
setPublicVar COMPONENTS_REPO_COMMIT "f428c00465dfcf8a020237f22532480eedbd2cb6"
####################################################################################################

View File

@ -60,14 +60,15 @@ if (require.resolve === module) {
// Helpers
function _main(args) {
triggerWebhook(...args).
then(({statusCode, responseText}) => (200 <= statusCode && statusCode < 400) ?
console.log(`Status: ${statusCode}\n${responseText}`) :
Promise.reject(new Error(`Request failed (status: ${statusCode}): ${responseText}`))).
catch(err => {
console.error(err);
process.exit(1);
});
triggerWebhook(...args)
.then(
({statusCode, responseText}) => (200 <= statusCode && statusCode < 400) ?
console.log(`Status: ${statusCode}\n${responseText}`) :
Promise.reject(new Error(`Request failed (status: ${statusCode}): ${responseText}`)))
.catch(err => {
console.error(err);
process.exit(1);
});
}
function postJson(url, data) {
@ -77,15 +78,12 @@ function postJson(url, data) {
const statusCode = res.statusCode || -1;
let responseText = '';
res.
on('error', reject).
on('data', d => responseText += d).
on('end', () => resolve({statusCode, responseText}));
res.on('error', reject)
.on('data', d => responseText += d)
.on('end', () => resolve({statusCode, responseText}));
};
request(url, opts, onResponse).
on('error', reject).
end(JSON.stringify(data));
request(url, opts, onResponse).on('error', reject).end(JSON.stringify(data));
});
}

View File

@ -32,7 +32,7 @@ Existing issues often contain information about workarounds, resolution, or prog
## 🔬 Minimal Reproduction
<!--
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-issue-repro2
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-ivy
-->
<!-- ✍️--> https://stackblitz.com/...

View File

@ -1,79 +0,0 @@
// The configuration for `ng-dev commit-message` commands.
const commitMessage = {
'maxLength': 120,
'minBodyLength': 100,
'types': [
'build',
'ci',
'docs',
'feat',
'fix',
'perf',
'refactor',
'release',
'style',
'test',
],
'scopes': [
'animations',
'bazel',
'benchpress',
'changelog',
'common',
'compiler',
'compiler-cli',
'core',
'dev-infra',
'docs-infra',
'elements',
'forms',
'http',
'language-service',
'localize',
'ngcc',
'packaging',
'platform-browser',
'platform-browser-dynamic',
'platform-server',
'platform-webworker',
'platform-webworker-dynamic',
'router',
'service-worker',
'upgrade',
've',
'zone.js',
]
};
// The configuration for `ng-dev format` commands.
const format = {
'clang-format': {
'matchers': [
'dev-infra/**/*.{js,ts}',
'packages/**/*.{js,ts}',
'!packages/zone.js',
'!packages/common/locales/**/*.{js,ts}',
'!packages/common/src/i18n/available_locales.ts',
'!packages/common/src/i18n/currencies.ts',
'!packages/common/src/i18n/locale_en.ts',
'modules/benchmarks/**/*.{js,ts}',
'modules/playground/**/*.{js,ts}',
'tools/**/*.{js,ts}',
'!tools/gulp-tasks/cldr/extract.js',
'!tools/public_api_guard/**/*.d.ts',
'!tools/ts-api-guardian/test/fixtures/**',
'*.{js,ts}',
'!**/node_modules/**',
'!**/dist/**',
'!**/built/**',
'!shims_for_IE.js',
]
},
'buildifier': true
};
// Export function to build ng-dev configuration object.
module.exports = {
commitMessage,
format,
};

120
.ng-dev/config.ts Normal file
View File

@ -0,0 +1,120 @@
import {MergeConfig} from '../dev-infra/pr/merge/config';
// The configuration for `ng-dev commit-message` commands.
const commitMessage = {
'maxLength': 120,
'minBodyLength': 100,
'types': [
'build',
'ci',
'docs',
'feat',
'fix',
'perf',
'refactor',
'release',
'style',
'test',
],
'scopes': [
'animations',
'bazel',
'benchpress',
'changelog',
'common',
'compiler',
'compiler-cli',
'core',
'dev-infra',
'docs-infra',
'elements',
'forms',
'http',
'language-service',
'localize',
'migrations',
'ngcc',
'packaging',
'platform-browser',
'platform-browser-dynamic',
'platform-server',
'platform-webworker',
'platform-webworker-dynamic',
'router',
'service-worker',
'upgrade',
've',
'zone.js',
]
};
// The configuration for `ng-dev format` commands.
const format = {
'clang-format': {
'matchers': [
'**/*.{js,ts}',
// TODO: burn down format failures and remove aio and integration exceptions.
'!aio/**',
'!integration/**',
// TODO: remove this exclusion as part of IE deprecation.
'!shims_for_IE.js',
// Both third_party and .yarn are directories containing copied code which should
// not be modified.
'!third_party/**',
'!.yarn/**',
// Do not format d.ts files as they are generated
'!**/*.d.ts',
]
},
'buildifier': true
};
/** Github metadata information for `ng-dev` commands. */
const github = {
owner: 'angular',
name: 'angular',
};
// Configuration for the `ng-dev pr merge` command. The command can be used
// for merging upstream pull requests into branches based on a PR target label.
const merge = () => {
// TODO: resume dynamically determining patch branch
const patch = '10.0.x';
const config: MergeConfig = {
githubApiMerge: false,
claSignedLabel: 'cla: yes',
mergeReadyLabel: /^PR action: merge(-assistance)?/,
caretakerNoteLabel: 'PR action: merge-assistance',
commitMessageFixupLabel: 'commit message fixup',
labels: [
{
pattern: 'PR target: master-only',
branches: ['master'],
},
{
pattern: 'PR target: patch-only',
branches: [patch],
},
{
pattern: 'PR target: master & patch',
branches: ['master', patch],
},
],
requiredBaseCommits: {
// PRs that target either `master` or the patch branch, need to be rebased
// on top of the latest commit message validation fix.
// These SHAs are the commits that update the required license text in the header.
'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
[patch]: '27b95ba64a5d99757f4042073fd1860e20e3ed24'
},
};
return config;
};
// Export function to build ng-dev configuration object.
module.exports = {
commitMessage,
format,
github,
merge,
};

View File

@ -34,41 +34,8 @@
####################################################################################
# GitHub usernames
####################################################################################
# aikidave - Dave Shevitz
# alan-agius4 - Alan Agius
# alxhub - Alex Rickabaugh
# AndrewKushnir - Andrew Kushnir
# andrewseguin - Andrew Seguin
# atscott - Andrew Scott
# ayazhafiz - Ayaz Hafiz
# clydin - Charles Lyding
# crisbeto - Kristiyan Kostadinov
# dennispbrown - Denny Brown
# devversion - Paul Gschwendtner
# dgp1130 - Doug Parker
# filipesilva - Filipe Silva
# gkalpak - Georgios Kalpakas
# gregmagolan - Greg Magolan
# IgorMinar - Igor Minar
# jbogarthyde - Judy Bogart
# jelbourn - Jeremy Elbourn
# JiaLiPassion - Jia Li
# JoostK - Joost Koehoorn
# josephperrott - Joey Perrott
# juleskremer - Jules Kremer
# kapunahelewong - Kapunahele Wong
# kara - Kara Erickson
# kyliau - Keen Yee Liau
# manughub - Manu Murthy
# matsko - Matias Niemela
# mgechev - Minko Gechev
# mhevery - Miško Hevery
# michaelprentice - Michael Prentice
# mmalerba - Miles Malerba
# petebacondarwin - Pete Bacon Darwin
# pkozlowski-opensource - Pawel Kozlowski
# robwormald - Rob Wormald
# StephenFluin - Stephen Fluin
# See reviewer list under `required-minimum-review` group. Team member names and
# usernames are managed there.
####################################################################################
@ -80,8 +47,8 @@
# Used for approving minor changes, large-scale refactorings, and in emergency situations.
#
# IgorMinar
# jelbourn
# josephperrott
# kara
# mhevery
#
# =========================================================
@ -100,8 +67,16 @@ version: 3
# Meta field that goes unused by PullApprove to allow for defining aliases to be
# used throughout the config.
meta:
1: &can-be-global-approved "\"global-approvers\" not in groups.approved"
2: &can-be-global-docs-approved "\"global-docs-approvers\" not in groups.approved"
can-be-global-approved: &can-be-global-approved "\"global-approvers\" not in groups.approved"
can-be-global-docs-approved: &can-be-global-docs-approved "\"global-docs-approvers\" not in groups.approved"
defaults: &defaults
reviews:
# Authors provide their approval implicitly, this approval allows for a reviewer
# from a group not to need a review specifically for an area of the repository
# they own. This is coupled with the `required-minimum-review` group which requires
# that all PRs are reviewed by at least one team member who is not the author of
# the PR.
author_value: 1
# turn on 'draft' support
# https://docs.pullapprove.com/config/github-api-version/
@ -157,10 +132,63 @@ groups:
required: 1
reviewed_for: required
# =========================================================
# Require review on all PRs
#
# All PRs require at least one review. This rule will not
# request any reviewers, however will require that at least
# one review is provided before the group is satisfied.
# =========================================================
required-minimum-review:
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
reviews:
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
reviewers:
users:
- aikidave # Dave Shevitz
- alan-agius4 # Alan Agius
- alxhub # Alex Rickabaugh
- AndrewKushnir # Andrew Kushnir
- andrewseguin # Andrew Seguin
- atscott # Andrew Scott
- ayazhafiz # Ayaz Hafiz
- clydin # Charles Lyding
- crisbeto # Kristiyan Kostadinov
- dennispbrown # Denny Brown
- devversion # Paul Gschwendtner
- dgp1130 # Doug Parker
- filipesilva # Filipe Silva
- gkalpak # Georgios Kalpakas
- gregmagolan # Greg Magolan
- IgorMinar # Igor Minar
- jbogarthyde # Judy Bogart
- jelbourn # Jeremy Elbourn
- JiaLiPassion # Jia Li
- JoostK # Joost Koehoorn
- josephperrott # Joey Perrott
- juleskremer # Jules Kremer
- kapunahelewong # Kapunahele Wong
- kara # Kara Erickson
- kyliau # Keen Yee Liau
- manughub # Manu Murthy
- matsko # Matias Niemela
- mgechev # Minko Gechev
- mhevery # Miško Hevery
- mmalerba # Miles Malerba
- petebacondarwin # Pete Bacon Darwin
- pkozlowski-opensource # Pawel Kozlowski
- Splaktar # Michael Prentice
- StephenFluin # Stephen Fluin
# =========================================================
# Framework: Animations
# =========================================================
fw-animations:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -185,6 +213,7 @@ groups:
# Framework: Compiler
# =========================================================
fw-compiler:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -203,13 +232,13 @@ groups:
- alxhub
- AndrewKushnir
- JoostK
- kara
# =========================================================
# Framework: Compiler / ngcc
# =========================================================
fw-ngcc:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -226,6 +255,7 @@ groups:
# Framework: Migrations
# =========================================================
fw-migrations:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -235,13 +265,13 @@ groups:
- alxhub
- crisbeto
- devversion
- kara
# =========================================================
# Framework: Core
# =========================================================
fw-core:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -285,6 +315,7 @@ groups:
'aio/content/images/guide/dependency-injection-in-action/**',
'aio/content/guide/dependency-injection-navtree.md',
'aio/content/guide/dependency-injection-providers.md',
'aio/content/guide/lightweight-injection-tokens.md',
'aio/content/guide/displaying-data.md',
'aio/content/examples/displaying-data/**',
'aio/content/images/guide/displaying-data/**',
@ -351,7 +382,8 @@ groups:
users:
- alxhub
- AndrewKushnir
- kara
- atscott
- ~kara # do not request reviews from Kara, but allow her to approve PRs
- mhevery
- pkozlowski-opensource
@ -360,6 +392,7 @@ groups:
# Framework: Http
# =========================================================
fw-http:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -381,6 +414,7 @@ groups:
# Framework: Elements
# =========================================================
fw-elements:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -401,6 +435,7 @@ groups:
# Framework: Forms
# =========================================================
fw-forms:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -433,6 +468,7 @@ groups:
# Framework: i18n
# =========================================================
fw-i18n:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -466,6 +502,7 @@ groups:
# Framework: Platform Server
# =========================================================
fw-platform-server:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -485,6 +522,7 @@ groups:
# Framework: Router
# =========================================================
fw-router:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -507,6 +545,7 @@ groups:
# Framework: Service Worker
# =========================================================
fw-service-worker:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -534,6 +573,7 @@ groups:
# Framework: Upgrade
# =========================================================
fw-upgrade:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -564,11 +604,12 @@ groups:
# Framework: Testing
# =========================================================
fw-testing:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
contains_any_globs(files.exclude('packages/compiler-cli/**'), [
'**/testing/**',
'aio/content/guide/testing.md',
'aio/content/examples/testing/**',
@ -578,7 +619,6 @@ groups:
users:
- AndrewKushnir
- IgorMinar
- kara
- pkozlowski-opensource
@ -586,6 +626,7 @@ groups:
# Framework: Benchmarks
# =========================================================
fw-benchmarks:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -595,7 +636,6 @@ groups:
reviewers:
users:
- IgorMinar
- kara
- pkozlowski-opensource
@ -603,6 +643,7 @@ groups:
# Framework: Playground
# =========================================================
fw-playground:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -612,13 +653,15 @@ groups:
reviewers:
users:
- IgorMinar
- kara
- jelbourn
- pkozlowski-opensource
# =========================================================
# Framework: Security
# =========================================================
fw-security:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -636,18 +679,25 @@ groups:
users:
- IgorMinar
- mhevery
- jelbourn
- pkozlowski-opensource
reviews:
request: -1 # request reviews from everyone
required: 2 # require at least 2 approvals
reviewed_for: required
# =========================================================
# Bazel
# =========================================================
bazel:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
'packages/bazel/**',
'aio/content/guide/bazel.md'
])
reviewers:
users:
@ -660,6 +710,7 @@ groups:
# Language Service
# =========================================================
language-service:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -679,6 +730,7 @@ groups:
# zone.js
# =========================================================
zone-js:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -692,11 +744,27 @@ groups:
- JiaLiPassion
- mhevery
# =========================================================
# in-memory-web-api
# =========================================================
in-memory-web-api:
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
'packages/misc/angular-in-memory-web-api/**',
])
reviewers:
users:
- IgorMinar
- crisbeto
# =========================================================
# Benchpress
# =========================================================
benchpress:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -707,12 +775,14 @@ groups:
reviewers:
users:
- alxhub
- josephperrott
# =========================================================
# Integration Tests
# =========================================================
integration-tests:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -723,7 +793,6 @@ groups:
users:
- IgorMinar
- josephperrott
- kara
- mhevery
@ -731,6 +800,7 @@ groups:
# Docs: Gettings Started & Tutorial
# =========================================================
docs-getting-started-and-tutorial:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -763,6 +833,7 @@ groups:
# Docs: Marketing
# =========================================================
docs-marketing:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -785,6 +856,7 @@ groups:
# Docs: Observables
# =========================================================
docs-observables:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -810,6 +882,7 @@ groups:
# Docs: Packaging, Tooling, Releasing
# =========================================================
docs-packaging-and-releasing:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -829,20 +902,47 @@ groups:
'aio/content/guide/migration-localize.md',
'aio/content/guide/migration-module-with-providers.md',
'aio/content/guide/static-query-migration.md',
'aio/content/guide/updating-to-version-9.md',
'aio/content/guide/updating-to-version-10.md',
'aio/content/guide/ivy-compatibility.md',
'aio/content/guide/ivy-compatibility-examples.md'
])
reviewers:
users:
- IgorMinar
- kara
- jelbourn
# =========================================================
# Tooling: Compiler API shared with Angular CLI
#
# Changing this API might break Angular CLI, so we require
# the CLI team to approve changes here.
# =========================================================
tooling-cli-shared-api:
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
- >
contains_any_globs(files, [
'packages/compiler-cli/src/tooling.ts'
])
reviewers:
users:
- alan-agius4
- clydin
- kyliau
- IgorMinar
reviews:
request: -1 # request reviews from everyone
required: 2 # require at least 2 approvals
reviewed_for: required
# =========================================================
# Docs: CLI
# =========================================================
docs-cli:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -859,8 +959,12 @@ groups:
'aio/content/images/guide/deployment/**',
'aio/content/guide/file-structure.md',
'aio/content/guide/ivy.md',
'aio/content/guide/strict-mode.md',
'aio/content/guide/web-worker.md',
'aio/content/guide/workspace-config.md',
'aio/content/guide/migration-solution-style-tsconfig.md',
'aio/content/guide/migration-update-module-and-target-compiler-options.md',
'aio/content/guide/migration-update-libraries-tslib.md',
])
reviewers:
users:
@ -873,6 +977,7 @@ groups:
# Docs: CLI Libraries
# =========================================================
docs-libraries:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -893,6 +998,7 @@ groups:
# Docs: Schematics
# =========================================================
docs-schematics:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -915,6 +1021,7 @@ groups:
# Docs-infra
# =========================================================
docs-infra:
<<: *defaults
conditions:
- *can-be-global-approved
- *can-be-global-docs-approved
@ -944,14 +1051,16 @@ groups:
# Dev-infra
# =========================================================
dev-infra:
<<: *defaults
conditions:
- *can-be-global-approved
- >
contains_any_globs(files, [
contains_any_globs(files.exclude("CHANGELOG.md").exclude("packages/compiler-cli/**/BUILD.bazel"), [
'*',
'.circleci/**',
'.devcontainer/**',
'.github/**',
'.ng-dev/**',
'.vscode/**',
'.yarn/**',
'dev-infra/**',
@ -967,8 +1076,6 @@ groups:
'docs/TOOLS.md',
'docs/TRIAGE_AND_LABELS.md',
'goldens/*',
'modules/e2e_util/e2e_util.ts',
'modules/e2e_util/perf_util.ts',
'modules/*',
'packages/*',
'packages/examples/test-utils/**',
@ -976,15 +1083,10 @@ groups:
'packages/examples/*',
'scripts/**',
'third_party/**',
'tools/brotli-cli/**',
'tools/browsers/**',
'tools/build/**',
'tools/circular_dependency_test/**',
'tools/contributing-stats/**',
'tools/components/**',
'tools/gulp-tasks/**',
'tools/ng_rollup_bundle/**',
'tools/ngcontainer/**',
'tools/npm/**',
'tools/npm_integration_test/**',
'tools/rxjs/**',
@ -1014,11 +1116,13 @@ groups:
# Public API
# =========================================================
public-api:
<<: *defaults
conditions:
- *can-be-global-approved
- >
contains_any_globs(files, [
'goldens/public-api/**',
'CHANGELOG.md',
'docs/NAMING.md',
'aio/content/guide/glossary.md',
'aio/content/guide/styleguide.md',
@ -1027,13 +1131,21 @@ groups:
])
reviewers:
users:
- alxhub
- IgorMinar
- jelbourn
- pkozlowski-opensource
reviews:
request: -1 # request reviews from everyone
required: 3 # require at least 3 approvals
reviewed_for: required
# ================================================
# Size tracking
# ================================================
size-tracking:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -1042,14 +1154,21 @@ groups:
])
reviewers:
users:
- alxhub
- IgorMinar
- kara
- jelbourn
- pkozlowski-opensource
reviews:
request: -1 # request reviews from everyone
required: 2 # require at least 2 approvals
reviewed_for: required
# ================================================
# Circular dependencies
# ================================================
circular-dependencies:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -1059,8 +1178,9 @@ groups:
reviewers:
users:
- IgorMinar
- jelbourn
- josephperrott
- kara
- pkozlowski-opensource
####################################################################################
@ -1071,6 +1191,7 @@ groups:
# Code Ownership
# =========================================================
code-ownership:
<<: *defaults
conditions:
- *can-be-global-approved
- >
@ -1086,12 +1207,37 @@ groups:
# Catch all for if no groups match the code change
# ====================================================
fallback:
<<: *defaults
# A group is considered to be `active` for a PR if at least one of group's
# conditions matches the PR.
#
# The PullApprove CI check should fail if a PR has no `active` groups, as
# this indicates the PR is modifying a file that has no owner.
#
# This is enforced through the pullapprove verification check done
# as part of the CircleCI lint job. Failures in this lint job should be
# fixed as part of the PR. This can be done by updating the
# `.pullapprove.yml` file cover the unmatched path.
# The pullapprove verification script is part of the ng-dev tool and can be
# run locally with the command: `yarn -s ng-dev pullapprove verify`
#
# For cases in which the verification check fails to ensure coverage, this
# group will be active. The expectation is that this should be remedied
# before merging the PR as described above. In an emergency situation
# `global-approvers` can still approve PRs that match this `fallback` rule,
# but that should be an exception and not an expectation.
conditions:
# The following groups have no file based conditions and will be initially `active` on all PRs
# - `global-approvers`
# - `global-docs-approvers`
# - `required-minimum-review`
#
# By checking the number of active groups when these are excluded, we can determine
# if any other groups are matched.
- len(groups.active.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
# When any of the `global-*` groups is approved, they cause other groups to deactivate.
# In those cases, the condition above would evaluate to `true` while in reality, only a global
# approval has been provided. To ensure we don't activate the fallback group in such cases,
# ensure that no explicit global approval has been provided.
- *can-be-global-approved
# Groups which are found to have matching conditions are `active`
# according to PullApprove. If no groups are matched and considered
# active, we still want to have a review occur.
- len(groups.active) == 0
reviewers:
users:
- IgorMinar
- *can-be-global-docs-approved

View File

@ -2,7 +2,6 @@ package(default_visibility = ["//visibility:public"])
exports_files([
"LICENSE",
"protractor-perf.conf.js",
"karma-js.conf.js",
"browser-providers.conf.js",
"scripts/ci/track-payload-size.sh",
@ -21,9 +20,9 @@ filegroup(
# do not sort
srcs = [
"@npm//:node_modules/core-js/client/core.js",
"//packages/zone.js/dist:zone.js",
"//packages/zone.js/dist:zone-testing.js",
"//packages/zone.js/dist:task-tracking.js",
"//packages/zone.js/bundles:zone.umd.js",
"//packages/zone.js/bundles:zone-testing.umd.js",
"//packages/zone.js/bundles:task-tracking.umd.js",
"//:test-events.js",
"//:shims_for_IE.js",
# Including systemjs because it defines `__eval`, which produces correct stack traces.

View File

@ -1,58 +1,246 @@
<a name="9.1.6"></a>
## [9.1.6](https://github.com/angular/angular/compare/9.1.5...9.1.6) (2020-05-08)
<a name="10.0.0"></a>
# [10.0.0](https://github.com/angular/angular/compare/10.0.0-rc.6...10.0.0) (2020-06-24)
### Bug Fixes
* **compiler-cli**: Revert "fix(compiler-cli): fix case-sensitivity issues in NgtscCompilerHost (#36968)" (#37003)
### Release Highlights & Update instructions
To learn about the release highlights and our CLI-powered automated update workflow for your projects please check out the [v10 release announcement](https://blog.angular.io/version-10-of-angular-now-available-78960babd41).
### Features
<a name="10.0.0-next.6"></a>
# [10.0.0-next.6](https://github.com/angular/angular/compare/10.0.0-next.5...10.0.0-next.6) (2020-05-07)
* **bazel:** expose explicit mapping from closure to devmode files ([#36262](https://github.com/angular/angular/issues/36262)) ([ba796bb](https://github.com/angular/angular/commit/ba796bb))
* **bazel:** simplify ng_package by dropping esm5 and fesm5 ([#36944](https://github.com/angular/angular/issues/36944)) ([9dbb30f](https://github.com/angular/angular/commit/9dbb30f))
* **compiler-cli:** report error if undecorated class with Angular features is discovered ([#36921](https://github.com/angular/angular/issues/36921)) ([4c92cf4](https://github.com/angular/angular/commit/4c92cf4))
* **compiler:** Propagate value span of ExpressionBinding to ParsedProperty ([#36133](https://github.com/angular/angular/issues/36133)) ([d714b95](https://github.com/angular/angular/commit/d714b95))
* **compiler:** add dependency info and ng-content selectors to metadata ([#35695](https://github.com/angular/angular/issues/35695)) ([32ce8b1](https://github.com/angular/angular/commit/32ce8b1))
* **compiler:** add name spans for property reads and method calls ([#36826](https://github.com/angular/angular/issues/36826)) ([eb34aa5](https://github.com/angular/angular/commit/eb34aa5))
* **core** make generic mandatory for ModuleWithProviders ([#36892](https://github.com/angular/angular/issues/36892)) ([20cc3ab](https://github.com/angular/angular/commit/20cc3ab))
* **core** update to tslib 2.0 and move to direct dependencies ([#37198](https://github.com/angular/angular/pull/37198)), closes [#37188](https://github.com/angular/angular/issues/37188)
* **core:** undecorated-classes migration should handle derived abstract classes ([#35339](https://github.com/angular/angular/issues/35339)) ([c24ad56](https://github.com/angular/angular/commit/c24ad56))
* **core:** undecorated-classes-with-decorated-fields migration should handle classes with lifecycle hooks ([#36921](https://github.com/angular/angular/issues/36921)) ([c6ecdc9](https://github.com/angular/angular/commit/c6ecdc9))
* **language-service:** Remove HTML entities autocompletion ([#37515](https://github.com/angular/angular/issues/37515)) ([67bd88b](https://github.com/angular/angular/commit/67bd88b))
* **language-service:** TS references from template items ([#37437](https://github.com/angular/angular/issues/37437)) ([bf2cb6f](https://github.com/angular/angular/commit/bf2cb6f))
* **language-service:** [ivy] Parse Angular compiler options ([#36922](https://github.com/angular/angular/issues/36922)) ([dbd0f8e](https://github.com/angular/angular/commit/dbd0f8e))
* **language-service:** [ivy] wrap ngtsc to handle typecheck files ([#36930](https://github.com/angular/angular/issues/36930)) ([1142c37](https://github.com/angular/angular/commit/1142c37))
* **localize:** support merging multiple translation files ([#36792](https://github.com/angular/angular/issues/36792)) ([72f534f](https://github.com/angular/angular/commit/72f534f))
* **ngcc:** allow async locking timeouts to be configured ([#36838](https://github.com/angular/angular/issues/36838)) ([38f805c](https://github.com/angular/angular/commit/38f805c))
* **ngcc:** implement a program-based entry-point finder ([#37075](https://github.com/angular/angular/issues/37075)) ([f3ccd29](https://github.com/angular/angular/commit/f3ccd29))
* **ngcc:** support for new APF where `module` points to esm2015 output ([#36944](https://github.com/angular/angular/issues/36944)) ([c98a4d6](https://github.com/angular/angular/commit/c98a4d6))
* **ngcc:** support marking an in-progress task as unprocessed ([#36626](https://github.com/angular/angular/issues/36626)) ([4665c35](https://github.com/angular/angular/commit/4665c35))
* **ngcc:** support reverting a file written by `FileWriter` ([#36626](https://github.com/angular/angular/issues/36626)) ([772ccf0](https://github.com/angular/angular/commit/772ccf0))
* **platform-server:** use absolute URLs from Location for HTTP ([#37071](https://github.com/angular/angular/issues/37071)) ([9edea0b](https://github.com/angular/angular/commit/9edea0b))
* **router:** allow CanLoad guard to return UrlTree ([#36610](https://github.com/angular/angular/issues/36610)) ([00e6cb1](https://github.com/angular/angular/commit/00e6cb1)), closes [#26521](https://github.com/angular/angular/issues/26521) [#28306](https://github.com/angular/angular/issues/28306)
* **service-worker:** include `CacheQueryOptions` options in ngsw-config ([#34663](https://github.com/angular/angular/issues/34663)) ([dc9f4b9](https://github.com/angular/angular/commit/dc9f4b9)), closes [#28443](https://github.com/angular/angular/issues/28443)
* **service-worker:** support timeout in `registerWhenStable` SW registration strategy ([#35870](https://github.com/angular/angular/issues/35870)) ([00efacf](https://github.com/angular/angular/commit/00efacf)), closes [#34464](https://github.com/angular/angular/issues/34464)
* **service-worker:** use `ignoreVary: true` when retrieving responses from cache ([#34663](https://github.com/angular/angular/issues/34663)) ([ee35e22](https://github.com/angular/angular/commit/ee35e22)), closes [#36638](https://github.com/angular/angular/issues/36638)
* remove TypeScript 3.6 and 3.7 support ([#36329](https://github.com/angular/angular/issues/36329)) ([fbd281c](https://github.com/angular/angular/commit/fbd281c))
* remove support for TypeScript 3.8 ([#37129](https://github.com/angular/angular/issues/37129)) ([6466fb2](https://github.com/angular/angular/commit/6466fb2))
### Bug Fixes
* **bazel:** ng_package rule should update "package.json" of ts_library targets ([#36944](https://github.com/angular/angular/issues/36944)) ([d5293d2](https://github.com/angular/angular/commit/d5293d2))
* **compiler:** remove outdated and invalid warning for unresolved DI parameters ([#36985](https://github.com/angular/angular/issues/36985)) ([d0280a0](https://github.com/angular/angular/commit/d0280a0))
* **compiler:** switch to 'referencedFiles' for shim generation ([#36211](https://github.com/angular/angular/issues/36211)) ([4213e8d](https://github.com/angular/angular/commit/4213e8d))
* **common:** `locales/global/*.js` are not ES5 compliant ([#36342](https://github.com/angular/angular/issues/36342)) ([078b0be](https://github.com/angular/angular/commit/078b0be)), closes [angular/angular-cli#16394](https://github.com/angular/angular-cli/issues/16394)
* **common:** format day-periods that cross midnight ([#36611](https://github.com/angular/angular/issues/36611)) ([c6e5fc4](https://github.com/angular/angular/commit/c6e5fc4)), closes [#36566](https://github.com/angular/angular/issues/36566)
* **common:** let `KeyValuePipe` accept type unions with `null` ([#36093](https://github.com/angular/angular/issues/36093)) ([d783519](https://github.com/angular/angular/commit/d783519)), closes [#35743](https://github.com/angular/angular/issues/35743)
* **common:** prevent duplicate URL change notifications ([#37404](https://github.com/angular/angular/issues/37404)) ([fff424a](https://github.com/angular/angular/commit/fff424a))
* **common:** prevent duplicate URL change notifications ([#37459](https://github.com/angular/angular/issues/37459)) ([0864726](https://github.com/angular/angular/commit/0864726))
* **compiler-cli:** `isCaseSensitive()` returns correct value ([#36859](https://github.com/angular/angular/issues/36859)) ([fc4741f](https://github.com/angular/angular/commit/fc4741f))
* **compiler-cli:** compute the correct target output for `$localize` messages ([#36989](https://github.com/angular/angular/issues/36989)) ([4e1b5e4](https://github.com/angular/angular/commit/4e1b5e4))
* **compiler-cli:** don't try to tag non-ts files as shims ([#36987](https://github.com/angular/angular/issues/36987)) ([42d1091](https://github.com/angular/angular/commit/42d1091))
* **compiler-cli:** ensure `getRootDirs()` handles case-sensitivity ([#36859](https://github.com/angular/angular/issues/36859)) ([3f3e9b7](https://github.com/angular/angular/commit/3f3e9b7))
* **compiler-cli:** ensure `MockFileSystem` handles case-sensitivity ([#36859](https://github.com/angular/angular/issues/36859)) ([26eacd4](https://github.com/angular/angular/commit/26eacd4))
* **compiler-cli:** downlevel angular decorators to static properties ([#37382](https://github.com/angular/angular/issues/37382)) ([323651b](https://github.com/angular/angular/commit/323651b)), closes [#30586](https://github.com/angular/angular/issues/30586) [#30106](https://github.com/angular/angular/issues/30106) [#30586](https://github.com/angular/angular/issues/30586) [#30141](https://github.com/angular/angular/issues/30141)
* **compiler-cli:** ensure LogicalFileSystem handles case-sensitivity ([#36859](https://github.com/angular/angular/issues/36859)) ([53a8459](https://github.com/angular/angular/commit/53a8459))
* **compiler-cli:** ensure LogicalFileSystem maintains case in paths ([#37008](https://github.com/angular/angular/issues/37008)) ([3dfc770](https://github.com/angular/angular/commit/3dfc770)), closes [#36992](https://github.com/angular/angular/issues/36992) [#36993](https://github.com/angular/angular/issues/36993) [#37000](https://github.com/angular/angular/issues/37000)
* **compiler-cli:** ensure `MockFileSystem` handles case-sensitivity ([#36859](https://github.com/angular/angular/issues/36859)) ([26eacd4](https://github.com/angular/angular/commit/26eacd4))
* **compiler-cli:** ensure `getRootDirs()` handles case-sensitivity ([#36859](https://github.com/angular/angular/issues/36859)) ([3f3e9b7](https://github.com/angular/angular/commit/3f3e9b7))
* **compiler-cli:** fix bug tracking indirect NgModule dependencies ([#36211](https://github.com/angular/angular/issues/36211)) ([bab90a7](https://github.com/angular/angular/commit/bab90a7))
* **compiler-cli:** fix case-sensitivity issues in NgtscCompilerHost ([#36859](https://github.com/angular/angular/issues/36859)) ([0ec0ff3](https://github.com/angular/angular/commit/0ec0ff3))
* **compiler-cli:** normalize mock Windows file paths correctly ([#36859](https://github.com/angular/angular/issues/36859)) ([b682bd1](https://github.com/angular/angular/commit/b682bd1))
* **compiler-cli:** pass real source spans where they are empty ([#31805](https://github.com/angular/angular/issues/31805)) ([e893c5a](https://github.com/angular/angular/commit/e893c5a))
* **compiler-cli:** use CompilerHost to ensure canonical file paths ([#36859](https://github.com/angular/angular/issues/36859)) ([a10c126](https://github.com/angular/angular/commit/a10c126))
* **compiler-cli:** use ModuleWithProviders type if static eval fails ([#37126](https://github.com/angular/angular/issues/37126)) ([305b5a3](https://github.com/angular/angular/commit/305b5a3))
* **compiler:** avoid generating i18n attributes in plain form ([#36422](https://github.com/angular/angular/issues/36422)) ([88b0985](https://github.com/angular/angular/commit/88b0985))
* **compiler:** avoid undefined expressions in holey array ([#36343](https://github.com/angular/angular/issues/36343)) ([5516802](https://github.com/angular/angular/commit/5516802))
* **compiler:** handle type references to namespaced symbols correctly ([#36106](https://github.com/angular/angular/issues/36106)) ([4aa4e6f](https://github.com/angular/angular/commit/4aa4e6f)), closes [#36006](https://github.com/angular/angular/issues/36006)
* **compiler:** normalize line endings in ICU expansions ([#36741](https://github.com/angular/angular/issues/36741)) ([70dd27f](https://github.com/angular/angular/commit/70dd27f)), closes [#36725](https://github.com/angular/angular/issues/36725)
* **compiler:** record correct end of expression ([#34690](https://github.com/angular/angular/issues/34690)) ([df890d7](https://github.com/angular/angular/commit/df890d7)), closes [#33477](https://github.com/angular/angular/issues/33477)
* **compiler:** remove outdated and invalid warning for unresolved DI parameters ([#36985](https://github.com/angular/angular/issues/36985)) ([d0280a0](https://github.com/angular/angular/commit/d0280a0))
* **compiler:** resolve enum values in binary operations ([#36461](https://github.com/angular/angular/issues/36461)) ([64022f5](https://github.com/angular/angular/commit/64022f5)), closes [#35584](https://github.com/angular/angular/issues/35584)
* **compiler:** switch to 'referencedFiles' for shim generation ([#36211](https://github.com/angular/angular/issues/36211)) ([4213e8d](https://github.com/angular/angular/commit/4213e8d))
* **compiler:** unable to resolve destructuring variable declarations ([#37497](https://github.com/angular/angular/issues/37497)) ([df10597](https://github.com/angular/angular/commit/df10597)), closes [#36917](https://github.com/angular/angular/issues/36917)
* **core:** Host classes should not be fed back into `@Input` ([#35889](https://github.com/angular/angular/issues/35889)) ([cda2530](https://github.com/angular/angular/commit/cda2530)), closes [#35383](https://github.com/angular/angular/issues/35383)
* **core:** Refresh transplanted views at insertion point only ([#35968](https://github.com/angular/angular/issues/35968)) ([1786586](https://github.com/angular/angular/commit/1786586)), closes [#35400](https://github.com/angular/angular/issues/35400) [#21324](https://github.com/angular/angular/issues/21324)
* **core:** attempt to recover from user errors during creation ([#36381](https://github.com/angular/angular/issues/36381)) ([3d82aa7](https://github.com/angular/angular/commit/3d82aa7)), closes [#31221](https://github.com/angular/angular/issues/31221)
* **core:** avoid migration error when non-existent symbol is imported ([#36367](https://github.com/angular/angular/issues/36367)) ([d43c306](https://github.com/angular/angular/commit/d43c306)), closes [#36346](https://github.com/angular/angular/issues/36346)
* **core:** correct "development mode" console message ([#36571](https://github.com/angular/angular/issues/36571)) ([8d8e419](https://github.com/angular/angular/commit/8d8e419)), closes [#36570](https://github.com/angular/angular/issues/36570)
* **core:** disable tsickle pass when producing APF packages ([#37221](https://github.com/angular/angular/issues/37221)) ([a1001f2](https://github.com/angular/angular/commit/a1001f2))
* **core:** do not use unbound attributes as inputs to structural directives ([#36441](https://github.com/angular/angular/issues/36441)) ([acf6075](https://github.com/angular/angular/commit/acf6075))
* **core:** handle empty translations correctly ([#36499](https://github.com/angular/angular/issues/36499)) ([b1f1d3f](https://github.com/angular/angular/commit/b1f1d3f)), closes [#36476](https://github.com/angular/angular/issues/36476)
* **core:** handle pluralize functions that expect a number ([#36901](https://github.com/angular/angular/issues/36901)) ([2ff4b35](https://github.com/angular/angular/commit/2ff4b35)), closes [#36888](https://github.com/angular/angular/issues/36888)
* **core:** handle synthetic props in Directive host bindings correctly ([#35568](https://github.com/angular/angular/issues/35568)) ([f27deea](https://github.com/angular/angular/commit/f27deea)), closes [#35501](https://github.com/angular/angular/issues/35501)
* **core:** infinite loop if injectable using inheritance has a custom decorator ([#37022](https://github.com/angular/angular/issues/37022)) ([bc54936](https://github.com/angular/angular/commit/bc54936)), closes [#35733](https://github.com/angular/angular/issues/35733)
* **core:** inheritance delegate ctor regex updated to work on minified code ([#36962](https://github.com/angular/angular/issues/36962)) ([ea971f7](https://github.com/angular/angular/commit/ea971f7))
* **core:** log error instead of warning for unknown properties and elements ([#36399](https://github.com/angular/angular/issues/36399)) ([9d9d46f](https://github.com/angular/angular/commit/9d9d46f)), closes [#35699](https://github.com/angular/angular/issues/35699)
* **core:** missing-injectable migration should not migrate `@NgModule` classes ([#36369](https://github.com/angular/angular/issues/36369)) ([28995db](https://github.com/angular/angular/commit/28995db)), closes [#35700](https://github.com/angular/angular/issues/35700)
* **core:** ngOnDestroy on multi providers called with incorrect context ([#35840](https://github.com/angular/angular/issues/35840)) ([95fc3d4](https://github.com/angular/angular/commit/95fc3d4)), closes [#35231](https://github.com/angular/angular/issues/35231)
* **core:** pipes injecting viewProviders when used on a component host node ([#36512](https://github.com/angular/angular/issues/36512)) ([81d23b3](https://github.com/angular/angular/commit/81d23b3)), closes [#36146](https://github.com/angular/angular/issues/36146)
* **core:** prevent unknown property check for AOT-compiled components ([#36072](https://github.com/angular/angular/issues/36072)) ([4a9f0be](https://github.com/angular/angular/commit/4a9f0be)), closes [#35945](https://github.com/angular/angular/issues/35945)
* **core:** properly get root nodes from embedded views with <ng-content> ([#36051](https://github.com/angular/angular/issues/36051)) ([e30e132](https://github.com/angular/angular/commit/e30e132)), closes [#35967](https://github.com/angular/angular/issues/35967)
* **core:** properly identify modules affected by overrides in TestBed ([#36649](https://github.com/angular/angular/issues/36649)) ([942b986](https://github.com/angular/angular/commit/942b986)), closes [#36619](https://github.com/angular/angular/issues/36619)
* **core:** reenable decorator downleveling for Angular npm packages ([#37317](https://github.com/angular/angular/issues/37317)) ([d16a7f3](https://github.com/angular/angular/commit/d16a7f3)), closes [#37221](https://github.com/angular/angular/issues/37221) [#37221](https://github.com/angular/angular/issues/37221)
* **core:** run `APP_INITIALIZER`s before accessing `LOCALE_ID` token in Ivy TestBed ([#36237](https://github.com/angular/angular/issues/36237)) ([1649743](https://github.com/angular/angular/commit/1649743)), closes [#36230](https://github.com/angular/angular/issues/36230)
* **core:** should fake a top event task when coalescing events to prevent draining microTaskQueue too early. ([#36841](https://github.com/angular/angular/issues/36841)) ([9b8eb42](https://github.com/angular/angular/commit/9b8eb42)), closes [#36839](https://github.com/angular/angular/issues/36839)
* **core:** undecorated-classes-with-decorated-fields migration does not decorate derived classes ([#35339](https://github.com/angular/angular/issues/35339)) ([32eafef](https://github.com/angular/angular/commit/32eafef)), closes [#34376](https://github.com/angular/angular/issues/34376)
* **core:** undecorated-classes-with-decorated-fields migration should avoid error if base class has no value declaration ([#36543](https://github.com/angular/angular/issues/36543)) ([ca67748](https://github.com/angular/angular/commit/ca67748)), closes [#36522](https://github.com/angular/angular/issues/36522)
* **core:** workaround Terser inlining bug ([#36200](https://github.com/angular/angular/issues/36200)) ([0ce8ad3](https://github.com/angular/angular/commit/0ce8ad3))
* **elements:** capture input properties set before upgrading the element ([#36114](https://github.com/angular/angular/issues/36114)) ([2fc5ae5](https://github.com/angular/angular/commit/2fc5ae5)), closes [#30848](https://github.com/angular/angular/issues/30848) [#31416](https://github.com/angular/angular/issues/31416)
* **elements:** correctly handle getting/setting properties before connecting the element ([#36114](https://github.com/angular/angular/issues/36114)) ([327980b](https://github.com/angular/angular/commit/327980b)), closes [#30848](https://github.com/angular/angular/issues/30848)
* **elements:** correctly handle setting inputs to `undefined` ([#36140](https://github.com/angular/angular/issues/36140)) ([9ba46d9](https://github.com/angular/angular/commit/9ba46d9))
* **elements:** correctly set `SimpleChange#firstChange` for pre-existing inputs ([#36140](https://github.com/angular/angular/issues/36140)) ([b14ac96](https://github.com/angular/angular/commit/b14ac96)), closes [#36130](https://github.com/angular/angular/issues/36130)
* **elements:** do not break when the constructor of an Angular Element is not called ([#36114](https://github.com/angular/angular/issues/36114)) ([89b44d1](https://github.com/angular/angular/commit/89b44d1))
* **elements:** fire custom element output events during component initialization ([#36161](https://github.com/angular/angular/issues/36161)) ([e9bff5f](https://github.com/angular/angular/commit/e9bff5f)), closes [#36141](https://github.com/angular/angular/issues/36141)
* **forms:** handle numeric values properly in the validator ([#36157](https://github.com/angular/angular/issues/36157)) ([88a235d](https://github.com/angular/angular/commit/88a235d)), closes [#35591](https://github.com/angular/angular/issues/35591)
* **forms:** number input fires valueChanges twice ([#36087](https://github.com/angular/angular/issues/36087)) ([97d6d90](https://github.com/angular/angular/commit/97d6d90)), closes [#12540](https://github.com/angular/angular/issues/12540)
* **language-service:** Improve signature selection by finding exact match ([#37494](https://github.com/angular/angular/issues/37494)) ([e97a2d4](https://github.com/angular/angular/commit/e97a2d4))
* **language-service:** Recover from error in analyzing Ng Modules ([#37108](https://github.com/angular/angular/issues/37108)) ([2c1f35e](https://github.com/angular/angular/commit/2c1f35e))
* **language-service:** disable update the `[@angular](https://github.com/angular)/core` module ([#36783](https://github.com/angular/angular/issues/36783)) ([dd049ca](https://github.com/angular/angular/commit/dd049ca))
* **language-service:** infer type of elements of array-like objects ([#36312](https://github.com/angular/angular/issues/36312)) ([fe2b692](https://github.com/angular/angular/commit/fe2b692)), closes [#36191](https://github.com/angular/angular/issues/36191)
* **language-service:** properly evaluate types in comparable expressions ([#36529](https://github.com/angular/angular/issues/36529)) ([8be0972](https://github.com/angular/angular/commit/8be0972))
* **language-service:** use empty statement as parent of type node ([#36989](https://github.com/angular/angular/issues/36989)) ([a32cbed](https://github.com/angular/angular/commit/a32cbed))
* **language-service:** use the `HtmlAst` to get the span of HTML tag ([#36371](https://github.com/angular/angular/issues/36371)) ([81195a2](https://github.com/angular/angular/commit/81195a2))
* **language-service:** wrong completions in conditional operator ([#37505](https://github.com/angular/angular/issues/37505)) ([32020f9](https://github.com/angular/angular/commit/32020f9))
* **localize:** allow ICU expansion case to start with any character except `}` ([#36123](https://github.com/angular/angular/issues/36123)) ([fced8ee](https://github.com/angular/angular/commit/fced8ee)), closes [#31586](https://github.com/angular/angular/issues/31586)
* **localize:** ensure `getLocation()` works ([#36853](https://github.com/angular/angular/issues/36853)) ([70b25a3](https://github.com/angular/angular/commit/70b25a3))
* **localize:** include legacy ids when describing messages ([#36761](https://github.com/angular/angular/issues/36761)) ([47f9867](https://github.com/angular/angular/commit/47f9867))
* **ngcc:** `viaModule` should be `null` for local imports ([#36989](https://github.com/angular/angular/issues/36989)) ([d268d2a](https://github.com/angular/angular/commit/d268d2a))
* **ngcc:** add process title ([#36448](https://github.com/angular/angular/issues/36448)) ([76a8cd5](https://github.com/angular/angular/commit/76a8cd5)), closes [36414#issuecomment-609644282](https://github.com/angular/angular/issues/36414#issuecomment-609644282)
* **ngcc:** allow ngcc configuration to match pre-release versions of packages ([#36370](https://github.com/angular/angular/issues/36370)) ([326240e](https://github.com/angular/angular/commit/326240e))
* **ngcc:** capture dynamic import expressions as well as declarations ([#37075](https://github.com/angular/angular/issues/37075)) ([5c0bdae](https://github.com/angular/angular/commit/5c0bdae))
* **ngcc:** correctly detect external files from nested `node_modules/` ([#36559](https://github.com/angular/angular/issues/36559)) ([6ab43d7](https://github.com/angular/angular/commit/6ab43d7)), closes [#36526](https://github.com/angular/angular/issues/36526)
* **ngcc:** correctly detect imported TypeScript helpers ([#36284](https://github.com/angular/angular/issues/36284)) ([ca25c95](https://github.com/angular/angular/commit/ca25c95)), closes [#36089](https://github.com/angular/angular/issues/36089)
* **ngcc:** correctly get config for packages in nested `node_modules/` ([#37040](https://github.com/angular/angular/issues/37040)) ([9ade1c3](https://github.com/angular/angular/commit/9ade1c3))
* **ngcc:** correctly get config for sub-entry-points when primary entry-point is ignored ([#37040](https://github.com/angular/angular/issues/37040)) ([bf57776](https://github.com/angular/angular/commit/bf57776))
* **ngcc:** correctly identify relative Windows-style import paths ([#36372](https://github.com/angular/angular/issues/36372)) ([aecf9de](https://github.com/angular/angular/commit/aecf9de))
* **ngcc:** correctly identify the package path of secondary entry-points ([#36249](https://github.com/angular/angular/issues/36249)) ([995cd15](https://github.com/angular/angular/commit/995cd15)), closes [#35747](https://github.com/angular/angular/issues/35747)
* **ngcc:** correctly retrieve a package's version from its `package.json` ([#37040](https://github.com/angular/angular/issues/37040)) ([11c0402](https://github.com/angular/angular/commit/11c0402))
* **ngcc:** detect non-emitted, non-imported TypeScript helpers ([#36418](https://github.com/angular/angular/issues/36418)) ([5fa7b8b](https://github.com/angular/angular/commit/5fa7b8b))
* **ngcc:** display output from the unlocker process on Windows ([#36569](https://github.com/angular/angular/issues/36569)) ([e041ac6](https://github.com/angular/angular/commit/e041ac6))
* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([cabf997](https://github.com/angular/angular/commit/cabf997)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com/nodejs/node/issues/3596#issuecomment-250890218)
* **ngcc:** do not inline source-maps for non-inline typings source-maps ([#37363](https://github.com/angular/angular/issues/37363)) ([b4e26b5](https://github.com/angular/angular/commit/b4e26b5)), closes [#37324](https://github.com/angular/angular/issues/37324)
* **ngcc:** do not run in parallel mode if there are less than 3 CPU cores ([#36626](https://github.com/angular/angular/issues/36626)) ([4c63241](https://github.com/angular/angular/commit/4c63241))
* **ngcc:** do not scan import expressions in d.ts files ([#37503](https://github.com/angular/angular/issues/37503)) ([8248307](https://github.com/angular/angular/commit/8248307))
* **ngcc:** do not spawn more processes than intended in parallel mode ([#36280](https://github.com/angular/angular/issues/36280)) ([5cee709](https://github.com/angular/angular/commit/5cee709)), closes [#35719](https://github.com/angular/angular/issues/35719) [#36278](https://github.com/angular/angular/issues/36278)
* **ngcc:** do not spawn unlocker processes on cluster workers ([#36569](https://github.com/angular/angular/issues/36569)) ([66effde](https://github.com/angular/angular/commit/66effde)), closes [#35861](https://github.com/angular/angular/issues/35861)
* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([0c2ed4c](https://github.com/angular/angular/commit/0c2ed4c)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com/angular/angular-cli/issues/16860#issuecomment-614694269)
* **ngcc:** do not warn if `paths` mapping does not exist ([#36525](https://github.com/angular/angular/issues/36525)) ([717df13](https://github.com/angular/angular/commit/717df13)), closes [#36518](https://github.com/angular/angular/issues/36518)
* **ngcc:** do not write entry-point manifest outside node_modules ([#36299](https://github.com/angular/angular/issues/36299)) ([c6dd900](https://github.com/angular/angular/commit/c6dd900)), closes [#36296](https://github.com/angular/angular/issues/36296)
* **ngcc:** don't crash on cyclic source-map references ([#36452](https://github.com/angular/angular/issues/36452)) ([ee70a18](https://github.com/angular/angular/commit/ee70a18)), closes [#35727](https://github.com/angular/angular/issues/35727) [#35757](https://github.com/angular/angular/issues/35757)
* **ngcc:** ensure reflection hosts can handle TS 3.9 IIFE wrapped classes ([#36989](https://github.com/angular/angular/issues/36989)) ([d7440c4](https://github.com/angular/angular/commit/d7440c4))
* **ngcc:** ensure rendering formatters work with IIFE wrapped classes ([#36989](https://github.com/angular/angular/issues/36989)) ([c8ee390](https://github.com/angular/angular/commit/c8ee390))
* **ngcc:** ensure that more dependencies are found by `EsmDependencyHost` ([#37075](https://github.com/angular/angular/issues/37075)) ([c6872c0](https://github.com/angular/angular/commit/c6872c0))
* **ngcc:** find decorated constructor params on IIFE wrapped classes ([#37436](https://github.com/angular/angular/issues/37436)) ([2cb3b66](https://github.com/angular/angular/commit/2cb3b66)), closes [#37330](https://github.com/angular/angular/issues/37330)
* **ngcc:** force ngcc to exit on error ([#36622](https://github.com/angular/angular/issues/36622)) ([663b768](https://github.com/angular/angular/commit/663b768)), closes [#36616](https://github.com/angular/angular/issues/36616)
* **ngcc:** give up re-spawning crashed worker process after 3 attempts ([#36626](https://github.com/angular/angular/issues/36626)) ([793cb32](https://github.com/angular/angular/commit/793cb32))
* **ngcc:** handle `ENOMEM` errors in worker processes ([#36626](https://github.com/angular/angular/issues/36626)) ([4779c4b](https://github.com/angular/angular/commit/4779c4b))
* **ngcc:** handle bad path mappings when finding entry-points ([#36331](https://github.com/angular/angular/issues/36331)) ([cc4b813](https://github.com/angular/angular/commit/cc4b813)), closes [#36313](https://github.com/angular/angular/issues/36313) [#36283](https://github.com/angular/angular/issues/36283)
* **ngcc:** handle entry-points within container folders ([#36305](https://github.com/angular/angular/issues/36305)) ([38ad1d9](https://github.com/angular/angular/commit/38ad1d9)), closes [#35756](https://github.com/angular/angular/issues/35756) [#36216](https://github.com/angular/angular/issues/36216)
* **ngcc:** identifier ModuleWithProviders functions in IIFE wrapped classes ([#37206](https://github.com/angular/angular/issues/37206)) ([97e1399](https://github.com/angular/angular/commit/97e1399)), closes [#37189](https://github.com/angular/angular/issues/37189)
* **ngcc:** provide a unique exit code for timeouts ([#36838](https://github.com/angular/angular/issues/36838)) ([d805526](https://github.com/angular/angular/commit/d805526))
* **ngcc:** recognize enum declarations emitted in JavaScript ([#36550](https://github.com/angular/angular/issues/36550)) ([89c5890](https://github.com/angular/angular/commit/89c5890)), closes [#35584](https://github.com/angular/angular/issues/35584)
* **ngcc:** sniff `main` property for ESM5 format ([#36396](https://github.com/angular/angular/issues/36396)) ([2463548](https://github.com/angular/angular/commit/2463548)), closes [#35788](https://github.com/angular/angular/issues/35788)
* **ngcc:** support ModuleWithProviders functions that delegate ([#36948](https://github.com/angular/angular/issues/36948)) ([fafa50d](https://github.com/angular/angular/commit/fafa50d)), closes [#36892](https://github.com/angular/angular/issues/36892)
* **ngcc:** support TS 3.9 wrapped ES2015 classes ([#36884](https://github.com/angular/angular/issues/36884)) ([db4c59d](https://github.com/angular/angular/commit/db4c59d))
* **ngcc:** support `defineProperty()` re-exports in CommonJS and UMD ([#36989](https://github.com/angular/angular/issues/36989)) ([91092f6](https://github.com/angular/angular/commit/91092f6))
* **ngcc:** support ignoring deep-imports via package config ([#36423](https://github.com/angular/angular/issues/36423)) ([f9fb833](https://github.com/angular/angular/commit/f9fb833)), closes [#35750](https://github.com/angular/angular/issues/35750)
* **ngcc:** support recovering when a worker process crashes ([#36626](https://github.com/angular/angular/issues/36626)) ([966598c](https://github.com/angular/angular/commit/966598c)), closes [#36278](https://github.com/angular/angular/issues/36278)
* **ngcc:** support simple `browser` property in entry-points ([#36396](https://github.com/angular/angular/issues/36396)) ([6b3aa60](https://github.com/angular/angular/commit/6b3aa60)), closes [#36062](https://github.com/angular/angular/issues/36062)
* **ngcc:** use annotateForClosureCompiler option ([#36652](https://github.com/angular/angular/issues/36652)) ([eca8d11](https://github.com/angular/angular/commit/eca8d11)), closes [#36618](https://github.com/angular/angular/issues/36618)
* **ngcc:** use path-mappings from tsconfig in dependency resolution ([#36180](https://github.com/angular/angular/issues/36180)) ([380de1e](https://github.com/angular/angular/commit/380de1e)), closes [#36119](https://github.com/angular/angular/issues/36119)
* **ngcc:** use preserve whitespaces from tsconfig if provided ([#36189](https://github.com/angular/angular/issues/36189)) ([b8e9a30](https://github.com/angular/angular/commit/b8e9a30)), closes [#35871](https://github.com/angular/angular/issues/35871)
* **platform-server:** correctly handle absolute relative URLs ([#37341](https://github.com/angular/angular/issues/37341)) ([420d1c3](https://github.com/angular/angular/commit/420d1c3)), closes [#37314](https://github.com/angular/angular/issues/37314)
* **platform-server:** update `xhr2` dependency ([#36366](https://github.com/angular/angular/issues/36366)) ([b59bc0e](https://github.com/angular/angular/commit/b59bc0e)), closes [#36358](https://github.com/angular/angular/issues/36358)
* **router:** Fix relative link generation from empty path components ([#37446](https://github.com/angular/angular/issues/37446)) ([585e3f6](https://github.com/angular/angular/commit/585e3f6)), closes [#26243](https://github.com/angular/angular/issues/26243) [#13011](https://github.com/angular/angular/issues/13011) [#35687](https://github.com/angular/angular/issues/35687)
* **router:** allow UrlMatcher to return null ([#36402](https://github.com/angular/angular/issues/36402)) ([568e9df](https://github.com/angular/angular/commit/568e9df)), closes [#29824](https://github.com/angular/angular/issues/29824)
* **router:** cancel navigation when at least one resolver completes with no "next" emission ([#24621](https://github.com/angular/angular/issues/24621)) ([d9c4840](https://github.com/angular/angular/commit/d9c4840)), closes [#24195](https://github.com/angular/angular/issues/24195)
* **router:** fix navigation ignoring logic to compare to the browser url ([#37408](https://github.com/angular/angular/issues/37408)) ([5db2e79](https://github.com/angular/angular/commit/5db2e79)), closes [#16710](https://github.com/angular/angular/issues/16710) [#13586](https://github.com/angular/angular/issues/13586)
* **router:** pass correct component to canDeactivate checks when using two or more sibling router-outlets ([#36302](https://github.com/angular/angular/issues/36302)) ([80e6c07](https://github.com/angular/angular/commit/80e6c07)), closes [#34614](https://github.com/angular/angular/issues/34614)
* **router:** state data missing in routerLink ([#36462](https://github.com/angular/angular/issues/36462)) ([e0415db](https://github.com/angular/angular/commit/e0415db)), closes [#33173](https://github.com/angular/angular/issues/33173)
* **router:** update type for routerLink to include null and undefined ([#37018](https://github.com/angular/angular/issues/37018)) ([ef9f8df](https://github.com/angular/angular/commit/ef9f8df)), closes [#13380](https://github.com/angular/angular/issues/13380) [#36544](https://github.com/angular/angular/issues/36544)
* **service-worker:** Don't stay locked in EXISTING_CLIENTS_ONLY if corrupted data ([#37453](https://github.com/angular/angular/issues/37453)) ([6f93847](https://github.com/angular/angular/commit/6f93847)), closes [#31109](https://github.com/angular/angular/issues/31109) [#31865](https://github.com/angular/angular/issues/31865)
* **service-worker:** by default register the SW after 30s even the app never stabilizes ([#35870](https://github.com/angular/angular/issues/35870)) ([29e8a64](https://github.com/angular/angular/commit/29e8a64)), closes [#34464](https://github.com/angular/angular/issues/34464)
* **service-worker:** prevent SW registration strategies from affecting app stabilization ([#35870](https://github.com/angular/angular/issues/35870)) ([2d7c95f](https://github.com/angular/angular/commit/2d7c95f))
* **upgrade:** update $locationShim to handle Location changes before initialization ([#36498](https://github.com/angular/angular/issues/36498)) ([0cc53fb](https://github.com/angular/angular/commit/0cc53fb)), closes [#36492](https://github.com/angular/angular/issues/36492)
* add aikidave as reviewer for DOCS: Marketing ([#37014](https://github.com/angular/angular/issues/37014)) ([286fbf4](https://github.com/angular/angular/commit/286fbf4))
### Features
### Code Refactoring
* **common:** remove WrappedValue from AsyncPipe ([#36633](https://github.com/angular/angular/issues/36633)) ([49be32c](https://github.com/angular/angular/commit/49be32c)), closes [#29927](https://github.com/angular/angular/issues/29927)
* **bazel:** simplify ng_package by dropping esm5 and fesm5 ([#36944](https://github.com/angular/angular/issues/36944)) ([9dbb30f](https://github.com/angular/angular/commit/9dbb30f))
* **compiler-cli:** report error if undecorated class with Angular features is discovered ([#36921](https://github.com/angular/angular/issues/36921)) ([4c92cf4](https://github.com/angular/angular/commit/4c92cf4))
* **core:** undecorated-classes-with-decorated-fields migration should handle classes with lifecycle hooks ([#36921](https://github.com/angular/angular/issues/36921)) ([c6ecdc9](https://github.com/angular/angular/commit/c6ecdc9))
* **ngcc:** support for new APF where `module` points to esm2015 output ([#36944](https://github.com/angular/angular/issues/36944)) ([c98a4d6](https://github.com/angular/angular/commit/c98a4d6))
* **language-service:** [ivy] Parse Angular compiler options ([#36922](https://github.com/angular/angular/issues/36922)) ([dbd0f8e](https://github.com/angular/angular/commit/dbd0f8e))
* remove TypeScript 3.6 and 3.7 support ([#36329](https://github.com/angular/angular/issues/36329)) ([fbd281c](https://github.com/angular/angular/commit/fbd281c))
### Performance Improvements
* **compiler-cli:** perform template type-checking incrementally ([#36211](https://github.com/angular/angular/issues/36211)) ([ecffc35](https://github.com/angular/angular/commit/ecffc35))
* **compiler-cli:** split Ivy template type-checking into multiple files ([#36211](https://github.com/angular/angular/issues/36211)) ([b861e9c](https://github.com/angular/angular/commit/b861e9c))
* **core:** avoid pulling in jit-specific code in aot bundles ([#37372](https://github.com/angular/angular/issues/37372)) ([#37514](https://github.com/angular/angular/issues/37514)) ([6114cd2](https://github.com/angular/angular/commit/6114cd2)), closes [#29083](https://github.com/angular/angular/issues/29083)
* **forms:** optimize internal method _anyControls in FormGroup ([#32534](https://github.com/angular/angular/issues/32534)) ([6c7467a](https://github.com/angular/angular/commit/6c7467a))
* **ngcc:** allow immediately reporting a stale lock file ([#37250](https://github.com/angular/angular/issues/37250)) ([930d204](https://github.com/angular/angular/commit/930d204))
* **ngcc:** cache parsed tsconfig between runs ([#37417](https://github.com/angular/angular/issues/37417)) ([f9daa13](https://github.com/angular/angular/commit/f9daa13)), closes [#36882](https://github.com/angular/angular/issues/36882)
* **ngcc:** only compute basePaths in TargetedEntryPointFinder when needed ([#36881](https://github.com/angular/angular/issues/36881)) ([ec6b9cc](https://github.com/angular/angular/commit/ec6b9cc)), closes [#36874](https://github.com/angular/angular/issues/36874)
* **ngcc:** only load if it is needed ([#36486](https://github.com/angular/angular/issues/36486)) ([3bedfda](https://github.com/angular/angular/commit/3bedfda))
* **ngcc:** read dependencies from entry-point manifest ([#36486](https://github.com/angular/angular/issues/36486)) ([a185efb](https://github.com/angular/angular/commit/a185efb)), closes [#issuecomment-608401834](https://github.com/angular/angular#issuecomment-608401834)
* **ngcc:** reduce the size of the entry-point manifest file ([#36486](https://github.com/angular/angular/issues/36486)) ([ec0ce60](https://github.com/angular/angular/commit/ec0ce60))
* **ngcc:** speed up the `getBasePaths()` computation ([#36881](https://github.com/angular/angular/issues/36881)) ([e037840](https://github.com/angular/angular/commit/e037840))
#### Dependency updates
@angular/compiler-cli now requires:
- TypeScript 3.9
### BREAKING CHANGES
* TypeScript versions 3.6 and 3.7 are no longer supported, please update to TypeScript 3.8
* TypeScript 3.6, 3.7 and 3.8 are no longer supported, please update to TypeScript 3.9.
* **core:** Angular npm packages no longer contain jsdoc comments
to support Closure Compiler's advanced optimizations
The support for Closure Compiler in Angular packages has been
experimental and broken for quite some time.
As of TS3.9, Closure is unusable with the JavaScript emit. Please follow
https://github.com/microsoft/TypeScript/issues/38374 for more
information and updates.
If you used Closure Compiler with Angular in the past, you will likely
be better off consuming Angular packages built from sources directly
rather than consuming the version we publish on npm,
which is primarily optimized for Webpack/Rollup + Terser build pipeline.
As a temporary workaround, you might consider using your current build
pipeline with Closure flag `--compilation_level=SIMPLE`. This flag
will ensure that your build pipeline produces buildable and
runnable artifacts, at the cost of increased payload size due to
advanced optimizations being disabled.
If you were affected by this change, please help us understand your
needs by leaving a comment on https://github.com/angular/angular/issues/37234.
* **core:** make generic mandatory for ModuleWithProviders
A generic type parameter has always been required for the `ModuleWithProviders` pattern to work with Ivy, but prior to this commit, View Engine allowed the generic type to be omitted (though support was officially deprecated).
If you're using `ModuleWithProviders` without a generic type in your application code, a v10 migration will update your code for you.
However, if you are using View Engine and also depending on a library that omits the generic type, you will now get a build time error similar to:
```
error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
```
In this case, ngcc won't help you (because it's Ivy-only) and the migration only covers application code.
You should contact the library author to fix their library to provide a type parameter when they use this class.
As a workaround, we suggest setting `skipLibChecks` to false in your tsconfig or updating your app to use Ivy.
* **forms:** Number inputs no longer listen to the `change` event.
@ -82,6 +270,120 @@ Angular CLI will automatically downlevel the code to es5 if differential
loading is enabled in the Angular project, so no action is required from
Angular CLI users.
* **core:** Warnings about unknown elements are now logged as errors. This won't break your app, but it may trip up tools that expect nothing to be logged via `console.error`.
* **router:** Any resolver which return EMPTY will cancel navigation.
If you want to allow the navigation to continue, you will need to update the resolvers to emit
some value, (i.e. defaultIfEmpty(...), of(...), etc).
* **service-worker:** Previously, [Vary](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary)
headers would be taken into account when retrieving resources from the
cache, completely preventing the retrieval of cached assets (due to
ServiceWorker implementation details) and leading to unpredictable
behavior due to inconsistent/buggy implementations in different
browsers.
Now, `Vary` headers are ignored when retrieving resources from the
ServiceWorker caches, which can result in resources being retrieved even
when their headers are different. If your application needs to
differentiate its responses based on request headers, please make sure
the Angular ServiceWorker is [configured](https://angular.io/guide/service-worker-config)
to avoid caching the affected resources.
* **common:** This change could result in ExpressionChangedAfterItHasBeenChecked errors that
were not detected before. The error could previously have gone undetected
because two WrappedValues are considered "equal" in all cases for the purposes
of the check, even if their respective unwrapped values are not.
Additionally, `[val]=(observable | async).someProperty` will no longer
trigger change detection if the value of `someProperty` is identical to
the value in the previous emit. If you need to force change detection,
either update the binding to use an object whose reference changes or
subscribe to the observable and call markForCheck as needed.
* **common:** format day-periods that cross midnight
When formatting a time with the `b` or `B` format codes, the rendered
string was not correctly handling day periods that spanned midnight.
Instead the logic was falling back to the default case of `AM`.
Now the logic has been updated so that it matches times that are within
a day period that spans midnight, so it will now render the correct
output, such as `at night` in the case of English.
Applications that are using either `formatDate()` or `DatePipe` and any
of the `b` or `B` format codes will be affected by this change.
* **router:** UrlMatcher's type now reflects that it could always return
null.
If you implemented your own Router or Recognizer class, please update it to
handle matcher returning null.
<a name="9.1.11"></a>
## [9.1.11](https://github.com/angular/angular/compare/9.1.10...9.1.11) (2020-06-10)
### Reverts
* **elements:** fire custom element output events during component initialization ([dc9da17](https://github.com/angular/angular/commit/dc9da17))
<a name="9.1.10"></a>
## [9.1.10](https://github.com/angular/angular/compare/9.1.9...9.1.10) (2020-06-09)
### Bug Fixes
* **elements:** fire custom element output events during component initialization ([454e073](https://github.com/angular/angular/commit/454e073)), closes [/github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L167-L170](https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts/issues/L167-L170) [/github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts#L164](https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/create-custom-element.ts/issues/L164) [/github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts#L158](https://github.com/angular/angular/blob/c0143cb2abdd172de1b95fd1d2c4cfc738640e28/packages/elements/src/component-factory-strategy.ts/issues/L158) [#36141](https://github.com/angular/angular/issues/36141)
### Performance Improvements
* **ngcc:** cache parsed tsconfig between runs ([1aae94a](https://github.com/angular/angular/commit/1aae94a)), closes [#37417](https://github.com/angular/angular/issues/37417) [#36882](https://github.com/angular/angular/issues/36882)
<a name="9.1.9"></a>
## [9.1.9](https://github.com/angular/angular/compare/9.1.8...9.1.9) (2020-05-20)
This release contains a re-submit of the following 3 commits with fixes for TS 3.8.
### Bug Fixes
* **elements:** capture input properties set before upgrading the element ([#36114](https://github.com/angular/angular/issues/36114)) ([#37226](https://github.com/angular/angular/issues/37226)) ([a33cb2d](https://github.com/angular/angular/commit/a33cb2d)), closes [#30848](https://github.com/angular/angular/issues/30848) [#31416](https://github.com/angular/angular/issues/31416)
* **elements:** correctly handle getting/setting properties before connecting the element ([#36114](https://github.com/angular/angular/issues/36114)) ([#37226](https://github.com/angular/angular/issues/37226)) ([6ac0042](https://github.com/angular/angular/commit/6ac0042)), closes [/github.com/angular/angular/pull/31416/files#r300326698](https://github.com/angular/angular/pull/31416/files/issues/r300326698)
* **elements:** do not break when the constructor of an Angular Element is not called ([#36114](https://github.com/angular/angular/issues/36114)) ([#37226](https://github.com/angular/angular/issues/37226)) ([1465372](https://github.com/angular/angular/commit/1465372))
<a name="9.1.8"></a>
## [9.1.8](https://github.com/angular/angular/compare/9.1.6...9.1.8) (2020-05-20)
### Bug Fixes
* **core:** Host classes should not be fed back into `@Input` ([#35889](https://github.com/angular/angular/issues/35889)) ([f872b69](https://github.com/angular/angular/commit/f872b69)), closes [#35383](https://github.com/angular/angular/issues/35383)
* **core:** inheritance delegate ctor regex updated to work on minified code ([#36962](https://github.com/angular/angular/issues/36962)) ([e3d3395](https://github.com/angular/angular/commit/e3d3395))
* **elements:** capture input properties set before upgrading the element ([#36114](https://github.com/angular/angular/issues/36114)) ([1c8f179](https://github.com/angular/angular/commit/1c8f179)), closes [#30848](https://github.com/angular/angular/issues/30848) [#31416](https://github.com/angular/angular/issues/31416)
* **elements:** correctly handle getting/setting properties before connecting the element ([#36114](https://github.com/angular/angular/issues/36114)) ([363f14c](https://github.com/angular/angular/commit/363f14c)), closes [/github.com/angular/angular/pull/31416/files#r300326698](https://github.com/angular/angular/pull/31416/files/issues/r300326698)
* **elements:** do not break when the constructor of an Angular Element is not called ([#36114](https://github.com/angular/angular/issues/36114)) ([87b9f08](https://github.com/angular/angular/commit/87b9f08))
* **router:** update type for routerLink to include null and undefined ([#37018](https://github.com/angular/angular/issues/37018)) ([7de7871](https://github.com/angular/angular/commit/7de7871)), closes [#13380](https://github.com/angular/angular/issues/13380) [#36544](https://github.com/angular/angular/issues/36544)
<a name="9.1.7"></a>
## [9.1.7](https://github.com/angular/angular/compare/9.1.6...9.1.7) (2020-05-13)
This release contains various API docs improvements.
<a name="9.1.6"></a>
## [9.1.6](https://github.com/angular/angular/compare/9.1.5...9.1.6) (2020-05-08)
### Bug Fixes
* **compiler-cli**: Revert "fix(compiler-cli): fix case-sensitivity issues in NgtscCompilerHost (#36968)" (#37003)
<a name="9.1.5"></a>
## [9.1.5](https://github.com/angular/angular/compare/9.1.4...9.1.5) (2020-05-07)
@ -115,96 +417,6 @@ Angular CLI users.
<a name="10.0.0-next.5"></a>
# [10.0.0-next.5](https://github.com/angular/angular/compare/10.0.0-next.4...10.0.0-next.5) (2020-05-04)
### Bug Fixes
* **core:** log error instead of warning for unknown properties and elements ([#36399](https://github.com/angular/angular/issues/36399)) ([9d9d46f](https://github.com/angular/angular/commit/9d9d46f)), closes [#35699](https://github.com/angular/angular/issues/35699)
* **core:** Refresh transplanted views at insertion point only ([#35968](https://github.com/angular/angular/issues/35968)) ([1786586](https://github.com/angular/angular/commit/1786586)), closes [#35400](https://github.com/angular/angular/issues/35400) [#21324](https://github.com/angular/angular/issues/21324)
* **ngcc:** do not run in parallel mode if there are less than 3 CPU cores ([#36626](https://github.com/angular/angular/issues/36626)) ([4c63241](https://github.com/angular/angular/commit/4c63241))
* **ngcc:** give up re-spawning crashed worker process after 3 attempts ([#36626](https://github.com/angular/angular/issues/36626)) ([793cb32](https://github.com/angular/angular/commit/793cb32))
* **ngcc:** handle `ENOMEM` errors in worker processes ([#36626](https://github.com/angular/angular/issues/36626)) ([4779c4b](https://github.com/angular/angular/commit/4779c4b))
* **ngcc:** provide a unique exit code for timeouts ([#36838](https://github.com/angular/angular/issues/36838)) ([d805526](https://github.com/angular/angular/commit/d805526))
* **ngcc:** support recovering when a worker process crashes ([#36626](https://github.com/angular/angular/issues/36626)) ([966598c](https://github.com/angular/angular/commit/966598c)), closes [#36278](https://github.com/angular/angular/issues/36278)
* **ngcc:** support TS 3.9 wrapped ES2015 classes ([#36884](https://github.com/angular/angular/issues/36884)) ([db4c59d](https://github.com/angular/angular/commit/db4c59d))
* **router:** cancel navigation when at least one resolver completes with no "next" emission ([#24621](https://github.com/angular/angular/issues/24621)) ([d9c4840](https://github.com/angular/angular/commit/d9c4840)), closes [#24195](https://github.com/angular/angular/issues/24195)
### Code Refactoring
* **common:** remove WrappedValue from AsyncPipe ([#36633](https://github.com/angular/angular/issues/36633)) ([49be32c](https://github.com/angular/angular/commit/49be32c)), closes [#29927](https://github.com/angular/angular/issues/29927)
### Features
* **localize:** support merging multiple translation files ([#36792](https://github.com/angular/angular/issues/36792)) ([72f534f](https://github.com/angular/angular/commit/72f534f))
* **ngcc:** allow async locking timeouts to be configured ([#36838](https://github.com/angular/angular/issues/36838)) ([38f805c](https://github.com/angular/angular/commit/38f805c))
* **ngcc:** support marking an in-progress task as unprocessed ([#36626](https://github.com/angular/angular/issues/36626)) ([4665c35](https://github.com/angular/angular/commit/4665c35))
* **ngcc:** support reverting a file written by `FileWriter` ([#36626](https://github.com/angular/angular/issues/36626)) ([772ccf0](https://github.com/angular/angular/commit/772ccf0))
* **service-worker:** include `CacheQueryOptions` options in ngsw-config ([#34663](https://github.com/angular/angular/issues/34663)) ([dc9f4b9](https://github.com/angular/angular/commit/dc9f4b9)), closes [#28443](https://github.com/angular/angular/issues/28443)
* **service-worker:** use `ignoreVary: true` when retrieving responses from cache ([#34663](https://github.com/angular/angular/issues/34663)) ([ee35e22](https://github.com/angular/angular/commit/ee35e22)), closes [#36638](https://github.com/angular/angular/issues/36638)
### Performance Improvements
* **ngcc:** only compute basePaths in TargetedEntryPointFinder when needed ([#36881](https://github.com/angular/angular/issues/36881)) ([ec6b9cc](https://github.com/angular/angular/commit/ec6b9cc)), closes [#36874](https://github.com/angular/angular/issues/36874)
* **ngcc:** speed up the `getBasePaths()` computation ([#36881](https://github.com/angular/angular/issues/36881)) ([e037840](https://github.com/angular/angular/commit/e037840))
### BREAKING CHANGES
* **core:** Warnings about unknown elements are now logged as errors. This won't break your app, but it may trip up tools that expect nothing to be logged via `console.error`.
* **router:** Any resolver which return EMPTY will cancel navigation.
If you want to allow the navigation to continue, you will need to update the resolvers to emit
some value, (i.e. defaultIfEmpty(...), of(...), etc).
* **service-worker:** Previously, [Vary](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary)
headers would be taken into account when retrieving resources from the
cache, completely preventing the retrieval of cached assets (due to
ServiceWorker implementation details) and leading to unpredictable
behavior due to inconsistent/buggy implementations in different
browsers.
Now, `Vary` headers are ignored when retrieving resources from the
ServiceWorker caches, which can result in resources being retrieved even
when their headers are different. If your application needs to
differentiate its responses based on request headers, please make sure
the Angular ServiceWorker is [configured](https://angular.io/guide/service-worker-config)
to avoid caching the affected resources.
* **common:** This change could result in ExpressionChangedAfterItHasBeenChecked errors that
were not detected before. The error could previously have gone undetected
because two WrappedValues are considered "equal" in all cases for the purposes
of the check, even if their respective unwrapped values are not.
Additionally, `[val]=(observable | async).someProperty` will no longer
trigger change detection if the value of `someProperty` is identical to
the value in the previous emit. If you need to force change detection,
either update the binding to use an object whose reference changes or
subscribe to the observable and call markForCheck as needed.
<a name="10.0.0-next.4"></a>
# [10.0.0-next.4](https://github.com/angular/angular/compare/10.0.0-next.3...10.0.0-next.4) (2020-04-29)
### Bug Fixes
* **compiler:** normalize line endings in ICU expansions ([#36741](https://github.com/angular/angular/issues/36741)) ([70dd27f](https://github.com/angular/angular/commit/70dd27f)), closes [#36725](https://github.com/angular/angular/issues/36725)
* **core:** attempt to recover from user errors during creation ([#36381](https://github.com/angular/angular/issues/36381)) ([3d82aa7](https://github.com/angular/angular/commit/3d82aa7)), closes [#31221](https://github.com/angular/angular/issues/31221)
* **core:** handle synthetic props in Directive host bindings correctly ([#35568](https://github.com/angular/angular/issues/35568)) ([f27deea](https://github.com/angular/angular/commit/f27deea)), closes [#35501](https://github.com/angular/angular/issues/35501)
* **language-service:** disable update the `[@angular](https://github.com/angular)/core` module ([#36783](https://github.com/angular/angular/issues/36783)) ([dd049ca](https://github.com/angular/angular/commit/dd049ca))
* **localize:** include legacy ids when describing messages ([#36761](https://github.com/angular/angular/issues/36761)) ([47f9867](https://github.com/angular/angular/commit/47f9867))
* **ngcc:** recognize enum declarations emitted in JavaScript ([#36550](https://github.com/angular/angular/issues/36550)) ([89c5890](https://github.com/angular/angular/commit/89c5890)), closes [#35584](https://github.com/angular/angular/issues/35584)
### Features
* **router:** allow CanLoad guard to return UrlTree ([#36610](https://github.com/angular/angular/issues/36610)) ([00e6cb1](https://github.com/angular/angular/commit/00e6cb1)), closes [#26521](https://github.com/angular/angular/issues/26521) [#28306](https://github.com/angular/angular/issues/28306)
<a name="9.1.4"></a>
## [9.1.4](https://github.com/angular/angular/compare/9.1.3...9.1.4) (2020-04-29)
@ -219,42 +431,6 @@ subscribe to the observable and call markForCheck as needed.
<a name="10.0.0-next.3"></a>
# [10.0.0-next.3](https://github.com/angular/angular/compare/10.0.0-next.2...10.0.0-next.3) (2020-04-22)
### Bug Fixes
* **common:** format day-periods that cross midnight ([#36611](https://github.com/angular/angular/issues/36611)) ([c6e5fc4](https://github.com/angular/angular/commit/c6e5fc4)), closes [#36566](https://github.com/angular/angular/issues/36566)
* **compiler:** avoid generating i18n attributes in plain form ([#36422](https://github.com/angular/angular/issues/36422)) ([88b0985](https://github.com/angular/angular/commit/88b0985))
* **core:** do not use unbound attributes as inputs to structural directives ([#36441](https://github.com/angular/angular/issues/36441)) ([acf6075](https://github.com/angular/angular/commit/acf6075))
* **core:** handle empty translations correctly ([#36499](https://github.com/angular/angular/issues/36499)) ([b1f1d3f](https://github.com/angular/angular/commit/b1f1d3f)), closes [#36476](https://github.com/angular/angular/issues/36476)
* **core:** missing-injectable migration should not migrate `@NgModule` classes ([#36369](https://github.com/angular/angular/issues/36369)) ([28995db](https://github.com/angular/angular/commit/28995db)), closes [#35700](https://github.com/angular/angular/issues/35700)
* **core:** pipes injecting viewProviders when used on a component host node ([#36512](https://github.com/angular/angular/issues/36512)) ([81d23b3](https://github.com/angular/angular/commit/81d23b3)), closes [#36146](https://github.com/angular/angular/issues/36146)
* **core:** prevent unknown property check for AOT-compiled components ([#36072](https://github.com/angular/angular/issues/36072)) ([4a9f0be](https://github.com/angular/angular/commit/4a9f0be)), closes [#35945](https://github.com/angular/angular/issues/35945)
* **core:** properly identify modules affected by overrides in TestBed ([#36649](https://github.com/angular/angular/issues/36649)) ([942b986](https://github.com/angular/angular/commit/942b986)), closes [#36619](https://github.com/angular/angular/issues/36619)
* **language-service:** properly evaluate types in comparable expressions ([#36529](https://github.com/angular/angular/issues/36529)) ([8be0972](https://github.com/angular/angular/commit/8be0972))
* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([cabf997](https://github.com/angular/angular/commit/cabf997)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com//github.com/nodejs/node/issues/3596/issues/issuecomment-250890218)
* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([0c2ed4c](https://github.com/angular/angular/commit/0c2ed4c)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com//github.com/angular/angular-cli/issues/16860/issues/issuecomment-614694269)
### BREAKING CHANGES
* **common:** format day-periods that cross midnight
When formatting a time with the `b` or `B` format codes, the rendered
string was not correctly handling day periods that spanned midnight.
Instead the logic was falling back to the default case of `AM`.
Now the logic has been updated so that it matches times that are within
a day period that spans midnight, so it will now render the correct
output, such as `at night` in the case of English.
Applications that are using either `formatDate()` or `DatePipe` and any
of the `b` or `B` format codes will be affected by this change.
<a name="9.1.3"></a>
## [9.1.3](https://github.com/angular/angular/compare/9.1.2...9.1.3) (2020-04-22)
@ -269,34 +445,8 @@ subscribe to the observable and call markForCheck as needed.
* **core:** prevent unknown property check for AOT-compiled components ([#36072](https://github.com/angular/angular/issues/36072)) ([fe1d9ba](https://github.com/angular/angular/commit/fe1d9ba)), closes [#35945](https://github.com/angular/angular/issues/35945)
* **core:** properly identify modules affected by overrides in TestBed ([#36649](https://github.com/angular/angular/issues/36649)) ([9724169](https://github.com/angular/angular/commit/9724169)), closes [#36619](https://github.com/angular/angular/issues/36619)
* **language-service:** properly evaluate types in comparable expressions ([#36529](https://github.com/angular/angular/issues/36529)) ([5bab498](https://github.com/angular/angular/commit/5bab498))
* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([da159bd](https://github.com/angular/angular/commit/da159bd)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com//github.com/nodejs/node/issues/3596/issues/issuecomment-250890218)
* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([18be33a](https://github.com/angular/angular/commit/18be33a)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com//github.com/angular/angular-cli/issues/16860/issues/issuecomment-614694269)
<a name="10.0.0-next.2"></a>
# [10.0.0-next.2](https://github.com/angular/angular/compare/10.0.0-next.1...10.0.0-next.2) (2020-04-15)
### Bug Fixes
* **common:** `locales/global/*.js` are not ES5 compliant ([#36342](https://github.com/angular/angular/issues/36342)) ([078b0be](https://github.com/angular/angular/commit/078b0be)), closes [angular/angular-cli#16394](https://github.com/angular/angular-cli/issues/16394)
* **compiler:** handle type references to namespaced symbols correctly ([#36106](https://github.com/angular/angular/issues/36106)) ([4aa4e6f](https://github.com/angular/angular/commit/4aa4e6f)), closes [#36006](https://github.com/angular/angular/issues/36006)
* **core:** undecorated-classes-with-decorated-fields migration should avoid error if base class has no value declaration ([#36543](https://github.com/angular/angular/issues/36543)) ([ca67748](https://github.com/angular/angular/commit/ca67748)), closes [#36522](https://github.com/angular/angular/issues/36522)
* **ngcc:** correctly detect external files from nested `node_modules/` ([#36559](https://github.com/angular/angular/issues/36559)) ([6ab43d7](https://github.com/angular/angular/commit/6ab43d7)), closes [#36526](https://github.com/angular/angular/issues/36526)
* **ngcc:** display output from the unlocker process on Windows ([#36569](https://github.com/angular/angular/issues/36569)) ([e041ac6](https://github.com/angular/angular/commit/e041ac6))
* **ngcc:** do not spawn unlocker processes on cluster workers ([#36569](https://github.com/angular/angular/issues/36569)) ([66effde](https://github.com/angular/angular/commit/66effde)), closes [#35861](https://github.com/angular/angular/issues/35861)
* **ngcc:** do not warn if `paths` mapping does not exist ([#36525](https://github.com/angular/angular/issues/36525)) ([717df13](https://github.com/angular/angular/commit/717df13)), closes [#36518](https://github.com/angular/angular/issues/36518)
* **ngcc:** force ngcc to exit on error ([#36622](https://github.com/angular/angular/issues/36622)) ([663b768](https://github.com/angular/angular/commit/663b768)), closes [#36616](https://github.com/angular/angular/issues/36616)
* **router:** pass correct component to canDeactivate checks when using two or more sibling router-outlets ([#36302](https://github.com/angular/angular/issues/36302)) ([80e6c07](https://github.com/angular/angular/commit/80e6c07)), closes [#34614](https://github.com/angular/angular/issues/34614)
* **upgrade:** update $locationShim to handle Location changes before initialization ([#36498](https://github.com/angular/angular/issues/36498)) ([0cc53fb](https://github.com/angular/angular/commit/0cc53fb)), closes [#36492](https://github.com/angular/angular/issues/36492)
### Performance Improvements
* **ngcc:** only load if it is needed ([#36486](https://github.com/angular/angular/issues/36486)) ([3bedfda](https://github.com/angular/angular/commit/3bedfda))
* **ngcc:** read dependencies from entry-point manifest ([#36486](https://github.com/angular/angular/issues/36486)) ([a185efb](https://github.com/angular/angular/commit/a185efb)), closes [#issuecomment-608401834](https://github.com/angular/angular/issues/issuecomment-608401834)
* **ngcc:** reduce the size of the entry-point manifest file ([#36486](https://github.com/angular/angular/issues/36486)) ([ec0ce60](https://github.com/angular/angular/commit/ec0ce60))
* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([da159bd](https://github.com/angular/angular/commit/da159bd)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com/nodejs/node/issues/3596/issues/issuecomment-250890218)
* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([18be33a](https://github.com/angular/angular/commit/18be33a)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com/angular/angular-cli/issues/16860/issues/issuecomment-614694269)
@ -321,73 +471,6 @@ subscribe to the observable and call markForCheck as needed.
* **ngcc:** reduce the size of the entry-point manifest file ([#36486](https://github.com/angular/angular/issues/36486)) ([603b094](https://github.com/angular/angular/commit/603b094))
<a name="10.0.0-next.1"></a>
# [10.0.0-next.1](https://github.com/angular/angular/compare/10.0.0-next.0...10.0.0-next.1) (2020-04-08)
This release contains various API docs improvements.
<a name="10.0.0-next.0"></a>
# [10.0.0-next.0](https://github.com/angular/angular/compare/9.1.0-rc.0...10.0.0-next.0) (2020-04-08)
### Bug Fixes
* **common:** let `KeyValuePipe` accept type unions with `null` ([#36093](https://github.com/angular/angular/issues/36093)) ([d783519](https://github.com/angular/angular/commit/d783519)), closes [#35743](https://github.com/angular/angular/issues/35743)
* **compiler:** avoid undefined expressions in holey array ([#36343](https://github.com/angular/angular/issues/36343)) ([5516802](https://github.com/angular/angular/commit/5516802))
* **compiler:** record correct end of expression ([#34690](https://github.com/angular/angular/issues/34690)) ([df890d7](https://github.com/angular/angular/commit/df890d7)), closes [#33477](https://github.com/angular/angular/issues/33477)
* **compiler:** resolve enum values in binary operations ([#36461](https://github.com/angular/angular/issues/36461)) ([64022f5](https://github.com/angular/angular/commit/64022f5)), closes [#35584](https://github.com/angular/angular/issues/35584)
* **compiler-cli:** pass real source spans where they are empty ([#31805](https://github.com/angular/angular/issues/31805)) ([e893c5a](https://github.com/angular/angular/commit/e893c5a))
* **core:** avoid migration error when non-existent symbol is imported ([#36367](https://github.com/angular/angular/issues/36367)) ([d43c306](https://github.com/angular/angular/commit/d43c306)), closes [#36346](https://github.com/angular/angular/issues/36346)
* **core:** ngOnDestroy on multi providers called with incorrect context ([#35840](https://github.com/angular/angular/issues/35840)) ([95fc3d4](https://github.com/angular/angular/commit/95fc3d4)), closes [#35231](https://github.com/angular/angular/issues/35231)
* **core:** run `APP_INITIALIZER`s before accessing `LOCALE_ID` token in Ivy TestBed ([#36237](https://github.com/angular/angular/issues/36237)) ([1649743](https://github.com/angular/angular/commit/1649743)), closes [#36230](https://github.com/angular/angular/issues/36230)
* **core:** undecorated-classes-with-decorated-fields migration does not decorate derived classes ([#35339](https://github.com/angular/angular/issues/35339)) ([32eafef](https://github.com/angular/angular/commit/32eafef)), closes [#34376](https://github.com/angular/angular/issues/34376)
* **core:** workaround Terser inlining bug ([#36200](https://github.com/angular/angular/issues/36200)) ([0ce8ad3](https://github.com/angular/angular/commit/0ce8ad3))
* **elements:** correctly handle setting inputs to `undefined` ([#36140](https://github.com/angular/angular/issues/36140)) ([9ba46d9](https://github.com/angular/angular/commit/9ba46d9))
* **elements:** correctly set `SimpleChange#firstChange` for pre-existing inputs ([#36140](https://github.com/angular/angular/issues/36140)) ([b14ac96](https://github.com/angular/angular/commit/b14ac96)), closes [#36130](https://github.com/angular/angular/issues/36130)
* **language-service:** infer type of elements of array-like objects ([#36312](https://github.com/angular/angular/issues/36312)) ([fe2b692](https://github.com/angular/angular/commit/fe2b692)), closes [#36191](https://github.com/angular/angular/issues/36191)
* **language-service:** use the `HtmlAst` to get the span of HTML tag ([#36371](https://github.com/angular/angular/issues/36371)) ([81195a2](https://github.com/angular/angular/commit/81195a2))
* **localize:** allow ICU expansion case to start with any character except `}` ([#36123](https://github.com/angular/angular/issues/36123)) ([fced8ee](https://github.com/angular/angular/commit/fced8ee)), closes [#31586](https://github.com/angular/angular/issues/31586)
* **ngcc:** add process title ([#36448](https://github.com/angular/angular/issues/36448)) ([76a8cd5](https://github.com/angular/angular/commit/76a8cd5)), closes [/github.com/angular/angular/issues/36414#issuecomment-609644282](https://github.com//github.com/angular/angular/issues/36414/issues/issuecomment-609644282)
* **ngcc:** allow ngcc configuration to match pre-release versions of packages ([#36370](https://github.com/angular/angular/issues/36370)) ([326240e](https://github.com/angular/angular/commit/326240e))
* **ngcc:** correctly detect imported TypeScript helpers ([#36284](https://github.com/angular/angular/issues/36284)) ([ca25c95](https://github.com/angular/angular/commit/ca25c95)), closes [#36089](https://github.com/angular/angular/issues/36089)
* **ngcc:** correctly identify relative Windows-style import paths ([#36372](https://github.com/angular/angular/issues/36372)) ([aecf9de](https://github.com/angular/angular/commit/aecf9de))
* **ngcc:** correctly identify the package path of secondary entry-points ([#36249](https://github.com/angular/angular/issues/36249)) ([995cd15](https://github.com/angular/angular/commit/995cd15)), closes [#35747](https://github.com/angular/angular/issues/35747)
* **ngcc:** detect non-emitted, non-imported TypeScript helpers ([#36418](https://github.com/angular/angular/issues/36418)) ([5fa7b8b](https://github.com/angular/angular/commit/5fa7b8b))
* **ngcc:** do not spawn more processes than intended in parallel mode ([#36280](https://github.com/angular/angular/issues/36280)) ([5cee709](https://github.com/angular/angular/commit/5cee709)), closes [#35719](https://github.com/angular/angular/issues/35719) [#36278](https://github.com/angular/angular/issues/36278) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts#L429](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts/issues/L429) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L108](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L108) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L110](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L110) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L199](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L199)
* **ngcc:** do not write entry-point manifest outside node_modules ([#36299](https://github.com/angular/angular/issues/36299)) ([c6dd900](https://github.com/angular/angular/commit/c6dd900)), closes [#36296](https://github.com/angular/angular/issues/36296)
* **ngcc:** don't crash on cyclic source-map references ([#36452](https://github.com/angular/angular/issues/36452)) ([ee70a18](https://github.com/angular/angular/commit/ee70a18)), closes [#35727](https://github.com/angular/angular/issues/35727) [#35757](https://github.com/angular/angular/issues/35757)
* **ngcc:** handle bad path mappings when finding entry-points ([#36331](https://github.com/angular/angular/issues/36331)) ([cc4b813](https://github.com/angular/angular/commit/cc4b813)), closes [#36313](https://github.com/angular/angular/issues/36313) [#36283](https://github.com/angular/angular/issues/36283)
* **ngcc:** handle entry-points within container folders ([#36305](https://github.com/angular/angular/issues/36305)) ([38ad1d9](https://github.com/angular/angular/commit/38ad1d9)), closes [#35756](https://github.com/angular/angular/issues/35756) [#36216](https://github.com/angular/angular/issues/36216)
* **ngcc:** sniff `main` property for ESM5 format ([#36396](https://github.com/angular/angular/issues/36396)) ([2463548](https://github.com/angular/angular/commit/2463548)), closes [#35788](https://github.com/angular/angular/issues/35788)
* **ngcc:** support ignoring deep-imports via package config ([#36423](https://github.com/angular/angular/issues/36423)) ([f9fb833](https://github.com/angular/angular/commit/f9fb833)), closes [#35750](https://github.com/angular/angular/issues/35750)
* **ngcc:** support simple `browser` property in entry-points ([#36396](https://github.com/angular/angular/issues/36396)) ([6b3aa60](https://github.com/angular/angular/commit/6b3aa60)), closes [#36062](https://github.com/angular/angular/issues/36062)
* **ngcc:** use path-mappings from tsconfig in dependency resolution ([#36180](https://github.com/angular/angular/issues/36180)) ([380de1e](https://github.com/angular/angular/commit/380de1e)), closes [#36119](https://github.com/angular/angular/issues/36119)
* **ngcc:** use preserve whitespaces from tsconfig if provided ([#36189](https://github.com/angular/angular/issues/36189)) ([b8e9a30](https://github.com/angular/angular/commit/b8e9a30)), closes [#35871](https://github.com/angular/angular/issues/35871)
* **platform-server:** update `xhr2` dependency ([#36366](https://github.com/angular/angular/issues/36366)) ([b59bc0e](https://github.com/angular/angular/commit/b59bc0e)), closes [#36358](https://github.com/angular/angular/issues/36358)
* **router:** allow UrlMatcher to return null ([#36402](https://github.com/angular/angular/issues/36402)) ([568e9df](https://github.com/angular/angular/commit/568e9df)), closes [#29824](https://github.com/angular/angular/issues/29824)
* **router:** state data missing in routerLink ([#36462](https://github.com/angular/angular/issues/36462)) ([e0415db](https://github.com/angular/angular/commit/e0415db)), closes [#33173](https://github.com/angular/angular/issues/33173)
* **service-worker:** by default register the SW after 30s even the app never stabilizes ([#35870](https://github.com/angular/angular/issues/35870)) ([29e8a64](https://github.com/angular/angular/commit/29e8a64)), closes [#34464](https://github.com/angular/angular/issues/34464)
* **service-worker:** prevent SW registration strategies from affecting app stabilization ([#35870](https://github.com/angular/angular/issues/35870)) ([2d7c95f](https://github.com/angular/angular/commit/2d7c95f))
### Features
* **compiler:** add dependency info and ng-content selectors to metadata ([#35695](https://github.com/angular/angular/issues/35695)) ([32ce8b1](https://github.com/angular/angular/commit/32ce8b1))
* **compiler:** Propagate value span of ExpressionBinding to ParsedProperty ([#36133](https://github.com/angular/angular/issues/36133)) ([d714b95](https://github.com/angular/angular/commit/d714b95))
* **core:** undecorated-classes migration should handle derived abstract classes ([#35339](https://github.com/angular/angular/issues/35339)) ([c24ad56](https://github.com/angular/angular/commit/c24ad56))
* **service-worker:** support timeout in `registerWhenStable` SW registration strategy ([#35870](https://github.com/angular/angular/issues/35870)) ([00efacf](https://github.com/angular/angular/commit/00efacf)), closes [#34464](https://github.com/angular/angular/issues/34464)
### BREAKING CHANGES
* **router:** UrlMatcher's type now reflects that it could always return
null.
If you implemented your own Router or Recognizer class, please update it to
handle matcher returning null.
<a name="9.1.1"></a>
## [9.1.1](https://github.com/angular/angular/compare/9.1.0...9.1.1) (2020-04-07)
@ -404,13 +487,13 @@ This release contains various API docs improvements.
* **core:** undecorated-classes migration should handle derived abstract classes ([#35339](https://github.com/angular/angular/issues/35339)) ([a631b99](https://github.com/angular/angular/commit/a631b99))
* **language-service:** infer type of elements of array-like objects ([#36312](https://github.com/angular/angular/issues/36312)) ([ff523c9](https://github.com/angular/angular/commit/ff523c9)), closes [#36191](https://github.com/angular/angular/issues/36191)
* **language-service:** use the `HtmlAst` to get the span of HTML tag ([#36371](https://github.com/angular/angular/issues/36371)) ([ffa4e11](https://github.com/angular/angular/commit/ffa4e11))
* **ngcc:** add process title ([#36448](https://github.com/angular/angular/issues/36448)) ([136596d](https://github.com/angular/angular/commit/136596d)), closes [/github.com/angular/angular/issues/36414#issuecomment-609644282](https://github.com//github.com/angular/angular/issues/36414/issues/issuecomment-609644282)
* **ngcc:** add process title ([#36448](https://github.com/angular/angular/issues/36448)) ([136596d](https://github.com/angular/angular/commit/136596d)), closes [/github.com/angular/angular/issues/36414#issuecomment-609644282](https://github.com/angular/angular/issues/36414/issues/issuecomment-609644282)
* **ngcc:** allow ngcc configuration to match pre-release versions of packages ([#36370](https://github.com/angular/angular/issues/36370)) ([cb0a2a0](https://github.com/angular/angular/commit/cb0a2a0))
* **ngcc:** correctly detect imported TypeScript helpers ([#36284](https://github.com/angular/angular/issues/36284)) ([879457c](https://github.com/angular/angular/commit/879457c)), closes [#36089](https://github.com/angular/angular/issues/36089)
* **ngcc:** correctly identify relative Windows-style import paths ([#36372](https://github.com/angular/angular/issues/36372)) ([0daa488](https://github.com/angular/angular/commit/0daa488))
* **ngcc:** correctly identify the package path of secondary entry-points ([#36249](https://github.com/angular/angular/issues/36249)) ([e53b686](https://github.com/angular/angular/commit/e53b686)), closes [#35747](https://github.com/angular/angular/issues/35747)
* **ngcc:** detect non-emitted, non-imported TypeScript helpers ([#36418](https://github.com/angular/angular/issues/36418)) ([93b32d3](https://github.com/angular/angular/commit/93b32d3))
* **ngcc:** do not spawn more processes than intended in parallel mode ([#36280](https://github.com/angular/angular/issues/36280)) ([6ea232e](https://github.com/angular/angular/commit/6ea232e)), closes [#35719](https://github.com/angular/angular/issues/35719) [#36278](https://github.com/angular/angular/issues/36278) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts#L429](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts/issues/L429) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L108](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L108) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L110](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L110) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L199](https://github.com//github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L199)
* **ngcc:** do not spawn more processes than intended in parallel mode ([#36280](https://github.com/angular/angular/issues/36280)) ([6ea232e](https://github.com/angular/angular/commit/6ea232e)), closes [#35719](https://github.com/angular/angular/issues/35719) [#36278](https://github.com/angular/angular/issues/36278) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts#L429](https://github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/main.ts/issues/L429) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L108](https://github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L108) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L110](https://github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L110) [/github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts#L199](https://github.com/angular/angular/blob/b8e9a30d3b6/packages/compiler-cli/ngcc/src/execution/cluster/master.ts/issues/L199)
* **ngcc:** do not write entry-point manifest outside node_modules ([#36299](https://github.com/angular/angular/issues/36299)) ([bb8744d](https://github.com/angular/angular/commit/bb8744d)), closes [#36296](https://github.com/angular/angular/issues/36296)
* **ngcc:** don't crash on cyclic source-map references ([#36452](https://github.com/angular/angular/issues/36452)) ([56af303](https://github.com/angular/angular/commit/56af303)), closes [#35727](https://github.com/angular/angular/issues/35727) [#35757](https://github.com/angular/angular/issues/35757)
* **ngcc:** handle bad path mappings when finding entry-points ([#36331](https://github.com/angular/angular/issues/36331)) ([7bb3588](https://github.com/angular/angular/commit/7bb3588)), closes [#36313](https://github.com/angular/angular/issues/36313) [#36283](https://github.com/angular/angular/issues/36283)
@ -580,7 +663,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ngcc:** use path-mappings from tsconfig in dependency resolution ([#36180](https://github.com/angular/angular/issues/36180)) ([6defe96](https://github.com/angular/angular/commit/6defe96)), closes [#36119](https://github.com/angular/angular/issues/36119)
* **ngcc:** use preserve whitespaces from tsconfig if provided ([#36189](https://github.com/angular/angular/issues/36189)) ([aef4323](https://github.com/angular/angular/commit/aef4323)), closes [#35871](https://github.com/angular/angular/issues/35871)
* **platform-browser:** add missing peerDependency on `[@angular](https://github.com/angular)/animations` ([#35949](https://github.com/angular/angular/issues/35949)) ([64d6f13](https://github.com/angular/angular/commit/64d6f13)), closes [#35888](https://github.com/angular/angular/issues/35888)
* **router:** removed unused ApplicationRef dependency ([#35642](https://github.com/angular/angular/issues/35642)) ([c839c05](https://github.com/angular/angular/commit/c839c05)), closes [/github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97#diff-c0baae5e1df628e1a217e8dc38557](https://github.com//github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97/issues/diff-c0baae5e1df628e1a217e8dc38557)
* **router:** removed unused ApplicationRef dependency ([#35642](https://github.com/angular/angular/issues/35642)) ([c839c05](https://github.com/angular/angular/commit/c839c05)), closes [/github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97#diff-c0baae5e1df628e1a217e8dc38557](https://github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97/issues/diff-c0baae5e1df628e1a217e8dc38557)
* **router:** state data missing in routerLink ([#33203](https://github.com/angular/angular/issues/33203)) ([de67978](https://github.com/angular/angular/commit/de67978))
* **service-worker:** treat 503 as offline ([#35595](https://github.com/angular/angular/issues/35595)) ([96cdf03](https://github.com/angular/angular/commit/96cdf03)), closes [#35571](https://github.com/angular/angular/issues/35571)
* fix flaky test cases of passive events ([#35679](https://github.com/angular/angular/issues/35679)) ([8ef29b6](https://github.com/angular/angular/commit/8ef29b6))
@ -715,7 +798,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ngcc:** correctly detect emitted TS helpers in ES5 ([#35191](https://github.com/angular/angular/issues/35191)) ([af4fe3a](https://github.com/angular/angular/commit/af4fe3a))
* **ngcc:** correctly detect outer aliased class identifiers in ES5 ([#35527](https://github.com/angular/angular/issues/35527)) ([39bd9a7](https://github.com/angular/angular/commit/39bd9a7)), closes [#35399](https://github.com/angular/angular/issues/35399)
* **ngcc:** handle imports in dts files when processing CommonJS ([#35191](https://github.com/angular/angular/issues/35191)) ([12e3db8](https://github.com/angular/angular/commit/12e3db8)), closes [#34356](https://github.com/angular/angular/issues/34356)
* **router:** removed unused ApplicationRef dependency ([#35642](https://github.com/angular/angular/issues/35642)) ([2f140f5](https://github.com/angular/angular/commit/2f140f5)), closes [/github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97#diff-c0baae5e1df628e1a217e8dc38557](https://github.com//github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97/issues/diff-c0baae5e1df628e1a217e8dc38557)
* **router:** removed unused ApplicationRef dependency ([#35642](https://github.com/angular/angular/issues/35642)) ([2f140f5](https://github.com/angular/angular/commit/2f140f5)), closes [/github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97#diff-c0baae5e1df628e1a217e8dc38557](https://github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97/issues/diff-c0baae5e1df628e1a217e8dc38557)
* **service-worker:** treat 503 as offline ([#35595](https://github.com/angular/angular/issues/35595)) ([64a415b](https://github.com/angular/angular/commit/64a415b)), closes [#35571](https://github.com/angular/angular/issues/35571)
@ -792,7 +875,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** support emitting a reference to interface declarations ([#34849](https://github.com/angular/angular/issues/34849)) ([ad9ec52](https://github.com/angular/angular/commit/ad9ec52)), closes [#34021](https://github.com/angular/angular/issues/34021) [#34837](https://github.com/angular/angular/issues/34837)
* **ivy:** template type-check errors from TS should not use NG error codes ([#35146](https://github.com/angular/angular/issues/35146)) ([cf3071f](https://github.com/angular/angular/commit/cf3071f))
* **ivy:** host-styling throws assert exception inside *ngFor ([#35133](https://github.com/angular/angular/issues/35133)) ([31e9873](https://github.com/angular/angular/commit/31e9873)), closes [#35118](https://github.com/angular/angular/issues/35118)
* **ngcc:** correctly invalidate cache when moving/removing files/directories ([#35106](https://github.com/angular/angular/issues/35106)) ([22357d4](https://github.com/angular/angular/commit/22357d4)), closes [/github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts#L54](https://github.com//github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts/issues/L54) [/github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts#L61](https://github.com//github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts/issues/L61) [#35095](https://github.com/angular/angular/issues/35095)
* **ngcc:** correctly invalidate cache when moving/removing files/directories ([#35106](https://github.com/angular/angular/issues/35106)) ([22357d4](https://github.com/angular/angular/commit/22357d4)), closes [/github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts#L54](https://github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts/issues/L54) [/github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts#L61](https://github.com/angular/angular/blob/4d36b2f6e/packages/compiler-cli/ngcc/src/writing/cleaning/cleaning_strategies.ts/issues/L61) [#35095](https://github.com/angular/angular/issues/35095)
* **ngcc:** do not lock if the target is not compiled by Angular ([#35057](https://github.com/angular/angular/issues/35057)) ([c30c518](https://github.com/angular/angular/commit/c30c518)), closes [#35000](https://github.com/angular/angular/issues/35000)
* **compiler-cli:** add `sass` as a valid css preprocessor extension ([#35052](https://github.com/angular/angular/issues/35052)) ([7f96fbb](https://github.com/angular/angular/commit/7f96fbb))
* should also allow subclass Promise without Symbol.species ([#34533](https://github.com/angular/angular/issues/34533)) ([0de632a](https://github.com/angular/angular/commit/0de632a))
@ -802,10 +885,10 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** ensure `DebugNode`/`DebugElement` are tree-shakeable in Ivy ([#35003](https://github.com/angular/angular/issues/35003)) ([23c0147](https://github.com/angular/angular/commit/23c0147)), closes [#30130](https://github.com/angular/angular/issues/30130)
* **ivy:** ensure multi providers in ModuleWithProviders are not duplicated ([#34914](https://github.com/angular/angular/issues/34914)) ([4975f89](https://github.com/angular/angular/commit/4975f89))
* **ivy:** update ViewContainerRef to get the correct parentInjector ([#35013](https://github.com/angular/angular/issues/35013)) ([eaa4a5a](https://github.com/angular/angular/commit/eaa4a5a))
* **language-service:** prune duplicate returned definitions ([#34995](https://github.com/angular/angular/issues/34995)) ([71f5417](https://github.com/angular/angular/commit/71f5417)), closes [/github.com/angular/angular/pull/34847#discussion_r371006680](https://github.com//github.com/angular/angular/pull/34847/issues/discussion_r371006680)
* **language-service:** prune duplicate returned definitions ([#34995](https://github.com/angular/angular/issues/34995)) ([71f5417](https://github.com/angular/angular/commit/71f5417)), closes [/github.com/angular/angular/pull/34847#discussion_r371006680](https://github.com/angular/angular/pull/34847/issues/discussion_r371006680)
* **language-service:** remove repeated symbol definitions for structural directive ([#34847](https://github.com/angular/angular/issues/34847)) ([35916d3](https://github.com/angular/angular/commit/35916d3))
* **language-service:** warn, not error, on missing context members ([#35036](https://github.com/angular/angular/issues/35036)) ([0e76821](https://github.com/angular/angular/commit/0e76821))
* **localize:** re-enable filename in code-frame error messages ([#34994](https://github.com/angular/angular/issues/34994)) ([c7c7b20](https://github.com/angular/angular/commit/c7c7b20)), closes [/github.com/angular/angular/pull/34974/files#r371034476](https://github.com//github.com/angular/angular/pull/34974/files/issues/r371034476)
* **localize:** re-enable filename in code-frame error messages ([#34994](https://github.com/angular/angular/issues/34994)) ([c7c7b20](https://github.com/angular/angular/commit/c7c7b20)), closes [/github.com/angular/angular/pull/34974/files#r371034476](https://github.com/angular/angular/pull/34974/files/issues/r371034476)
* **ngcc:** improve lockfile error message ([#35001](https://github.com/angular/angular/issues/35001)) ([1d31c81](https://github.com/angular/angular/commit/1d31c81)), closes [#35000](https://github.com/angular/angular/issues/35000)
* **ivy:** correctly emit component when it's removed from its module ([#34912](https://github.com/angular/angular/issues/34912)) ([adc663e](https://github.com/angular/angular/commit/adc663e)), closes [#34813](https://github.com/angular/angular/issues/34813)
* **ivy:** DebugNode.classes not working on SVG elements ([#34872](https://github.com/angular/angular/issues/34872)) ([7e8aac1](https://github.com/angular/angular/commit/7e8aac1)), closes [#34868](https://github.com/angular/angular/issues/34868)
@ -828,7 +911,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **compiler-cli:** require node 10 as runtime engine ([#34722](https://github.com/angular/angular/issues/34722)) ([7b77b3d](https://github.com/angular/angular/commit/7b77b3d))
* **language-service:** specific suggestions for template context diags ([#34751](https://github.com/angular/angular/issues/34751)) ([cc7fca4](https://github.com/angular/angular/commit/cc7fca4))
* **language-service:** support multiple symbol definitions ([#34782](https://github.com/angular/angular/issues/34782)) ([2f2396c](https://github.com/angular/angular/commit/2f2396c))
* **ngcc:** lock ngcc when processing ([#34722](https://github.com/angular/angular/issues/34722)) ([6dd51f1](https://github.com/angular/angular/commit/6dd51f1)), closes [/github.com/angular/angular/issues/32431#issuecomment-571825781](https://github.com//github.com/angular/angular/issues/32431/issues/issuecomment-571825781)
* **ngcc:** lock ngcc when processing ([#34722](https://github.com/angular/angular/issues/34722)) ([6dd51f1](https://github.com/angular/angular/commit/6dd51f1)), closes [/github.com/angular/angular/issues/32431#issuecomment-571825781](https://github.com/angular/angular/issues/32431/issues/issuecomment-571825781)
* work around 'noImplicityAny' incompatibility due to ts3.7 update ([#34798](https://github.com/angular/angular/issues/34798)) ([251d548](https://github.com/angular/angular/commit/251d548))
* **animations:** not waiting for child animations to finish when removing parent in Ivy ([#34702](https://github.com/angular/angular/issues/34702)) ([92c17fe](https://github.com/angular/angular/commit/92c17fe)), closes [#33597](https://github.com/angular/angular/issues/33597)
* **common:** ensure diffing in ngStyle/ngClass correctly emits value changes ([#34307](https://github.com/angular/angular/issues/34307)) ([93a035f](https://github.com/angular/angular/commit/93a035f)), closes [#34336](https://github.com/angular/angular/issues/34336) [#34444](https://github.com/angular/angular/issues/34444)
@ -843,19 +926,19 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** ngClass not applying classes with trailing/leading spaces ([#34539](https://github.com/angular/angular/issues/34539)) ([98ed7c6](https://github.com/angular/angular/commit/98ed7c6)), closes [#34476](https://github.com/angular/angular/issues/34476)
* **ivy:** Prevent errors when querying DebugElement roots that were outside angular context ([#34687](https://github.com/angular/angular/issues/34687)) ([f1cdb8f](https://github.com/angular/angular/commit/f1cdb8f))
* **ivy:** properly bootstrap components with attribute selectors ([#34450](https://github.com/angular/angular/issues/34450)) ([2c0b9ea](https://github.com/angular/angular/commit/2c0b9ea)), closes [#34349](https://github.com/angular/angular/issues/34349)
* **ivy:** warn instead of throwing for unknown elements ([#34524](https://github.com/angular/angular/issues/34524)) ([d9ae70e](https://github.com/angular/angular/commit/d9ae70e)), closes [/github.com/angular/angular/pull/33419#discussion_r339296216](https://github.com//github.com/angular/angular/pull/33419/issues/discussion_r339296216)
* **ivy:** warn instead of throwing for unknown elements ([#34524](https://github.com/angular/angular/issues/34524)) ([d9ae70e](https://github.com/angular/angular/commit/d9ae70e)), closes [/github.com/angular/angular/pull/33419#discussion_r339296216](https://github.com/angular/angular/pull/33419/issues/discussion_r339296216)
* **language-service:** apply suggested change. ([#34564](https://github.com/angular/angular/issues/34564)) ([b3af220](https://github.com/angular/angular/commit/b3af220))
* **language-service:** break the hover/definitions for two-way binding ([#34564](https://github.com/angular/angular/issues/34564)) ([eb5c20c](https://github.com/angular/angular/commit/eb5c20c))
* **language-service:** CRLF offset in inline template ([#34737](https://github.com/angular/angular/issues/34737)) ([80315b5](https://github.com/angular/angular/commit/80315b5))
* **language-service:** do not use an i18n parser for templates ([#34531](https://github.com/angular/angular/issues/34531)) ([cb7dcb3](https://github.com/angular/angular/commit/cb7dcb3))
* **language-service:** only visit directives ([#34564](https://github.com/angular/angular/issues/34564)) ([76d7aa7](https://github.com/angular/angular/commit/76d7aa7))
* **ngcc:** avoid error due to circular dependency in `EsmDependencyHost` ([#34512](https://github.com/angular/angular/issues/34512)) ([7c3172a](https://github.com/angular/angular/commit/7c3172a)), closes [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/utils.ts#L10](https://github.com//github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/utils.ts/issues/L10) [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/esm_dependency_host.ts#L10](https://github.com//github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/esm_dependency_host.ts/issues/L10) [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/dependency_host.ts#L9](https://github.com//github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/dependency_host.ts/issues/L9)
* **ngcc:** avoid error due to circular dependency in `EsmDependencyHost` ([#34512](https://github.com/angular/angular/issues/34512)) ([7c3172a](https://github.com/angular/angular/commit/7c3172a)), closes [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/utils.ts#L10](https://github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/utils.ts/issues/L10) [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/esm_dependency_host.ts#L10](https://github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/esm_dependency_host.ts/issues/L10) [/github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/dependency_host.ts#L9](https://github.com/angular/angular/blob/18d89c9c8/packages/compiler-cli/ngcc/src/dependencies/dependency_host.ts/issues/L9)
* **ngcc:** correctly detect dependencies in CommonJS ([#34528](https://github.com/angular/angular/issues/34528)) ([ff02ddf](https://github.com/angular/angular/commit/ff02ddf))
* **ngcc:** correctly handle inline exports in UMD ([#34512](https://github.com/angular/angular/issues/34512)) ([7bbfccf](https://github.com/angular/angular/commit/7bbfccf))
* **ngcc:** don't crash if symbol has no declarations ([#34658](https://github.com/angular/angular/issues/34658)) ([4def99e](https://github.com/angular/angular/commit/4def99e)), closes [/github.com/angular/angular/blob/8d0de89e/packages/compiler-cli/src/ngtsc/reflection/src/typescript.ts#L309](https://github.com//github.com/angular/angular/blob/8d0de89e/packages/compiler-cli/src/ngtsc/reflection/src/typescript.ts/issues/L309) [#34560](https://github.com/angular/angular/issues/34560)
* **ngcc:** don't crash if symbol has no declarations ([#34658](https://github.com/angular/angular/issues/34658)) ([4def99e](https://github.com/angular/angular/commit/4def99e)), closes [/github.com/angular/angular/blob/8d0de89e/packages/compiler-cli/src/ngtsc/reflection/src/typescript.ts#L309](https://github.com/angular/angular/blob/8d0de89e/packages/compiler-cli/src/ngtsc/reflection/src/typescript.ts/issues/L309) [#34560](https://github.com/angular/angular/issues/34560)
* **ngcc:** handle UMD factories that do not use all params ([#34660](https://github.com/angular/angular/issues/34660)) ([83868be](https://github.com/angular/angular/commit/83868be)), closes [#34653](https://github.com/angular/angular/issues/34653)
* **ngcc:** insert definitions after statement ([#34677](https://github.com/angular/angular/issues/34677)) ([f295240](https://github.com/angular/angular/commit/f295240)), closes [#34648](https://github.com/angular/angular/issues/34648)
* **ngcc:** recognize re-exports with `require()` calls in UMD ([#34512](https://github.com/angular/angular/issues/34512)) ([79be354](https://github.com/angular/angular/commit/79be354)), closes [/github.com/angular/angular/pull/34254/files#r359515373](https://github.com//github.com/angular/angular/pull/34254/files/issues/r359515373)
* **ngcc:** recognize re-exports with `require()` calls in UMD ([#34512](https://github.com/angular/angular/issues/34512)) ([79be354](https://github.com/angular/angular/commit/79be354)), closes [/github.com/angular/angular/pull/34254/files#r359515373](https://github.com/angular/angular/pull/34254/files/issues/r359515373)
* **ngcc:** recognize re-exports with imported TS helpers in CommonJS and UMD ([#34527](https://github.com/angular/angular/issues/34527)) ([a88dc17](https://github.com/angular/angular/commit/a88dc17))
* **common:** remove trailing whitespace for CurrencyPipe ([#34642](https://github.com/angular/angular/issues/34642)) ([c42b90b](https://github.com/angular/angular/commit/c42b90b)), closes [#34641](https://github.com/angular/angular/issues/34641)
* **ivy:** append `advance` instructions before `i18nExp` ([#34436](https://github.com/angular/angular/issues/34436)) ([ba4c31c](https://github.com/angular/angular/commit/ba4c31c))
@ -902,7 +985,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** add flag to skip non-exported classes ([#33921](https://github.com/angular/angular/issues/33921)) ([#34340](https://github.com/angular/angular/issues/34340)) ([7ed984b](https://github.com/angular/angular/commit/7ed984b)), closes [#33724](https://github.com/angular/angular/issues/33724)
* **ivy:** align TestBed.overrideProvider with what happens with providers in TestBed providers array ([#33769](https://github.com/angular/angular/issues/33769)) ([10a33ef](https://github.com/angular/angular/commit/10a33ef))
* **ivy:** do not invoke change detection for destroyed views ([#34241](https://github.com/angular/angular/issues/34241)) ([24bbcaf](https://github.com/angular/angular/commit/24bbcaf))
* **ivy:** handle SafeStyles in [style.prop] correctly ([#34286](https://github.com/angular/angular/issues/34286)) ([b0d5784](https://github.com/angular/angular/commit/b0d5784)), closes [/github.com/angular/angular/blob/master/packages/core/src/render3/styling/bindings.ts#L620](https://github.com//github.com/angular/angular/blob/master/packages/core/src/render3/styling/bindings.ts/issues/L620)
* **ivy:** handle SafeStyles in [style.prop] correctly ([#34286](https://github.com/angular/angular/issues/34286)) ([b0d5784](https://github.com/angular/angular/commit/b0d5784)), closes [/github.com/angular/angular/blob/master/packages/core/src/render3/styling/bindings.ts#L620](https://github.com/angular/angular/blob/master/packages/core/src/render3/styling/bindings.ts/issues/L620)
* **ivy:** inherit static coercion members from base classes ([#34296](https://github.com/angular/angular/issues/34296)) ([edfaab6](https://github.com/angular/angular/commit/edfaab6)), closes [#33830](https://github.com/angular/angular/issues/33830)
* **ivy:** properly parenthesize ternary expressions when emitted ([#34221](https://github.com/angular/angular/issues/34221)) ([af36bc6](https://github.com/angular/angular/commit/af36bc6)), closes [#34087](https://github.com/angular/angular/issues/34087)
* **ivy:** throw a better error when DI can't inject a ctor param ([#33739](https://github.com/angular/angular/issues/33739)) ([#34340](https://github.com/angular/angular/issues/34340)) ([676aca1](https://github.com/angular/angular/commit/676aca1)), closes [#33637](https://github.com/angular/angular/issues/33637)
@ -915,7 +998,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ngcc:** log Angular error codes correctly ([#34014](https://github.com/angular/angular/issues/34014)) ([3cd43c1](https://github.com/angular/angular/commit/3cd43c1))
* **ngcc:** report diagnostics from migrations ([#34014](https://github.com/angular/angular/issues/34014)) ([599dcd0](https://github.com/angular/angular/commit/599dcd0))
* **bazel:** don't rely on [@angular](https://github.com/angular)/core being as a depedency to install [@angular](https://github.com/angular)/bazel ([#34181](https://github.com/angular/angular/issues/34181)) ([716fc84](https://github.com/angular/angular/commit/716fc84)), closes [#34164](https://github.com/angular/angular/issues/34164)
* **bazel:** reenable template type checking in ng_module ([#34144](https://github.com/angular/angular/issues/34144)) ([572e731](https://github.com/angular/angular/commit/572e731)), closes [/github.com/angular/angular/blob/168abc6d6f52713383411b14980e104c99bfeef5/packages/compiler-cli/src/ngtsc/program.ts#L430-L434](https://github.com//github.com/angular/angular/blob/168abc6d6f52713383411b14980e104c99bfeef5/packages/compiler-cli/src/ngtsc/program.ts/issues/L430-L434)
* **bazel:** reenable template type checking in ng_module ([#34144](https://github.com/angular/angular/issues/34144)) ([572e731](https://github.com/angular/angular/commit/572e731)), closes [/github.com/angular/angular/blob/168abc6d6f52713383411b14980e104c99bfeef5/packages/compiler-cli/src/ngtsc/program.ts#L430-L434](https://github.com/angular/angular/blob/168abc6d6f52713383411b14980e104c99bfeef5/packages/compiler-cli/src/ngtsc/program.ts/issues/L430-L434)
* **common:** reflect input type in NgForOf context ([#33997](https://github.com/angular/angular/issues/33997)) ([b640d38](https://github.com/angular/angular/commit/b640d38))
* **common:** reflect input type in NgIf context ([#33997](https://github.com/angular/angular/issues/33997)) ([7504543](https://github.com/angular/angular/commit/7504543)), closes [#31556](https://github.com/angular/angular/issues/31556)
* **compiler:** i18n - trim whitespace from i18n custom ids ([#34154](https://github.com/angular/angular/issues/34154)) ([64317c6](https://github.com/angular/angular/commit/64317c6)), closes [#34147](https://github.com/angular/angular/issues/34147)
@ -951,7 +1034,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** support inserting a `viewRef` that is already present ([#34052](https://github.com/angular/angular/issues/34052)) ([978b500](https://github.com/angular/angular/commit/978b500)), closes [#33924](https://github.com/angular/angular/issues/33924)
* **ivy:** take styles extracted from template into account in JIT mode ([#34017](https://github.com/angular/angular/issues/34017)) ([b659aa3](https://github.com/angular/angular/commit/b659aa3))
* **ivy:** track changes across failed builds ([#33971](https://github.com/angular/angular/issues/33971)) ([1ffbde1](https://github.com/angular/angular/commit/1ffbde1)), closes [#32214](https://github.com/angular/angular/issues/32214)
* **ivy:** wrap functions from "providers" in parentheses in Closure mode ([#33609](https://github.com/angular/angular/issues/33609)) ([fc6ad19](https://github.com/angular/angular/commit/fc6ad19)), closes [/github.com/angular/tsickle/blob/d7974262571c8a17d684e5ba07680e1b1993afdd/src/jsdoc_transformer.ts#L1021](https://github.com//github.com/angular/tsickle/blob/d7974262571c8a17d684e5ba07680e1b1993afdd/src/jsdoc_transformer.ts/issues/L1021)
* **ivy:** wrap functions from "providers" in parentheses in Closure mode ([#33609](https://github.com/angular/angular/issues/33609)) ([fc6ad19](https://github.com/angular/angular/commit/fc6ad19)), closes [/github.com/angular/tsickle/blob/d7974262571c8a17d684e5ba07680e1b1993afdd/src/jsdoc_transformer.ts#L1021](https://github.com/angular/tsickle/blob/d7974262571c8a17d684e5ba07680e1b1993afdd/src/jsdoc_transformer.ts/issues/L1021)
* **language-service:** determine index types accessed using dot notation ([#33884](https://github.com/angular/angular/issues/33884)) ([e8ec296](https://github.com/angular/angular/commit/e8ec296)), closes [#29811](https://github.com/angular/angular/issues/29811) [#29811](https://github.com/angular/angular/issues/29811)
* **language-service:** fix error of array-index out of bounds exception ([#33928](https://github.com/angular/angular/issues/33928)) ([b05ce85](https://github.com/angular/angular/commit/b05ce85))
* **language-service:** function.bind() should not be an error ([#34041](https://github.com/angular/angular/issues/34041)) ([#34046](https://github.com/angular/angular/issues/34046)) ([d22f3d6](https://github.com/angular/angular/commit/d22f3d6))
@ -959,7 +1042,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ngcc:** do not output duplicate ɵprov properties ([#34085](https://github.com/angular/angular/issues/34085)) ([5a8d25d](https://github.com/angular/angular/commit/5a8d25d))
* **ngcc:** render localized strings when in ES5 format ([#33857](https://github.com/angular/angular/issues/33857)) ([c6695fa](https://github.com/angular/angular/commit/c6695fa))
* **ngcc:** render UMD global imports correctly ([#34012](https://github.com/angular/angular/issues/34012)) ([83989b8](https://github.com/angular/angular/commit/83989b8))
* **ngcc:** report errors from `analyze` and `resolve` processing ([#33964](https://github.com/angular/angular/issues/33964)) ([ca5d772](https://github.com/angular/angular/commit/ca5d772)), closes [/github.com/angular/angular/issues/33685#issuecomment-557091719](https://github.com//github.com/angular/angular/issues/33685/issues/issuecomment-557091719)
* **ngcc:** report errors from `analyze` and `resolve` processing ([#33964](https://github.com/angular/angular/issues/33964)) ([ca5d772](https://github.com/angular/angular/commit/ca5d772)), closes [/github.com/angular/angular/issues/33685#issuecomment-557091719](https://github.com/angular/angular/issues/33685/issues/issuecomment-557091719)
* **router:** make routerLinkActive work with query params which contain arrays ([#22666](https://github.com/angular/angular/issues/22666)) ([f1bf5b2](https://github.com/angular/angular/commit/f1bf5b2)), closes [#22223](https://github.com/angular/angular/issues/22223)
* **service-worker:** allow creating post api requests after cache failure ([#33930](https://github.com/angular/angular/issues/33930)) ([63c9123](https://github.com/angular/angular/commit/63c9123)), closes [#33793](https://github.com/angular/angular/issues/33793)
* **service-worker:** throw when using the unsupported `versionedFiles` option in config ([#33903](https://github.com/angular/angular/issues/33903)) ([250e6fd](https://github.com/angular/angular/commit/250e6fd))
@ -1038,7 +1121,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **language-service:** Should not crash if expr ends unexpectedly ([#33524](https://github.com/angular/angular/issues/33524)) ([9ebac71](https://github.com/angular/angular/commit/9ebac71))
* **ngcc:** handle new `__spreadArrays` tslib helper ([#33617](https://github.com/angular/angular/issues/33617)) ([d749dd3](https://github.com/angular/angular/commit/d749dd3)), closes [#33614](https://github.com/angular/angular/issues/33614)
* **ngcc:** override `getInternalNameOfClass()` and `getAdjacentNameOfClass()` for ES5 ([#33533](https://github.com/angular/angular/issues/33533)) ([93a23b9](https://github.com/angular/angular/commit/93a23b9))
* **ngcc:** render adjacent statements after static properties ([#33630](https://github.com/angular/angular/issues/33630)) ([fe12d0d](https://github.com/angular/angular/commit/fe12d0d)), closes [/github.com/angular/angular/pull/33337#issuecomment-545487737](https://github.com//github.com/angular/angular/pull/33337/issues/issuecomment-545487737)
* **ngcc:** render adjacent statements after static properties ([#33630](https://github.com/angular/angular/issues/33630)) ([fe12d0d](https://github.com/angular/angular/commit/fe12d0d)), closes [/github.com/angular/angular/pull/33337#issuecomment-545487737](https://github.com/angular/angular/pull/33337/issues/issuecomment-545487737)
* **ngcc:** render new definitions using the inner name of the class ([#33533](https://github.com/angular/angular/issues/33533)) ([85298e3](https://github.com/angular/angular/commit/85298e3))
* **service-worker:** ensure initialization before handling messages ([#32525](https://github.com/angular/angular/issues/32525)) ([72eba77](https://github.com/angular/angular/commit/72eba77)), closes [#25611](https://github.com/angular/angular/issues/25611)
* **compiler:** i18n - ignore `alt-trans` tags in XLIFF 1.2 ([#33450](https://github.com/angular/angular/issues/33450)) ([936700a](https://github.com/angular/angular/commit/936700a)), closes [#33161](https://github.com/angular/angular/issues/33161)
@ -1068,7 +1151,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **language-service:** Add directive selectors & banana-in-a-box to completions ([#33311](https://github.com/angular/angular/issues/33311)) ([49eec5d](https://github.com/angular/angular/commit/49eec5d))
* **language-service:** Add global symbol for $any() ([#33245](https://github.com/angular/angular/issues/33245)) ([3f257e9](https://github.com/angular/angular/commit/3f257e9))
* **language-service:** Preserve CRLF in templates for language-service ([#33241](https://github.com/angular/angular/issues/33241)) ([65a0d2b](https://github.com/angular/angular/commit/65a0d2b))
* **ngcc:** do not fail when multiple workers try to create the same directory ([#33237](https://github.com/angular/angular/issues/33237)) ([8017229](https://github.com/angular/angular/commit/8017229)), closes [/github.com/angular/angular/pull/33049#issuecomment-540485703](https://github.com//github.com/angular/angular/pull/33049/issues/issuecomment-540485703)
* **ngcc:** do not fail when multiple workers try to create the same directory ([#33237](https://github.com/angular/angular/issues/33237)) ([8017229](https://github.com/angular/angular/commit/8017229)), closes [/github.com/angular/angular/pull/33049#issuecomment-540485703](https://github.com/angular/angular/pull/33049/issues/issuecomment-540485703)
* **bazel:** Remove angular devkit and restore ngc postinstall ([#32946](https://github.com/angular/angular/issues/32946)) ([f036684](https://github.com/angular/angular/commit/f036684))
* **common:** remove deprecated support for intl API ([#29250](https://github.com/angular/angular/issues/29250)) ([9e7668f](https://github.com/angular/angular/commit/9e7668f)), closes [#18284](https://github.com/angular/angular/issues/18284)
* **compiler:** absolute source span for template attribute expressions ([#33189](https://github.com/angular/angular/issues/33189)) ([fd4fed1](https://github.com/angular/angular/commit/fd4fed1))
@ -1082,7 +1165,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** use ReflectionHost to check exports when writing an import ([#33192](https://github.com/angular/angular/issues/33192)) ([de44570](https://github.com/angular/angular/commit/de44570))
* **language-service:** Increase project/script version in MockHost.reset() ([#33200](https://github.com/angular/angular/issues/33200)) ([43241a5](https://github.com/angular/angular/commit/43241a5))
* **language-service:** reset MockHost after every spec instead of creating new LS ([#33200](https://github.com/angular/angular/issues/33200)) ([11bf767](https://github.com/angular/angular/commit/11bf767))
* **ngcc:** avoid warning when reflecting on index signature member ([#33198](https://github.com/angular/angular/issues/33198)) ([78214e7](https://github.com/angular/angular/commit/78214e7)), closes [/github.com/angular/angular/blob/4659cc26e/packages/common/http/src/jsonp.ts#L39](https://github.com//github.com/angular/angular/blob/4659cc26e/packages/common/http/src/jsonp.ts/issues/L39)
* **ngcc:** avoid warning when reflecting on index signature member ([#33198](https://github.com/angular/angular/issues/33198)) ([78214e7](https://github.com/angular/angular/commit/78214e7)), closes [/github.com/angular/angular/blob/4659cc26e/packages/common/http/src/jsonp.ts#L39](https://github.com/angular/angular/blob/4659cc26e/packages/common/http/src/jsonp.ts/issues/L39)
* **ngcc:** better detection of end of decorator expression ([#33192](https://github.com/angular/angular/issues/33192)) ([5071083](https://github.com/angular/angular/commit/5071083))
* **ngcc:** Esm5ReflectionHost.getDeclarationOfIdentifier should handle aliased inner declarations ([#33252](https://github.com/angular/angular/issues/33252)) ([bfd07b3](https://github.com/angular/angular/commit/bfd07b3))
* **ngcc:** report the correct viaModule when reflecting over commonjs ([#33192](https://github.com/angular/angular/issues/33192)) ([afcff73](https://github.com/angular/angular/commit/afcff73))
@ -1101,7 +1184,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* google3 sync which requires type hints ([#33108](https://github.com/angular/angular/issues/33108)) ([0c69ec2](https://github.com/angular/angular/commit/0c69ec2))
* **ngcc:** rename the executable from `ivy-ngcc` to `ngcc` ([#33140](https://github.com/angular/angular/issues/33140)) ([1a34fbc](https://github.com/angular/angular/commit/1a34fbc))
* **service-worker:** continue serving api requests on cache failure ([#32996](https://github.com/angular/angular/issues/32996)) ([52483bf](https://github.com/angular/angular/commit/52483bf)), closes [#21412](https://github.com/angular/angular/issues/21412)
* **common:** expand type for "ngForOf" input to work with strict null checks ([#31371](https://github.com/angular/angular/issues/31371)) ([c1bb886](https://github.com/angular/angular/commit/c1bb886)), closes [#16373](https://github.com//github.com/angular/components/pull/16373)
* **common:** expand type for "ngForOf" input to work with strict null checks ([#31371](https://github.com/angular/angular/issues/31371)) ([c1bb886](https://github.com/angular/angular/commit/c1bb886)), closes [#16373](https://github.com/angular/components/pull/16373)
* **core:** ngNoopZone should have the same signature with ngZone ([#32068](https://github.com/angular/angular/issues/32068)) ([3a53e2c](https://github.com/angular/angular/commit/3a53e2c)), closes [#32063](https://github.com/angular/angular/issues/32063)
* **core:** set migration schematic versions to valid semver versions ([#32991](https://github.com/angular/angular/issues/32991)) ([0119f46](https://github.com/angular/angular/commit/0119f46))
* **core:** update migration descriptions with links to AIO documentation ([#32991](https://github.com/angular/angular/issues/32991)) ([f8eca84](https://github.com/angular/angular/commit/f8eca84))
@ -1125,7 +1208,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **language-service:** Turn on strict mode for test project ([#32783](https://github.com/angular/angular/issues/32783)) ([28358b6](https://github.com/angular/angular/commit/28358b6))
* **ngcc:** ensure private exports are added for `ModuleWithProviders` ([#32902](https://github.com/angular/angular/issues/32902)) ([002a97d](https://github.com/angular/angular/commit/002a97d))
* **ngcc:** handle presence of both `ctorParameters` and `__decorate` ([#32901](https://github.com/angular/angular/issues/32901)) ([747f0cf](https://github.com/angular/angular/commit/747f0cf))
* **ngcc:** make the build-marker error more clear ([#32712](https://github.com/angular/angular/issues/32712)) ([0ea4875](https://github.com/angular/angular/commit/0ea4875)), closes [/github.com/angular/angular/issues/31354#issuecomment-532080537](https://github.com//github.com/angular/angular/issues/31354/issues/issuecomment-532080537)
* **ngcc:** make the build-marker error more clear ([#32712](https://github.com/angular/angular/issues/32712)) ([0ea4875](https://github.com/angular/angular/commit/0ea4875)), closes [/github.com/angular/angular/issues/31354#issuecomment-532080537](https://github.com/angular/angular/issues/31354/issues/issuecomment-532080537)
* **upgrade:** fix AngularJsUrlCodec to support Safari ([#32959](https://github.com/angular/angular/issues/32959)) ([39e8ceb](https://github.com/angular/angular/commit/39e8ceb))
* **ivy:** ensure `window.ng.getDebugNode` returns debug info for component elements ([#32780](https://github.com/angular/angular/issues/32780)) ([5651fa3](https://github.com/angular/angular/commit/5651fa3))
* **ivy:** ensure multiple map-based bindings do not skip intermediate values ([#32774](https://github.com/angular/angular/issues/32774)) ([86fd571](https://github.com/angular/angular/commit/86fd571))
@ -1234,7 +1317,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** graceful evaluation of unknown or invalid expressions ([#33453](https://github.com/angular/angular/issues/33453)) ([ce30888](https://github.com/angular/angular/commit/ce30888))
* **ivy:** implement unknown element detection in jit mode ([#33419](https://github.com/angular/angular/issues/33419)) ([c83f501](https://github.com/angular/angular/commit/c83f501))
* add a flag in bootstrap to enable coalesce event change detection to improve performance ([#30533](https://github.com/angular/angular/issues/30533)) ([44623a1](https://github.com/angular/angular/commit/44623a1))
* **bazel:** update [@bazel](https://github.com/bazel)/schematics to Bazel 1.0.0 ([#33476](https://github.com/angular/angular/issues/33476)) ([540d104](https://github.com/angular/angular/commit/540d104)), closes [/github.com/angular/angular/pull/33367#issuecomment-547643246](https://github.com//github.com/angular/angular/pull/33367/issues/issuecomment-547643246)
* **bazel:** update [@bazel](https://github.com/bazel)/schematics to Bazel 1.0.0 ([#33476](https://github.com/angular/angular/issues/33476)) ([540d104](https://github.com/angular/angular/commit/540d104)), closes [/github.com/angular/angular/pull/33367#issuecomment-547643246](https://github.com/angular/angular/pull/33367/issues/issuecomment-547643246)
* **bazel:** update bazel-schematics to use Ivy and new rollup_bundle ([#33435](https://github.com/angular/angular/issues/33435)) ([bf913cc](https://github.com/angular/angular/commit/bf913cc))
* **ivy:** i18n - support inlining of XTB formatted translation files ([#33444](https://github.com/angular/angular/issues/33444)) ([2c623fd](https://github.com/angular/angular/commit/2c623fd))
* **language-service:** add support for text replacement ([#33091](https://github.com/angular/angular/issues/33091)) ([da4eb91](https://github.com/angular/angular/commit/da4eb91))
@ -1276,7 +1359,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **ivy:** i18n - implement compile-time inlining ([#32881](https://github.com/angular/angular/issues/32881)) ([2cdb3a0](https://github.com/angular/angular/commit/2cdb3a0))
* **ivy:** i18n - render legacy message ids in `$localize` if requested ([#32937](https://github.com/angular/angular/issues/32937)) ([bcbf3e4](https://github.com/angular/angular/commit/bcbf3e4))
* **language-service:** module definitions on directive hover ([#32763](https://github.com/angular/angular/issues/32763)) ([0d186dd](https://github.com/angular/angular/commit/0d186dd)), closes [#32565](https://github.com/angular/angular/issues/32565)
* **ngcc:** expose `--create-ivy-entry-points` option on ivy-ngcc ([#33049](https://github.com/angular/angular/issues/33049)) ([b2b917d](https://github.com/angular/angular/commit/b2b917d)), closes [/github.com/angular/angular/pull/32999#issuecomment-539937368](https://github.com//github.com/angular/angular/pull/32999/issues/issuecomment-539937368)
* **ngcc:** expose `--create-ivy-entry-points` option on ivy-ngcc ([#33049](https://github.com/angular/angular/issues/33049)) ([b2b917d](https://github.com/angular/angular/commit/b2b917d)), closes [/github.com/angular/angular/pull/32999#issuecomment-539937368](https://github.com/angular/angular/pull/32999/issues/issuecomment-539937368)
* update rxjs peerDependencies minimum requirment to 6.5.3 ([#32812](https://github.com/angular/angular/issues/32812)) ([66658c4](https://github.com/angular/angular/commit/66658c4))
* **ivy:** support ng-add in localize package ([#32791](https://github.com/angular/angular/issues/32791)) ([e41cbfb](https://github.com/angular/angular/commit/e41cbfb))
* **language-service:** allow retreiving synchronized analyzed NgModules ([#32779](https://github.com/angular/angular/issues/32779)) ([98feee7](https://github.com/angular/angular/commit/98feee7))
@ -1685,7 +1768,7 @@ This release contains various API docs improvements.
* use the correct WTF array to iterate over ([#31208](https://github.com/angular/angular/issues/31208)) ([4aed480](https://github.com/angular/angular/commit/4aed480))
* **compiler-cli:** Return original sourceFile instead of redirected sourceFile from getSourceFile ([#26036](https://github.com/angular/angular/issues/26036)) ([13dbb98](https://github.com/angular/angular/commit/13dbb98)), closes [#22524](https://github.com/angular/angular/issues/22524)
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
<a name="8.1.1"></a>
@ -1694,7 +1777,7 @@ This release contains various API docs improvements.
### Bug Fixes
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
@ -1790,7 +1873,7 @@ This release contains various API docs improvements.
* **bazel:** do not modify tsconfig.json ([#30984](https://github.com/angular/angular/issues/30984)) ([49307f0](https://github.com/angular/angular/commit/49307f0))
* **bazel:** Load global stylesheet in dev and prod ([#30879](https://github.com/angular/angular/issues/30879)) ([5a7bcd1](https://github.com/angular/angular/commit/5a7bcd1))
* **common:** expose the `HttpUploadProgressEvent` interface as public API ([#30852](https://github.com/angular/angular/issues/30852)) ([4e8614b](https://github.com/angular/angular/commit/4e8614b)), closes [#30814](https://github.com/angular/angular/issues/30814)
* **core:** TypeScript related migrations should cater for BOM ([#30719](https://github.com/angular/angular/issues/30719)) ([26e3615](https://github.com/angular/angular/commit/26e3615)), closes [/github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts#L72](https://github.com//github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts/issues/L72) [#30713](https://github.com/angular/angular/issues/30713)
* **core:** TypeScript related migrations should cater for BOM ([#30719](https://github.com/angular/angular/issues/30719)) ([26e3615](https://github.com/angular/angular/commit/26e3615)), closes [/github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts#L72](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts/issues/L72) [#30713](https://github.com/angular/angular/issues/30713)
* **service-worker:** avoid uncaught rejection warning when registration fails ([#30876](https://github.com/angular/angular/issues/30876)) ([08c38a1](https://github.com/angular/angular/commit/08c38a1))
@ -1801,7 +1884,7 @@ This release contains various API docs improvements.
### Bug Fixes
* **core:** TypeScript related migrations should cater for BOM ([#30719](https://github.com/angular/angular/issues/30719)) ([80394ce](https://github.com/angular/angular/commit/80394ce)), closes [/github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts#L72](https://github.com//github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts/issues/L72) [#30713](https://github.com/angular/angular/issues/30713)
* **core:** TypeScript related migrations should cater for BOM ([#30719](https://github.com/angular/angular/issues/30719)) ([80394ce](https://github.com/angular/angular/commit/80394ce)), closes [/github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts#L72](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/tree/recorder.ts/issues/L72) [#30713](https://github.com/angular/angular/issues/30713)
@ -1954,7 +2037,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **common:** add upgrade sub-package to `ng_package` rule for @angular/common ([#30117](https://github.com/angular/angular/issues/30117)) ([6de4cbd](https://github.com/angular/angular/commit/6de4cbd)), closes [#30055](https://github.com/angular/angular/issues/30055) [#30116](https://github.com/angular/angular/issues/30116)
* **common:** adjust `MockPlatformLocation` to set state to new object ([#30055](https://github.com/angular/angular/issues/30055)) ([825efa8](https://github.com/angular/angular/commit/825efa8))
* **compiler:** Fix compiler crash due to isSkipSelf of null ([#30075](https://github.com/angular/angular/issues/30075)) ([28fd5ab](https://github.com/angular/angular/commit/28fd5ab))
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([0ddf2e7](https://github.com/angular/angular/commit/0ddf2e7)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([0ddf2e7](https://github.com/angular/angular/commit/0ddf2e7)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
* **bazel:** do not typecheck core schematic files ([#29876](https://github.com/angular/angular/issues/29876)) ([2ba799d](https://github.com/angular/angular/commit/2ba799d))
* **bazel:** restore `ng build --prod` ([#30005](https://github.com/angular/angular/issues/30005)) ([96a8289](https://github.com/angular/angular/commit/96a8289))
* **common:** prevent repeated application of `HttpParams` mutations ([#29045](https://github.com/angular/angular/issues/29045)) ([8e8e89a](https://github.com/angular/angular/commit/8e8e89a)), closes [#20430](https://github.com/angular/angular/issues/20430)
@ -2008,7 +2091,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **platform-server:** update minimum domino version to latest released ([#28893](https://github.com/angular/angular/issues/28893)) ([79e2ca0](https://github.com/angular/angular/commit/79e2ca0))
* **router:** removed obsolete TODO comment ([#29085](https://github.com/angular/angular/issues/29085)) ([72ecc45](https://github.com/angular/angular/commit/72ecc45))
* **service-worker:** detect new version even if files are identical to an old one ([#26006](https://github.com/angular/angular/issues/26006)) ([586234b](https://github.com/angular/angular/commit/586234b)), closes [#24338](https://github.com/angular/angular/issues/24338)
* **service-worker:** ignore passive mixed content requests ([#25994](https://github.com/angular/angular/issues/25994)) ([48214e2](https://github.com/angular/angular/commit/48214e2)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://github.com//github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#23012](https://github.com/angular/angular/issues/23012)
* **service-worker:** ignore passive mixed content requests ([#25994](https://github.com/angular/angular/issues/25994)) ([48214e2](https://github.com/angular/angular/commit/48214e2)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#23012](https://github.com/angular/angular/issues/23012)
* **bazel:** Pin browsers for schematics ([#28913](https://github.com/angular/angular/issues/28913)) ([1145bdb](https://github.com/angular/angular/commit/1145bdb))
* **bazel:** rxjs_umd_modules should always be present ([#28881](https://github.com/angular/angular/issues/28881)) ([9ae14db](https://github.com/angular/angular/commit/9ae14db))
* **compiler:** use correct variable in invalid function ([#28656](https://github.com/angular/angular/issues/28656)) ([f75acbd](https://github.com/angular/angular/commit/f75acbd))
@ -2016,7 +2099,7 @@ To learn about the release highlights and our CLI-powered automated update workf
* **language-service:** Fix completions for input/output with alias ([#28904](https://github.com/angular/angular/issues/28904)) ([ad4a9bf](https://github.com/angular/angular/commit/ad4a9bf)), closes [#27959](https://github.com/angular/angular/issues/27959)
* **bazel:** Add postinstall step to generate summaries ([#28850](https://github.com/angular/angular/issues/28850)) ([96b597c](https://github.com/angular/angular/commit/96b597c))
* **bazel:** Schematics should upgrade rxjs to 6.4.0 ([#28841](https://github.com/angular/angular/issues/28841)) ([2d80419](https://github.com/angular/angular/commit/2d80419))
* **compiler-cli:** incorrect bundled metadata for static class member call expressions ([#28762](https://github.com/angular/angular/issues/28762)) ([4131715](https://github.com/angular/angular/commit/4131715)), closes [/github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts#L121](https://github.com//github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts/issues/L121) [#28741](https://github.com/angular/angular/issues/28741)
* **compiler-cli:** incorrect bundled metadata for static class member call expressions ([#28762](https://github.com/angular/angular/issues/28762)) ([4131715](https://github.com/angular/angular/commit/4131715)), closes [/github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts#L121](https://github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts/issues/L121) [#28741](https://github.com/angular/angular/issues/28741)
* **bazel:** Install angular repo before yarn_install ([#28670](https://github.com/angular/angular/issues/28670)) ([49fb8c3](https://github.com/angular/angular/commit/49fb8c3))
* **bazel:** Turn on strict action env ([#28675](https://github.com/angular/angular/issues/28675)) ([2ea030c](https://github.com/angular/angular/commit/2ea030c))
* **compiler:** ensure that event handlers have the correct source spans ([#28055](https://github.com/angular/angular/issues/28055)) ([cffd862](https://github.com/angular/angular/commit/cffd862))
@ -2169,7 +2252,7 @@ For details on how to migrate, please refer to [the deprecations guide](https://
### Bug Fixes
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([#30107](https://github.com/angular/angular/issues/30107)) ([1084c19](https://github.com/angular/angular/commit/1084c19)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([#30107](https://github.com/angular/angular/issues/30107)) ([1084c19](https://github.com/angular/angular/commit/1084c19)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
<a name="7.2.13"></a>
@ -2223,7 +2306,7 @@ This release contains various API docs improvements.
* **animations:** ensure `position` and `display` styles are handled outside of keyframes/web-animations ([#28911](https://github.com/angular/angular/issues/28911)) ([86981b3](https://github.com/angular/angular/commit/86981b3)), closes [#24923](https://github.com/angular/angular/issues/24923) [#25635](https://github.com/angular/angular/issues/25635)
* **router:** removed obsolete TODO comment ([#29085](https://github.com/angular/angular/issues/29085)) ([2a25ac2](https://github.com/angular/angular/commit/2a25ac2))
* **service-worker:** detect new version even if files are identical to an old one ([#26006](https://github.com/angular/angular/issues/26006)) ([5669333](https://github.com/angular/angular/commit/5669333)), closes [#24338](https://github.com/angular/angular/issues/24338)
* **service-worker:** ignore passive mixed content requests ([#25994](https://github.com/angular/angular/issues/25994)) ([b598e88](https://github.com/angular/angular/commit/b598e88)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://github.com//github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#23012](https://github.com/angular/angular/issues/23012)
* **service-worker:** ignore passive mixed content requests ([#25994](https://github.com/angular/angular/issues/25994)) ([b598e88](https://github.com/angular/angular/commit/b598e88)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#23012](https://github.com/angular/angular/issues/23012)
<a name="7.2.7"></a>
@ -2243,7 +2326,7 @@ This release contains various API docs improvements.
### Bug Fixes
* **compiler-cli:** incorrect bundled metadata for static class member call expressions ([#28762](https://github.com/angular/angular/issues/28762)) ([ab69c31](https://github.com/angular/angular/commit/ab69c31)), closes [/github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts#L121](https://github.com//github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts/issues/L121) [#28741](https://github.com/angular/angular/issues/28741)
* **compiler-cli:** incorrect bundled metadata for static class member call expressions ([#28762](https://github.com/angular/angular/issues/28762)) ([ab69c31](https://github.com/angular/angular/commit/ab69c31)), closes [/github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts#L121](https://github.com/angular/angular/blob/master/packages/core/src/change_detection/differs/keyvalue_differs.ts/issues/L121) [#28741](https://github.com/angular/angular/issues/28741)
<a name="7.2.5"></a>
@ -2386,7 +2469,7 @@ This release contains various API docs improvements.
* **bazel:** emit full node stack traces when Angular compilation crashes ([#27678](https://github.com/angular/angular/issues/27678)) ([522919a](https://github.com/angular/angular/commit/522919a))
* **bazel:** fix major/minor semver check between @angular/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([1cc08b4](https://github.com/angular/angular/commit/1cc08b4))
* **bazel:** Load http_archive and rules_nodejs dependencies ([#27609](https://github.com/angular/angular/issues/27609)) ([8313ffc](https://github.com/angular/angular/commit/8313ffc))
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([44dfa60](https://github.com/angular/angular/commit/44dfa60)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com//github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([44dfa60](https://github.com/angular/angular/commit/44dfa60)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
* **bazel:** Set module_name and enable ng test ([#27715](https://github.com/angular/angular/issues/27715)) ([85866de](https://github.com/angular/angular/commit/85866de))
* **bazel:** fix TS errors in the `schematics/bazel-workspace` files ([#27600](https://github.com/angular/angular/issues/27600)) ([3290fc3](https://github.com/angular/angular/commit/3290fc3))
* **bazel:** Read latest versions from latest-versions.ts & use semver check ([#27526](https://github.com/angular/angular/issues/27526)) ([30a3b49](https://github.com/angular/angular/commit/30a3b49))
@ -2426,7 +2509,7 @@ This release contains various API docs improvements.
* **bazel:** emit full node stack traces when Angular compilation crashes ([#27678](https://github.com/angular/angular/issues/27678)) ([0d8528b](https://github.com/angular/angular/commit/0d8528b))
* **bazel:** fix major/minor semver check between @angular/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([3ed1e84](https://github.com/angular/angular/commit/3ed1e84))
* **bazel:** Load http_archive and rules_nodejs dependencies ([#27609](https://github.com/angular/angular/issues/27609)) ([89ace1a](https://github.com/angular/angular/commit/89ace1a))
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([ef056c5](https://github.com/angular/angular/commit/ef056c5)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com//github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
* **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([ef056c5](https://github.com/angular/angular/commit/ef056c5)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
* **bazel:** Read latest versions from latest-versions.ts & use semver check ([#27591](https://github.com/angular/angular/issues/27591)) ([93078e3](https://github.com/angular/angular/commit/93078e3))
* **bazel:** Set module_name and enable ng test ([#27715](https://github.com/angular/angular/issues/27715)) ([183f278](https://github.com/angular/angular/commit/183f278))
* **common:** KeyValuePipe should return empty array for empty objects ([#27258](https://github.com/angular/angular/issues/27258)) ([fa3af8b](https://github.com/angular/angular/commit/fa3af8b))
@ -2455,7 +2538,7 @@ This release contains various API docs improvements.
* **bazel:** ng_package not generating UMD bundles on windows ([#27200](https://github.com/angular/angular/issues/27200)) ([e476c38](https://github.com/angular/angular/commit/e476c38))
* **bazel:** ng_package should correctly map to source maps in secondary entry-points ([#27313](https://github.com/angular/angular/issues/27313)) ([fc2c23e](https://github.com/angular/angular/commit/fc2c23e)), closes [#25510](https://github.com/angular/angular/issues/25510)
* **compiler-cli:** flatModuleIndex files not generated on windows with multiple input files ([#27200](https://github.com/angular/angular/issues/27200)) ([8087b6b](https://github.com/angular/angular/commit/8087b6b))
* **compiler-cli:** ngtsc shim files not being generated on case-insensitive platforms ([#27466](https://github.com/angular/angular/issues/27466)) ([84f2928](https://github.com/angular/angular/commit/84f2928)), closes [/github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts#L681-L682](https://github.com//github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts/issues/L681-L682)
* **compiler-cli:** ngtsc shim files not being generated on case-insensitive platforms ([#27466](https://github.com/angular/angular/issues/27466)) ([84f2928](https://github.com/angular/angular/commit/84f2928)), closes [/github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts#L681-L682](https://github.com/Microsoft/TypeScript/blob/3e4c5c95abd515eb9713b881d27ab3a93cc00461/src/compiler/sys.ts/issues/L681-L682)
* **platform-server:** add @angular/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([236ac06](https://github.com/angular/angular/commit/236ac06)), closes [#26154](https://github.com/angular/angular/issues/26154)
@ -2679,7 +2762,7 @@ To learn about the release highlights and our new CLI-powered update workflow fo
* **compiler:** update compiler to flatten nested template fns ([#24943](https://github.com/angular/angular/issues/24943)) ([fe14f18](https://github.com/angular/angular/commit/fe14f18))
* **compiler:** update compiler to generate new slot allocations ([#25607](https://github.com/angular/angular/issues/25607)) ([27e2039](https://github.com/angular/angular/commit/27e2039))
* **core:** In Testability.whenStable update callback, pass more complete ([#25010](https://github.com/angular/angular/issues/25010)) ([16c03c0](https://github.com/angular/angular/commit/16c03c0))
* **core:** add missing `peerDependency ` to `@angular/compiler` ([#26033](https://github.com/angular/angular/issues/26033)) ([549de1e](https://github.com/angular/angular/commit/549de1e)), closes [/github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e#diff-58563046c4439699f2e6a89187099a54](https://github.com//github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e/issues/diff-58563046c4439699f2e6a89187099a54)
* **core:** add missing `peerDependency ` to `@angular/compiler` ([#26033](https://github.com/angular/angular/issues/26033)) ([549de1e](https://github.com/angular/angular/commit/549de1e)), closes [/github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e#diff-58563046c4439699f2e6a89187099a54](https://github.com/angular/angular/commit/919f42fea1df4b9e38b7d688aef5f2de668e9d3e/issues/diff-58563046c4439699f2e6a89187099a54)
* **core:** allow null value for renderer setElement(…) ([#17065](https://github.com/angular/angular/issues/17065)) ([ff15043](https://github.com/angular/angular/commit/ff15043)), closes [#13686](https://github.com/angular/angular/issues/13686)
* **core:** do not clear element content when using shadow dom ([#24861](https://github.com/angular/angular/issues/24861)) ([6e828bb](https://github.com/angular/angular/commit/6e828bb))
* **core:** size regression with closure compiler ([#25531](https://github.com/angular/angular/issues/25531)) ([1f59f2f](https://github.com/angular/angular/commit/1f59f2f))

View File

@ -22,7 +22,7 @@ Do not open issues for general support questions as we want to keep GitHub issue
Stack Overflow is a much better place to ask questions since:
- there are thousands of people willing to help on Stack Overflow
- questions and answers stay available for public viewing so your question / answer might help someone else
- questions and answers stay available for public viewing so your question/answer might help someone else
- Stack Overflow's voting system assures that the best answers are prominently visible.
To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.
@ -42,7 +42,9 @@ Please consider what kind of change it is:
* For a **Major Feature**, first open an issue and outline your proposal so that it can be
discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
and help you to craft the change so that it is successfully accepted into the project.
and help you to craft the change so that it is successfully accepted into the project. **Note**:
Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major
feature.
* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
## <a name="submit"></a> Submission Guidelines
@ -55,7 +57,7 @@ We want to fix all the issues as soon as possible, but before fixing a bug we ne
A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
We will be insisting on a minimal reproduction scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience, users often find coding problems themselves while preparing a minimal reproduction. We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it.
We will be insisting on a minimal reproduction scenario in order to save maintainers' time and ultimately be able to fix more bugs. Interestingly, from our experience, users often find coding problems themselves while preparing a minimal reproduction. We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it.
Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced.
@ -68,7 +70,7 @@ Before you submit your Pull Request (PR) consider the following guidelines:
1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
that relates to your submission. You don't want to duplicate effort.
1. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add.
Discussing the design up front helps to ensure that we're ready to accept your work.
Discussing the design upfront helps to ensure that we're ready to accept your work.
1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
We cannot accept code without this. Make sure you sign with the primary email address of the Git identity that has been granted access to the Angular repository.
1. Fork the angular/angular repo.
@ -83,8 +85,7 @@ Before you submit your Pull Request (PR) consider the following guidelines:
1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
and ensure that all tests pass.
1. Commit your changes using a descriptive commit message that follows our
[commit message conventions](#commit). Adherence to these conventions
is necessary because release notes are automatically generated from these messages.
[commit message conventions](#commit). Adherence to these conventions is necessary because release notes are automatically generated from these messages.
```shell
git commit -a
@ -179,13 +180,13 @@ Samples: (even more [samples](https://github.com/angular/angular/commits/master)
docs(changelog): update changelog to beta.5
```
```
fix(release): need to depend on latest rxjs and zone.js
fix(release): need to depend on the latest rxjs and zone.js
The version in our package.json gets copied to the one we publish, and users need the latest of these.
```
### Revert
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
### Type
Must be one of the following:
@ -236,6 +237,7 @@ There are currently a few exceptions to the "use package name" rule:
* **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
repo
* **dev-infra**: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
* **migrations**: used for changes to the `ng update` migrations.
* **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
* **ve**: used for changes specific to ViewEngine (legacy compiler/renderer).
* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
@ -279,7 +281,7 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
* https://help.github.com/articles/about-commit-email-addresses/
* https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.
Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA before you commit changes. If not, your PR will fail the CLA check.
<hr>

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 = "f9e7b9f42ae202cc2d2ce6d698ccb49a9f7f7ea572a78fd451696d03ef2ee116",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz"],
sha256 = "84abf7ac4234a70924628baa9a73a5a5cbad944c4358cf9abdb4aab29c9a5b77",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.7.0/rules_nodejs-1.7.0.tar.gz"],
)
# Check the rules_nodejs version and download npm dependencies
@ -17,7 +17,7 @@ http_archive(
# assert on that.
load("@build_bazel_rules_nodejs//:index.bzl", "check_rules_nodejs_version", "node_repositories", "yarn_install")
check_rules_nodejs_version(minimum_version_string = "1.6.0")
check_rules_nodejs_version(minimum_version_string = "1.7.0")
# Setup the Node.js toolchain
node_repositories(
@ -64,7 +64,7 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
web_test_repositories()
load("//tools/browsers:browser_repositories.bzl", "browser_repositories")
load("//dev-infra/browsers:browser_repositories.bzl", "browser_repositories")
browser_repositories()
@ -91,17 +91,18 @@ 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/1.1.2/configs/ubuntu16_04_clang/versions.bzl
base_container_digest = "sha256:1ab40405810effefa0b2f45824d6d608634ccddbf06366760c341ef6fbead011",
# https://github.com/bazelbuild/bazel-toolchains/blob/3.2.0/configs/ubuntu16_04_clang/versions.bzl
base_container_digest = "sha256:5e750dd878df9fcf4e185c6f52b9826090f6e532b097f286913a428290622332",
# 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>
# and marketplace.gcr.io/google/rbe-ubuntu16-04:<base_container_digest> have
# the same Clang and JDK installed. Clang is needed because of the dependency on
# @com_google_protobuf. Java is needed for the Bazel's test executor Java tool.
digest = "sha256:0b8fa87db4b8e5366717a7164342a029d1348d2feea7ecc4b18c780bc2507059",
digest = "sha256:f743114235a43355bf8324e2ba0fa6a597236fe06f7bc99aaa9ac703631c306b",
env = clang_env(),
registry = "marketplace.gcr.io",
# We can't use the default "ubuntu16_04" RBE image provided by the autoconfig because we need
# a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
repository = "google/rbe-ubuntu16-04-webtest",
use_checked_in_confs = "Force",
)

View File

@ -4,9 +4,8 @@
## Install git, Node.js and yarn
- `sudo apt-get update`
- `sudo apt-get install -y git`
- Install [nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
- Install Node.js: `nvm install 12`
- Install yarn: `npm install --global yarn`
- Install the latest stable version of [Node.js](https://nodejs.org/en/download).
- Install the latest stable version of [yarn](https://classic.yarnpkg.com/en/docs/install).
## Checkout repository
@ -18,7 +17,11 @@
- You can overwrite the default environment variables inside the image, by passing new values using
`--build-arg`.
**Note:** The script has to execute docker commands with `sudo`.
**Note 1:** The script has to execute docker commands with `sudo`.
**Note 2:**
The script has to execute `yarn` commands, so make sure `yarn` is on the `PATH` when invoking the
script.
## Example

View File

@ -8,7 +8,7 @@ VM host to update the preview server based on changes in the source code.
The script will pull the latest changes from the origin's master branch and examine if there have
been any changes in files inside the preview server source code directory (see below). If there are,
it will create a new image and verify that is works as expected. Finally, it will stop and remove
it will create a new image and verify that it works as expected. Finally, it will stop and remove
the old docker container and image, create a new container based on the new image and start it.
The script assumes that the preview server source code is in the repository's
@ -25,7 +25,11 @@ used for.
**Note 1:** The script has to execute docker commands with `sudo`.
**Note 2:** Make sure the user that executes the script has access to update the repository
**Note 2:**
The script has to execute `yarn` commands, so make sure `yarn` is on the `PATH` when invoking the
script.
**Note 3:** Make sure the user that executes the script has access to update the repository.
## Run the script manually
@ -50,3 +54,9 @@ log its output to `update-preview-server.log` (assuming the user has the necessa
# Periodically check for changes and update the preview server (if necessary)
*/30 * * * * /path/to/update-preview-server.sh /path/to/repo /path/to/secrets /path/to/builds /path/to/localcerts /path/to/logs >> /path/to/update-preview-server.log 2>&1
```
**Note:**
Keep in mind that cron jobs run in non-interactive, non-login shells. This means that the execution
context might be different compared to when running the same commands from an interactive, login
shell. For example, `.bashrc` files are normally _not_ sourced automatically in cron jobs. See
[here](http://www.gnu.org/software/bash/manual/html_node/Bash-Startup-Files.html) for more info.

View File

@ -13,7 +13,8 @@ readonly HOST_LOCALCERTS_DIR=$4
readonly HOST_LOGS_DIR=$5
# Constants
readonly PROVISIONAL_IMAGE_NAME=aio-builds:provisional
readonly PROVISIONAL_TAG=provisional
readonly PROVISIONAL_IMAGE_NAME=aio-builds:$PROVISIONAL_TAG
readonly LATEST_IMAGE_NAME=aio-builds:latest
readonly CONTAINER_NAME=aio
@ -30,7 +31,7 @@ readonly CONTAINER_NAME=aio
# Do not update the server unless files inside `aio-builds-setup/` have changed
# or the last attempt failed (identified by the provisional image still being around).
readonly relevantChangedFilesCount=$(git diff --name-only $lastDeployedCommit...HEAD | grep -P "^aio/aio-builds-setup/" | wc -l)
readonly lastAttemptFailed=$(sudo docker rmi "$PROVISIONAL_IMAGE_NAME" >> /dev/fd/3 && echo "true" || echo "false")
readonly lastAttemptFailed=$(sudo docker image ls | grep "$PROVISIONAL_TAG" >> /dev/fd/3 && echo "true" || echo "false")
if [[ $relevantChangedFilesCount -eq 0 ]] && [[ "$lastAttemptFailed" != "true" ]]; then
echo "Skipping update because no relevant files have been touched."
exit 0

View File

@ -203,11 +203,3 @@ Schematic options are supplied to the command in the same format as immediate co
[ng generate](cli/generate) 和 [ng add](cli/add) 命令会把要生成或要添加到当前项目中的工件或库作为参数。
除了通用选项之外,每个工件或库还可以用*原理图*定义自己的选项。
原理图的选项和内置命令的选项使用同样的格式。
### Building with Bazel
### 使用 Bazel 进行构建
Optionally, you can configure the Angular CLI to use [Bazel](https://docs.bazel.build) as the build tool. For more information, see [Building with Bazel](guide/bazel).
你还可以把 Angular CLI 配置为把 [Bazel](https://docs.bazel.build) 作为构建工具。欲知详情,参见[用 Bazel 进行构建](guide/bazel)。

View File

@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';
@NgModule({

View File

@ -200,13 +200,4 @@
(ngModelChange)="model.name = $event">
TODO: remove this: {{model.name}}
<!-- #enddocregion ngModel-3-->
<hr>
<!-- #docregion ngModelName-2 -->
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#spy>
<br>TODO: remove this: {{spy.className}}
<!-- #enddocregion ngModelName-2 -->
</div>

View File

@ -2,7 +2,7 @@
// #docregion , v1, final
import { Component } from '@angular/core';
import { Hero } from '../hero';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-form',

View File

@ -13,13 +13,13 @@ import { searchUrl } from '../package-search/package-search.service';
/**
* If request is cachable (e.g., package search) and
* If request is cacheable (e.g., package search) and
* response is in cache return the cached response as observable.
* If has 'x-refresh' header that is true,
* then also re-run the package search, using response from next(),
* returning an observable that emits the cached response first.
*
* If not in cache or not cachable,
* If not in cache or not cacheable,
* pass request through to next()
*/
// #docregion v1
@ -28,8 +28,8 @@ export class CachingInterceptor implements HttpInterceptor {
constructor(private cache: RequestCache) {}
intercept(req: HttpRequest<any>, next: HttpHandler) {
// continue if not cachable.
if (!isCachable(req)) { return next.handle(req); }
// continue if not cacheable.
if (!isCacheable(req)) { return next.handle(req); }
const cachedResponse = this.cache.get(req);
// #enddocregion v1
@ -51,11 +51,11 @@ export class CachingInterceptor implements HttpInterceptor {
// #enddocregion v1
/** Is this request cachable? */
function isCachable(req: HttpRequest<any>) {
// Only GET requests are cachable
/** Is this request cacheable? */
function isCacheable(req: HttpRequest<any>) {
// Only GET requests are cacheable
return req.method === 'GET' &&
// Only npm package search is cachable in this app
// Only npm package search is cacheable in this app
-1 < req.url.indexOf(searchUrl);
}

View File

@ -0,0 +1,10 @@
{
"description": "i18n",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[0-9].*"
],
"file": "src/app/app.component.ts",
"tags": ["Angular", "i18n", "internationalization"]
}

View File

@ -1,6 +1,6 @@
// #docregion
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { AuthService } from './auth.service';
@ -12,21 +12,20 @@ export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
state: RouterStateSnapshot): true|UrlTree {
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
checkLogin(url: string): true|UrlTree {
if (this.authService.isLoggedIn) { return true; }
// Store the attempted URL for redirecting
this.authService.redirectUrl = url;
// Navigate to the login page with extras
this.router.navigate(['/login']);
return false;
// Redirect to the login page
return this.router.parseUrl('/login');
}
}
// #enddocregion

View File

@ -4,7 +4,8 @@ import {
CanActivate, Router,
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild
CanActivateChild,
UrlTree
} from '@angular/router';
import { AuthService } from './auth.service';
@ -16,7 +17,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
state: RouterStateSnapshot): true|UrlTree {
let url: string = state.url;
return this.checkLogin(url);
@ -24,20 +25,19 @@ export class AuthGuard implements CanActivate, CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
state: RouterStateSnapshot): true|UrlTree {
return this.canActivate(route, state);
}
// #enddocregion can-activate-child
checkLogin(url: string): boolean {
checkLogin(url: string): true|UrlTree {
if (this.authService.isLoggedIn) { return true; }
// Store the attempted URL for redirecting
this.authService.redirectUrl = url;
// Navigate to the login page
this.router.navigate(['/login']);
return false;
// Redirect to the login page
return this.router.parseUrl('/login');
}
// #docregion can-activate-child
}

View File

@ -6,7 +6,8 @@ import {
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivateChild,
NavigationExtras
NavigationExtras,
UrlTree
} from '@angular/router';
import { AuthService } from './auth.service';
@ -16,17 +17,17 @@ import { AuthService } from './auth.service';
export class AuthGuard implements CanActivate, CanActivateChild {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): true|UrlTree {
let url: string = state.url;
return this.checkLogin(url);
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): true|UrlTree {
return this.canActivate(route, state);
}
checkLogin(url: string): boolean {
checkLogin(url: string): true|UrlTree {
if (this.authService.isLoggedIn) { return true; }
// Store the attempted URL for redirecting
@ -42,8 +43,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
return false;
// Redirect to the login page with extras
return this.router.createUrlTree(['/login'], navigationExtras);
}
}

View File

@ -11,7 +11,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>

View File

@ -33,7 +33,7 @@ export class HeroesComponent implements OnInit {
onSelect(hero: Hero): void {
this.selectedHero = hero;
this.messageService.add(`HeroService: Selected hero id=${hero.id}`);
this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);
}
// #docregion getHeroes

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -12,7 +12,7 @@
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.1.js"></script>

View File

@ -26,7 +26,7 @@
<script src="phone-detail/phone-detail.module.js"></script>
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.min.js"></script>
<script src="/node_modules/zone.js/bundles/zone.umd.min.js"></script>
<script>window.module = 'aot';</script>
</head>

View File

@ -3,7 +3,7 @@ var fsExtra = require('fs-extra');
var resources = [
// polyfills
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.min.js',
'node_modules/zone.js/bundles/zone.umd.min.js',
// css
'app/app.css',
'app/app.animations.css',
@ -20,6 +20,7 @@ var resources = [
'app/phone-detail/phone-detail.module.js'
];
resources.map(function(sourcePath) {
var destPath = `aot/${sourcePath}`;
// Need to rename zone.umd.min.js to zone.min.js
var destPath = `aot/${sourcePath}`.replace('.umd.min.js', '.min.js');
fsExtra.copySync(sourcePath, destPath);
});

View File

@ -27,7 +27,7 @@
<!-- #docregion angular -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- #enddocregion angular -->
<script src="/systemjs.config.1.js"></script>

View File

@ -21,8 +21,8 @@ module.exports = function(config) {
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/zone-testing.js',
'node_modules/zone.js/bundles/zone.umd.js',
'node_modules/zone.js/bundles/zone-testing.umd.js',
// RxJs.
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

View File

@ -31,8 +31,8 @@ module.exports = function(config) {
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/zone-testing.js',
'node_modules/zone.js/bundles/zone.umd.js',
'node_modules/zone.js/bundles/zone-testing.umd.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

View File

@ -1,7 +1,7 @@
// #docregion
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
import {terser} from 'rollup-plugin-terser'
//paths are relative to the execution path
export default {
@ -17,6 +17,6 @@ export default {
commonjs({
include: ['node_modules/rxjs/**']
}),
uglify()
terser()
]
}

View File

@ -12,7 +12,7 @@
<link rel="stylesheet" href="app.css" />
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/zone.js/bundles/zone.umd.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- #enddocregion full -->
<script src="/systemjs.config.1.js"></script>

View File

@ -31,8 +31,8 @@ module.exports = function(config) {
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/zone-testing.js',
'node_modules/zone.js/bundles/zone.umd.js',
'node_modules/zone.js/bundles/zone-testing.umd.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },

View File

@ -37,7 +37,7 @@ Use [attribute binding](guide/template-syntax#attribute-binding) template syntax
建立无障碍的 Web 体验通常会涉及设置 [ARIA 属性Attribute](https://developers.google.com/web/fundamentals/accessibility/semantics-aria) 以提供可能会丢失的语义。使用 [Attribute 绑定](guide/template-syntax#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 on DOM elements.
specification depends specifically on HTML attributes rather than properties of DOM elements.
在 Angular 中绑定 ARIA 属性Attribute必须使用 `attr.` 前缀,因为 ARIA 规范针对的是 HTML 属性Attribute而不是 DOM 元素的属性Property
@ -66,9 +66,9 @@ NOTE:
按照约定HTML 属性Attribute使用小写名称 `tabindex` ),而 Property 使用 camelCase 名称( `tabIndex` )。
See the [Template Syntax](https://angular.io/guide/template-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties.
See the [Template Syntax](guide/template-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties.
有关 Attribute 和 Property 之间差异的更多背景信息,请参见[模板语法](https://angular.cn/guide/template-syntax#html-attribute-vs-dom-property)一章。
有关 Attribute 和 Property 之间差异的更多背景信息,请参见[模板语法](guide/template-syntax#html-attribute-vs-dom-property)一章。
</div>

View File

@ -2,9 +2,9 @@
# Angular 编译器选项
When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
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) 时,可以通过在 `tsconfig.json` [TypeScript 配置文件中](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.
@ -30,15 +30,15 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
## 用 `extends` 语法配置继承方式
Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file, `tsconfig.json`.
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 配置文件 `tsconfig.json` `angularCompilerOptions` 进行 `extends``extends` 属性位于顶层,和 `compilerOptions``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 `tsconfig` file.
The configuration options from the base file are loaded first, then overridden by those in the inheriting configuration file.
使用 `extends` 属性TypeScript 配置可以从另一个文件中继承设置。首先从基础文件中加载配置项,然后被继承它的 `tsconfig` 文件中的配置项覆写。
使用 `extends` 属性TypeScript 配置可以从另一个文件中继承设置。首先从基础文件中加载配置项,然后被继承自它的配置文件中的配置项覆写。
For example:

View File

@ -190,7 +190,7 @@ AOT 编译中的错误通常是由于元数据不符合编译器的要求而发
### 配置 AOT 编译
You can provide options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration) that control the compilation process. See [Angular compiler options](guide/angular-compiler-options) for a complete list of available options.
You can provide options in the [TypeScript configuration file](guide/typescript-configuration) that controls the compilation process. See [Angular compiler options](guide/angular-compiler-options) for a complete list of available options.
你可以在 `tsconfig.json` [TypeScript 配置文件](guide/typescript-configuration)中提供控制编译过程的选项。有关可用选项的完整列表,请参见 [Angular 编译器](guide/angular-compiler-options)选项。
@ -552,9 +552,9 @@ The compiler later reports the error if it needs that piece of metadata to gener
<div class="alert is-helpful">
If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in the TypeScript configuration file, `tsconfig.json`.
If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in the TypeScript configuration file.
如果你希望 `ngc` 立即汇报这些语法错误,而不要生成带有错误信息的 `.metadata.json` 文件,可以到 TypeScript 的配置文件 `tsconfig.json` 中设置 `strictMetadataEmit` 选项。
如果你希望 `ngc` 立即汇报这些语法错误,而不要生成带有错误信息的 `.metadata.json` 文件,可以到 TypeScript 的配置文件中设置 `strictMetadataEmit` 选项。
```
@ -1112,11 +1112,9 @@ If an expression is not foldable, the collector writes it to `.metadata.json` as
## 阶段 2代码生成
The collector makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
收集器不会试图理解它收集并输出到 `.metadata.json` 中的元数据,它所能做的只是尽可能准确的表述这些元数据,并在检测到元数据中的语法违规时记录这些错误。
It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
收集器不会试图理解它收集并输出到 `.metadata.json` 中的元数据,它所能做的只是尽可能准确的表述这些元数据,并在检测到元数据中的语法违规时记录这些错误。
解释这些 `.metadata.json` 是编译器在代码生成阶段要承担的工作。
The compiler understands all syntax forms that the collector supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules.
@ -1325,10 +1323,10 @@ In the template type-checking phase, the Angular template compiler uses the Type
Angular 编译器最有用的功能之一就是能够对模板中的表达式进行类型检查在由于出错而导致运行时崩溃之前就捕获任何错误。在模板类型检查阶段Angular 模板编译器会使用 TypeScript 编译器来验证模板中的绑定表达式。
Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's TypeScript configuration file
(see [Angular Compiler Options](guide/angular-compiler-options)).
通过在该项目的 `tsconfig.json` `"angularCompilerOptions"` 中添加编译器选项 `"fullTemplateTypeCheck"`,可以显式启用本阶段(见[ Angular 编译器选项](guide/angular-compiler-options) )。
通过在该项目的 TypeScript 配置文件中`"angularCompilerOptions"` 中添加编译器选项 `"fullTemplateTypeCheck"`,可以显式启用本阶段(见[ Angular 编译器选项](guide/angular-compiler-options) )。
<div class="alert is-helpful">
@ -1395,14 +1393,18 @@ If a component uses `templateUrl` instead of `template`, the errors are reported
如果组件使用 `templateUrl` 来代替 `template`,这些错误就会在 `templateUrl` 引用的 HTML 文件中汇报,而不是这个合成文件中。
The error location is the beginning of the text node that contains the interpolation expression with
the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error
the error.
If the error is in an attribute binding such as `[value]="person.address.street"`, the error
location is the location of the attribute that contains the error.
错误的位置是从包含出错的插值表达式的那个文本节点开始的。
如果错误是一个属性绑定,比如 `[value]="person.address.street"`,错误的位置就是那个包含错误的属性的位置。
The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control
how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message.
how detailed the type validation is.
For example, if the `strictTypeChecks` is specified, the error
```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'```
is reported as well as the above error message.
这个验证过程使用 TypeScript 的类型检查器,这些选项也会提供给 TypeScript 编译器以控制类型验证的详细程度。
比如,如果指定了 `strictTypeChecks`,就会像上面的错误信息一样报告 ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` 错误。
@ -1412,9 +1414,8 @@ The validation uses the TypeScript type checker and the options supplied to the
### 类型窄化
The expression used in an `ngIf` directive is used to narrow type unions in the Angular
template compiler, the same way the `if` expression does in TypeScript. For example, to avoid
`Object is possibly 'undefined'` error in the template above, modify it to only emit the
interpolation if the value of `person` is initialized as shown below:
template compiler, the same way the `if` expression does in TypeScript.
For example, to avoid `Object is possibly 'undefined'` error in the template above, modify it to only emit the interpolation if the value of `person` is initialized as shown below:
`ngIf` 指令中使用的表达式用来在 Angular 模板编译器中窄化联合类型,就像 TypeScript 中的 `if` 表达式一样。
比如,要在上述模板中消除 `Object is possibly 'undefined'` 错误,可以把它改成只在 `person` 的值初始化过的时候才生成这个插值。
@ -1443,18 +1444,13 @@ For more information about input type narrowing, see [Input setter coercion](gui
### 非空类型断言操作符
Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator)
to suppress the `Object is possibly 'undefined'` error when it is inconvenient to use
`*ngIf` or when some constraint in the component ensures that the expression is always
non-null when the binding expression is interpolated.
Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator) to suppress the `Object is possibly 'undefined'` error when it is inconvenient to use `*ngIf` or when some constraint in the component ensures that the expression is always non-null when the binding expression is interpolated.
使用 [非空类型断言操作符](guide/template-syntax#non-null-assertion-operator)可以在不方便使用 `*ngIf`
当组件中的某些约束可以确保这个绑定表达式在求值时永远不会为空时,防止出现 `Object is possibly 'undefined'` 错误。
In the following example, the `person` and `address` properties are always set together,
implying that `address` is always non-null if `person` is non-null. There is no convenient
way to describe this constraint to TypeScript and the template compiler, but the error
is suppressed in the example by using `address!.street`.
In the following example, the `person` and `address` properties are always set together, implying that `address` is always non-null if `person` is non-null.
There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`.
在下列例子中,`person``address` 属性总是一起出现的,如果 `person` 非空,则 `address` 也一定非空。没有一种简便的写法可以向 TypeScript 和模板编译器描述这种约束。但是这个例子中使用 `address!.street` 避免了报错。
@ -1480,8 +1476,7 @@ The non-null assertion operator should be used sparingly as refactoring of the c
应该保守点使用非空断言操作符,因为将来对组件的重构可能会破坏这个约束。
In this example it is recommended to include the checking of `address`
in the `*ngIf`as shown below:
In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
这个例子中,更建议在 `*ngIf` 中包含对 `address` 的检查,代码如下:

View File

@ -231,11 +231,11 @@ Angular 的管道可以让你在模板中声明显示值的转换逻辑。
Angular defines various pipes, such as the [date](https://angular.io/api/common/DatePipe) pipe and [currency](https://angular.io/api/common/CurrencyPipe) pipe; for a complete list, see the [Pipes API list](https://angular.io/api?type=pipe). You can also define new pipes.
Angular 自带了很多管道,比如 [date](https://angular.cn/api/common/DatePipe) 管道和 [currency](https://angular.cn/api/common/CurrencyPipe) 管道,完整的列表参见 [Pipes API 列表](https://angular.cn/api?type=pipe)。你也可以自己定义一些新管道。
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 (|)](https://angular.io/guide/template-syntax#pipe).
要在 HTML 模板中指定值的转换方式,请使用 [管道操作符 (|)](https://angular.cn/guide/template-syntax#pipe)。
要在 HTML 模板中指定值的转换方式,请使用 [管道操作符 (|)](guide/template-syntax#pipe)。
`{{interpolated_value | pipe_name}}`

View File

@ -102,7 +102,7 @@ Angular 为单页面应用提供了一个框架,其中的大多数逻辑和数
## 为开发周期提供支持
The **Development Workflow** section describes the tools and processes you use to compile, test, and and deploy Angular applications.
The **Development Workflow** section describes the tools and processes you use to compile, test, and deploy Angular applications.
**“开发工作流”**部分描述了用于编译、测试和部署 Angular 应用的工具和过程。

View File

@ -26,9 +26,10 @@ NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是
组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供者可以作为*依赖*被*注入*到组件中,
这能让你的代码更加模块化、更加可复用、更加高效。
Both components and services are simply classes, with *decorators* that mark their type and provide metadata that tells Angular how to use them.
组件和服务都是简单的类,这些类使用*装饰器*来标出它们的类型,并提供元数据以告知 Angular 该如何使用它们。
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.

View File

@ -1,210 +0,0 @@
# Building with Bazel
# 用 Bazel 进行构建
This guide explains how to build and test Angular apps with Bazel.
本章讲解了如何使用 Bazel 来构建和测试 Angular 应用。
<div class="alert is-helpful">
This guide assumes you are already familiar with developing and building Angular applications using the [CLI](cli).
本指南假设你已经熟悉如何使用 [CLI](cli) 来开发和构建 Angular 应用了。
It describes features which are part of Angular Labs, and are not considered a stable, supported API.
这里描述的这些特性是 Angular Labs 的一部分,因此不是稳定的、受支持的 API。
</div>
## Using Bazel with the Angular CLI
## 在 Angular CLI 中使用 Bazel
The `@angular/bazel` package provides a builder that allows Angular CLI to use Bazel as the build tool.
`@angular/bazel` 包提供了一个构建器,允许 Angular CLI 使用 Bazel 作为构建工具。
To opt-in an existing application, run
要有选择的为现有应用添加它,请运行
```sh
ng add @angular/bazel
```
To use Bazel in a new application, first install `@angular/bazel` globally
要在新的应用中使用 Bazel首先要全局安装 `@angular/bazel`
```sh
npm install -g @angular/bazel
```
then create the new application with
然后使用下列命令创建新的应用
```sh
ng new --collection=@angular/bazel
```
Now when you use Angular CLI build commands such as `ng build` and `ng serve`,
Bazel is used behind the scenes.
Outputs from Bazel appear in the `dist/bin` folder.
当你使用 Angular CLI 的构建类命令时(比如 `ng build``ng serve`Bazel 会在幕后工作。Bazel 的输出会显示在 `dist/bin` 文件夹中。
> The command-line output includes extra logging from Bazel.
> We plan to reduce this in the future.
>
> 命令行输出中还包括来自 Bazel 的额外日志记录。我们计划在未来减少这种情况。
>
### Removing Bazel
### 去掉 Bazel
If you need to opt-out from using Bazel, you can restore the backup files:
如果你不想使用 Bazel你可以恢复备份文件
- `/angular.json.bak` replaces `/angular.json`
`/angular.json.bak` 替换 `/angular.json`
## Advanced configuration
## 高级配置
<div class="alert is-helpful">
Editing the Bazel configuration may prevent you opting out of Bazel.
Custom behaviors driven by Bazel won't be available in other Builders.
编辑这份 Bazel 配置可以防止你有选择的退出 Bazel。Bazel 驱动的自定义行为在其它构建器中是无用的。
This section assumes you are familiar with [Bazel](https://docs.bazel.build).
本节假设你熟悉 [Bazel](https://docs.bazel.build)。
</div>
You can manually adjust the Bazel configuration to:
你可以手动把 Bazel 配置调整为:
* customize the build steps
自定义构建步骤
* parallellize the build for scale and incrementality
构建过程并行化,以支持可延展性和增量构建
Create the initial Bazel configuration files by running the following command:
运行以下命令,创建初始的 Bazel 配置文件:
```sh
ng build --leaveBazelFilesOnDisk
```
Now you'll find new files in the Angular workspace:
在 Angular 工作区中,你会找到一些新文件:
* `/WORKSPACE` tells Bazel how to download external dependencies.
`/WORKSPACE` 会告诉 Bazel 要如何下载外部依赖。
* `/BUILD.bazel` and `/src/BUILD.bazel` tell Bazel about your source code.
`/BUILD.bazel``/src/BUILD.bazel` 会告诉 Bazel 你的源代码在哪里。
You can find a full-featured example with custom Bazel configurations at https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular.
你可以在 <https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular> 找到一个全功能的 Bazel 配置示例。
Documentation for using Bazel for frontend projects is linked from https://docs.bazel.build/versions/master/bazel-and-javascript.html.
<https://docs.bazel.build/versions/master/bazel-and-javascript.html> 则是一个关于如何使用 Bazel 进行前端项目的文档链接。
## Running Bazel directly
## 直接运行 Bazel
In some cases you'll want to bypass the Angular CLI builder, and run the Bazel CLI directly.
The Bazel tool is managed by the `@bazel/bazelisk` package (similar to how Node.js can be managed by `nvm`).
You can install it globally to get the `bazelisk` command in your path, or use `$(npm bin)/bazelisk` in place of bazelisk below.
在某些情况下,你会想要绕过 Angular CLI 的构建器,并直接运行 Bazel CLI。Bazel CLI 位于 `@bazel/bazel` npm 包中。你可以全局安装它,以便你能通过路径获取 `bazel` 命令,或者用 `$(npm bin)/bazel` 代替下面的 bazel。
The common commands in Bazel are:
Bazel 的常用命令有:
* `bazelisk build [targets]`: Compile the default output artifacts of the given targets.
`bazel build [targets]`:编译指定目标的默认输出成果。
* `bazelisk test [targets]`: For whichever `*_test` targets are found in the patterns, run the tests.
`bazel test [targets]`:对于那些符合 `*_test` 模式的目标,运行测试。
* `bazelisk run [target]`: Compile the program represented by target, and then run it.
`bazel run [target]`:编译目标所代表的程序,然后运行它。
To repeat the command any time the inputs change (watch mode), replace `bazelisk` with `ibazel` in these commands.
要想在输入发生变化时重复执行此命令(即 watch 模式),请把这些命令中的 `bazel` 替换为 `ibazel`
The output locations are printed in the output.
在输出中打印了输出到的位置。
Full documentation for the Bazel CLI is at https://docs.bazel.build/versions/master/command-line-reference.html.
Bazel CLI 的完整文档位于 <https://docs.bazel.build/versions/master/command-line-reference.html>
## Querying the build graph
## 查询构建图谱
Because Bazel constructs a graph out of your targets, you can find lots of useful information.
Bazel 会根据你的目标构造一个图谱,你可以从中找到很多有用的信息。
Using the graphviz optional dependency, you'll have a program `dot`, which you can use with `bazel query`:
使用一个名叫 graphviz 的可选依赖,可以得到一个名叫 `dot` 的程序,这样你就可以用它来进行 `bazel query` 了:
```bash
$ bazel query --output=graph ... | dot -Tpng > graph.png
```
See https://docs.bazel.build/versions/master/query-how-to.html for more details on `bazel query`.
关于 `bazel query` 的详细信息,参见 <https://docs.bazel.build/versions/master/query-how-to.html>
## Customizing `BUILD.bazel` files
## 自定义 `BUILD.bazel` 文件
"Rules" are like plugins for Bazel. Many rule sets are available. This guide documents the ones maintained by the Angular team at Google.
“规则Rules”就好比 Bazel 的插件。有很多可用的规则集。本指南记录了 Angular 开发组在 Google 所做的一部分工作。
Rules are used in `BUILD.bazel` files, which are markers for the packages in your workspace. Each `BUILD.bazel` file declares a separate package to Bazel, though you can have more coarse-grained distributions so that the packages you publish (for example, to `npm`) can be made up of many Bazel packages.
`BUILD.bazel` 文件中用到了一些规则,这些规则都是工作空间中各个包的标记。每个 `BUILD.bazel` 文件都会向 Bazel 声明一个单独的包。你也可以使用更粗粒度的发布方式,但这样一来你发布的包(例如,到 `npm` )就会由很多个 Bazel 包组合而成。
In the `BUILD.bazel` file, each rule must first be imported, using the `load` statement. Then the rule is called with some attributes, and the result of calling the rule is that you've declared to Bazel how it can derive some outputs given some inputs and dependencies. Then later, when you run a `bazel` command line, Bazel loads all the rules you've declared to determine an absolute ordering of what needs to be run. Note that only the rules needed to produce the requested output will actually be executed.
`BUILD.bazel` 文件中,必须首先使用 `load` 语句导入每个规则。然后用一些属性调用此规则,调用此规则的结果就是向 Bazel 中声明了:当给定一些输入和依赖的时候该如何得到一些输出。然后,当你运行一个 `bazel` 命令时Bazel 就会加载你声明过的所有规则,以确定它们在运行期间的绝对顺序。注意,只有那些在产生输出时真正起作用的规则才会被执行。
A list of common rules for frontend development is documented in the README at https://github.com/bazelbuild/rules_nodejs/.
在 [https://github.com/bazelbuild/rules_nodejs/](https://github.com/bazelbuild/rules_nodejs/) 上的 README 文件中记录了前端开发中要用到的通用规则列表。

View File

@ -94,10 +94,9 @@ Angular 支持大多数常用浏览器,包括下列版本:
11, 10*, 9* (不支持“兼容性视图”)
*deprecated in v10, see the <a href="/guide/deprecations#ie-9-10">deprecations guide</a>.
*deprecated in v10, see the {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.
*在 v10 中弃用,参见<a href="/guide/deprecations#ie-9-10">弃用指南</a>
</td>
</tr>
@ -105,14 +104,17 @@ Angular 支持大多数常用浏览器,包括下列版本:
<tr>
<td>
IE Mobile
IE Mobile*
</td>
<td>
11
<div>*deprecated in v10, see the {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.</div>
<div>*已在 v10 中弃用,参见 {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.</div>
</td>
</tr>
@ -322,7 +324,6 @@ These are the polyfills required to run an Angular application on each supported
<tr style="vertical-align: top">
<td>
IE9
</td>
@ -409,11 +410,10 @@ Some features of Angular may require additional polyfills.
<td>
[NgClass](api/common/NgClass)
on SVG elements
[NgClass](api/common/NgClass) on SVG elements
在 SVG 元素上应用时
</td>
<td>
@ -423,7 +423,6 @@ Some features of Angular may require additional polyfills.
</td>
<td>
IE10, IE11
</td>
@ -433,9 +432,7 @@ Some features of Angular may require additional polyfills.
<td>
[Http](guide/http)
when sending and receiving binary data
[Http](guide/http) when sending and receiving binary data
用 [Http](guide/http) 发送和接收二进制数据时
</td>
@ -741,7 +738,7 @@ For example:
// __Zone_enable_cross_context_check = true;
&lt;/script>
&lt;!-- zone.js required by Angular -->
&lt;script src="node_modules/zone.js/dist/zone.js">&lt;/script>
&lt;script src="node_modules/zone.js/bundles/zone.umd.js">&lt;/script>
&lt;!-- application polyfills -->
</code-example>

View File

@ -411,6 +411,43 @@ Each budget entry is a JSON object with the following properties:
</table>
{@a commonjs }
## Configuring CommonJS dependencies
## 配置 CommonJS 依赖项
<div class="alert is-important">
It is recommended that you avoid depending on CommonJS modules in your Angular applications.
Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes.
Instead, it is recommended that you use [ECMAScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) in your entire application.
For more information, see [How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles/).
建议你在 Angular 应用中避免依赖 CommonJS 模块。对 CommonJS 模块的依赖会阻止打包器和压缩器优化你的应用,这会导致更大的打包尺寸。
建议你在整个应用中都使用 [ECMAScript 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)。
欲知详情,参见[为什么 CommonJS 会导致更大的打包尺寸](https://web.dev/commonjs-larger-bundles/)。
</div>
The Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules.
To disable these warnings, you can add the CommonJS module name to `allowedCommonJsDependencies` option in the `build` options located in `angular.json` file.
如果 Angular CLI 检测到你的浏览器端应用依赖了 CommonJS 模块,就会发出警告。
要禁用这些警告,你可以把这些 CommonJS 模块的名字添加到 `angular.json` 文件的 `build` 区的 `allowedCommonJsDependencies` 选项中。
<code-example lang="json">
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"lodash"
]
...
}
...
},
</code-example>
{@a browser-compat}
## Configuring browser compatibility

View File

@ -83,7 +83,7 @@ For example, your `myBuilder` folder could contain the following files.
You can publish the builder to `npm` (see [Publishing your Library](https://angular.io/guide/creating-libraries#publishing-your-library)). If you publish it as `@example/my-builder`, you can install it using the following command.
你可以把构建器发布到 `npm`(请参阅[发布你的库](https://angular.cn/guide/creating-libraries#publishing-your-library))。如果把它发布成了 `@example/my-builder`,就可以使用下面的命令来安装它。
你可以把构建器发布到 `npm`(请参阅[发布你的库](guide/creating-libraries#publishing-your-library))。如果把它发布成了 `@example/my-builder`,就可以使用下面的命令来安装它。
<code-example language="sh">
@ -411,7 +411,7 @@ Lets create a simple `angular.json` file that puts target configurations into
We can publish the builder to npm (see [Publishing your Library](guide/creating-libraries#publishing-your-library)), and install it using the following command:
我们可以把这个构建器发布到 npm请参阅[发布你的库](https://angular.cn/guide/creating-libraries#publishing-your-library)),并使用如下命令来安装它:
我们可以把这个构建器发布到 npm请参阅[发布你的库](guide/creating-libraries#publishing-your-library)),并使用如下命令来安装它:
<code-example language="sh">
@ -479,7 +479,7 @@ We need to update the `angular.json` file to add a target for this builder to th
* The target named "touch" uses our builder, which we published to `@example/command-runner`. (See [Publishing your Library](guide/creating-libraries#publishing-your-library))
名为 `touch` 的目标使用了我们的构建器,它发布到了 `@example/command-runner`。(参见[发布你的库](https://angular.cn/guide/creating-libraries#publishing-your-library)
名为 `touch` 的目标使用了我们的构建器,它发布到了 `@example/command-runner`。(参见[发布你的库](guide/creating-libraries#publishing-your-library)
* The options object provides default values for the two inputs that we defined; `command`, which is the Unix command to execute, and `args`, an array that contains the file to operate on.

View File

@ -2,26 +2,23 @@
# 创建库
You can create and publish new libraries to extend Angular functionality. If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
This page provides a conceptual overview of how you can create and publish new libraries to extend Angular functionality.
你可以创建和发布新库来扩展 Angular 的功能。如果你发现需要在多个应用中解决同样的问题(或者想与其它开发者共享你的解决方案),你就有了一个潜在的库。
对于如何创建和发布新库,以扩展 Angular 的功能,本页面提供了一个概念性的总览
If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
A simple example might be a button that sends users to your company website, that would be included in all apps that your company builds.
如果你发现自己要在多个应用中解决同样的问题(或者要把你的解决方案分享给其它开发者),你就有了一个潜在的库。
简单的例子就是一个用来把用户带到你公司网站上的按钮,该按钮会包含在你公司构建的所有应用中。
<div class="alert is-helpful">
<p>For more details on how a library project is structured you can refer the <a href="guide/file-structure#library-project-files">Library Project Files</a></p>
<p>要了解关于库项目结构的更多信息,参见<a href="guide/file-structure#library-project-files">库项目文件</a></p>
</div>
## Getting started
## 快速上手
Use the Angular CLI to generate a new library skeleton with the following command:
Use the Angular CLI to generate a new library skeleton in a new workspace with the following commands.
使用 Angular CLI用以下命令生成一个新库的骨架
使用 Angular CLI用以下命令在新的工作空间中生成一个新库的骨架:
<code-example language="bash">
ng new my-workspace --create-application=false
@ -29,15 +26,24 @@ Use the Angular CLI to generate a new library skeleton with the following comman
ng generate library my-lib
</code-example>
The `ng generate` command creates the `projects/my-lib` folder in your workspace, which contains a component and a service inside an NgModule.
<div class="alert is-helpful">
<p>You can use the monorepo model to use the same workspace for multiple projects. See <a href="guide/file-structure#multiple-projects">Setting up for a multi-project workspace</a>.</p>
<p>你可以使用单一仓库monorepo模式将同一个工作空间用于多个项目。请参见<a href="guide/file-structure#multiple-projects">设置多项目工作区</a></p>
For more details on how a library project is structured, refer to the [Library project files](guide/file-structure#library-project-files) section of the [Project File Structure guide](guide/file-structure).
要了解关于库项目的目录结构的详细信息,参见[项目文件结构](guide/file-structure)中的[库项目文件](guide/file-structure#library-project-files)部分。
You can use the monorepo model to use the same workspace for multiple projects.
See [Setting up for a multi-project workspace](guide/file-structure#multiple-projects).
你可以使用单一仓库monorepo模式将同一个工作空间用于多个项目。参见[建立多项目型工作区](guide/file-structure#multiple-projects)。
</div>
This creates the `projects/my-lib` folder in your workspace, which contains a component and a service inside an NgModule.
The workspace configuration file, `angular.json`, is updated with a project of type 'library'.
When you generate a new library, the workspace configuration file, `angular.json`, is updated with a project of type 'library'.
这会在你的工作区中创建 `projects/my-lib` 文件夹,里面包含 NgModule 中的一个组件和一个服务。该工作区的配置文件 `angular.json` 中也添加了一个 'library' 类型的项目。
当你生成一个新库时,该工作区的配置文件 `angular.json` 中也增加了一个 'library' 类型的项目。
<code-example format="json">
"projects": {
@ -103,14 +109,6 @@ Here are some things to consider in migrating application functionality to a lib
组件对外暴露交互方式时,应该通过输入参数来提供上下文,通过输出参数来将事件传给其它组件。
* Services should declare their own providers (rather than declaring providers in the NgModule or a component), so that they are *tree-shakable*. This allows the compiler to leave the service out of the bundle if it never gets injected into the application that imports the library. For more about this, see [Tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers).
服务应该声明自己的提供者(而不是在 NgModule 或组件中声明提供者),这样它们才是*可摇树优化的*。这样,如果该服务从未被注入到导入该库的应用中,编译器就会把该服务从发布包中删除。欲知详情,请参阅[可摇树优化的提供者](guide/dependency-injection-providers#tree-shakable-providers)。
* If you register global service providers or share providers across multiple NgModules, use the [`forRoot()` and `forChild()` patterns](guide/singleton-services) provided by the [RouterModule](api/router/RouterModule).
如果你在多个 NgModule 中注册全局服务提供者或共享提供者,请使用 [RouterModule](api/router/RouterModule) 提供的 [`forRoot()` 和 `forChild()` 模式](guide/singleton-services)。
* Check all internal dependencies.
检查所有内部依赖。
@ -123,54 +121,75 @@ Here are some things to consider in migrating application functionality to a lib
同样,如果你的库代码依赖于某个服务,则需要迁移该服务。
* If your library code or its templates depend on other libraries (such a Angular Material, for instance), you must configure your library with those dependencies.
* If your library code or its templates depend on other libraries (such as Angular Material, for instance), you must configure your library with those dependencies.
如果你的库代码或其模板依赖于其它库(比如 Angular Material ),你就必须把它们配置为该库的依赖。
如果你的库代码或其模板依赖于其它库(比如 Angular Material ),你就必须把它们配置为该库的依赖。
## Reusable code and schematics
* Consider how you provide services to client applications.
## 可复用的代码和 schematics
考虑如何为客户端应用提供服务。
A library typically includes *reusable code* that defines components, services, and other Angular artifacts (pipes, directives, and so on) that you simply import into a project.
A library is packaged into an npm package for publishing and sharing, and this package can also include [schematics](guide/glossary#schematic) that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic skeleton app with `ng generate component`.
A schematic that is combined with a library can, for example, provide the Angular CLI with the information it needs to generate a particular component defined in that library.
* Services should declare their own providers (rather than declaring providers in the NgModule or a component), so that they are *tree-shakable*. This allows the compiler to leave the service out of the bundle if it never gets injected into the application that imports the library. For more about this, see [Tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers).
库通常都包含*可复用的代码*,用于定义组件、服务,以及你刚才导入到项目中的其它 Angular 工件(管道,指令等)。库被打包在一个 npm 包中,用于发布和共享,这个包还可以包含一些 [schematics](guide/glossary#schematic),用于提供直接在项目中生成或转换代码的指令,就像 CLI 用 `ng generate component` 创建一个通用的骨架应用一样。例如,与库配套的 schematics 可以为 Angular CLI 提供生成该库中定义的特定组件所需的信息
服务应该自己声明提供者(而不是在 NgModule 或组件中声明提供者),以便它们是*可摇树优化的* 。这样,如果服务器从未被注入到导入该库的应用中,编译器就会把该服务从该 bundle 中删除。有关这方面的更多信息,请参阅[Tree-shakable 提供者](guide/dependency-injection-providers#tree-shakable-providers) 。
What you include in your library is determined by the kind of task you are trying to accomplish.
For example, if you want a dropdown with some canned data to show how to add it to your app, your library could define a schematic to create it.
For a component like a dropdown that would contain different passed-in values each time, you could provide it as a component in a shared library.
* If you register global service providers or share providers across multiple NgModules, use the [`forRoot()` and `forChild()` design patterns](guide/singleton-services) provided by the [RouterModule](api/router/RouterModule).
你在库中所包含的内容取决于你要完成的任务类型。例如,如果你想用一个带有预置数据的下拉列表来展示如何把它添加到应用中,你的库中就可以定义一个 schematic 来创建它。对于像下拉列表那样每次都要传入不同值的组件,你可以把它作为共享库中的组件提供出来
如果您在多个 NgModules 注册全局服务供应商或供应商共享,使用[`forRoot()` 和 `forChild()` 设计模式](guide/singleton-services)由提供[RouterModule](api/router/RouterModule) 。
Suppose you want to read a configuration file and then generate a form based on that configuration.
If that form will need additional customization by the user, it might work best as a schematic.
However, if the forms will always be the same and not need much customization by developers, then you could create a dynamic component that takes the configuration and generates the form.
In general, the more complex the customization, the more useful the schematic approach.
* If your library provides optional services that might not be used by all client applications, support proper tree-shaking for that case by using the [lightweight token design pattern](guide/lightweight-injection-tokens).
如果你的库中提供的可选服务可能并没有被所有的客户端应用所使用,那么就可以通过[轻量级令牌设计模式](guide/lightweight-injection-tokens)为这种情况支持正确的树状[结构了](guide/lightweight-injection-tokens) 。
假设你要读取配置文件,然后根据该配置生成表单。如果该表单需要用户进行额外的自定义,它可能最适合用作 schematic。但是如果这些表单总是一样的开发人员不需要做太多自定义工作那么你就可以创建一个动态的组件来获取配置并生成表单。通常自定义越复杂schematic 方式就越有用。
{@a integrating-with-the-cli}
## Integrating with the CLI
{@a integration with the the cli}
## 与 CLI 集成
A library can include [schematics](guide/glossary#schematic) that allow it to integrate with the Angular CLI.
## Integrating with the CLI using code-generation schematics
## 使用代码生成原理图与 CLI 集成
A library typically includes *reusable code* that defines components, services, and other Angular artifacts (pipes, directives, and so on) that you simply import into a project.
A library is packaged into an npm package for publishing and sharing.
This package can also include [schematics](guide/glossary#schematic) that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic new component with `ng generate component`.
A schematic that is packaged with a library can, for example, provide the Angular CLI with the information it needs to generate a component that configures and uses a particular feature, or set of features, defined in that library.
One example of this is Angular Material's navigation schematic which configures the CDK's `BreakpointObserver` and uses it with Material's `MatSideNav` and `MatToolbar` components.
库中的库通常都包含*可复用的代码* ,用于定义组件,服务,以及你刚才导入到项目中的其他 Angular 工件(管道,指令等等)。库被打包成一个 npm 包,用于发布和共享。这个包还可以包含一些[原理图](guide/glossary#schematic) ,它提供直接在项目中生成或转换代码的指令,就像 CLI 用 `ng generate component` 创建一个通用的新 `ng generate component` 。例如,用库打包的原理图可以为 Angular CLI 提供生成组件所需的信息,该组件用于配置和使用该库中定义的特定特性或一组特性。这方面的一个例子是 Angular Material 的导航原理图,它用来配置 CDK 的 `BreakpointObserver` 并把它与 Material 的 `MatSideNav``MatToolbar` 组件一起使用。
You can create and include the following kinds of schematics.
你可以创建并包含以下几种原理图。
库中可以包含那些能与 Angular CLI 集成的 [schematics](guide/glossary#schematic)。
* Include an installation schematic so that `ng add` can add your library to a project.
包含一个安装型 schematic以便 `ng add` 可以把你的库添加到项目中。
包含一个安装原理图,以便 `ng add` 可以把你的库添加到项目中。
* Include generation schematics in your library so that `ng generate` can scaffold your defined artifacts (components, services, tests, and so on) in a project.
包含一些生成型 schematic以便 `ng generate` 可以为项目中的已定义工件(组件,服务,测试等)生成脚手架。
在库中包含了生成原理图,以便 `ng generate` 可以为项目中的已定义工件(组件,服务,测试等)提供支持
* Include an update schematic so that `ng update` can update your librarys dependencies and provide migrations for breaking changes in new releases.
包含一个更新update原理图以便 `ng update` 可以更新此库的依赖,并针对新版本中的重大变更提供辅助迁移。
包含一个更新的原理图,以便 `ng update` 可以更新你的库的依赖,并提供一些迁移来破坏新版本中的更改。
What you include in your library depends on your task.
For example, you could define a schematic to create a dropdown that is pre-populated with canned data to show how to add it to an app.
If you want a dropdown that would contain different passed-in values each time, your library could define a schematic to create it with a given configuration. Developers could then use `ng generate` to configure an instance for their own app.
你在图书馆中所包含的内容取决于你的任务。例如,你可以定义一个原理图来创建一个预先填充了固定数据的下拉列表,以展示如何把它添加到一个应用中。如果你想要一个每次包含不同传入值的下拉列表,那么你的库可以定义一个原理图来用指定的配置创建它。然后,开发人员可以使用 `ng generate` 为自己的应用配置一个实例。
Suppose you want to read a configuration file and then generate a form based on that configuration.
If that form will need additional customization by the developer who is using your library, it might work best as a schematic.
However, if the forms will always be the same and not need much customization by developers, then you could create a dynamic component that takes the configuration and generates the form.
In general, the more complex the customization, the more useful the schematic approach.
假设你要读取配置文件,然后根据该配置生成表单。如果该表单需要库的用户进行额外的自定义,它可能最适合用作 schematic。但是如果这些表单总是一样的开发人员不需要做太多自定义工作那么你就可以创建一个动态的组件来获取配置并生成表单。通常自定义越复杂schematic 方式就越有用。
To learn more, see [Schematics Overview](guide/schematics) and [Schematicsfor Libraries](guide/schematics-for-libraries).
@ -180,7 +199,9 @@ To learn more, see [Schematics Overview](guide/schematics) and [Schematicsfor
## 发布你的库
Use the Angular CLI and the npm package manager to build and publish your library as an npm package. It is not recommended to publish Ivy libraries to NPM repositories. Before publishing a library to NPM, build it using the `--prod` flag which will use the older compiler and runtime known as View Engine instead of Ivy.
Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
Before publishing a library to NPM, build it using the `--prod` flag which will use the older compiler and runtime known as View Engine instead of Ivy.
使用 Angular CLI 和 npm 包管理器来把你的库构建并发布成 npm 包。不建议把 Ivy 格式的库发布到 NPM 仓库。在把某个库发布到 NPM 之前,使用 `--prod` 标志构建它此标志会使用老的编译器和运行时也就是视图引擎View Engine以代替 Ivy.
@ -194,6 +215,14 @@ If you've never published a package in npm before, you must create a user accoun
如果你之前从未在 npm 中发布过包,就必须创建一个用户帐号。[点此阅读发布 npm 包](https://docs.npmjs.com/getting-started/publishing-npm-packages)的更多信息。
<div class="alert is-important">
For now, it is not recommended to publish Ivy libraries to NPM because Ivy generated code is not backward compatible with View Engine, so apps using View Engine will not be able to consume them. Furthermore, the internal Ivy instructions are not yet stable, which can potentially break consumers using a different Angular version from the one used to build the library.
When a published library is used in an Ivy app, the Angular CLI will automatically convert it to Ivy using a tool known as the Angular compatibility compiler (`ngcc`). Thus, by publishing your libraries using the View Engine compiler ensures that they can be transparently consumed by both View Engine and Ivy apps.
</div>
{@a lib-assets}
## Managing assets in a library

View File

@ -85,9 +85,9 @@ This method is for development and testing only, and is not a supported or secur
### 使用 CLI 进行自动部署
The Angular CLI command `ng deploy` (introduced in version 8.3.0) executes the `deploy` [CLI builder](https://angular.io/guide/cli-builder) associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by running `ng add [package name]`.
The Angular CLI command `ng deploy` (introduced in version 8.3.0) executes the `deploy` [CLI builder](guide/cli-builder) associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by running `ng add [package name]`.
Angular CLI 命令 `ng deploy`(在版本 8.3.0 中引入)执行与你的项目关联的 `deploy` [CLI 构建器](https://angular.cn/guide/cli-builder)。有许多第三方构建器实现了到不同平台的部署功能。你可以通过运行 `ng add [package name]` 把它们中的任何一个添加到项目中。
Angular CLI 命令 `ng deploy`(在版本 8.3.0 中引入)执行与你的项目关联的 `deploy` [CLI 构建器](guide/cli-builder)。有许多第三方构建器实现了到不同平台的部署功能。你可以通过运行 `ng add [package name]` 把它们中的任何一个添加到项目中。
When you add a package with deployment capability, it'll automatically update your workspace configuration (`angular.json` file) with a `deploy` section for the selected project. You can then use the `ng deploy` command to deploy that project.
@ -685,22 +685,22 @@ When targeting older browsers, [polyfills](guide/browser-support#polyfills) can
To maximize compatibility, you could ship a single bundle that includes all your compiled code, plus any polyfills that may be needed.
Users with modern browsers, however, shouldn't have to pay the price of increased bundle size that comes with polyfills they don't need.
Differential loading, which is supported by default in Angular CLI version 8 and higher, solves this problem.
Differential loading, which is supported in Angular CLI version 8 and higher, can help solve this problem.
为了最大限度地提高兼容性你可以发布一个包含所有已编译代码的发布包bundle以及所有可能会用到的腻子脚本。用户如果在支持大量最新 JavaScript 特性的现代浏览器中使用此应用,就不应该为这些他们用不到的包带来的额外体积付出代价。差异化加载就是解决这个问题的。Angular CLI 8 及更高版本默认就支持它。
为了最大限度地提高兼容性你可以发布一个包含所有已编译代码的发布包bundle以及所有可能会用到的腻子脚本。用户如果在支持大量最新 JavaScript 特性的现代浏览器中使用此应用,就不应该为这些他们用不到的包带来的额外体积付出代价。差异化加载可以帮你解决这个问题。Angular CLI 8 及更高版本就支持它。
Differential loading is a strategy that allows your web application to support multiple browsers, but only load the necessary code that the browser needs. When differential loading is enabled (which is the default) the CLI builds two separate bundles as part of your deployed application.
Differential loading is a strategy that allows your web application to support multiple browsers, but only load the necessary code that the browser needs. When differential loading is enabled the CLI builds two separate bundles as part of your deployed application.
差异化加载是一种策略,它能让你的应用支持多种浏览器,但是只加载当前浏览器必须用到的代码。
(默认)启用了差异化加载时CLI 会构建出两个单独的包,作为你要发布的应用的一部分。
当启用了差异化加载时CLI 会构建出两个单独的包,作为你要发布的应用的一部分。
* The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships fewer polyfills, and results in a smaller bundle size.
* The first bundle contains modern ES2015 syntax. This bundle takes advantage of built-in support in modern browsers, ships fewer polyfills, and results in a smaller bundle size.
第一个包是使用现代的 ES2015 语法,它能发挥现代浏览器内置支持的优势,发布更少的腻子脚本,因此打包尺寸更小。
* The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.
* The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This second bundle is larger, but supports older browsers.
第二个包使用老式的 ES5 语法,包含所有必要的腻子脚本。其打包尺寸更大,但是支持老式浏览器。
第二个包使用老式的 ES5 语法,包含所有必要的腻子脚本。第二个包的尺寸更大,但是支持老式浏览器。
### Differential builds
@ -715,22 +715,22 @@ The following configurations determine your requirements.
会根据下列配置确定你的要求。
* Browsers list
* Browserslist
浏览器列表
The `browserslist` configuration file is included in your application [project structure](guide/file-structure#application-configuration-files) and provides the minimum browsers your application supports. See the [Browserslist spec](https://github.com/browserslist/browserslist) for complete configuration options.
The Browserslist configuration file is included in your application [project structure](guide/file-structure#application-configuration-files) and provides the minimum browsers your application supports. See the [Browserslist spec](https://github.com/browserslist/browserslist) for complete configuration options.
`browserslist` 配置文件包含在应用的[项目结构中](guide/file-structure#application-configuration-files),它提供了本应用打算支持的最低浏览器版本。有关完整的配置选项,请参阅 [Browserslist 规范](https://github.com/browserslist/browserslist)。
`browserslist` 配置文件包含在应用的[项目结构中](guide/file-structure#application-configuration-files),它提供了本应用打算支持的最低浏览器版本。有关完整的配置选项,请参阅 [Browserslist 规范](https://github.com/browserslist/browserslist)。
* TypeScript configuration
TypeScript 配置
In the TypeScript configuration file, `tsconfig.json`, the "target" option in the `compilerOptions` section determines the ECMAScript target version that the code is compiled to.
In the TypeScript configuration file, the "target" option in the `compilerOptions` section determines the ECMAScript target version that the code is compiled to.
Modern browsers support ES2015 natively, while ES5 is more commonly used to support legacy browsers.
在 TypeScript 配置文件 `tsconfig.json` 中,`compilerOptions` 区的 `target` 选项会决定编译后代码的 ECMAScript 目标版本。现代浏览器原生支持 ES2015而 ES5 则更常用于支持老式浏览器。
在 TypeScript 配置文件中,`compilerOptions` 区的 `target` 选项会决定编译后代码的 ECMAScript 目标版本。现代浏览器原生支持 ES2015而 ES5 则更常用于支持老式浏览器。
<div class="alert is-helpful">
@ -781,20 +781,32 @@ Each script tag has a `type="module"` or `nomodule` attribute. Browsers with nat
### 配置差异化加载
Differential loading is supported by default with version 8 and later of the Angular CLI.
For each application project in your workspace, you can configure how builds are produced based on the `browserslist` and `tsconfig.json` configuration files in your application project.
To include differential loading in your application builds, you must configure the Browserslist and TypeScript configuration files in your application project.
Angular CLI 第 8 版及更高版本已默认支持构建差异化加载的发布包。工作空间中的每个应用项目,都可以根据其中的 `browserslist``tsconfig.json` 配置文件来决定发布包的构建方式
要想在构建应用时包含差异化加载特性,你必须修改项目中的 Browserslist 和 TypeScript 配置文件
For a newly created Angular application, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015.
The following examples show a `browserlistrc` and `tsconfig.json` file for a newly created Angular application. In this configuration, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015.
对于新创建的 Angular 应用程序,将忽略 IE 9-11 等旧版浏览器,并且编译目标为 ES2015。
下面的例子展示了新创建的 Angular 应用的 `browserlistrc``tsconfig.json` 文件。
在这份配置中,老式浏览器(比如 IE 9-11都被忽略了其编译目标是 ES2015。
<code-example language="none" header="browserslist">
> 0.5%
last 2 versions
<code-example language="none" header="browserslistrc">
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major version
last 2 iOS major versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
</code-example>
@ -825,29 +837,25 @@ not IE 9-11 # For IE 9-11 support, remove 'not'.
</code-example>
The default configuration creates two builds, with differential loading enabled.
默认配置将创建两个版本,并启用差异化加载。
<div class="alert is-important">
To see which browsers are supported with the default configuration and determine which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead%2C+not+IE+9-11).
To see which browsers are supported and determine which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead%2C+not+IE+9-11).
要查看这种默认配置支持哪些浏览器,以决定哪些设置适合你要支持的浏览器,请参阅“ [浏览器列表兼容性”页面](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+Chrome+41%2C+not+dead%2C+not+IE+9-11)。
要查看浏览器的支持度,以决定哪些设置适合你要支持的浏览器,请参阅“ [浏览器列表兼容性”页面](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+Chrome+41%2C+not+dead%2C+not+IE+9-11)。
</div>
The `browserslist` configuration allows you to ignore browsers without ES2015 support. In this case, a single build is produced.
The Browserslist configuration allows you to ignore browsers without ES2015 support. In this case, a single build is produced.
`browserslist` 配置允许你忽略不支持 ES2015 的浏览器。在这种情况下,将只生成一个版本。
Browserslist 配置允许你忽略不支持 ES2015 的浏览器。在这种情况下,将只生成一个版本。
If your `browserslist` configuration includes support for any legacy browsers, the build target in the TypeScript configuration determines whether the build will support differential loading.
If your Browserslist configuration includes support for any legacy browsers, the build target in the TypeScript configuration determines whether the build will support differential loading.
如果你的 `browserslist` 配置包括对所有旧版浏览器的支持,则 TypeScript 配置中的构建目标将确定该构建是否将支持差异化加载。
如果你的 Browserslist 配置包括对所有旧版浏览器的支持,则 TypeScript 配置中的构建目标将确定该构建是否将支持差异化加载。
{@a configuration-table }
| browserslist | ES target | Build result |
| Browserslist | ES target | Build result |
| -------- | -------- | -------- |
| 浏览器列表 | ES 目标 | 构建结果 |
| ES5 support disabled | es2015 | Single build, ES5 not required |
@ -855,27 +863,6 @@ If your `browserslist` configuration includes support for any legacy browsers, t
| ES5 support enabled | es5 | Single build w/conditional polyfills for ES5 only |
| 启用 ES5 支持 | es5 | 单一构建,按需附带只供 ES5 使用的腻子脚本 |
| ES5 support enabled | es2015 | Differential loading (two builds w/conditional polyfills) |
| 启用 ES5 支持 | es2015 | 差异化加载(两个构建,按需附带腻子脚本) |
### Opting out of differential loading
### 选择性地排除差异化加载
Differential loading can be explicitly disabled if it causes unexpected issues, or if you need to target ES5 specifically for legacy browser support.
如果差异化加载导致了意外问题,或者你需要专门针对旧版浏览器支持而将 ES5 作为目标,则可以显式禁用差异化加载。
To explicitly disable differential loading and create an ES5 build:
要显式禁用差异化加载并创建 ES5 版本,请执行以下操作:
- Enable the `dead` or `IE` browsers in the `browserslist` configuration file by removing the `not` keyword in front of them.
`browserslist` 配置文件中通过移除前面的 `not` 关键字来启用 `dead``IE` 中的浏览器。
- To create a single ES5 build, set the target in the `compilerOptions` to `es5`.
要创建一个单一的 ES5 的构建,把 `compilerOptions` 中的 `target` 设为 `es5`
{@a test-and-serve}

View File

@ -48,6 +48,7 @@ v9 - v12
| Area | API or Feature | May be removed in |
| ---- | -------------- | ----------------- |
| 区域 | API 或特性 | 可能会在什么时候移除 |
| `@angular/bazel` | [`Bazel builder and schematics`](#bazelbuilder) | v10 |
| `@angular/common` | [`ReflectiveInjector`](#reflectiveinjector) | <!--v8--> v11 |
| `@angular/common` | [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | <!--v9--> v11 |
| `@angular/core` | [`CollectionChangeRecord`](#core) | <!--v7--> v11 |
@ -80,8 +81,12 @@ v9 - v12
| `@angular/router` | [`ActivatedRoute` 参数和 `queryParams` 属性](#activatedroute-props) | 未定 |
| template syntax | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector) | <!--v7--> unspecified |
| 模板语法 | [`/deep/``>>>` 和 `::ng-deep`](#deep-component-style-selector) | <!--v7-->未定 |
| browser support | [`IE 9 and 10`](#ie-9-10) | <!--v10--> v11 |
| 浏览器支持 | [`IE 9 和 10`](#ie-9-10) | <!--v10--> v11 |
| browser support | [`IE 9 and 10, IE mobile`](#ie-9-10-and-mobile) | <!--v10--> v11 |
| 浏览器支持 | [`IE 9、10 和 IE mobile`](#ie-9-10-and-mobile) | <!--v10--> v11 |
For information about Angular CDK and Angular Material deprecations, see the [changelog](https://github.com/angular/components/blob/master/CHANGELOG.md).
要了解 Angular CDK 和 Angular Material 的弃用情况,参见[变更记录](https://github.com/angular/components/blob/master/CHANGELOG.md)。
## Deprecated APIs
@ -169,6 +174,15 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
| [All entry points](api/upgrade) | [`@angular/upgrade/static`](api/upgrade/static) | v5 | See [Upgrading from AngularJS](guide/upgrade). |
| [所有入口点](api/upgrade) | [`@angular/upgrade/static`](api/upgrade/static) | v5 | 参见[从 AngularJS 升级](guide/upgrade)。|
{@a platform-webworker-dynamic}
### @angular/platform-webworker-dynamic
| API | Replacement | Deprecation announced | Notes |
| --- | ----------- | --------------------- | ----- |
| API | 替代品 | 宣布弃用 | 备注 |
| [All entry points](api/platform-webworker-dynamic) | none | v8 | See [platform-webworker](#webworker-apps). |
| [所有入口点](api/platform-webworker-dynamic) | 无 | v8 | 参见 [platform-webworker](#webworker-apps). |
{@a upgrade}
### @angular/upgrade
@ -199,6 +213,17 @@ This section lists all of the currently-deprecated features, which includes temp
本节列出了所有当前已弃用的特性,包括模板语法、配置选项,以及前面[已弃用的 API ](#deprecated-apis)部分未列出的其它弃用。它还包括已弃用的 API 用例或 API 组合,以增强上述信息。
{@a bazelbuilder}
### Bazel builder and schematics
### Bazel 构建器及其原理图
Bazel builder and schematics were introduced in Angular Labs to let users try out Bazel without having to manage Bazel version and BUILD files.
This feature has been deprecated. For more information, please refer to the [migration doc](https://github.com/angular/angular/blob/master/packages/bazel/src/schematics/README.md).
Bazel 构建器及其原理图曾经被引入到 Angular Labs 中,以便让用户尝试 Bazel而不用管理 Bazel 的版本和 BUILD 文件。
该特性已经弃用了。欲知详情,参见[迁移文档](https://github.com/angular/angular/blob/master/packages/bazel/src/schematics/README.md)。
{@a wtf}
### Web Tracing Framework integration
@ -604,38 +629,35 @@ export class MyModule {
}
```
{@a ie-9-10}
### IE 9 and 10 support
{@a ie-9-10-and-mobile}
### IE 9, 10, and IE mobile support
### IE 9 和 10 支持
### IE 9、10 和 IE 移动版支持
Support for IE 9 and 10 has been deprecated and will be removed in a future version.
Support for IE 9 and 10 has been deprecated, as well as support for IE Mobile. These will be dropped in a future version.
Supporting outdated browsers like these increases bundle size, code complexity, and test load, and also requires time and effort that could be spent on improvements to the framework.
For example, fixing issues can be more difficult, as a straightforward fix for modern browsers could break old ones that have quirks due to not receiving updates from vendors.
对 IE 9 和 10 的支持已被弃用,并将在以后的版本中删除。支持像这样过时的浏览器会增加打包尺寸,增加代码的复杂性和测试的负担,还需要花费大量的时间和精力来改进框架。例如,修复问题可能会更加困难,因为对于现代浏览器那些直接的修复方式可能会破坏那些没有收到更新的怪异旧版本。
对 IE 9、10 和 IE 移动版的支持已被弃用。它们都将在以后的版本中删除。支持像这样过时的浏览器会增加打包尺寸,增加代码的复杂性和测试的负担,还需要花费大量的时间和精力来改进框架。例如,修复问题可能会更加困难,因为对于现代浏览器那些直接的修复方式可能会破坏那些没有收到更新的怪异旧版本。
The final decision was made on three key points:
它的最终决定取决于三点:
- **Vendor support**: Microsoft dropped support of IE 9 and 10 on 1/12/16, meaning they no longer provide security updates or technical support.
* __Vendor support__: Microsoft dropped support of IE 9 and 10 on 1/12/16, meaning they no longer provide security updates or technical support. Additionally, Microsoft dropped support for Windows 10 Mobile in December 2019.
**供应商支持** :微软于 2016 年 1 月 12 日放弃对 IE 9 和 10 的支持,这意味着他们不再提供安全更新或技术支持。
**供应商支持** :微软于 2016 年 1 月 12 日放弃对 IE 9 和 10 的支持,这意味着他们不再提供安全更新或技术支持。另外,微软在 2019 年 12 月放弃了对 Windows 10 移动版的支持。
- **Usage statistics**: We looked at usage trends for IE 9 and 10 from various sources and all indicated that usage percentages were extremely small (fractions of 1%).
* __Usage statistics__: We looked at usage trends for IE 9 and 10 (as well as IE Mobile) from various sources and all indicated that usage percentages were extremely small (fractions of 1%).
**用法统计** :我们从不同来源查看了 IE 9 和 10 的使用趋势,并且都表明其使用率非常小(不足 1
**用法统计** :我们从不同来源查看了 IE 9 和 10 (和 IE Mobile的使用趋势,并且都表明其使用率非常小(不足 1
- **Feedback from partners**: We also reached out to some of our Angular customers and none expressed concern about dropping IE 9 and 10 support.
* __Feedback from partners__: We also reached out to some of our Angular customers and none expressed concern about dropping IE 9 and 10, nor IE Mobile support.
**来自合作伙伴的反馈意见** :我们还联系了一些 Angular 的客户,没有人担心放弃 IE 9 和 10 的支持。
**来自合作伙伴的反馈意见** :我们还联系了一些 Angular 的客户,没有人担心放弃 IE 9、10 或 IE Mobile 的支持。
{@a wrapped-value}
### `WrappedValue`
### `WrappedValue`
### `WrappedValue`
The purpose of `WrappedValue` is to allow the same object instance to be treated as different for the purposes of change detection.
It is commonly used with the `async` pipe in the case where the `Observable` produces the same instance of the value.
@ -659,13 +681,96 @@ If you rely on the behavior that the same object instance should cause change de
显式调用 [`ChangeDetectorRef.detectChanges()`](api/core/ChangeDetectorRef#detectchanges) 进行强制更新。
{@a deprecated-cli-flags}
## Deprecated CLI APIs and Options
## 弃用的 CLI API 和选项
This section contains a complete list all of the currently deprecated CLI flags.
这部分包含一个当前弃用的 CLI 标志的完整列表。
### @angular-devkit/build-angular
| API/Option | May be removed in | Notes |
| ---------- | ----------------- | ----- |
| API/选项 | 可能删除于 | 备注 |
| `i18nFile` | <!--v9--> v11 | Specified in the project locale configuration in version 9 and later. |
| `i18nFile` | <!--v9--> v11 | 在版本 9 及更高版本的项目区域配置中指定。 |
| `i18nFormat` | <!--v9--> v11 | Format is now automatically detected. |
| `i18nFormat` | <!--v9--> v11 | 格式现在是自动检测的。 |
| `i18nLocale` | <!--v9--> v11 | New [localization option](/guide/i18n#localize-config) in version 9 and later. |
| `i18nLocale` | <!--v9--> v11 | 版本 9 和更高版本中新的[本地化选项](/guide/i18n#localize-config) 。 |
| `lazyModules` | <!--v9--> v11 | Used with deprecated SystemJsNgModuleLoader. |
| `lazyModules` | <!--v9--> v11 | 与已弃用的 SystemJsNgModuleLoader 配合使用。 |
| `rebaseRootRelativeCssUrls` | <!--v8--> v11 | Intended only to assist with specific migration issues. |
| `rebaseRootRelativeCssUrls` | <!--v8--> v11 | 仅用于帮助解决特定的迁移问题。 |
| `scripts[].lazy` | <!--v8--> v11 | Renamed to `scripts[].inject`. |
| `scripts[].lazy` | <!--v8--> v11 | 已改名为 `scripts[].inject`. |
| `styles[].lazy` | <!--v8--> v11 | Renamed to `styles[].inject`. |
| `styles[].lazy` | <!--v8--> v11 | 已改名为 `styles[].inject` 。 |
| `i18nFormat` | <!--v9--> v11 | Renamed to `format` to simplify the user experience. |
| `i18nFormat` | <!--v9--> v11 | 已改名为 `format`,以简化用户体验。 |
| `i18nLocale` | <!--v9--> v11 | Redundant with projects source locale. |
| `i18nLocale` | <!--v9--> v11 | 是项目的源语言环境的冗余项。 |
| `scripts[].lazy` | <!--v8--> v11 | Renamed to `scripts[].inject`. |
| `scripts[].lazy` | <!--v8--> v11 | 已改名为 `scripts[].inject`. |
| `styles[].lazy` | <!--v8--> v11 | Renamed to `styles[].inject`. |
| `styles[].lazy` | <!--v8--> v11 | 已改名为 `styles[].inject` 。 |
| `i18nFile` | <!--v9--> v11 | Specified in the project locale configuration in version 9 and later. |
| `i18nFile` | <!--v9--> v11 | 在版本 9 及更高版本的项目区域设置配置中指定。 |
| `i18nFormat` | <!--v9--> v11 | Format is now automatically detected. |
| `i18nFormat` | <!--v9--> v11 | 格式现在是自动检测的。 |
| `i18nLocale` | <!--v9--> v11 | New [localization option](/guide/i18n#localize-config) in version 9 and later. |
| `i18nLocale` | <!--v9--> v11 | 版本 9 和更高版本中新的[本地化选项](/guide/i18n#localize-config) 。 |
| `lazyModules` | <!--v9--> v11 | Used with deprecated SystemJsNgModuleLoader. |
| `lazyModules` | <!--v9--> v11 | 与已弃用的 SystemJsNgModuleLoader 配合使用。 |
### @angular-devkit/core
| API/Option | May be removed in | Notes |
| ---------- | ----------------- | ----- |
| API/选项 | 可能删除于 | 备注 |
| `ModuleNotFoundException` | <!--v8--> v10 | Not used within projects. Used with Tooling API only. Not Yarn PnP compatible and not used in the Angular CLI. Use Node.js [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options). |
| `ModuleNotFoundException` | <!--v8--> v10 | 在项目中没用过。仅与 Tooling API 一起使用。 与 Yarn 的 PnP 不兼容,并且没有用在 Angular CLI 中。使用 Node.js 的[require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) 。 |
| `resolve` | <!--v8--> v10 | Not used within projects. Used with Tooling API only. Not Yarn PnP compatible and not used in the Angular CLI. Use Node.js [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options). |
| `resolve` | <!--v8--> v10 | 在项目中没用过。仅与 Tooling API 一起使用。与 Yarn 的 PnP 不兼容,并且没有用在 Angular CLI 中。使用 Node.js 的 [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) 。 |
| `setResolveHook` | <!--v8--> v10 | Not used within projects. Used with Tooling API only. Not Yarn PnP compatible and not used in the Angular CLI. Use Node.js [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options). |
| `setResolveHook` | <!--v8-->v10 | 在项目中没用过。仅与 Tooling API 一起使用。与 Yarn 的 PnP 不兼容,并且没有用在 Angular CLI 中。使用 Node.js 的 [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) 。 |
| `ResolveOptions` | <!--v8--> v10 | Not used within projects. Used with Tooling API only. Not Yarn PnP compatible and not used in the Angular CLI. Use Node.js [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options). |
| `ResolveOptions` | <!--v8-->v10 | 在项目中没用过。仅与 Tooling API 一起使用。与 Yarn 的 PnP 不兼容,并且没有用在 Angular CLI 中。使用 Node.js 的 [require.resolve](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) 。 |
| `terminal` | <!--v8--> v10 | Unused implementation of terminal codes (color). |
| `terminal` | <!--v8-->v10 | 未用过的终端代码实现(颜色)。 |
| `isObservable` | <!--v8--> v10 | Not used within projects. Used with Tooling API only. Use `isObservable` function from the `rxjs` package. |
| `isObservable` | <!--v8-->v10 | 在项目中没用过。仅与 Tooling API 一起使用。在 `rxjs` 包中使用 `isObservable` 函数。 |
### @ngtools/webpack
| API/Option | May be removed in | Notes |
| ---------- | ----------------- | ----- |
| API/选项 | 可能删除于 | 备注 |
| `discoverLazyRoutes` | <!--v9--> TBD | Used with deprecated SystemJsNgModuleLoader. |
| `discoverLazyRoutes` | <!--v9--> TBD | 与已弃用的 SystemJsNgModuleLoader 配合使用。 |
| `additionalLazyModules` | <!--v9--> TBD | Used with deprecated SystemJsNgModuleLoader. |
| `additionalLazyModules` | <!--v9--> TBD | 与已弃用的 SystemJsNgModuleLoader 配合使用。 |
| `additionalLazyModuleResources` | <!--v9--> TBD | Used with deprecated SystemJsNgModuleLoader. |
| `additionalLazyModuleResources` | <!--v9--> TBD | 与已弃用的 SystemJsNgModuleLoader 配合使用。 |
### @schematics/angular
| API/Option | May be removed in | Notes |
| ---------- | ----------------- | ----- |
| API/选项 | 可能删除于 | 备注 |
| `entryComponent` | <!--v9--> TBD | No longer needed with Ivy. |
| `entryComponent` | <!--v9-->TBD | Ivy 中不再需要了。 |
{@a removed}
## Removed APIs
## 删除的 API
The following APIs have been removed starting with version 10.0.0\*:
The following APIs have been removed starting with version 10.0.0*:
从 10.0.0 版开始,已经删除了以下 API
@ -679,9 +784,9 @@ The following APIs have been removed starting with version 10.0.0\*:
| `@angular/core` | Style Sanitization | no action needed | See [style sanitization API removal](#style-sanitization) for more info |
| `@angular/core` | 样式的无害化处理 | 不需要任何动作 | 详情参阅[移除了 样式无害化 API](#style-sanitization) |
\*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
\*要查看版本 9 中移除的 API请查看[版本 9 文档站](https://v9.angular.io/guide/deprecations#removed)上本指南。
*要查看版本 9 中移除的 API请查看[版本 9 文档站](https://v9.angular.io/guide/deprecations#removed)上本指南*
{@a esm5-fesm5}
@ -751,39 +856,13 @@ In practical terms, the `package.json` of all `@angular` packages has changed in
For more information about the npm package format, see the [Angular Package Format spec](https://goo.gl/jB3GVv).
关于 npm 软件包格式的更多信息,请参见 [Angular 软件包格式规范](https://goo.gl/jB3GVv)。
{@a ie-9-10}
### IE 9 and 10 support
### IE 9 和 10 支持
Support for IE 9 and 10 has been deprecated and will be removed in a future version.
Supporting outdated browsers like these increases bundle size, code complexity, and test load, and also requires time and effort that could be spent on improvements to the framework.
For example, fixing issues can be more difficult, as a straightforward fix for modern browsers could break old ones that have quirks due to not receiving updates from vendors.
对 IE 9 和 10 的支持已被弃用,并将在以后的版本中删除。支持像这样过时的浏览器会增加打包尺寸,增加代码的复杂性和测试的负担,还需要花费大量的时间和精力来改进框架。例如,修复问题可能会更加困难,因为对于现代浏览器那些直接的修复方式可能会破坏那些没有收到更新的怪异旧版本。
The final decision was made on three key points:
它的最终决定取决于三点:
- **Vendor support**: Microsoft dropped support of IE 9 and 10 on 1/12/16, meaning they no longer provide security updates or technical support.
**供应商支持** :微软于 2016 年 1 月 12 日放弃对 IE 9 和 10 的支持,这意味着他们不再提供安全更新或技术支持。
- **Usage statistics**: We looked at usage trends for IE 9 and 10 from various sources and all indicated that usage percentages were extremely small (fractions of 1%).
**用法统计** :我们从不同来源查看了 IE 9 和 10 的使用趋势,并且都表明其使用率非常小(不足 1
- **Feedback from partners**: We also reached out to some of our Angular customers and none expressed concern about dropping IE 9 and 10 support.
**来自合作伙伴的反馈意见** :我们还联系了一些 Angular 的客户,没有人担心放弃 IE 9 和 10 的支持。
{@a removed}
## Removed APIs
## 删除的 API
The following APIs have been removed starting with version 10.0.0\*:
The following APIs have been removed starting with version 10.0.0*:
从 10.0.0 版开始,已经删除了以下 API
@ -797,86 +876,10 @@ The following APIs have been removed starting with version 10.0.0\*:
| `@angular/core` | Style Sanitization | no action needed | See [style sanitization API removal](#style-sanitization) for more info |
| `@angular/core` | 样式的无害化处理 | 不需要任何动作 | 详情参阅[移除了 样式无害化 API](#style-sanitization) |
\*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
\*要查看版本 9 中移除的 API请查看[版本 9 文档站](https://v9.angular.io/guide/deprecations#removed)上本指南。
*要查看版本 9 中移除的 API请查看[版本 9 文档站](https://v9.angular.io/guide/deprecations#removed)上的这份指南。*
<!-- The following anchor is used by redirects from the removed API pages. Do not change or remove. -->
{@a http}
### @angular/http
<!--
Deprecation announced in version 5
https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced)
-->
The entire [`@angular/http`](http://v7.angular.io/api/http) package has been removed. Use [`@angular/common/http`](api/common/http) instead.
已删除了整个 [`@angular/http`](http://v7.angular.io/api/http) 包。请改用 [`@angular/common/http`](api/common/http)。
The new API is a smaller, easier, and more powerful way to make HTTP requests in Angular.
The new API simplifies the default ergonomics: There is no need to map by invoking the `.json()` method.
It also supports typed return values and interceptors.
新的 API 用一种更小、更简单、更强大的方式来在 Angular 中发起 HTTP 请求。新的 API 简化成了更人性化的默认设计:不用再通过调用 `.json()` 方法进行映射。它还支持带类型的返回值,以及拦截器。
To update your apps:
要更新你的应用:
* Replace `HttpModule` with [`HttpClientModule`](api/common/http/HttpClientModule) (from [`@angular/common/http`](api/common/http)) in each of your modules.
在每个模块中用 [`HttpClientModule`](api/common/http/HttpClientModule) (来自 [`@angular/common/http`](api/common/http) )代替 `HttpModule`
* Replace the `Http` service with the [`HttpClient`](api/common/http/HttpClient) service.
用 [`HttpClient`](api/common/http/HttpClient) 服务代替 `Http` 服务。
* Remove any `map(res => res.json())` calls. They are no longer needed.
删除所有 `map(res => res.json())` 调用,它们没用了。
For more information about using `@angular/common/http`, see the [HttpClient guide](guide/http "HTTP Client guide").
有关使用 `@angular/common/http` 的更多信息,请参见 [HttpClient 指南](guide/http "HTTP Client 指南")。
| `@angular/http` | Closest replacement in `@angular/common/http` |
| --------------- | --------------------------------------------- |
| `@angular/http` | `@angular/common/http` 中最接近的替代品 |
| `BaseRequestOptions` | [`HttpRequest`](/api/common/http/HttpRequest) |
| `BaseResponseOptions` | [`HttpResponse`](/api/common/http/HttpResponse) |
| `BrowserXhr` | |
| `Connection` | [`HttpBackend`](/api/common/http/HttpBackend) |
| `ConnectionBackend` | [`HttpBackend`](/api/common/http/HttpBackend) |
| `CookieXSRFStrategy` | [`HttpClientXsrfModule`](/api/common/http/HttpClientXsrfModule) |
| `Headers` | [`HttpHeaders`](/api/common/http/HttpHeaders) |
| `Http` | [`HttpClient`](/api/common/http/HttpClient) |
| `HttpModule` | [`HttpClientModule`](/api/common/http/HttpClientModule) |
| `Jsonp` | [`HttpClient`](/api/common/http/HttpClient) |
| `JSONPBackend` | [`JsonpClientBackend`](/api/common/http/JsonpClientBackend) |
| `JSONPConnection` | [`JsonpClientBackend`](/api/common/http/JsonpClientBackend) |
| `JsonpModule` | [`HttpClientJsonpModule`](/api/common/http/HttpClientJsonpModule) |
| `QueryEncoder` | [`HttpUrlEncodingCodec`](/api/common/http/HttpUrlEncodingCodec) |
| `ReadyState` | [`HttpBackend`](/api/common/http/HttpBackend) |
| `Request` | [`HttpRequest`](/api/common/http/HttpRequest) |
| `RequestMethod` | [`HttpClient`](/api/common/http/HttpClient) |
| `RequestOptions` | [`HttpRequest`](/api/common/http/HttpRequest) |
| `RequestOptionsArgs` | [`HttpRequest`](/api/common/http/HttpRequest) |
| `Response` | [`HttpResponse`](/api/common/http/HttpResponse) |
| `ResponseContentType` | [`HttpClient`](/api/common/http/HttpClient) |
| `ResponseOptions` | [`HttpResponse`](/api/common/http/HttpResponse) |
| `ResponseOptionsArgs` | [`HttpResponse`](/api/common/http/HttpResponse) |
| `ResponseType` | [`HttpClient`](/api/common/http/HttpClient) |
| `URLSearchParams` | [`HttpParams`](/api/common/http/HttpParams) |
| `XHRBackend` | [`HttpXhrBackend`](/api/common/http/HttpXhrBackend) |
| `XHRConnection` | [`HttpXhrBackend`](/api/common/http/HttpXhrBackend) |
| `XSRFStrategy` | [`HttpClientXsrfModule`](/api/common/http/HttpClientXsrfModule) |
| `@angular/http/testing` | Closest replacement in `@angular/common/http/testing` |
| ----------------------- | ----------------------------------------------------- |
| `@angular/http/testing` | `@angular/common/http/testing` 中最接近的替代品 |
| `MockBackend` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
| `MockConnection` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
{@a style-sanitization}

View File

@ -902,7 +902,8 @@ JSON 文件中不支持代码片断标记,因为 JSON 文件中的注释是被
</div>
#### *#docregion*
#### _#docregion_
The _#docregion_ is the most important kind of code snippet markup.
@ -929,7 +930,7 @@ The `src/main.ts` is a simple example of a file with a single _#docregion_ at th
</div>
#### Named *#docregions*
#### Named _#docregions_
#### 命名的 *#docregions*
@ -1375,7 +1376,7 @@ If you do, be sure to set the `id` attribute - not the `name` attribute! The doc
</div>
## Alerts and Calllouts
## Alerts and Callouts
## 警报和 Calllouts

View File

@ -250,14 +250,13 @@ The recently-developed [custom elements](https://developer.mozilla.org/en-US/doc
</tr>
</table>
In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the `target: "es2015"` property in their project's `tsconfig.json`. As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code.
In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the `target: "es2015"` property in their project's [TypeScript configuration file](/guide/typescript-configuration). As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code.
对于原生支持了自定义元素的浏览器,该规范要求开发人员使用 ES2016 的类来定义自定义元素 —— 开发人员可以在项目的 `tsconfig.json` 中设置 `target: "es2015"` 属性来满足这一要求。并不是所有浏览器都支持自定义元素和 ES2015开发人员也可以选择使用腻子脚本来让它支持老式浏览器和 ES5 的代码。
对于原生支持了自定义元素的浏览器,该规范要求开发人员使用 ES2016 的类来定义自定义元素 —— 开发人员可以在项目的 [TypeScript 配置文件](/guide/typescript-configuration)中设置 `target: "es2015"` 属性来满足这一要求。并不是所有浏览器都支持自定义元素和 ES2015开发人员也可以选择使用腻子脚本来让它支持老式浏览器和 ES5 的代码。
Use the [Angular CLI](cli) to automatically set up your project with the correct polyfill: `ng add @angular/elements --name=*your_project_name*`.
使用 [Angular CLI](https://cli.angular.io/) 可以自动为你的项目添加正确的腻子脚本:`ng add @angular/elements --name=*your_project_name*`
Use the [Angular CLI](cli) to automatically set up your project with the correct polyfill: `ng add @angular/elements --project=*your_project_name*`.
使用 [Angular CLI](https://cli.angular.io/) 可以自动为你的项目添加正确的腻子脚本:`ng add @angular/elements --project=*your_project_name*`
- For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills).
要了解关于腻子脚本的更多信息,参见[腻子脚本的相关文档](https://www.webcomponents.org/polyfills)。

View File

@ -69,9 +69,10 @@ The top level of the workspace contains workspace-wide configuration files, conf
| `src/` | Source files for the root-level application project. |
| `src/` | 根项目的源文件。|
| `node_modules/` | Provides [npm packages](guide/npm-packages) to the entire workspace. Workspace-wide `node_modules` dependencies are visible to all projects. |
| `README.md` | 根应用的介绍性文档。 |
| `tsconfig.json` | Default [TypeScript](https://www.typescriptlang.org/) configuration for projects in the workspace. |
| `tsconfig.json` | The `tsconfig.json` file is a ["Solution Style"](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#support-for-solution-style-tsconfigjson-files) TypeScript configuration file. Code editors and TypeScripts language server use this file to improve development experience. Compilers do not use this file. |
| `tsconfig.json` | 工作空间中各个项目的默认 [TypeScript](https://www.typescriptlang.org/) 配置。 |
| `tsconfig.base.json` | The base [TypeScript](https://www.typescriptlang.org/) configuration for projects in the workspace. All other configuration files inherit from this base file. For more information, see the [Configuration inheritance with extends](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends) section of the TypeScript documentation.|
| `tsconfig.base.json` | 供工作空间中所有项目使用的基础 [TypeScript](https://www.typescriptlang.org/) 配置。所有其它配置文件都继承自这个基础文件。欲知详情,参见 TypeScript 文档中的[使用 extends 进行配置继承](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends)部分|
| `tslint.json` | Default [TSLint](https://palantir.github.io/tslint/) configuration for projects in the workspace. |
| `tslint.json` | 工作空间中各个项目的默认 [TSLint](https://palantir.github.io/tslint/) 配置。 |
@ -123,8 +124,8 @@ Files at the top level of `src/` support testing and running your application. S
| `favicon.ico` | 用作该应用在标签栏中的图标。 |
| `index.html` | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or`<link>` tags here manually. |
| `index.html` | 当有人访问你的站点时,提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件,所以你通常不用手动添加任何 `<script>``<link>` 标签。 |
| `main.ts` | The main entry point for your application. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |
| `main.ts` | 应用的主要切入点。用 [JIT 编译器](https://angular.cn/guide/glossary#jit)编译应用然后引导应用的根模块AppModule在浏览器中运行。你也可以在不改变任何代码的情况下改用 [AOT 编译器](https://angular.io/guide/aot-compiler),只要在 CLI 的 `build``serve` 命令中加上 `--aot` 标志就可以了。 |
| `main.ts` | The main entry point for your application. Compiles the application with the [JIT compiler](guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |
| `main.ts` | 应用的主要切入点。用 [JIT 编译器](guide/glossary#jit)编译应用然后引导应用的根模块AppModule在浏览器中运行。你也可以在不改变任何代码的情况下改用 [AOT 编译器](https://angular.io/guide/aot-compiler),只要在 CLI 的 `build``serve` 命令中加上 `--aot` 标志就可以了。 |
| `polyfills.ts` | Provides polyfill scripts for browser support. |
| `polyfills.ts` | 为浏览器支持提供了腻子polyfill脚本。 |
| `styles.sass` | Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project. |
@ -132,6 +133,12 @@ Files at the top level of `src/` support testing and running your application. S
| `test.ts` | The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file. |
| `test.ts` | 单元测试的主入口点,带有一些 Angular 特有的配置。你通常不需要编辑这个文件。 |
<div class="alert is-helpful">
If you create an application using Angular's strict mode, you will also have an additional `package.json` file in the `src/app` directory. For more information, see [Strict mode](/guide/strict-mode).
</div>
{@a app-src}
Inside the `src/` folder, the `app/` folder contains your project's logic and data.
@ -152,6 +159,8 @@ Angular components, templates, and styles go here.
| `app/app.component.spec.ts` | 为根组件 `AppComponent` 定义了一个单元测试。 |
| `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here. |
| `app/app.module.ts` | 定义了名为 `AppModule` 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 `AppComponent`。当你向应用中添加更多组件时,它们也必须在这里声明。 |
| `app/package.json` | This file is generated only in applications created using `--strict` mode. This file is not used by package managers. It is used to tell the tools and bundlers whether the code under this directory is free of non-local [side-effects](guide/strict-mode#side-effect). |
| `app/package.json` | 此文件只会出现在使用 `--strict` 模式创建的应用中。此文件不是供包管理器使用的。它用来告诉各种工具和打包器,这个目录下的代码是否没有非局部化的[副作用](guide/strict-mode#side-effect)。 |
### Application configuration files
@ -162,9 +171,9 @@ For a multi-project workspace, project-specific configuration files are in the p
根应用的配置文件位于工作空间的根目录下。对于多项目工作空间,项目专属的配置文件位于项目根目录 `projects/project-name/`
Project-specific [TypeScript](https://www.typescriptlang.org/) configuration files inherit from the workspace-wide `tsconfig.json`, and project-specific [TSLint](https://palantir.github.io/tslint/) configuration files inherit from the workspace-wide `tslint.json`.
Project-specific [TypeScript](https://www.typescriptlang.org/) configuration files inherit from the workspace-wide `tsconfig.base.json`, and project-specific [TSLint](https://palantir.github.io/tslint/) configuration files inherit from the workspace-wide `tslint.json`.
项目专属的 [TypeScript](https://www.typescriptlang.org/) 配置文件继承自工作区范围内的 `tsconfig.json`,而项目专属的 [TSLint](https://palantir.github.io/tslint/) 配置文件则继承自全工作区级内的 `tslint.json`
项目专属的 [TypeScript](https://www.typescriptlang.org/) 配置文件继承自工作区范围内的 `tsconfig.base.json`,而项目专属的 [TSLint](https://palantir.github.io/tslint/) 配置文件则继承自全工作区级内的 `tslint.json`
| APPLICATION-SPECIFIC CONFIG FILES | PURPOSE |
| :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@ -262,9 +271,9 @@ my-workspace/
## 库项目文件
When you generate a library using the CLI (with a command such as `ng generate library my-lib`), the generated files go into the projects/ folder of the workspace. For more information about creating your own libraries, see [Creating Libraries](https://angular.io/guide/creating-libraries).
When you generate a library using the CLI (with a command such as `ng generate library my-lib`), the generated files go into the projects/ folder of the workspace. For more information about creating your own libraries, see [Creating Libraries](guide/creating-libraries).
当你使用 CLI 命令(例如 `ng generate library my-lib`)生成一个库时,所生成的文件会放在工作区的 `projects/` 文件夹中。关于如何创建自己的库的更多信息,请参阅[创建库](https://angular.cn/guide/creating-libraries)一章。
当你使用 CLI 命令(例如 `ng generate library my-lib`)生成一个库时,所生成的文件会放在工作区的 `projects/` 文件夹中。关于如何创建自己的库的更多信息,请参阅[创建库](guide/creating-libraries)一章。
Libraries (unlike applications and their associated e2e projects) have their own `package.json` configuration files.

View File

@ -123,7 +123,7 @@ In a reactive form, the source of truth is the component class.
Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class.
Angular then calls these functions whenever the value of the control changes.
在响应式表单中,权威数据源是其组件类。不应该通过模板上的属性来添加验证器,而应该在组件类中直接把验证器函数添加到表单控件模型上(`FormControl`。然后一旦控件发生了变化Angular 就会调用这些函数。
在响应式表单中,事实之源是其组件类。不应该通过模板上的属性来添加验证器,而应该在组件类中直接把验证器函数添加到表单控件模型上(`FormControl`。然后一旦控件发生了变化Angular 就会调用这些函数。
### Validator functions

View File

@ -12,36 +12,47 @@ Angular provides two different approaches to handling user input through forms:
Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。
两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径。
Reactive and template-driven forms process and manage form data differently. Each offers different advantages.
不过,响应式表单和模板驱动表单在如何处理和管理表单和表单数据方面有所不同。各有优势。
**In general:**
**一般来说:**
* **Reactive forms** are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
**响应式表单**更健壮:它们的可扩展性、可复用性和可测试性更强。
如果表单是应用中的关键部分,或者你已经准备使用响应式编程模式来构建应用,请使用响应式表单。
* **Template-driven forms** are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.
**模板驱动表单**在往应用中添加简单的表单时非常有用,比如邮件列表的登记表单。它们很容易添加到应用中,但是不像响应式表单那么容易扩展。如果你有非常基本的表单需求和简单到能用模板管理的逻辑,请使用模板驱动表单。
This guide provides information to help you decide which type of form works best for your situation. It introduces the common building blocks used by both approaches. It also summarizes the key differences between the two approaches, and demonstrates those differences in the context of setup, data flow, and testing.
本指南提供的信息可以帮你确定哪种方式最适合你的情况。它介绍了这两种方法所用的公共构造块,还总结了两种方式之间的关键区别,并在建立、数据流和测试等不同的情境下展示了这些差异。
<div class="alert is-helpful">
## Prerequisites
**Note:** For complete information about each kind of form, see [Reactive Forms](guide/reactive-forms) and [Template-driven Forms](guide/forms).
## 先决条件
**注意:**要了解这些表单的详情,参见[响应式表单](guide/reactive-forms)和[模板驱动表单](guide/forms)。
This guide assumes that you have a basic understanding of the following.
</div>
本指南假设您对以下内容有基本的了解。
## Key differences
* [TypeScript](https://www.typescriptlang.org/docs/home.html "The TypeScript language") and HTML5 programming.
[TypeScript](https://www.typescriptlang.org/docs/home.html "TypeScript 语言")和 HTML5 编程。
* Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
Angular 的应用设计基础,就像[Angular Concepts 中](guide/architecture "Angular 概念简介。")描述的那样。
* The basics of [Angular template syntax](guide/architecture-components#template-syntax "Template syntax intro").
[Angular 模板语法](guide/architecture-components#template-syntax "模板语法简介")的基础知识。
## Choosing an approach
## 选择一种方法
Reactive forms and template-driven forms process and manage form data differently. Each approach offers different advantages.
响应式表单和模板驱动表单以不同的方式处理和管理表单数据。每种方法都有各自的优点。
* **Reactive forms** provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
**响应式表单**提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比,更加健壮:它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分,或者你已经在使用响应式表单来构建应用,那就使用响应式表单。
* **Template-driven forms** rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.
**模板驱动表单**依赖**模板中的**指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用,比如电子邮件列表注册表单。它们很容易添加到应用中,但在扩展性方面不如响应式表单。如果你有可以只在模板中管理的非常基本的表单需求和逻辑,那么模板驱动表单就很合适。
### Key differences
## 关键差异
@ -54,29 +65,60 @@ The table below summarizes the key differences between reactive and template-dri
td, th {vertical-align: top};
</style>
|| Reactive | Template-driven |
|--- |--- |--- |
|| 响应式 | 模板驱动 |
| Setup (form model) | More explicit, created in component class | Less explicit, created by directives |
| 建立(表单模式) | 显式,在组件类中创建。| 隐式,由组件创建。|
| Data model | Structured | Unstructured |
| 数据模式 | 结构化 | 非结构化 |
| | Reactive | Template-driven |
| --- | -------- | --------------- |
| | 响应式 | 模板驱动 |
| [Setup of form model](#setup) | Explicit, created in component class | Implicit, created by directives |
| [建立表单模型](#setup) | 显式的,在组件类中创建 | 隐式的,由指令创建 |
| [Data model](#data-flow-in-forms) | Structured and immutable | Unstructured and mutable |
| [数据模型](#data-flow-in-forms) | 结构化和不可变的 | 非结构化和可变的 |
| Predictability | Synchronous | Asynchronous |
| 可预测性 | 同步 | 异步 |
| Form validation | Functions | Directives |
| 表单验证 | 函数 | 指令 |
| Mutability | Immutable | Mutable |
| 可变性 | 不可变 | 可变 |
| Scalability | Low-level API access | Abstraction on top of APIs |
| 可伸缩性 | 访问底层 API | 在 API 之上的抽象 |
| [Form validation](#validation) | Functions | Directives |
| [表单验证](#validation) | 函数 | 指令 |
## Common foundation
### Scalability
## 共同基础
### 可伸缩性
Both reactive and template-driven forms share underlying building blocks.
If forms are a central part of your application, scalability is very important. Being able to reuse form models across components is critical.
如果表单是应用程序的核心部分,那么可伸缩性就非常重要。能够跨组件复用表单模型是至关重要的。
Reactive forms are more scalable than template-driven forms. They provide direct access to the underlying form API, and synchronous access to the form data model, making creating large-scale forms easier.
Reactive forms require less setup for testing, and testing does not require deep understanding of change detection to properly test form updates and validation.
响应式表单比模板驱动表单更有可伸缩性。它们提供对底层表单 API 的直接访问,以及对表单数据模型的同步访问,从而可以更轻松地创建大型表单。响应式表单需要较少的测试设置,测试时不需要深入理解变更检测,就能正确测试表单更新和验证。
Template-driven forms focus on simple scenarios and are not as reusable.
They abstract away the underlying form API, and provide only asynchronous access to the form data model.
The abstraction of template-driven forms also affects testing.
Tests are deeply reliant on manual change detection execution to run properly, and require more setup.
模板驱动表单专注于简单的场景,可复用性没那么高。它们抽象出了底层表单 API并且只提供对表单数据模型的异步访问。对模板驱动表单的这种抽象也会影响测试。测试程序非常依赖于手动触发变更检测才能正常运行并且需要进行更多设置工作。
{@a setup}
## Setting up the form model
## 建立表单模型
Both reactive and template-driven forms track value changes between the form input elements that users interact with and the form data in your component model.
The two approaches share underlying building blocks, but differ in how you create and manage the common form-control instances.
响应式表单和模板驱动型表单都会跟踪用户与之交互的表单输入元素和组件模型中的表单数据之间的值变更。这两种方法共享同一套底层构建块,只在如何创建和管理常用表单控件实例方面有所不同。
### Common form foundation classes
### 常用表单基础类
Both reactive and template-driven forms are built on the following base classes.
响应式表单和模板驱动表单都建立在下列基础类之上。
响应式表单和模板驱动表单共享了一些底层构造块。
* `FormControl` tracks the value and validation status of an individual form control.
@ -94,97 +136,100 @@ Both reactive and template-driven forms share underlying building blocks.
`ControlValueAccessor` 用于在 Angular 的 `FormControl` 实例和原生 DOM 元素之间创建一个桥梁。
See the [Form model setup](#setup-the-form-model) section below for an introduction to how these control instances are created and managed with reactive and template-driven forms. Further details are provided in the [data flow section](#data-flow-in-forms) of this guide.
参见稍后的[建立表单模型](#setup-the-form-model)部分,了解如何使用响应式表单和模板驱动表单来创建和管理这些控件实例。本章的[数据流](#data-flow-in-forms)部分有更详细的介绍。
{@a setup-the-form-model}
## Form model setup
## 建立表单模型
Reactive and template-driven forms both use a form model to track value changes between Angular forms and form input elements. The examples below show how the form model is defined and created.
响应式表单和模板驱动表单都是用表单模型来跟踪 Angular 表单和表单输入元素之间值的变化。下面的例子展示了如何定义和创建表单模型。
### Setup in reactive forms
### 在响应式表单中建立
### 建立响应式表单
Here's a component with an input field for a single control implemented using reactive forms.
With reactive forms, you define the form model directly in the component class.
The `[formControl]` directive links the explicitly created `FormControl` instance to a specific form element in the view, using an internal value accessor.
下面是一个带有输入字段的组件,它使用响应式表单实现了单个控件。
对于响应式表单,你可以直接在组件类中定义表单模型。`[formControl]` 指令会通过内部值访问器来把显式创建的 `FormControl` 实例与视图中的特定表单元素联系起来。
The following component implements an input field for a single control, using reactive forms. In this example, the form model is the `FormControl` instance.
下面的组件使用响应式表单为单个控件实现了一个输入字段。在这个例子中,表单模型是 `FormControl` 实例。
<code-example path="forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts">
</code-example>
The source of truth provides the value and status of the form element at a given point in time. In reactive forms, the form model is the source of truth. In the example above, the form model is the `FormControl` instance.
Figure 1 shows how, in reactive forms, the form model is the source of truth; it provides the value and status of the form element at any given point in time, through the `[formControl]` directive on the input element.
图 1 展示了在响应式表单中表单模型是如何成为事实之源source of truth的。它通过输入元素上的 `[formControl]` 指令,在任何给定的时间点提供表单元素的值和状态。
**Figure 1.** *Direct access to forms model in a reactive form.*
**图 1.** *在响应式表单中直接访问表单模型*
权威数据源负责提供在指定时间点上表单元素的值和状态。在响应式表单中,表单模式充当权威数据源。上例中的表单模型就是 `FormControl` 的实例。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/key-diff-reactive-forms.png" alt="Reactive forms key differences">
</div>
With reactive forms, the form model is explicitly defined in the component class. The reactive form directive (in this case, `FormControlDirective`) then links the existing `FormControl` instance to a specific form element in the view using a value accessor (`ControlValueAccessor` instance).
在响应式表单中,表单模型是显式定义在组件类中的。接着,响应式表单指令(这里是 `FormControlDirective`)会把这个现有的表单控件实例通过数据访问器(`ControlValueAccessor` 的实例)来指派给视图中的表单元素。
### Setup in template-driven forms
### 在模板驱动表单中建立
### 建立模板驱动表单
Here's the same component with an input field for a single control implemented using template-driven forms.
In template-driven forms, the form model is implicit, rather than explicit. The directive `NgModel` creates and manages a `FormControl` instance for a given form element.
下面是同一个带有输入字段的组件,它使用模板驱动表单实现了单个控件。
在模板驱动表单中,表单模型是隐式的,而不是显式的。指令 `NgModel` 为指定的表单元素创建并管理一个 `FormControl` 实例。
The following component implements the same input field for a single control, using template-driven forms.
下面的组件使用模板驱动表单为单个控件实现了同样的输入字段。
<code-example path="forms-overview/src/app/template/favorite-color/favorite-color.component.ts">
</code-example>
In template-driven forms, the source of truth is the template.
In a template-driven form the source of truth is the template. You do not have direct programmatic access to the `FormControl` instance, as shown in Figure 2.
在模板驱动表单中,其事实之源就是模板。你没有对 `FormControl` 实例的直接编程访问,如图 2 所示。
**Figure 2.** *Indirect access to forms model in a template-driven form.*
**图 2.** *模板驱动表单中对表单模型的间接访问。*
在模板驱动表单中,权威数据源是模板。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/key-diff-td-forms.png" alt="Template-driven forms key differences">
</div>
The abstraction of the form model promotes simplicity over structure. The template-driven form directive `NgModel` is responsible for creating and managing the `FormControl` instance for a given form element. It's less explicit, but you no longer have direct control over the form model.
{@a data-flow-in-forms}
表单模型的抽象促进了结构的简化。模板驱动表单的 `NgModel` 指令负责创建和管理指定表单元素上的表单控件实例。它不那么明显,但你不必再直接操纵表单模型了。
## Data flow in forms
## 表单中的数据流
When building forms in Angular, it's important to understand how the framework handles data flowing from the user or from programmatic changes. Reactive and template-driven forms follow two different strategies when handling form input. The data flow examples below begin with the favorite color input field example from above, and then show how changes to favorite color are handled in reactive forms compared to template-driven forms.
When an application contains a form, Angular must keep the view in sync with the component model and the component model in sync with the view.
As users change values and make selections through the view, the new values must be reflected in the data model.
Similarly, when the program logic changes values in the data model, those values must be reflected in the view.
当在 Angular 中构建表单时,理解框架如何处理来自用户或程序化修改的数据流是非常重要的。
在处理表单输入时,响应式表单和模板驱动表单遵循两种不同的策略。下面的数据流范例从以前的 "喜欢的颜色" 输入框开始,展示了它在响应式表单中的工作方式与模板驱动表单相比有何不同。
当应用包含一个表单时Angular 必须让该视图与组件模型保持同步,并让组件模型与视图保持同步。当用户通过视图更改值并进行选择时,新值必须反映在数据模型中。同样,当程序逻辑改变数据模型中的值时,这些值也必须反映到视图中。
Reactive and template-driven forms differ in how they handle data flowing from the user or from programmatic changes.
The following diagrams illustrate both kinds of data flow for each type of form, using the a favorite-color input field defined above.
响应式表单和模板驱动表单在处理来自用户或程序化变更时的数据处理方式上有所不同。下面的这些示意图会以上面定义的 `favorite-color` 输入字段为例,分别说明两种表单各自的数据流。
### Data flow in reactive forms
### 响应式表单中的数据流
As described above, in reactive forms each form element in the view is directly linked to a form model (`FormControl` instance). Updates from the view to the model and from the model to the view are synchronous and aren't dependent on the UI rendered. The diagrams below use the same favorite color example to demonstrate how data flows when an input field's value is changed from the view and then from the model.
In reactive forms each form element in the view is directly linked to the form model (a `FormControl` instance). Updates from the view to the model and from the model to the view are synchronous and do not depend on how the UI is rendered.
如前所述,在响应式表单中,视图中的每个表单元素都直接链接到一个表单模型(`FormControl` 实例)。
从视图到模型的修改以及从模型到视图的修改都是同步的,不依赖于所渲染的 UI。下面的图示使用了同一个 "喜欢的颜色" 范例,来演示当输入字段的值的变更来自视图和来自模型时,数据如何流动
在响应式表单中,视图中的每个表单元素都直接链接到一个表单模型(`FormControl` 实例)。
从视图到模型的修改以及从模型到视图的修改都是同步的,而且不依赖于 UI 的渲染方式
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-reactive-forms-vtm.png" alt="Reactive forms data flow - view to model" width="100%">
</div>
The view-to-model diagram shows how data flows when an input field's value is changed from the view through the following steps.
The steps below outline the data flow from view to model.
下面这些步骤列出了 "从视图到模型" 数据流的梗概。
这个视图到模型的示意图展示了当输入字段的值发生变化时数据是如何从视图开始,经过下列步骤进行流动的。
1. The user types a value into the input element, in this case the favorite color *Blue*.
最终用户在输入框元素中键入了一个值,这里是 "Blue"。
1. The form input element emits an "input" event with the latest value.
这个输入框元素会发出一个带有最新值的 "input" 事件。
@ -202,12 +247,12 @@ The steps below outline the data flow from view to model.
`valueChanges` 的任何一个订阅者都会收到这个新值。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-reactive-forms-mtv.png" alt="Reactive forms data flow - model to view" width="100%">
<img src="generated/images/guide/forms-overview/dataflow-reactive-forms-vtm.png" alt="Reactive forms data flow - view to model">
</div>
The steps below outline the data flow from model to view.
The model-to-view diagram shows how a programmatic change to the model is propagated to the view through the following steps.
下面这些步骤列出了从模型到视图的数据流的梗概
这个模型到视图的示意图体现了程序中对模型的修改是如何通过下列步骤传播到视图中的
1. The user calls the `favoriteColorControl.setValue()` method, which updates the `FormControl` value.
@ -225,21 +270,21 @@ The steps below outline the data flow from model to view.
该表单输入框元素上的控件值访问器会把控件更新为这个新值。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-reactive-forms-mtv.png" alt="Reactive forms data flow - model to view">
</div>
### Data flow in template-driven forms
### 模板驱动表单中的数据流
In template-driven forms, each form element is linked to a directive that manages the form model internally. The diagrams below use the same favorite color example to demonstrate how data flows when an input field's value is changed from the view and then from the model.
In template-driven forms, each form element is linked to a directive that manages the form model internally.
在模板驱动表单中,每个表单元素都链接到一个指令上,该指令负责管理其内部表单模型。下图使用相同的 "喜欢的颜色" 示例来演示当输入字段的值的变更来自视图和来自模板时,数据如何流动
在模板驱动表单中,每一个表单元素都是和一个负责管理内部表单模型的指令关联起来的
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-td-forms-vtm.png" alt="Template-driven forms data flow - view to model" width="100%">
</div>
The view-to-model diagram shows how data flows when an input field's value is changed from the view through the following steps.
The steps below outline the data flow from view to model when the input value changes from *Red* to *Blue*.
下面这些步骤列出了当输入框的值从 *Red* 变成 *Blue* 时 "从视图到模型" 的数据流概况。
这个视图到模型的图表展示了当输入字段的值发生变化时,数据流是如何从视图开始经过下列步骤进行流动的。
1. The user types *Blue* into the input element.
@ -270,12 +315,12 @@ is updated to the value emitted by the `ngModelChange` event (*Blue*).
由于该组件模板双向数据绑定到了 `favoriteColor`,组件中的 `favoriteColor` 属性就会修改为 `ngModelChange` 事件所发出的值("Blue")。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-td-forms-mtv.png" alt="Template-driven forms data flow - model to view" width="100%">
<img src="generated/images/guide/forms-overview/dataflow-td-forms-vtm.png" alt="Template-driven forms data flow - view to model" width="100%">
</div>
The steps below outline the data flow from model to view when the `favoriteColor` changes from *Blue* to *Red*.
The model-to-view diagram shows how data flows from model to view when the `favoriteColor` changes from *Blue* to *Red*, through the following steps
下面这些步骤列出了当 `favoriteColor`*Blue* 变为 *Red* 时,"从模型到视图" 的数据流概况
这个模型到视图的示意图展示了当 `favoriteColor` 从*蓝*变到*红*时,数据是如何经过如下步骤从模型流动到视图的
1. The `favoriteColor` value is updated in the component.
@ -313,6 +358,44 @@ The steps below outline the data flow from model to view when the `favoriteColor
控件值访问器 `ControlValueAccessor` 会使用 `favoriteColor` 的最新值来修改表单的输入框元素。
<div class="lightbox">
<img src="generated/images/guide/forms-overview/dataflow-td-forms-mtv.png" alt="Template-driven forms data flow - model to view" width="100%">
</div>
### Mutability of the data model
### 数据模型的可变性
The change-tracking method plays a role in the efficiency of your application.
变更追踪的方法对应用的效率有着重要影响。
* **Reactive forms** keep the data model pure by providing it as an immutable data structure.
Each time a change is triggered on the data model, the `FormControl` instance returns a new data model rather than updating the existing data model.
This gives you the ability to track unique changes to the data model through the control's observable.
Change detection is more efficient because it only needs to update on unique changes.
Because data updates follow reactive patterns, you can integrate with observable operators to transform data.
**响应式表单**通过以不可变的数据结构提供数据模型,来保持数据模型的纯粹性。每当在数据模型上触发更改时,`FormControl` 实例都会返回一个新的数据模型,而不会更新现有的数据模型。这使你能够通过该控件的可观察对象跟踪对数据模型的唯一更改。这让变更检测更有效率,因为它只需在唯一性更改(译注:也就是对象引用发生变化)时进行更新。由于数据更新遵循响应式模式,因此你可以把它和可观察对象的各种运算符集成起来以转换数据。
* **Template-driven** forms rely on mutability with two-way data binding to update the data model in the component as changes are made in the template.
Because there are no unique changes to track on the data model when using two-way data binding, change detection is less efficient at determining when updates are required.
**模板驱动的**表单依赖于可变性和双向数据绑定,可以在模板中做出更改时更新组件中的数据模型。由于使用双向数据绑定时没有用来对数据模型进行跟踪的唯一性更改,因此变更检测在需要确定何时更新时效率较低。
The difference is demonstrated in the previous examples that use the favorite-color input element.
前面那些使用 `favorite-color` 输入元素的例子就演示了这种差异。
* With reactive forms, the **`FormControl` instance** always returns a new value when the control's value is updated.
对于响应式表单,当控件值更新时,**`FormControl` 的实例**总会返回一个新值。
* With template-driven forms, the **favorite color property** is always modified to its new value.
对于模板驱动的表单,**`favorite-color` 属性**总会被修改为新值。
{@a validation}
## Form validation
## 表单验证
@ -337,32 +420,32 @@ For more information, see [Form Validation](guide/form-validation).
## 测试
Testing plays a large part in complex applications and a simpler testing strategy is useful when validating that your forms function correctly. Reactive forms and template-driven forms have different levels of reliance on rendering the UI to perform assertions based on form control and form field changes. The following examples demonstrate the process of testing forms with reactive and template-driven forms.
Testing plays a large part in complex applications. A simpler testing strategy is useful when validating that your forms function correctly.
Reactive forms and template-driven forms have different levels of reliance on rendering the UI to perform assertions based on form control and form field changes.
The following examples demonstrate the process of testing forms with reactive and template-driven forms.
测试在复杂的应用程序中也起着重要的作用,并且总是欢迎更容易的测试策略。测试响应式表单和模板驱动表单的差别之一在于它们是否需要渲染 UI 才能基于表单控件和表单字段变化来执行断言。下面的例子演示了使用响应式表单和模板驱动表单时表单的测试过程。
测试在复杂的应用程序中也起着重要的作用。当验证你的表单功能是否正确时,更简单的测试策略往往也更有用。测试响应式表单和模板驱动表单的差别之一在于它们是否需要渲染 UI 才能基于表单控件和表单字段变化来执行断言。下面的例子演示了使用响应式表单和模板驱动表单时表单的测试过程。
### Testing reactive forms
### 测试响应式表单
Reactive forms provide a relatively easy testing strategy because they provide synchronous access to the form and data models, and they can be tested without rendering the UI. In these tests, status and data are queried and manipulated through the control without interacting with the change detection cycle.
Reactive forms provide a relatively easy testing strategy because they provide synchronous access to the form and data models, and they can be tested without rendering the UI.
In these tests, status and data are queried and manipulated through the control without interacting with the change detection cycle.
响应式表单提供了相对简单的测试策略,因为它们能提供对表单和数据模型的同步访问,而且不必渲染 UI 就能测试它们。在这些测试中,控件和数据是通过控件进行查询和操纵的,不需要和变更检测周期打交道。
The following tests use the favorite color components mentioned earlier to verify the data flows from view to model and model to view for a reactive form.
The following tests use the favorite-color components from previous examples to verify the view-to-model and model-to-view data flows for a reactive form.
下面的测试利用前面的 "喜欢的颜色" 组件来验证响应式表单中的 "从视图到模型" 和 "从模型到视图" 数据流。
下面的测试利用前面例子中的 "喜欢的颜色" 组件来验证响应式表单中的 "从视图到模型" 和 "从模型到视图" 数据流。
The following test verifies the data flow from view to model.
**Verifying view-to-model data flow**
下面的测试验证了 "从视图到模型" 数据流
**验证“从视图到模型”的数据流**
<code-example path="forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" region="view-to-model" header="Favorite color test - view to model">
</code-example>
The first example performs the following steps to verify the view-to-model data flow.
Here are the steps performed in the view to model test.
这个 "视图到模型" 测试中执行的步骤如下。
第一个例子执行了下列步骤来验证“从视图到模型”数据流。
1. Query the view for the form input element, and create a custom "input" event for the test.
@ -376,16 +459,12 @@ Here are the steps performed in the view to model test.
断言该组件的 `favoriteColorControl` 的值与来自输入框的值是匹配的。
The following test verifies the data flow from model to view.
下面的例子验证了 "从模型到视图" 的数据流:
<code-example path="forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" region="model-to-view" header="Favorite color test - model to view">
<code-example path="forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" region="view-to-model" header="Favorite color test - view to model">
</code-example>
Here are the steps performed in the model to view test.
The next example performs the following steps to verify the model-to-view data flow.
这个 "从模型到视图" 测试的执行步骤如下
下一个例子执行了下列步骤来验证“从模型到视图”数据流
1. Use the `favoriteColorControl`, a `FormControl` instance, to set the new value.
@ -399,6 +478,9 @@ Here are the steps performed in the model to view test.
断言控件上设置的新值与输入中的值是匹配的。
<code-example path="forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" region="model-to-view" header="Favorite color test - model to view">
</code-example>
### Testing template-driven forms
### 测试模板驱动表单
@ -466,59 +548,6 @@ Here are the steps performed in the model to view test.
断言输入框的值与该组件实例的 `favoriteColor` 属性值是匹配的。
## Mutability
## 可变性
The change tracking method plays a role in the efficiency of your application.
追踪变更的方法对于应用的运行效率有着重要作用。
* **Reactive forms** keep the data model pure by providing it as an immutable data structure. Each time a change is triggered on the data model, the `FormControl` instance returns a new data model rather than updating the existing data model. This gives you the ability to track unique changes to the data model through the control's observable. This provides one way for change detection to be more efficient because it only needs to update on unique changes. It also follows reactive patterns that integrate with observable operators to transform data.
**响应式表单**通过将数据模型提供为不可变数据结构来保持数据模型的纯粹性。每当在数据模型上触发更改时,`FormControl` 实例都会返回一个新的数据模型,而不是直接修改原来的。这样能让你通过该控件的可观察对象来跟踪那些具有唯一性的变更。这种方式可以让变更检测更高效,因为它只需要在发生了唯一性变更的时候进行更新。它还遵循与操作符相结合使用的 "响应式" 模式来转换数据。
* **Template-driven** forms rely on mutability with two-way data binding to update the data model in the component as changes are made in the template. Because there are no unique changes to track on the data model when using two-way data binding, change detection is less efficient at determining when updates are required.
**模板驱动表单**依赖于可变性,它使用双向数据绑定,以便在模板中发生变更时修改数据模型。因为在使用双向数据绑定时无法在数据模型中跟踪具有唯一性的变更,因此变更检测机制在要确定何时需要更新时效率较低。
The difference is demonstrated in the examples above using the **favorite color** input element.
以 "喜欢的颜色" 输入框元素为例来看看两者有什么不同:
* With reactive forms, the **`FormControl` instance** always returns a new value when the control's value is updated.
对于响应式表单,每当控件值变化时,**`FormControl` 实例**就会返回一个新的值。
* With template-driven forms, the **favorite color property** is always modified to its new value.
对于模板驱动表单,**favoriteColor** 属性总是会修改成它的新值。
## Scalability
## 可伸缩性
If forms are a central part of your application, scalability is very important. Being able to reuse form models across components is critical.
如果表单是应用程序的核心部分,那么可伸缩性就非常重要。能跨组件复用的表单模型是至关重要的。
* **Reactive forms** provide access to low-level APIs and synchronous access to the form model, making creating large-scale forms easier.
**响应式表单**通过提供对底层 API 的访问和对表单模型的同步访问,让创建大型表单更轻松。
* **Template-driven** forms focus on simple scenarios, are not as reusable, abstract away the low-level APIs, and provide asynchronous access to the form model. The abstraction with template-driven forms also surfaces in testing, where testing reactive forms requires less setup and no dependence on the change detection cycle when updating and validating the form and data models during testing.
**模板驱动表单**专注于简单的场景,它不可重用、对底层 API 进行抽象,而且对表单模型的访问是异步的。
在测试过程中,模板驱动表单的抽象也会参与测试。而测试响应式表单需要更少的准备代码,并且当测试期间修改和验证表单模型与数据模型时,不依赖变更检测周期。
## Final thoughts
## 最后的思考
Choosing a strategy begins with understanding the strengths and weaknesses of the options presented. Low-level API and form model access, predictability, mutability, straightforward validation and testing strategies, and scalability are all important considerations in choosing the infrastructure you use to build your forms in Angular. Template-driven forms are similar to patterns in AngularJS, but they have limitations given the criteria of many modern, large-scale Angular apps. Reactive forms minimize these limitations. Reactive forms integrate with reactive patterns already present in other areas of the Angular architecture, and complement those requirements well.
要选择一项策略就要先了解所提供选项的优缺点。当决定在 Angular 中构建表单要选择哪种基础设施时,底层 API 访问、表单模型访问、可预测性、可变性、直观的验证方式和测试策略以及可伸缩性都是重要的考虑因素。
模板驱动表单和 AngularJS 中的传统模式相似,但它们具有局限性。响应式表单已经和 Angular 架构的其它部分存在的响应式模式相整合,并很好地弥补了这些需求。
## Next steps
@ -528,15 +557,15 @@ To learn more about reactive forms, see the following guides:
要进一步了解响应式表单,参见下列章节:
* [Reactive Forms](guide/reactive-forms)
* [Reactive forms](guide/reactive-forms)
[响应式表单](guide/reactive-forms)
* [Form Validation](guide/form-validation#reactive-form-validation)
* [Form validation](guide/form-validation#reactive-form-validation)
[表单验证](guide/form-validation#reactive-form-validation)
* [Dynamic Forms](guide/dynamic-form)
* [Dynamic forms](guide/dynamic-form)
[动态表单](guide/dynamic-form)
@ -544,10 +573,15 @@ To learn more about template-driven forms, see the following guides:
要进一步了解模板驱动表单,参见下列章节:
* [Template-driven Forms](guide/forms#template-driven-forms)
* [Building a template-driven form](guide/forms) tutorial
[模板驱动表单](guide/forms)
[构建模板驱动表单](guide/forms)教程
* [Form Validation](guide/form-validation#template-driven-validation)
* [Form validation](guide/form-validation#template-driven-validation)
[表单验证](guide/form-validation#template-driven-validation)
* `NgForm` directive API reference
`NgForm` 指令 API 参考手册

File diff suppressed because it is too large Load Diff

View File

@ -368,6 +368,20 @@ See [workspace configuration](#cli-config)
参见[工作空间配置](#cli-config)
{@a content-projection}
## content projection
## 内容投影
A way to insert DOM content from outside a component into the component's view in a designated spot.
一种从组件外把 DOM 内容插入到当前组件视图的特定位置上的方式。
For more information, see [Responding to changes in content](guide/lifecycle-hooks#content-projection).
欲知详情,参见[内容变化的应对方式](guide/lifecycle-hooks#content-projection)。
{@a custom-element}
## custom element
@ -715,7 +729,7 @@ Read more forms in the [Introduction to forms in Angular](guide/forms-overview).
The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](#template-driven-forms), the form model is implicitly created by directives.
是指在指定的时间点,表单输入元素的值和验证状态的"权威数据源"。当使用[响应式表单](#reactive-forms)时,表单模型会在组件类中显式创建。当使用[模板驱动表单](#template-driven-forms)时,表单模型是由一些指令隐式创建的。
是指在指定的时间点,表单输入元素的值和验证状态的"事实之源"。当使用[响应式表单](#reactive-forms)时,表单模型会在组件类中显式创建。当使用[模板驱动表单](#template-driven-forms)时,表单模型是由一些指令隐式创建的。
Learn more about reactive and template-driven forms in the [Introduction to forms in Angular](guide/forms-overview).
@ -1010,7 +1024,7 @@ Compare to [NgModule](#ngmodule).
## ngcc
Angular compatibility compiler.
If you build your app using [Ivy](#ivy), but it depends on libraries have not been compiled with Ivy, the CLI uses `ngcc` to automatically update the dependent libraries to use Ivy.
If you build your app using [Ivy](#ivy), but it depends on libraries that have not been compiled with Ivy, the CLI uses `ngcc` to automatically update the dependent libraries to use Ivy.
Angular 兼容性编译器。如果使用 [Ivy](#ivy) 构建应用程序,但依赖未用 Ivy 编译的库,则 CLI 将使用 `ngcc` 自动更新依赖库以使用 Ivy。
@ -1140,11 +1154,11 @@ Support for the various Angular run-time platforms is provided by the `@angular/
`@angular/platform-*` 软件包提供了对各种 Angular 运行时平台的支持。这些软件包通过提供用于收集用户输入和渲染指定平台 UI 的实现,以允许使用 `@angular/core``@angular/common` 的应用程序在不同的环境中执行。隔离平台相关的功能使开发人员可以独立于平台使用框架的其余部分。
- When running in a web browser, [`BrowserModule`](api/platform-browser/BrowserModule) is imported from the `platform-browser` package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service.
* When running in a web browser, [`BrowserModule`](api/platform-browser/BrowserModule) is imported from the `platform-browser` package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service.
在 Web 浏览器中运行时,[`BrowserModule`](api/platform-browser/BrowserModule) 是从 `platform-browser` 软件包中导入的,并支持简化安全性和事件处理的服务,并允许应用程序访问浏览器专有的功能,例如解释键盘输入和控制文档要显示的标题。浏览器中运行的所有应用程序都使用同一个平台服务。
- When [server-side rendering](#server-side-rendering) (SSR) is used, the [`platform-server`](api/platform-server) package provides web server implementations of the `DOM`, `XMLHttpRequest`, and other low-level features that don't rely on a browser.
* When [server-side rendering](#server-side-rendering) (SSR) is used, the [`platform-server`](api/platform-server) package provides web server implementations of the `DOM`, `XMLHttpRequest`, and other low-level features that don't rely on a browser.
使用[服务端渲染](#server-side-rendering)SSR[`platform-server`](api/platform-server) 包将提供 `DOM``XMLHttpRequest` 和其它不依赖浏览器的其它底层功能的 Web 服务器端实现。
@ -1228,7 +1242,7 @@ When using reactive forms:
* The "source of truth", the form model, is defined in the component class.
"权威数据源"(表单模型)定义在组件类中。
"事实之源"(表单模型)定义在组件类中。
* Validation is set up through validation functions rather than valdation directives.
@ -1534,7 +1548,7 @@ When using template-driven forms:
* The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
模板是“权威数据源”。使用属性 (attribute) 在单个输入元素上定义验证规则。
模板是“事实之源”。使用属性 (attribute) 在单个输入元素上定义验证规则。
* [Two-way binding](#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements.
@ -1614,8 +1628,29 @@ Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org
TypeScript 是 Angular 的首选语言。要了解更多,参见 [typescriptlang.org](http://www.typescriptlang.org/)。
## TypeScript configuration file
## TypeScript 配置文件
A file specifies the root files and the compiler options required to compile a TypeScript project. For more information, see [TypeScript configuration](/guide/typescript-configuration).
一个文件,用来指定编译 TypeScript 项目时的根文件和编译器选项。欲知详情,参见 [TypeScript 配置](/guide/typescript-configuration)。
{@a U}
{@a unidirectional-data-flow}
## unidirectional data flow
A data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph.
In practice, this means that data in Angular flows downward during change detection.
A parent component can easily change values in its child components because the parent is checked first.
A failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered.
In development mode, Angular throws the `ExpressionChangedAfterItHasBeenCheckedError` error if your app attempts to do this, rather than silently failing to render the new value.
To avoid this error, a [lifecycle hook](guide/lifecycle-hooks) method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value.
{@a universal}
## Universal

View File

@ -2,7 +2,7 @@
# 使用 HTTP 与后端服务进行通信
Most front-end applications need to communicate with a server over the HTTP protocol, in order to download or upload data and accesss other back-end services.
Most front-end applications need to communicate with a server over the HTTP protocol, in order to download or upload data and access other back-end services.
Angular provides a simplified client HTTP API for Angular applications, the `HttpClient` service class in `@angular/common/http`.
大多数前端应用都要通过 HTTP 协议与服务器通讯才能下载或上传数据并访问其它后端服务。Angular 给应用提供了一个简化的 HTTP 客户端 API也就是 `@angular/common/http` 中的 `HttpClient` 服务类。
@ -11,19 +11,19 @@ The HTTP client service offers the following major features.
HTTP 客户端服务提供了以下主要功能。
- The ability to request [typed response objects](#typed-response).
* The ability to request [typed response objects](#typed-response).
请求[类型化响应对象](#typed-response)的能力。
- Streamlined [error handling](#error-handling).
* Streamlined [error handling](#error-handling).
简化的[错误处理](#error-handling)。
- [Testability](#testing-requests) features.
* [Testability](#testing-requests) features.
各种特性的[可测试性](#testing-requests)。
- Request and response [interception](#intercepting-requests-and-responses).
* Request and response [interception](#intercepting-requests-and-responses).
请求和响应的[拦截机制](#intercepting-requests-and-responses)。
@ -35,19 +35,19 @@ Before working with the `HTTPClientModule`, you should have a basic understandin
在使用 `HTTPClientModule` 之前,你应该对下列内容有基本的了解:
- TypeScript programming
* TypeScript programming
TypeScript 编程
- Usage of the HTTP protocol
* Usage of the HTTP protocol
HTTP 协议的用法
- Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture)
* Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture)
Angular 的应用设计基础,就像[Angular 基本概念](guide/architecture)中描述的那样
- Observable techniques and operators. See the [Observables](guide/observables) guide.
* Observable techniques and operators. See the [Observables](guide/observables) guide.
Observable 相关技术和操作符。参见[可观察对象](guide/observables)部分。
@ -94,13 +94,13 @@ You can run the <live-example></live-example> that accompanies this guide.
The sample app does not require a data server.
It relies on the
[Angular *in-memory-web-api*](https://github.com/angular/in-memory-web-api/blob/master/README.md),
which replaces the *HttpClient* module's `HttpBackend`.
[Angular _in-memory-web-api_](https://github.com/angular/in-memory-web-api/blob/master/README.md),
which replaces the _HttpClient_ module's `HttpBackend`.
The replacement service simulates the behavior of a REST-like backend.
该示例应用不需要数据服务器。它依赖于[Angular *in-memory-web-api*](https://github.com/angular/in-memory-web-api/blob/master/README.md),它替代了 *HttpClient* 模块中的 `HttpBackend`。这个替代服务会模拟 REST 式的后端的行为。
Look at the `AppModule` *imports* to see how it is configured.
Look at the `AppModule` _imports_ to see how it is configured.
看一下 `AppModule` 的这些*导入*,看看它的配置方式。
@ -111,7 +111,7 @@ Look at the `AppModule` *imports* to see how it is configured.
## 从服务器请求数据
Use the [`HTTPClient.get()`](api/common/http/HttpClient#get) method to fetch data from a server.
The aynchronous method sends an HTTP request, and returns an Observable that emits the requested data when the response is received.
The asynchronous method sends an HTTP request, and returns an Observable that emits the requested data when the response is received.
The return type varies based on the `observe` and `responseType` values that you pass to the call.
使用 [`HTTPClient.get()`](api/common/http/HttpClient#get) 方法从服务器获取数据。该异步方法会发送一个 HTTP 请求,并返回一个 Observable它会在收到响应时发出所请求到的数据。返回的类型取决于你调用时传入的 `observe``responseType` 参数。
@ -135,11 +135,11 @@ Important options include the *observe* and *responseType* properties.
这些重要的选项包括 *observe**responseType* 属性。
- The *observe* option specifies how much of the response to return.
* The *observe* option specifies how much of the response to return.
*observe* 选项用于指定要返回的响应内容。
- The *responseType* option specifies the format in which to return data.
* The *responseType* option specifies the format in which to return data.
*responseType* 选项指定返回数据的格式。
@ -317,7 +317,7 @@ client.get('/foo', options)
```
In the second case, TypeScript infers the type of `options` to be `{responseType: string}`.
The type is too wide to pass to `HttpClient.get` which is expecting the type of `responseType` to be one of the *specific* strings.
The type is too wide to pass to `HttpClient.get` which is expecting the type of `responseType` to be one of the _specific_ strings.
`HttpClient` is typed explicitly this way so that the compiler can report the correct return type based on the options you provided.
在第二种情况下TypeScript 会把 `options` 的类型推断为 `{responseType: string}`。该类型的 `HttpClient.get` 太宽泛,无法传递给 `HttpClient.get`,它希望 `responseType` 的类型是*特定的*字符串之一。而 `HttpClient` 就是以这种方式显式输入的,因此编译器可以根据你提供的选项报告正确的返回类型。
@ -479,11 +479,11 @@ Two types of errors can occur.
可能会出现两种类型的错误。
- The server backend might reject the request, returning an HTTP response with a status code such as 404 or 500. These are error *responses*.
* The server backend might reject the request, returning an HTTP response with a status code such as 404 or 500. These are error *responses*.
服务器端可能会拒绝该请求,并返回状态码为 404 或 500 的 HTTP *响应*。这些是错误*响应*。
- Something could go wrong on the client-side such as a network error that prevents the request from completing successfully or an exception thrown in an RxJS operator. These errors produce JavaScript `ErrorEvent` objects.
* Something could go wrong on the client-side such as a network error that prevents the request from completing successfully or an exception thrown in an RxJS operator. These errors produce JavaScript `ErrorEvent` objects.
客户端也可能出现问题,例如网络错误会让请求无法成功完成,或者 RxJS 操作符也会抛出异常。这些错误会产生 JavaScript 的 `ErrorEvent` 对象。
@ -575,11 +575,11 @@ The `HttpClient.post()` method is similar to `get()` in that it has a type param
`HttpClient.post()` 方法像 `get()` 一样也有类型参数,可以用它来指出你期望服务器返回特定类型的数据。该方法需要一个资源 URL 和两个额外的参数:
- *body* - The data to POST in the body of the request.
* *body* - The data to POST in the body of the request.
*body* - 要在请求体中 POST 过去的数据。
- *options* - An object containing method options which, in this case, [specify required headers](#adding-headers).
* *options* - An object containing method options which, in this case, [specify required headers](#adding-headers).
*options* - 一个包含方法选项的对象,在这里,它用来[指定必要的请求头](#adding-headers)。
@ -669,7 +669,7 @@ Execution of the HTTP request is _deferred_, allowing you to extend the
observable with additional operations such as `tap` and `catchError` before anything actually happens.
`HttpClient` 的所有方法返回的可观察对象都设计为*冷的*。
HTTP 请求的执行都是*延期执行的*,让你可以用 `tap``catchError` 这样的操作符来在实际执行HTTP请求之前先对这个可观察对象进行扩展。
HTTP 请求的执行都是*延期执行的*,让你可以用 `tap``catchError` 这样的操作符来在实际执行 HTTP 请求之前,先对这个可观察对象进行扩展。
Calling `subscribe(...)` triggers execution of the observable and causes
`HttpClient` to compose and send the HTTP request to the server.
@ -1080,11 +1080,11 @@ If you must modify the request body, follow these steps.
复制请求体并在副本中进行修改。
1. Clone the request object, using its `clone()` method.
2. Clone the request object, using its `clone()` method.
使用 `clone()` 方法克隆这个请求对象。
1. Replace the clone's body with the modified copy.
3. Replace the clone's body with the modified copy.
用修改过的副本替换被克隆的请求体。
@ -1220,23 +1220,23 @@ The `CachingInterceptor` in the following example demonstrates this approach.
header="app/http-interceptors/caching-interceptor.ts)">
</code-example>
* The `isCachable()` function determines if the request is cachable.
In this sample, only GET requests to the npm package search api are cachable.
* The `isCacheable()` function determines if the request is cacheable.
In this sample, only GET requests to the npm package search api are cacheable.
`isCachable()` 函数用于决定该请求是否允许缓存。
`isCacheable()` 函数用于决定该请求是否允许缓存。
在这个例子中,只有发到 npm 包搜索 API 的 GET 请求才是可以缓存的。
* If the request is not cachable, the interceptor simply forwards the request
* If the request is not cacheable, the interceptor simply forwards the request
to the next handler in the chain.
如果该请求是不可缓存的,该拦截器只会把该请求转发给链表中的下一个处理器。
* If a cachable request is found in the cache, the interceptor returns an `of()` *observable* with
* If a cacheable request is found in the cache, the interceptor returns an `of()` *observable* with
the cached response, by-passing the `next` handler (and all other interceptors downstream).
如果可缓存的请求在缓存中找到了,该拦截器就会通过 `of()` 函数返回一个已缓存的响应体的*可观察对象*,然后绕过 `next` 处理器(以及所有其它下游拦截器)。
* If a cachable request is not in cache, the code calls `sendRequest()`.
* If a cacheable request is not in cache, the code calls `sendRequest()`.
This function creates a [request clone](#immutability) without headers, because the npm API forbids them.
The function then forwards the clone of the request to `next.handle()` which ultimately calls the server and returns the server's response.

File diff suppressed because it is too large Load Diff

View File

@ -4,10 +4,10 @@
The Angular team has worked hard to ensure Ivy is as backwards-compatible with the previous rendering engine ("View Engine") as possible.
However, in rare cases, minor changes were necessary to ensure that the Angular's behavior was predictable and consistent, correcting issues in the View Engine implementation.
In order to smooth the transition, we have provided [automated migrations](guide/updating-to-version-9#migrations) wherever possible so your application and library code is migrated automatically by the CLI.
In order to smooth the transition, we have provided [automated migrations](guide/updating-to-version-10#migrations) wherever possible so your application and library code is migrated automatically by the CLI.
That said, some applications will likely need to apply some manual updates.
Angular 团队一直在努力确保 Ivy 与之前的渲染引擎“View Engine”尽可能向后兼容。但是在极少数情况下需要做一些小改动才能确保 Angular 的行为是可预测和一致的,以纠正 View Engine 实现中的问题。为了顺利过渡,我们尽可能提供了[自动迁移功能,](guide/updating-to-version-9#migrations)以便 CLI 可以[自动迁移](guide/updating-to-version-9#migrations)你的应用和库代码。也就是说,某些应用可能需要做一些手动更新。
Angular 团队一直在努力确保 Ivy 与之前的渲染引擎“View Engine”尽可能向后兼容。但是在极少数情况下需要做一些小改动才能确保 Angular 的行为是可预测和一致的,以纠正 View Engine 实现中的问题。为了顺利过渡,我们尽可能提供了[自动迁移功能,](guide/updating-to-version-10#migrations)以便 CLI 可以自动迁移你的应用和库代码。也就是说,某些应用可能需要做一些手动更新。
{@a debugging}
@ -15,22 +15,22 @@ Angular 团队一直在努力确保 Ivy 与之前的渲染引擎“View Engin
## 如何用 Ivy 调试错误
In version 9, [a few deprecated APIs have been removed](guide/updating-to-version-9#removals) and there are a [few breaking changes](guide/updating-to-version-9#breaking-changes) unrelated to Ivy.
In version 10, [a few deprecated APIs have been removed](guide/updating-to-version-10#removals) and there are a [few breaking changes](guide/updating-to-version-10#breaking-changes) unrelated to Ivy.
If you're seeing errors after updating to version 9, you'll first want to rule those changes out.
在版本 9 中,[已经删除了一些已弃用的 API](guide/updating-to-version-9#removals)并且还有[一些](guide/updating-to-version-9#breaking-changes)与 Ivy 无关的[重大变更](guide/updating-to-version-9#breaking-changes)。如果你在升级到版本 9 后遇到错误,你首先要把这些变更排除在外。
在版本 10 中,[已经删除了一些已弃用的 API](guide/updating-to-version-10#removals)并且还有一些与 Ivy 无关的[重大变更](guide/updating-to-version-10#breaking-changes)。如果你在升级到版本 10 后遇到错误,你首先要把这些变更排除在外。
To do so, temporarily [turn off Ivy](guide/ivy#opting-out-of-angular-ivy) in your `tsconfig.json` and re-start your app.
To do so, temporarily [turn off Ivy](guide/ivy#opting-out-of-angular-ivy) in your `tsconfig.base.json` and re-start your app.
为此,请暂时[关闭](guide/ivy#opting-out-of-angular-ivy) `tsconfig.json` [Ivy](guide/ivy#opting-out-of-angular-ivy)并重新启动应用。
为此,请暂时[关闭](guide/ivy#opting-out-of-angular-ivy) `tsconfig.base.json` 中的 Ivy 并重新启动应用。
If you're still seeing the errors, they are not specific to Ivy. In this case, you may want to consult the [general version 9 guide](guide/updating-to-version-9). If you've opted into any of the stricter type-checking settings that are new with v9, you may also want to check out the [template type-checking guide](guide/template-typecheck).
If you're still seeing the errors, they are not specific to Ivy. In this case, you may want to consult the [general version 10 guide](guide/updating-to-version-10). If you've opted into any of the new, stricter type-checking settings, you may also want to check out the [template type-checking guide](guide/template-typecheck).
如果你仍然看到这些错误,那么它们并不是 Ivy 特有的。在这种情况下,你可以查阅[常规的版本 9 指南](guide/updating-to-version-9)。如果你选择启用 v9 中任何新增的更严格的类型检查,你可能还需要查看[模板类型检查指南](guide/template-typecheck)。
如果你仍然看到这些错误,那么它们并不是 Ivy 特有的。在这种情况下,你可以查阅[常规的版本 10 指南](guide/updating-to-version-10)。如果你选择启用任何新增的更严格的类型检查,你可能还需要查看[模板类型检查指南](guide/template-typecheck)。
If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.json` and review the list of expected changes below.
If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.base.json` and review the list of expected changes below.
如果错误消失了,可以删除对 `tsconfig.json` 的更改,切换回 Ivy并查看下面的预期更改列表。
如果错误消失了,可以删除对 `tsconfig.base.json` 的更改,切换回 Ivy并查看下面的预期更改列表。
{@a payload-size-debugging}

View File

@ -1,21 +1,75 @@
# Lazy-loading feature modules
# 惰性加载的特性模块
## High level view
## 高层视角
# 惰性加载特性模块
By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading&mdash;a design pattern that loads NgModules as needed. Lazy loading helps keep initial
bundle sizes smaller, which in turn helps decrease load times.
默认情况下NgModule 都是急性加载的,也就是说它会在应用加载时尽快加载,所有模块都是如此,无论是否立即要用。对于带有很多路由的大型应用,考虑使用惰性加载 —— 一种按需加载 NgModule 的模式。惰性加载可以减小初始包的尺寸,从而减少加载时间。
<div class="alert is-helpful">
For the final sample app with two lazy-loaded modules that this page describes, see the
<live-example></live-example>.
如果需要本页描述的具有两个惰性加载模块的范例应用,参见<live-example></live-example>
</div>
{@a lazy-loading}
## Lazy loading basics
## 惰性加载入门
This section introduces the basic procedure for configuring a lazy-loaded route.
For a step-by-step example, see the [step-by-step setup](#step-by-step) section on this page.
本节会介绍配置惰性加载路由的基本过程。
想要一个分步的范例,参见本页的[分步设置](#step-by-step)部分。
To lazy load Angular modules, use `loadchildren` (instead of `component`) in your `AppRoutingModule` `routes` configuration as follows.
要惰性加载 Angular 模块,请在 `AppRoutingModule` `routes` 中使用 `loadchildren` 代替 `component` 进行配置,代码如下。
<code-example header="AppRoutingModule (excerpt)">
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
</code-example>
In the lazy-loaded module's routing module, add a route for the component.
在惰性加载模块的路由模块中,添加一个指向该组件的路由。
<code-example header="Routing module for lazy loaded module (excerpt)">
const routes: Routes = [
{
path: '',
component: ItemsComponent
}
];
</code-example>
Also be sure to remove the `ItemsModule` from the `AppModule`.
For step-by-step instructions on lazy loading modules, continue with the following sections of this page.
还要确保从 `AppModule` 中移除了 `ItemsModule`
想要一个关于惰性加载模块的分步操作指南,请继续查看本页的后续章节。
{@a step-by-step}
## Step-by-step setup
## 分步设置
There are two main steps to setting up a lazy-loaded feature module:
建立惰性加载的特性模块有两个主要步骤:
@ -28,9 +82,9 @@ There are two main steps to setting up a lazy-loaded feature module:
配置相关路由。
## Set up an app
### Set up an app
## 建立应用
### 建立应用
If you dont already have an app, you can follow the steps below to
create one with the CLI. If you already have an app, skip to
@ -63,9 +117,9 @@ See [Keeping Up to Date](guide/updating).
</div>
## Create a feature module with routing
### Create a feature module with routing
## 创建一个带路由的特性模块
### 创建一个带路由的特性模块
Next, youll need a feature module with a component to route to.
To make one, enter the following command in the terminal, where `customers` is the name of the feature module. The path for loading the `customers` feature modules is also `customers` because it is specified with the `--route` option:
@ -99,9 +153,9 @@ The import path is the relative path to the module.
注意,惰性加载语法使用 `loadChildren`,其后是一个使用浏览器内置的 `import('...')` 语法进行动态导入的函数。
其导入路径是到当前模块的相对路径。
### Add another feature module
#### Add another feature module
### 添加另一个特性模块
#### 添加另一个特性模块
Use the same command to create a second lazy-loaded feature module with routing, along with its stub component.
@ -123,9 +177,9 @@ The `orders` route, specified with the `--route` option, is added to the `routes
region="routes-customers-orders">
</code-example>
## Set up the UI
### Set up the UI
## 建立 UI
### 建立 UI
Though you can type the URL into the address bar, a navigation UI is easier for the user and more common.
Replace the default placeholder markup in `app.component.html` with a custom nav
@ -134,9 +188,7 @@ so you can easily navigate to your modules in the browser:
虽然你也可以在地址栏中输入 URL不过导航 UI 会更好用,也更常见。
`app.component.html` 中的占位脚本替换成一个自定义的导航,以便你在浏览器中能轻松地在模块之间导航。
<code-example path="lazy-loading-ngmodules/src/app/app.component.html" header="app.component.html" region="app-component-template" header="src/app/app.component.html">
</code-example>
<code-example path="lazy-loading-ngmodules/src/app/app.component.html" header="app.component.html" region="app-component-template" header="src/app/app.component.html"></code-example>
To see your app in the browser so far, enter the following command in the terminal window:
@ -163,9 +215,9 @@ These buttons work, because the CLI automatically added the routes to the featur
{@a config-routes}
## Imports and route configuration
### Imports and route configuration
## 导入与路由配置
### 导入与路由配置
The CLI automatically added each feature module to the routes map at the application level.
Finish this off by adding the default route. In the `app-routing.module.ts` file, update the `routes` array with the following:
@ -216,9 +268,9 @@ The other feature module's routing module is configured similarly.
<code-example path="lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts" id="orders-routing.module.ts" region="orders-routing-module-detail" header="src/app/orders/orders-routing.module.ts (excerpt)"></code-example>
## Confirm its working
### Verify lazy loading
## 确认它工作正常
### 确认它工作正常
You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Shift+j` on a PC and go to the Network Tab.
@ -283,6 +335,134 @@ For more information, see the [`forRoot()` pattern](guide/singleton-services#for
`forChild()` 方法中没有注入器配置,只有像 `RouterOutlet``RouterLink` 这样的指令。
欲知详情,参见[单例服务](guide/singleton-services)章的 [`forRoot()` 模式](guide/singleton-services#forRoot)小节。
{@a preloading}
## Preloading
## 预加载
Preloading improves UX by loading parts of your app in the background.
You can preload modules or component data.
预加载通过在后台加载部分应用来改进用户体验。你可以预加载模块或组件数据。
### Preloading modules
### 预加载模块
Preloading modules improves UX by loading parts of your app in the background so users don't have to wait for the elements to download when they activate a route.
预加载模块通过在后台加载部分应用来改善用户体验,这样用户在激活路由时就无需等待下载这些元素。
To enable preloading of all lazy loaded modules, import the `PreloadAllModules` token from the Angular `router`.
要启用所有惰性加载模块的预加载, 请从 Angular 的 `router` 导入 `PreloadAllModules` 令牌。
<code-example header="AppRoutingModule (excerpt)">
import { PreloadAllModules } from '@angular/router';
</code-example>
Still in the `AppRoutingModule`, specify your preloading strategy in `forRoot()`.
还是在 `AppRoutingModule` 中,通过 `forRoot()` 指定你的预加载策略。
<code-example header="AppRoutingModule (excerpt)">
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
</code-example>
### Preloading component data
### 预加载组件数据
To preload component data, you can use a `resolver`.
Resolvers improve UX by blocking the page load until all necessary data is available to fully display the page.
要预加载组件数据,你可以使用 `resolver` 守卫。解析器通过阻止页面加载来改进用户体验,直到显示页面时的全部必要数据都可用。
#### Resolvers
#### 解析器
Create a resolver service.
With the CLI, the command to generate a service is as follows:
创建一个解析器服务。通过 CLI生成服务的命令如下
<code-example language="none" class="code-shell">
ng generate service <service-name>
</code-example>
In your service, import the following router members, implement `Resolve`, and inject the `Router` service:
在你的服务中,导入下列路由器成员,实现 `Resolve` 接口,并注入到 `Router` 服务中:
<code-example header="Resolver service (excerpt)">
import { Resolve } from '@angular/router';
...
export class CrisisDetailResolverService implements Resolve<> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<> {
// your logic goes here
}
}
</code-example>
Import this resolver into your module's routing module.
把这个解析器导入此模块的路由模块。
<code-example header="Feature module's routing module (excerpt)">
import { YourResolverService } from './your-resolver.service';
</code-example>
Add a `resolve` object to the component's `route` configuration.
在组件的 `route` 配置中添加一个 `resolve` 对象。
<code-example header="Feature module's routing module (excerpt)">
{
path: '/your-path',
component: YourComponent,
resolve: {
crisis: YourResolverService
}
}
</code-example>
In the component, use an `Observable` to get the data from the `ActivatedRoute`.
在此组件中,使用一个 `Observable` 来从 `ActivatedRoute` 获取数据。
<code-example header="Component (excerpt)">
ngOnInit() {
this.route.data
.subscribe((your-parameters) => {
// your data-specific code goes here
});
}
</code-example>
For more information with a working example, see the [routing tutorial section on preloading](guide/router#preloading-background-loading-of-feature-areas).
有关工作示例的更多信息,请参阅[路由教程的预加载部分](guide/router#preloading-background-loading-of-feature-areas) 。
<hr>
## More on NgModules and routing

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,187 @@
# Optimizing client app size with lightweight injection tokens
This page provides a conceptual overview of a dependency injection technique that is recommended for library developers.
Designing your library with *lightweight injection tokens* helps optimize the bundle size of client applications that use your library.
You can manage the dependency structure among your components and injectable services to optimize bundle size by using [tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers).
This normally ensures that if a provided component or service is never actually used by the app, the compiler can eliminate its code from the bundle.
However, due to the way Angular stores injection tokens, it is possible that such an unused component or service can end up in the bundle anyway.
This page describes a dependency-injection design pattern that supports proper tree-shaking by using lightweight injection tokens.
The lightweight injection token design pattern is especially important for library developers. It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's app bundle.
When an application uses your library, there might be some services that your library supplies which the client app doesn't use.
In this case, the app developer should expect that service to be tree-shaken, and not contribute to the size of the compiled app.
Because the application developer cannot know about or remedy a tree-shaking problem in the library, it is the responsibility of the library developer to do so.
To prevent the retention of unused components, your library should use the lightweight injection token design pattern.
## When tokens are retained
To better explain the condition under which token retention occurs, consider a library that provides a library-card component, which contains a body and can contain an optional header.
```
<lib-card>
<lib-header>...</lib-header>
</lib-card>
```
In a likely implementation, the `<lib-card>` component uses `@ContentChild()` or `@ContentChildren()` to obtain `<lib-header>` and `<lib-body>`, as in the following.
```
@Component({
selector: 'lib-header',
...,
})
class LibHeaderComponent {}
@Component({
selector: 'lib-card',
...,
})
class LibCardComponent {
@ContentChild(LibHeaderComponent)
header: LibHeaderComponent|null = null;
}
```
Because `<lib-header>` is optional, the element can appear in the template in its minimal form,
`<lib-card></lib-card>`.
In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`.
`@ContentChild(LibHeaderComponent) header: LibHeaderComponent;`
* One of these reference is in the *type position*-- that is, it specifies `LibHeaderComponent` as a type: `header: LibHeaderComponent;`.
* The other reference is in the *value position*-- that is, LibHeaderComponent is the value of the `@ContentChild()` parameter decorator: `@ContentChild(LibHeaderComponent)`.
The compiler handles token references in these positions differently.
* The compiler erases *type position* references after conversion from TypeScript, so they have no impact on tree-shaking.
* The compiler must retain *value position* references at runtime, which prevents the component from being tree-shaken.
In the example, the compiler retains the `LibHeaderComponent` token that occurs in the value position, which prevents the referenced component from being tree-shaken, even if the application developer does not actually use `<lib-header>` anywhere.
If `LibHeaderComponent` is large (code, template, and styles), including it unnecessarily can significantly increase the size of the client application.
## When to use the lightweight injection token pattern
The tree-shaking problem arises when a component is used as an injection token.
There are two cases when that can happen.
* The token is used in the value position of a [content query](guide/lifecycle-hooks#using-aftercontent-hooks "See more about using content queries.").
* The token is used as a type specifier for constructor injection.
In the following example, both uses of the `OtherComponent` token cause retention of `OtherComponent` (that is, prevent it from being tree-shaken when it is not used).
```
class MyComponent {
constructor(@Optional() other: OtherComponent) {}
@ContentChild(OtherComponent)
other: OtherComponent|null;
}
```
Although tokens used only as type specifiers are removed when converted to JavaScript, all tokens used for dependency injection are needed at runtime.
These effectively change `constructor(@Optional() other: OtherComponent)` to `constructor(@Optional() @Inject(OtherComponent) other)`. The token is now in a value position, and causes the tree shaker to retain the reference.
<div class="alert is helpful">
For all services, a library should use [tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers), providing dependencies at the root level rather than in component constructors.
</div>
## Using lightweight injection tokens
The lightweight injection token design pattern consists of using a small abstract class as an injection token, and providing the actual implementation at a later stage.
The abstract class is retained (not tree-shaken), but it is small and has no material impact on the application size.
The following example shows how this works for the `LibHeaderComponent`.
```
abstract class LibHeaderToken {}
@Component({
selector: 'lib-header',
providers: [
{provide: LibHeaderToken, useExisting: LibHeaderComponent}
]
...,
})
class LibHeaderComponent extends LibHeaderToken {}
@Component({
selector: 'lib-card',
...,
})
class LibCardComponent {
@ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
}
```
In this example, the `LibCardComponent` implementation no longer refers to `LibHeaderComponent` in either the type position or the value position.
This allows full tree shaking of `LibHeaderComponent` to take place.
The `LibHeaderToken` is retained, but it is only a class declaration, with no concrete implementation. It is small and does not materially impact the application size when retained after compilation.
Instead, `LibHeaderComponent` itself implements the abstract `LibHeaderToken` class. You can safely use that token as the provider in the component definition, allowing Angular to correctly inject the concrete type.
To summarize, the lightweight injection token pattern consists of the following.
1. A lightweight injection token that is represented as an abstract class.
2. A component definition that implements the abstract class.
3. Injection of the lightweight pattern, using ` @ContentChild()` or `@ContentChildren()`.
4. A provider in the implementation of the lightweight injection token which associates the lightweight injection token with the implementation.
### Use the lightweight injection token for API definition
A component that injects a lightweight injection token might need to invoke a method in the injected class.
Because the token is now an abstract class, and the injectable component implements that class, you must also declare an abstract method in the abstract lightweight injection token class.
The implementation of the method (with all of its code overhead) resides in the injectable component that can be tree-shaken.
This allows the parent to communicate with the child (if it is present) in a type-safe manner.
For example, the `LibCardComponent` now queries`LibHeaderToken` rather than `LibHeaderComponent`.
The following example shows how the pattern allows `LibCardComponent` to communicate with the `LibHeaderComponent` without actually referring to `LibHeaderComponent`.
```
abstract class LibHeaderToken {
abstract doSomething(): void;
}
@Component({
selector: 'lib-header',
providers: [
{provide: LibHeaderToken, useExisting: LibHeader}
]
...,
})
class LibHeaderComponent extends LibHeaderToken {
doSomething(): void {
// Concrete implementation of `doSomething`
}
}
@Component({
selector: 'lib-card',
...,
})
class LibCardComponent implement AfterContentInit {
@ContentChild(LibHeaderToken)
header: LibHeaderToken|null = null;
ngAfterContentInit(): void {
this.header && this.header.doSomething();
}
}
```
In this example the parent queries the token to obtain the child component, and stores the resulting component reference if it is present.
Before calling a method in the child, the parent component checks to see if the child component is present.
If the child component has been tree-shaken, there is no runtime reference to it, and no call to its method.
### Naming your lightweight injection token
Lightweight injection tokens are only useful with components. The Angular style guide suggests that you name components using the "Component" suffix. The example "LibHeaderComponent" follows this convention.
To maintain the relationship between the component and its token while still distinguishing between them, the recommended style is to use the component base name with the suffix "Token" to name your lightweight injection tokens: "LibHeaderToken".

View File

@ -79,17 +79,17 @@ The result will be updated for changes to your view, such as changes to `ngIf` a
而使用动态查询( `static: false` )时,此查询会分别在 `ngAfterViewInit()``ngAfterContentInit()` 之后进行解析。此结果将随着对视图的更改而更新,例如对 `ngIf``ngFor` 块的更改。
For more information, see the following entries in the
[Static Query Migration Guide](https://angular.io/guide/static-query-migration):
[Static Query Migration Guide](guide/static-query-migration):
要了解更多信息,请参见[静态查询迁移指南](https://angular.cn/guide/static-query-migration)中的以下条目:
要了解更多信息,请参见[静态查询迁移指南](guide/static-query-migration)中的以下条目:
* [How do I choose which `static` flag value to use: `true` or `false`?](https://angular.io/guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
* [How do I choose which `static` flag value to use: `true` or `false`?](guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
[如何选择使用哪个 `static` 标志值: `true` 还是 `false` ](https://angular.cn/guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
[如何选择使用哪个 `static` 标志值: `true` 还是 `false` ](guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
* [Is there a case where I should use `{static: true}`?](https://angular.io/guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
* [Is there a case where I should use `{static: true}`?](guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
[哪些情况下我应该使用 `{static: true}` ](https://angular.cn/guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
[哪些情况下我应该使用 `{static: true}` ](guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
</div>

View File

@ -0,0 +1,54 @@
# Solution-style `tsconfig.json` migration
## What does this migration do?
This migration adds support to existing projects for TypeScript's new ["solution-style" tsconfig feature](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig).
Support is added by making two changes:
1. Renaming the workspace-level `tsconfig.json` to `tsconfig.base.json`.
All project [TypeScript configuration files](guide/typescript-configuration) will extend from this base which contains the common options used throughout the workspace.
2. Adding the solution `tsconfig.json` file at the root of the workspace.
This `tsconfig.json` file will only contain references to project-level TypeScript configuration files and is only used by editors/IDEs.
As an example, the solution `tsconfig.json` for a new project is as follows:
```json
// This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScripts language server to improve development experience.
// It is not intended to be used to perform a compilation.
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./e2e/tsconfig.json"
}
]
}
```
## Why is this migration necessary?
Solution-style `tsconfig.json` files provide an improved editing experience and fix several long-standing defects when editing files in an IDE.
IDEs that leverage the TypeScript language service (for example, [Visual Studio Code](https://code.visualstudio.com)), will only use TypeScript configuration files that are named `tsconfig.json`.
In complex projects, there may be more than one compilation unit and each of these units may have different settings and options.
With the Angular CLI, a project will have application code that will target a browser.
It will also have unit tests that should not be included within the built application and that also need additional type information present (`jasmine` in this case).
Both parts of the project also share some but not all of the code within the project.
As a result, two separate TypeScript configuration files (`tsconfig.app.json` and `tsconfig.spec.json`) are needed to ensure that each part of the application is configured properly and that the right types are used for each part.
Also if web workers are used within a project, an additional tsconfig (`tsconfig.worker.json`) is needed.
Web workers use similar but incompatible types to the main browser application.
This requires the additional configuration file to ensure that the web worker files use the appropriate types and will build successfully.
While the Angular build system knows about all of these TypeScript configuration files, an IDE using TypeScript's language service does not.
Because of this, an IDE will not be able to properly analyze the code from each part of the project and may generate false errors or make suggestions that are incorrect for certain files.
By leveraging the new solution-style tsconfig, the IDE can now be aware of the configuration of each part of a project.
This allows each file to be treated appropriately based on its tsconfig.
IDE features such as error/warning reporting and auto-suggestion will operate more effectively as well.
The TypeScript 3.9 release [blog post](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig) also contains some additional information regarding this new feature.

View File

@ -0,0 +1,52 @@
# `tslib` direct dependency migration
## What does this migration do?
If you have any libraries within your workspace, this migration will convert `tslib` peer dependencies to direct dependencies for the libraries.
TypeScript uses the `tslib` package to provide common helper functions used in compiled TypeScript code.
The `tslib` version is also updated to `2.0.0` to support TypeScript 3.9.
Before:
```json
{
"name": "my-lib",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^9.0.0",
"@angular/core": "^9.0.0",
"tslib": "^1.12.0"
}
}
```
After:
```json
{
"name": "my-lib",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^9.0.0",
"@angular/core": "^9.0.0"
},
"dependencies": {
"tslib": "^2.0.0"
}
}
```
## Why is this migration necessary?
The [`tslib`](https://github.com/Microsoft/tslib) is a runtime library for Typescript.
The version of this library is bound to the version of the TypeScript compiler used to compile a library.
Peer dependencies do not accurately represent this relationship between the runtime and the compiler.
If `tslib` remained declared as a library peer dependency, it would be possible for some Angular workspaces to get into a state where the workspace could not satisfy `tslib` peer dependency requirements for multiple libraries, resulting in build-time or run-time errors.
As of TypeScript 3.9 (used by Angular v10), `tslib` version of 2.x is required to build new applications.
However, older libraries built with previous version of TypeScript and already published to npm might need `tslib` 1.x.
This migration makes it possible for code depending on incompatible versions of the `tslib` runtime library to remain interoperable.
## Do I still need `tslib` as a dependency in my workspace `package.json`?
Yes.
The `tslib` dependency declared in the `package.json` file of the workspace is used to build applications within this workspace, as well as run unit tests for workspace libraries, and is required.

View File

@ -0,0 +1,33 @@
# Update `module` and `target` compiler options migration
## What does this migration do?
This migration adjusts the [`target`](https://www.typescriptlang.org/v2/en/tsconfig#target) and [`module`](https://www.typescriptlang.org/v2/en/tsconfig#module) settings within the [TypeScript configuration files](guide/typescript-configuration) for the workspace.
The changes to each option vary based on the builder or command that uses the TypeScript configuration file.
Unless otherwise noted, changes are only made if the existing value was not changed since the project was created.
This process helps ensure that intentional changes to the options are kept in place.
TypeScript Configuration File(s) | Changed Property | Existing Value | New Value
------------- | ------------- | ------------- | ------------- | -------------
`<workspace base>/tsconfig.base.json` | `"module"` | `"esnext"` | `"es2020"`
Used in `browser` builder options (`ng build` for applications) | `"module"` | `"esnext"` | `"es2020"`
Used in `ng-packgr` builder options (`ng build` for libraries) | `"module"` | `"esnext"` | `"es2020"`
Used in `karma` builder options (`ng test` for applications) | `"module"` | `"esnext"` | `"es2020"`
Used in `server` builder options (universal) | `"module"` | `"commonjs"` | _removed_
Used in `server` builder options (universal) | `"target"` | _any_ | `"es2016"`
Used in `protractor` builder options (`ng e2e` for applications) | `"target"` | `"es5"` | `"es2018"`
## Why is this migration necessary?
This migration provides improvements to the long-term supportability of projects by updating the projects to use recommended best practice compilation options.
For the functionality that executes on Node.js, such as Universal and Protractor, the new settings provide performance and troubleshooting benefits as well.
The minimum Node.js version for the Angular CLI (v10.13) supports features in ES2018 and earlier.
By targeting later ES versions, the compiler transforms less code and can use newer features directly.
Since zone.js does not support native `async` and `await`, the universal builds still target ES2016.
## Why `"es2020"` instead of `"esnext"`?
In TypeScript 3.9, the behavior of the TypeScript compiler controlled by `module` is the same with both `"esnext"` and `"es2020"` values.
This behavior can change in the future, because the `"esnext"` option could evolve in a backwards incompatible ways, resulting in build-time or run-time errors during a TypeScript update.
As a result, code can become unstable. Using the `"es2020"` option mitigates this risk.

View File

@ -342,9 +342,9 @@ The following table summarizes the `@NgModule` metadata properties.
Angular 会自动把模块的 `bootstrap` 中的组件和路由定义中的组件添加到 `entryComponents` 列表。
That leaves only components bootstrapped using one of the imperative techniques, such as [`ViewComponentRef.createComponent()`](https://angular.io/api/core/ViewContainerRef#createComponent) as undiscoverable.
That leaves only components bootstrapped using one of the imperative techniques, such as [`ViewComponentRef.createComponent()`](api/core/ViewContainerRef#createComponent) as undiscoverable.
而那些使用不易察觉的[`ViewComponentRef.createComponent()`](https://angular.cn/api/core/ViewContainerRef#createComponent)的方式进行命令式引导的组件仍然需要添加。
而那些使用不易察觉的[`ViewComponentRef.createComponent()`](api/core/ViewContainerRef#createComponent)的方式进行命令式引导的组件仍然需要添加。
Dynamic component loading is not common in most apps beyond the router. If you need to dynamically load components, you must add these components to the `entryComponents` list yourself.

View File

@ -190,8 +190,6 @@ Package name | Description
[**@angular/cli**](https://github.com/angular/angular-cli/) | Angular CLI 工具。
**@angular/<br />compiler&#8209;cli** | The Angular compiler, which is invoked by the Angular CLI's `ng build` and `ng serve` commands.
**@angular/<br />compiler&#8209;cli** | Angular 编译器Angular CLI 的 `ng build``ng serve` 命令会调用它。
**@angular/<br />language&#8209;service** | The [Angular language service](guide/language-service) analyzes component templates and provides type and error information that TypeScript-aware editors can use to improve the developer's experience. For example, see the [Angular language service extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template).
**@angular/<br />language&#8209;service** | [Angular 语言服务](guide/language-service)会分析组件模板并给出类型信息和错误信息,支持 TypeScript 的编辑器可以使用它来提升开发体验。具体的例子可参见 [VS Code 的 Angular 语言服务扩展](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)。
**@types/... ** | TypeScript definition files for 3rd party libraries such as Jasmine and Node.js.
**@types/... ** | 第三方库(如 Jasmine、Node.js的 TypeScript 类型定义文件。
[**codelyzer**](https://www.npmjs.com/package/codelyzer) | A linter for Angular apps whose rules conform to the Angular [style guide](guide/styleguide).

View File

@ -28,9 +28,9 @@ When you call `emit()`, it passes the emitted value to the `next()` method of an
Angular 提供了一个 `EventEmitter` 类,它用来通过组件的 [`@Output()` 装饰器](guide/template-syntax#how-to-use-output) 发送一些值。`EventEmitter` 扩展了 [RxJS `Subject`](https://rxjs.dev/api/index/class/Subject),并添加了一个 `emit()` 方法,这样它就可以发送任意值了。当你调用 `emit()` 时,就会把所发送的值传给订阅上来的观察者的 `next()` 方法。
A good example of usage can be found in the [EventEmitter](https://angular.io/api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
A good example of usage can be found in the [EventEmitter](api/core/EventEmitter) documentation. Here is the example component that listens for open and close events:
这种用法的例子参见 [EventEmitter](https://angular.cn/api/core/EventEmitter) 文档。下面这个范例组件监听了 `open``close` 事件:
这种用法的例子参见 [EventEmitter](api/core/EventEmitter) 文档。下面这个范例组件监听了 `open``close` 事件:
`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
@ -66,9 +66,9 @@ Angular 的 `HttpClient` 从 HTTP 方法调用中返回了可观察对象。例
## Async 管道
The [AsyncPipe](https://angular.io/api/common/AsyncPipe) subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
The [AsyncPipe](api/common/AsyncPipe) subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.
[AsyncPipe](https://angular.cn/api/common/AsyncPipe) 会订阅一个可观察对象或承诺,并返回其发出的最后一个值。当发出新值时,该管道就会把这个组件标记为需要进行变更检查的(译注:因此可能导致刷新界面)。
[AsyncPipe](api/common/AsyncPipe) 会订阅一个可观察对象或承诺,并返回其发出的最后一个值。当发出新值时,该管道就会把这个组件标记为需要进行变更检查的(译注:因此可能导致刷新界面)。
The following example binds the `time` observable to the component's view. The observable continuously updates the view with the current time.
@ -80,17 +80,17 @@ The following example binds the `time` observable to the component's view. The o
## 路由器 (router)
[`Router.events`](https://angular.io/api/router/Router#events) provides events as observables. You can use the `filter()` operator from RxJS to look for events of interest, and subscribe to them in order to make decisions based on the sequence of events in the navigation process. Here's an example:
[`Router.events`](api/router/Router#events) provides events as observables. You can use the `filter()` operator from RxJS to look for events of interest, and subscribe to them in order to make decisions based on the sequence of events in the navigation process. Here's an example:
[`Router.events`](https://angular.cn/api/router/Router#events) 以可观察对象的形式提供了其事件。
[`Router.events`](api/router/Router#events) 以可观察对象的形式提供了其事件。
你可以使用 RxJS 中的 `filter()` 操作符来找到感兴趣的事件,并且订阅它们,以便根据浏览过程中产生的事件序列作出决定。
例子如下:
<code-example path="observables-in-angular/src/main.ts" header="Router events" region="router"></code-example>
The [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) is an injected router service that makes use of observables to get information about a route path and parameters. For example, `ActivatedRoute.url` contains an observable that reports the route path or paths. Here's an example:
The [ActivatedRoute](api/router/ActivatedRoute) is an injected router service that makes use of observables to get information about a route path and parameters. For example, `ActivatedRoute.url` contains an observable that reports the route path or paths. Here's an example:
[ActivatedRoute](https://angular.cn/api/router/ActivatedRoute) 是一个可注入的路由器服务,它使用可观察对象来获取关于路由路径和路由参数的信息。比如,`ActivatedRoute.url` 包含一个用于汇报路由路径的可观察对象。例子如下:
[ActivatedRoute](api/router/ActivatedRoute) 是一个可注入的路由器服务,它使用可观察对象来获取关于路由路径和路由参数的信息。比如,`ActivatedRoute.url` 包含一个用于汇报路由路径的可观察对象。例子如下:
<code-example path="observables-in-angular/src/main.ts" header="ActivatedRoute" region="activated_route"></code-example>
@ -98,9 +98,9 @@ The [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) is an injecte
## 响应式表单 (reactive forms)
Reactive forms have properties that use observables to monitor form control values. The [`FormControl`](https://angular.io/api/forms/FormControl) properties `valueChanges` and `statusChanges` contain observables that raise change events. Subscribing to an observable form-control property is a way of triggering application logic within the component class. For example:
Reactive forms have properties that use observables to monitor form control values. The [`FormControl`](api/forms/FormControl) properties `valueChanges` and `statusChanges` contain observables that raise change events. Subscribing to an observable form-control property is a way of triggering application logic within the component class. For example:
响应式表单具有一些属性,它们使用可观察对象来监听表单控件的值。
[`FormControl`](https://angular.cn/api/forms/FormControl) 的 `valueChanges` 属性和 `statusChanges` 属性包含了会发出变更事件的可观察对象。订阅可观察的表单控件属性是在组件类中触发应用逻辑的途径之一。比如:
[`FormControl`](api/forms/FormControl) 的 `valueChanges` 属性和 `statusChanges` 属性包含了会发出变更事件的可观察对象。订阅可观察的表单控件属性是在组件类中触发应用逻辑的途径之一。比如:
<code-example path="observables-in-angular/src/main.ts" header="Reactive forms" region="forms"></code-example>

File diff suppressed because it is too large Load Diff

View File

@ -104,12 +104,12 @@ Though you can provide services by lazy loading modules, not all services can be
Another way to limit provider scope is by adding the service you want to limit to the components
`providers` array. Component providers and NgModule providers are independent of each other. This
method is helpful when you want to eagerly load a module that needs a service all to itself.
Providing a service in the component limits the service only to that component (other components in
the same module cant access it).
Providing a service in the component limits the service only to that component and its descendants.
Other components in the same module cant access it.
另一种限定提供者作用域的方式是把要限定的服务添加到组件的 `providers` 数组中。组件中的提供者和 NgModule 中的提供者是彼此独立的。
当你要急性加载一个自带了全部所需服务的模块时,这种方式是有帮助的。
在组件中提供服务,会限定该服务只能在该组件中有效(同一模块中的其它组件不能访问它)
在组件中提供服务,会限定该服务只能在该组件及其子组件中有效,而同一模块中的其它组件不能访问它
<code-example path="providers/src/app/app.component.ts" region="component-providers" header="src/app/app.component.ts"></code-example>

View File

@ -22,15 +22,15 @@ Before going further into reactive forms, you should have a basic understanding
在深入了解被动表单之前,你应该对这些内容有一个基本的了解:
- TypeScript programming.
* TypeScript programming.
TypeScript 编程。
- Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
* Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
Angular 的应用设计基础,就像[Angular Concepts 中](guide/architecture "Angular 概念简介。")描述的那样。
- The form-design concepts that are presented in [Introduction to Forms](guide/forms-overview "Overview of Angular forms.").
* The form-design concepts that are presented in [Introduction to Forms](guide/forms-overview "Overview of Angular forms.").
[“表单简介”](guide/forms-overview "Angular 表单概述")中提供的表单设计概念。
@ -68,11 +68,11 @@ There are three steps to using form controls.
在你的应用中注册响应式表单模块。该模块声明了一些你要用在响应式表单中的指令。
1. Generate a new `FormControl` instance and save it in the component.
2. Generate a new `FormControl` instance and save it in the component.
生成一个新的 `FormControl` 实例,并把它保存在组件中。
1. Register the `FormControl` in the template.
3. Register the `FormControl` in the template.
在模板中注册这个 `FormControl`
@ -130,11 +130,11 @@ After you create the control in the component class, you must associate it with
<div class="alert is-helpful">
- For a summary of the classes and directives provided by `ReactiveFormsModule`, see the [Reactive forms API](#reactive-forms-api "API summary.") section below.
* For a summary of the classes and directives provided by `ReactiveFormsModule`, see the [Reactive forms API](#reactive-forms-api "API summary.") section below.
有关 `ReactiveFormsModule` 提供的类和指令的汇总表,请参阅下面的[响应式表单 API](#reactive-forms-api "API 摘要")部分。
- For complete syntax details of these classes and directives, see the API reference documentation for the [Forms package](api/forms "API reference.").
* For complete syntax details of these classes and directives, see the API reference documentation for the [Forms package](api/forms "API reference.").
有关这些类和指令的完整语法,请参阅 API 参考手册中的 [Forms 包](api/forms "API 参考。")部分。
@ -220,7 +220,7 @@ Update the template with a button to simulate a name update. When you click the
The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value.
由于表单模型是该控件的权威数据源,因此当你单击该按钮时,组件中该输入框的值也变化了,覆盖掉它的当前值。
由于表单模型是该控件的事实之源,因此当你单击该按钮时,组件中该输入框的值也变化了,覆盖掉它的当前值。
<div class="lightbox">
<img src="generated/images/guide/reactive-forms/name-editor-2.png" alt="Name Editor Update">
@ -242,11 +242,11 @@ Forms typically contain several related controls. Reactive forms provide two way
表单中通常会包含几个相互关联的控件。响应式表单提供了两种把多个相关控件分组到同一个输入表单中的方法。
- A form *group* defines a form with a fixed set of controls that you can manage together. Form group basics are discussed in this section. You can also [nest form groups](#nested-groups "See more about nesting groups.") to create more complex forms.
* A form *group* defines a form with a fixed set of controls that you can manage together. Form group basics are discussed in this section. You can also [nest form groups](#nested-groups "See more about nesting groups.") to create more complex forms.
表单*组*定义了一个带有一组控件的表单,你可以把它们放在一起管理。表单组的基础知识将在本节中讨论。你也可以通过[嵌套表单组](#nested-groups "详细了解嵌套组。")来创建更复杂的表单。
- A form *array* defines a dynamic form, where you can add and remove controls at run time. You can also nest form arrays to create more complex forms. For more about this option, see [Creating dynamic forms](#dynamic-forms "See more about form arrays.") below.
* A form *array* defines a dynamic form, where you can add and remove controls at run time. You can also nest form arrays to create more complex forms. For more about this option, see [Creating dynamic forms](#dynamic-forms "See more about form arrays.") below.
表单*数组*定义了一个动态表单,你可以在运行时添加和删除控件。你也可以通过嵌套表单数组来创建更复杂的表单。欲知详情,参见下面的[创建动态表单](#dynamic-forms "详细了解表单数组。")。
@ -276,11 +276,11 @@ To add a form group to this component, take the following steps.
创建一个 `FormGroup` 实例。
1. Associate the `FormGroup` model and view.
2. Associate the `FormGroup` model and view.
把这个 `FormGroup` 模型关联到视图。
1. Save the form data.
3. Save the form data.
保存表单数据。
@ -318,7 +318,7 @@ A form group tracks the status and changes for each of its controls, so if one o
Note that just as a form group contains a group of controls, the *profile form* `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs. The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in `FormGroup`. The form controls communicate with their respective elements. They also communicate changes to the form group instance, which provides the source of truth for the model value.
注意,就像 `FormGroup` 所包含的那控件一样,*profileForm* 这个 `FormGroup` 也通过 `FormGroup` 指令绑定到了 `form` 元素,在该模型和表单中的输入框之间创建了一个通讯层。
`FormControlName` 指令提供的 `formControlName` 属性把每个输入框和 `FormGroup` 中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯,它们还把更改传给 `FormGroup`,这个 `FormGroup` 是模型值的权威数据源。
`FormControlName` 指令提供的 `formControlName` 属性把每个输入框和 `FormGroup` 中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯,它们还把更改传给 `FormGroup`,这个 `FormGroup` 是模型值的事实之源。
**Save form data**
@ -512,11 +512,11 @@ Use the following steps to take advantage of this service.
导入 `FormBuilder` 类。
1. Inject the `FormBuilder` service.
2. Inject the `FormBuilder` service.
注入这个 `FormBuilder` 服务。
1. Generate the form contents.
3. Generate the form contents.
生成表单内容。
@ -598,7 +598,7 @@ Compare using the form builder to creating the instances manually.
## 验证表单输入
*Form validation* is used to ensure that user input is complete and correct. This section covers adding a single validator to a form control and displaying the overall form status. Form validation is covered more extensively in the [Form Validation](guide/form-validation "All about form validation.") guide.
_Form validation_ is used to ensure that user input is complete and correct. This section covers adding a single validator to a form control and displaying the overall form status. Form validation is covered more extensively in the [Form Validation](guide/form-validation "All about form validation.") guide.
*表单验证*用于确保用户的输入是完整和正确的。本节讲解了如何把单个验证器添加到表单控件中,以及如何显示表单的整体状态。表单验证的更多知识在[表单验证](guide/form-validation "关于表单验证")一章中有详细的讲解。
@ -610,11 +610,11 @@ Use the following steps to add form validation.
在表单组件中导入一个验证器函数。
1. Add the validator to the field in the form.
2. Add the validator to the field in the form.
把这个验证器添加到表单中的相应字段。
1. Add logic to handle the validation status.
3. Add logic to handle the validation status.
添加逻辑来处理验证状态。
@ -709,15 +709,15 @@ To define a dynamic form, take the following steps.
导入 `FormArray` 类。
1. Define a `FormArray` control.
2. Define a `FormArray` control.
定义一个 `FormArray` 控件。
1. Access the `FormArray` control with a getter method.
3. Access the `FormArray` control with a getter method.
使用 getter 方法访问 `FormArray` 控件。
1. Display the form array in a template.
4. Display the form array in a template.
在模板中显示这个表单数组。

View File

@ -164,6 +164,8 @@ The following table provides the status for Angular versions under support.
Version | Status | Released | Active Ends | LTS Ends
------- | ------ | ------------ | ------------ | ------------
版本 | 状态 | 发布 | 停止活动 | LTS 结束
^10.0.0 | Active | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021
^10.0.0 | 活跃 | 2020 年 6 月 24 日 | 2020 年 12 月 24 日 | Dec 24, 2021
^9.0.0 | Active | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
^9.0.0 | 活跃 | 2020 年 2 月 6 日 | 2020 年 8 月 6 日 | 2021 年 8 月 6 日
^8.0.0 | LTS | May 28, 2019 | Nov 28, 2019 | Nov 28, 2020

View File

@ -20,17 +20,17 @@ A basic understanding of the following concepts:
<hr>
The [AnimationOptions](https://angular.io/api/animations/AnimationOptions) interface in Angular animations enables you to create animations that you can reuse across different components.
The [AnimationOptions](api/animations/AnimationOptions) interface in Angular animations enables you to create animations that you can reuse across different components.
Angular 动画库中的 [AnimationOptions](https://angular.cn/api/animations/AnimationOptions) 接口让你能创建可以在不同组件之间复用的动画。
Angular 动画库中的 [AnimationOptions](api/animations/AnimationOptions) 接口让你能创建可以在不同组件之间复用的动画。
## Creating reusable animations
## 创建可复用动画
To create a reusable animation, use the [`animation()`](https://angular.io/api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your app components using the [`useAnimation()`](https://angular.io/api/animations/useAnimation) API.
To create a reusable animation, use the [`animation()`](api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your app components using the [`useAnimation()`](api/animations/useAnimation) API.
要想创建可复用的动画,请使用 [`animation()`](https://angular.cn/api/animations/animation) 方法来在独立的 `.ts` 文件中定义动画,并把该动画的定义声明为一个导出的 `const` 变量。然后你就可以在应用的组件代码中通过 [`useAnimation()`](https://angular.cn/api/animations/useAnimation) 来导入并复用它了。
要想创建可复用的动画,请使用 [`animation()`](api/animations/animation) 方法来在独立的 `.ts` 文件中定义动画,并把该动画的定义声明为一个导出的 `const` 变量。然后你就可以在应用的组件代码中通过 [`useAnimation()`](api/animations/useAnimation) 来导入并复用它了。
<code-example path="animations/src/app/animations.ts" header="src/app/animations.ts" region="reusable" language="typescript"></code-example>

View File

@ -8,7 +8,7 @@ To implement this kind of navigation within the single page of your app, you use
在单页面应用中,你可以通过显示或隐藏特定组件的显示部分来改变用户能看到的内容,而不用去服务器获取新页面。当用户执行应用任务时,他们要在你预定义的不同[视图](guide/glossary#view "视图的定义")之间移动。要想在应用的单个页面中实现这种导航,你可以使用 Angular 的**`Router`**(路由器)。
To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular *router*.
To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular _router_.
The router enables navigation by interpreting a browser URL as an instruction to change the view.
为了处理从一个[视图](guide/glossary#view)到下一个视图之间的导航,你可以使用 Angular 的*路由器*。路由器会把浏览器 URL 解释成改变视图的操作指南,以完成导航。
@ -33,7 +33,7 @@ Before creating a route, you should be familiar with the following:
[模板的基础知识](guide/glossary#template)
* An Angular appyou can generate a basic Angular app using the [Angular CLI](cli).
* An Angular app&mdash;you can generate a basic Angular app using the [Angular CLI](cli).
一个 Angular 应用,你可以使用 [Angular CLI](cli) 生成一个基本的 Angular 应用。
@ -231,9 +231,9 @@ To get information from a route:
这些 `import` 语句添加了组件所需的几个重要元素。要详细了解每个 API请参阅以下 API 页面:
- [`Router`](api/router)
- [`ActivatedRoute`](api/router/ActivatedRoute)
- [`ParamMap`](api/router/ParamMap)
* [`Router`](api/router)
* [`ActivatedRoute`](api/router/ActivatedRoute)
* [`ParamMap`](api/router/ParamMap)
1. Inject an instance of `ActivatedRoute` by adding it to your application's constructor:
@ -276,7 +276,7 @@ To set up a wildcard route, add the following code to your `routes` definition.
<code-example header="AppRoutingModule (excerpt)">
{ path: '\*\*', component: <component-name> }
{ path: '**', component: <component-name> }
</code-example>
@ -495,165 +495,19 @@ Inject `ActivatedRoute` and `Router` in the constructor of the component class s
{@a lazy-loading}
## Lazy loading modules
## Lazy loading
## 惰性加载模块
## 惰性加载
To lazy load Angular modules, use `loadchildren` (instead of `component`) in your `AppRoutingModule` `routes` configuration as follows:
You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the app launches.
Additionally, you can preload parts of your app in the background to improve the user experience.
要惰性加载 Angular 模块,请在 `AppRoutingModule``routes` 配置中使用 `loadChildren` (而不是 `component` ),如下所示:
你可以配置路由定义来实现惰性加载模块,这意味着 Angular 只会在需要时才加载这些模块,而不是在应用启动时就加载全部。
另外,你可以在后台预加载一些应用部件来改善用户体验。
<code-example header="AppRoutingModule (excerpt)">
For more information on lazy loading and preloading see the dedicated guide [Lazy loading NgModules](guide/lazy-loading-ngmodules).
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
</code-example>
In the lazy loaded module's routing module, add a route for the component.
在惰性加载模块的路由模块中,为组件添加路由。
<code-example header="Routing module for lazy loaded module (excerpt)">
const routes: Routes = [
{
path: '',
component: ItemsComponent
}
];
const routesRoutes = [{path''componentItemsComponent}];
</code-example>
Also be sure to remove the `ItemsModule` from the `AppModule`. For more information on lazy loading modules see [Lazy-loading feature modules](guide/lazy-loading-ngmodules).
另外一定要从 `AppModule` 中删除 `ItemsModule`。有关惰性加载模块的更多知识,请参阅[惰性加载特性模块](guide/lazy-loading-ngmodules)。
{@a preloading}
## Preloading
## 预加载
Preloading improves UX by loading parts of your app in the background. You can preload modules or component data.
预加载通过在后台加载部分应用来改进用户体验。你可以预加载各种模块或组件数据。
### Preloading modules
### 预加载模块
To enable preloading of all lazy loaded modules, import the `PreloadAllModules` token from the Angular `router`.
要为所有惰性加载模块启用预加载,请从 Angular `router` 中导入 `PreloadAllModules` 令牌。
<code-example header="AppRoutingModule (excerpt)">
import { PreloadAllModules } from '@angular/router';
</code-example>
Still in the `AppRoutingModule`, specify your preloading strategy in `forRoot()`.
仍然在 `AppRoutingModule` 中,通过 `forRoot()` 指定你的预加载策略。
<code-example header="AppRoutingModule (excerpt)">
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
RouterModule.forRootappRoutes{preloadingStrategyPreloadAllModules}
</code-example>
### Preloading component data
### 预加载组件数据
You can preload component data so that all elements and data on a page render at the same time when the user activates a route. To preload component data, you can use a `resolver`.
你可以预加载组件数据,以便在用户激活一个路由的同时渲染出页面上的所有元素和数据。要预加载组件数据,可以使用 `resolver`
#### Resolvers
#### 解析器Resolver
Create a resolver service. With the CLI, the command to generate a service is as follows:
创建一个解析器服务。借助 CLI 生成服务的命令如下:
<code-example language="none" class="code-shell">
ng generate service <service-name>
</code-example>
In your service, import the following router members, implement `Resolve`, and inject the `Router` service:
在你的服务中,导入下列路由器成员,实现 `Resolve`,并注入到 `Router` 服务中:
<code-example header="Resolver service (excerpt)">
import { Resolve } from '@angular/router';
...
export class CrisisDetailResolverService implements Resolve&lt;> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;> {
// your logic goes here
}
}
</code-example>
Import this resolver into your module's routing module.
把这个解析器导入你的路由模块。
<code-example header="Feature module's routing module (excerpt)">
import { YourResolverService } from './your-resolver.service';
</code-example>
Add a `resolve` object to the component's `route` configuration.
在组件的 `route` 配置中添加一个 `resolve` 对象。
<code-example header="Feature module's routing module (excerpt)">
{
path: '/your-path',
component: YourComponent,
resolve: {
crisis: YourResolverService
}
}
</code-example>
In the component, use an observable to get the data from the `ActivatedRoute`.
在组件中,使用一个可观察对象来从 `ActivatedRoute` 获取数据。
<code-example header="Component (excerpt)">
ngOnInit() {
this.route.data
.subscribe((your-parameters) => {
// your data-specific code goes here
});
}
</code-example>
For more information with a working example, see the [routing tutorial section on preloading](guide/router#preloading-background-loading-of-feature-areas).
关于这个示例的更多信息,请参阅[路由教程中关于预加载的部分](guide/router#preloading-background-loading-of-feature-areas)。
关于惰性加载和预加载的详情,请参见专门的指南[惰性加载 NgModule](guide/lazy-loading-ngmodules)。
## Preventing unauthorized access
@ -741,15 +595,15 @@ Along the way, it highlights key features of the router such as:
把应用的各个特性组织成模块。
* Navigating to a component (*Heroes* link to "Heroes List").
* Navigating to a component (_Heroes_ link to "Heroes List").
导航到组件(*Heroes* 链接到“英雄列表”组件)。
导航到组件(_Heroes_ 链接到“英雄列表”组件)。
* Including a route parameter (passing the Hero `id` while routing to the "Hero Detail").
包含一个路由参数(当路由到“英雄详情”时,把该英雄的 `id` 传进去)。
* Child routes (the *Crisis Center* has its own routes).
* Child routes (the _Crisis Center_ has its own routes).
子路由(*危机中心*特性有一组自己的路由)。
@ -1065,7 +919,7 @@ A wildcard route can navigate to a custom "404 Not Found" component or [redirect
<div class="alert is-helpful">
The router selects the route with a [*first match wins*](#example-config) strategy.
The router selects the route with a [_first match wins_](#example-config) strategy.
Because a wildcard route is the least specific route, place it last in the route configuration.
路由器会使用[先到先得](guide/router#example-config)的策略来选择路由。
@ -1149,7 +1003,7 @@ A redirect route requires a `pathMatch` property to tell the router how to match
In this app, the router should select the route to the `HeroListComponent` only when the *entire URL* matches `''`, so set the `pathMatch` value to `'full'`.
重定向路由需要一个 `pathMatch` 属性,来告诉路由器如何用 URL 去匹配路由的路径。
在本应用中,路由器应该只有在*完整的 URL*等于 `''` 时才选择 `HeroListComponent` 组件,因此要把 `pathMatch` 设置为 `'full'`
在本应用中,路由器应该只有在*完整的 URL_等于 `''` 时才选择 `HeroListComponent` 组件,因此要把 `pathMatch` 设置为 `'full'`
{@a pathmatch}
@ -1162,12 +1016,12 @@ In this app, the router should select the route to the `HeroListComponent` only
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
In this example, the redirect is in a top level route so the *remaining* URL and the *entire* URL are the same thing.
从技术角度看,`pathMatch = 'full'` 会导致 URL 中*剩下的*、未匹配的部分必须等于 `''`。 在这个例子中,跳转路由在一个顶层路由中,因此*剩下的*URL 和*完整的*URL 是一样的。
从技术角度看,`pathMatch = 'full'` 会导致 URL 中*剩下的*、未匹配的部分必须等于 `''`。 在这个例子中,跳转路由在一个顶层路由中,因此*剩下的_URL 和*完整的_URL 是一样的。
The other possible `pathMatch` value is `'prefix'` which tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path.
This doesn't apply to this sample app because if the `pathMatch` value were `'prefix'`, every URL would match `''`.
`pathMatch` 的另一个可能的值是 `'prefix'`,它会告诉路由器:当*剩下的*URL 以这个跳转路由中的 `prefix` 值开头时,就会匹配上这个跳转路由。
`pathMatch` 的另一个可能的值是 `'prefix'`,它会告诉路由器:当*剩下的_URL 以这个跳转路由中的 `prefix` 值开头时,就会匹配上这个跳转路由。
但这不适用于此示例应用,因为如果 `pathMatch` 值是 `'prefix'`,那么每个 URL 都会匹配 `''`
Try setting it to `'prefix'` and clicking the `Go to sidekicks` button.
@ -1181,13 +1035,13 @@ Try setting it to `'prefix'` and clicking the `Go to sidekicks` button.
但是,你仍然在“英雄列表”页中。在地址栏中输入一个无效的 URL你又被路由到了 `/heroes`
*每一个* URL无论有效与否都会匹配上这个路由定义。
The default route should redirect to the `HeroListComponent` _only_ when the _entire_ url is `''`.
The default route should redirect to the `HeroListComponent` only when the entire url is `''`.
Remember to restore the redirect to `pathMatch = 'full'`.
默认路由应该只有在*整个*URL 等于 `''` 时才重定向到 `HeroListComponent`,别忘了把重定向路由设置为 `pathMatch = 'full'`
默认路由应该只有在整个URL 等于 `''` 时才重定向到 `HeroListComponent`,别忘了把重定向路由设置为 `pathMatch = 'full'`
Learn more in Victor Savkin's
[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
[post on redirects](http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes).
要了解更多,参见 Victor Savkin 的帖子[关于重定向](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes)。
@ -1246,23 +1100,18 @@ The starter app's structure looks like this:
<div class='children'>
<div class='file'>
src
</div>
<div class='children'>
<div class='file'>
app
</div>
<div class='children'>
<div class='file'>
crisis-list
</div>
@ -1289,7 +1138,6 @@ The starter app's structure looks like this:
</div>
<div class='file'>
hero-list
</div>
@ -1748,7 +1596,9 @@ The hero management file structure is as follows:
<div class='file'>
hero-list.component.ts
</div></div>
</div>
</div>
<div class='file'>
@ -1885,7 +1735,7 @@ After these steps, the `AppModule` should look like this:
### 模块导入顺序
Notice that in the module `imports` array, the `AppRoutingModule` is last and comes *after* the `HeroesModule`.
Notice that in the module `imports` array, the `AppRoutingModule` is last and comes _after_ the `HeroesModule`.
请注意该模块的 `imports` 数组,`AppRoutingModule` 是最后一个,并且位于 `HeroesModule` 之后。
@ -1901,8 +1751,8 @@ When all routes were in one `AppRoutingModule`, you put the default and [wildcar
这样路由器才有机会匹配到 `/heroes` 路由,否则它就会先遇到并匹配上该通配符路由,并导航到“页面未找到”路由。
Each routing module augments the route configuration in the order of import.
If you listed `AppRoutingModule` first, the wildcard route would be registered *before* the hero routes.
The wildcard route—which matches *every* URL—would intercept the attempt to navigate to a hero route.
If you listed `AppRoutingModule` first, the wildcard route would be registered _before_ the hero routes.
The wildcard route&mdash;which matches _every_ URL&mdash;would intercept the attempt to navigate to a hero route.
每个路由模块都会根据导入的顺序把自己的路由配置追加进去。
如果你先列出了 `AppRoutingModule`,那么通配符路由就会被注册在“英雄管理”路由*之前*。
@ -1978,7 +1828,7 @@ You need two pieces of information: the routing path to the component and the he
然后导航到 `HeroDetailComponent` 组件。在那里,你期望看到所选英雄的详情,这需要两部分信息:导航目标和该英雄的 `id`
Accordingly, the *link parameters array* has two items: the routing *path* and a *route parameter* that specifies the
Accordingly, the _link parameters array_ has two items: the routing _path_ and a _route parameter_ that specifies the
`id` of the selected hero.
因此,这个*链接参数数组*中有两个条目:路由的*路径*和一个用来指定所选英雄 `id` 的*路由参数*。
@ -2044,7 +1894,7 @@ If the user re-navigates to this route with a new `id` while the `HeroService` i
`AsyncPipe` 处理这个可观察的订阅,而且该组件的 `hero` 属性也会用检索到的英雄(重新)进行设置。
#### *ParamMap* API
#### _ParamMap_ API
The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams).
It provides methods to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`).
@ -2174,7 +2024,7 @@ For better UX, the router re-uses the same component instance and updates the pa
你肯定不希望路由器先从 DOM 中移除当前的 `HeroDetailComponent` 实例,只是为了用下一个 `id` 重新创建它,因为它将重新渲染视图。为了更好的用户体验,路由器会复用同一个组件实例,而只是更新参数。
Since `ngOnInit()` is only called once per component instantiation, you can detect when the route parameters change from *within the same instance* using the observable `paramMap` property.
Since `ngOnInit()` is only called once per component instantiation, you can detect when the route parameters change from _within the same instance_ using the observable `paramMap` property.
由于 `ngOnInit()` 在每个组件实例化时只会被调用一次,所以你可以使用 `paramMap` 可观察对象来检测路由参数*在同一个实例中*何时发生了变化。
@ -2240,7 +2090,7 @@ The `HeroDetailComponent` "Back" button uses the `gotoHeroes()` method that navi
`HeroDetailComponent` 的 “Back” 按钮使用了 `gotoHeroes()` 方法,该方法会强制导航回 `HeroListComponent`
The router `navigate()` method takes the same one-item *link parameters array* that you can bind to a `[routerLink]` directive.
The router `navigate()` method takes the same one-item _link parameters array_ that you can bind to a `[routerLink]` directive.
It holds the path to the `HeroListComponent`:
路由的 `navigate()` 方法同样接受一个单条目的*链接参数数组*,你也可以把它绑定到 `[routerLink]` 指令上。
@ -2284,11 +2134,11 @@ Optional information can also include other forms such as:
* Loosely structured search criteria; for example, `name='wind*'`.
结构松散的搜索条件。比如 `name='wind*'`。
结构松散的搜索条件。比如 `name='wind_'`。
* Multiple values; for example, `after='12/31/2015' & before='1/1/2017'`in no
particular order—`before='1/1/2017' & after='12/31/2015'` in a
variety of formats—`during='currentYear'`.
* Multiple values; for example, `after='12/31/2015' & before='1/1/2017'`&mdash;in no
particular order&mdash;`before='1/1/2017' & after='12/31/2015'`&mdash; in a
variety of formats&mdash;`during='currentYear'`.
多个值。比如 `after='12/31/2015' & before='1/1/2017'` - 没有特定的顺序 - `before='1/1/2017' & after='12/31/2015'` - 具有各种格式 - `during='currentYear'`
@ -2298,7 +2148,7 @@ Optional parameters aren't involved in pattern matching and afford flexibility o
由于这些参数不适合用作 URL 路径,因此可以使用可选参数在导航过程中传递任意复杂的信息。可选参数不参与模式匹配,因此在表达上提供了巨大的灵活性。
The router supports navigation with optional parameters as well as required route parameters.
Define optional parameters in a separate object *after* you define the required route parameters.
Define optional parameters in a separate object _after_ you define the required route parameters.
和必要参数一样,路由器也支持通过可选参数导航。
在你定义完必要参数之后,再通过一个*独立的对象*来定义可选参数。
@ -2316,7 +2166,7 @@ In general, use a required route parameter when the value is mandatory (for exam
#### 英雄列表:选定一个英雄(也可不选)
When navigating to the `HeroDetailComponent` you specified the required `id` of the hero-to-edit in the
route parameter and made it the second item of the [*link parameters array*](#link-parameters-array).
route parameter and made it the second item of the [_link parameters array_](#link-parameters-array).
当导航到 `HeroDetailComponent` 时,你可以在*路由参数*中指定一个所要编辑的英雄 `id`,只要把它作为[链接参数数组](guide/router#link-parameters-array)中的第二个条目就可以了。
@ -2328,7 +2178,7 @@ The router embedded the `id` value in the navigation URL because you had defined
<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" header="src/app/heroes/heroes-routing.module.ts (hero-detail-route)" region="hero-detail-route"></code-example>
When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array*
When the user clicks the back button, the `HeroDetailComponent` constructs another _link parameters array_
which it uses to navigate back to the `HeroListComponent`.
当用户点击后退按钮时,`HeroDetailComponent` 构造了另一个*链接参数数组*,可以用它导航回 `HeroListComponent`
@ -2660,7 +2510,9 @@ hero-detail
hero-detail.component.html
</div>
<div class='file'> hero-detail.component.ts
<div class='file'>
hero-detail.component.ts
</div>
</div>
@ -2681,14 +2533,14 @@ hero-list
hero-list.component.html
</div>
<div class='file'> hero-list.component.ts
<div class='file'>
hero-list.component.ts
</div>
</div></div>
</div>
<div class='file'>
hero.service.ts
</div>
<div class='file'>
@ -2918,7 +2770,7 @@ Use mock crises instead of mock heroes:
<code-example path="router/src/app/crisis-center/mock-crises.ts" header="src/app/crisis-center/mock-crises.ts"></code-example>
The resulting crisis center is a foundation for introducing a new conceptchild routing.
The resulting crisis center is a foundation for introducing a new concept&mdash;child routing.
You can leave Heroes in its current state as a contrast with the Crisis Center.
最终的危机中心可以作为引入子路由这个新概念的基础。
@ -3110,7 +2962,7 @@ Here's the complete `crisis-center-routing.module.ts` file with its imports.
### 把危机中心模块导入到 `AppModule` 的路由中
As with the `HeroesModule`, you must add the `CrisisCenterModule` to the `imports` array of the `AppModule`
*before* the `AppRoutingModule`:
_before_ the `AppRoutingModule`:
就像 `HeroesModule` 模块中一样,你必须把 `CrisisCenterModule` 添加到 `AppModule``imports` 数组中,就在 `AppRoutingModule` *前面*
@ -3166,7 +3018,7 @@ Navigation within the feature area remains intact even if you change the parent
<div class="alert is-helpful">
The router supports directory-like syntax in a *link parameters list* to help guide route name lookup:
The router supports directory-like syntax in a _link parameters list_ to help guide route name lookup:
路由器支持在*链接参数数组*中使用“目录式”语法来为查询路由名提供帮助:
@ -3192,7 +3044,7 @@ to give the router knowledge of where you are in the current route tree.
`Router.navigate` 方法导航到相对路径时,你必须提供当前的 `ActivatedRoute`,来让路由器知道你现在位于路由树中的什么位置。
After the *link parameters array*, add an object with a `relativeTo` property set to the `ActivatedRoute`.
After the _link parameters array_, add an object with a `relativeTo` property set to the `ActivatedRoute`.
The router then calculates the target URL based on the active route's location.
在*链接参数数组*后面,添加一个带有 `relativeTo` 属性的对象,并把它设置为当前的 `ActivatedRoute`
@ -3283,7 +3135,7 @@ That's where a popup will go, once you learn how to route a popup component to i
#### 第二路由
Named outlets are the targets of *secondary routes*.
Named outlets are the targets of _secondary routes_.
命名出口是*第二路由*的目标。
@ -3378,13 +3230,13 @@ To give users a way to open the popup, add a "Contact" link to the `AppComponent
<code-example path="router/src/app/app.component.4.html" header="src/app/app.component.html (contact-link)" region="contact-link"></code-example>
Although the `compose` route is configured to the "popup" outlet, that's not sufficient for connecting the route to a `RouterLink` directive.
You have to specify the named outlet in a *link parameters array* and bind it to the `RouterLink` with a property binding.
You have to specify the named outlet in a _link parameters array_ and bind it to the `RouterLink` with a property binding.
虽然 `compose` 路由被配置到了 `popup` 出口上,但这仍然不足以把该路由和 `RouterLink` 指令联系起来。
你还要在*链接参数数组*中指定这个命名出口,并通过属性绑定的形式把它绑定到 `RouterLink` 上。
The *link parameters array* contains an object with a single `outlets` property whose value is another object keyed by one (or more) outlet names.
In this case there is only the "popup" outlet property and its value is another *link parameters array* that specifies the `compose` route.
The _link parameters array_ contains an object with a single `outlets` property whose value is another object keyed by one (or more) outlet names.
In this case there is only the "popup" outlet property and its value is another _link parameters array_ that specifies the `compose` route.
*链接参数数组*包含一个只有一个 `outlets` 属性的对象,它的值是另一个对象,这个对象以一个或多个路由的出口名作为属性名。
在这里它只有一个出口名“popup”它的值则是另一个*链接参数数组*,用于指定 `compose` 路由。
@ -3417,7 +3269,7 @@ you can target multiple outlets with multiple routes in the same `RouterLink` di
#### 第二路由导航:在导航期间合并路由
Navigate to the *Crisis Center* and click "Contact".
Navigate to the _Crisis Center_ and click "Contact".
you should see something like the following URL in the browser address bar.
导航到*危机中心*并点击“Contact”你将会在浏览器的地址栏看到如下 URL
@ -3443,9 +3295,9 @@ The relevant part of the URL follows the `...`:
第二路由包括一个出口名称(`popup`)、一个冒号分隔符和第二路由的路径(`compose`)。
Click the *Heroes* link and look at the URL again.
Click the _Heroes_ link and look at the URL again.
点击 *Heroes* 链接,并再次查看 URL
点击 _Heroes_ 链接,并再次查看 URL
<code-example>
http://.../heroes(popup:compose)
@ -3464,7 +3316,7 @@ You can add many more outlets and routes, at the top level and in nested levels,
你还可以添加更多出口和更多路由(无论是在顶层还是在嵌套的子层)来创建一个带有多个分支的导航树。
路由器将会生成相应的 URL。
You can tell the router to navigate an entire tree at once by filling out the `outlets` object and then pass that object inside a *link parameters array* to the `router.navigate` method.
You can tell the router to navigate an entire tree at once by filling out the `outlets` object and then pass that object inside a _link parameters array_ to the `router.navigate` method.
通过像前面那样填充 `outlets` 对象,你可以告诉路由器立即导航到一棵完整的树。
然后把这个对象通过一个*链接参数数组*传给 `router.navigate` 方法。
@ -3498,11 +3350,11 @@ The `closePopup()` function navigates imperatively with the `Router.navigate()`
单击 “send” 或 “cancel” 按钮可以清除弹出视图。`closePopup()` 函数会使用 `Router.navigate()` 方法强制导航,并传入一个[链接参数数组](#link-parameters-array)。
Like the array bound to the *Contact* `RouterLink` in the `AppComponent`, this one includes an object with an `outlets` property.
Like the array bound to the _Contact_ `RouterLink` in the `AppComponent`, this one includes an object with an `outlets` property.
The `outlets` property value is another object with outlet names for keys.
The only named outlet is `'popup'`.
就像在 `AppComponent` 中绑定到的 *Contact* `RouterLink` 一样,它也包含了一个带 `outlets` 属性的对象。
就像在 `AppComponent` 中绑定到的 _Contact_ `RouterLink` 一样,它也包含了一个带 `outlets` 属性的对象。
`outlets` 属性的值是另一个对象,该对象用一些出口名称作为属性名。
唯一的命名出口是 `'popup'`
@ -3623,7 +3475,7 @@ You can have multiple guards at every level of a routing hierarchy.
The router checks the `CanDeactivate` and `CanActivateChild` guards first, from the deepest child route to the top.
Then it checks the `CanActivate` guards from the top down to the deepest child route.
If the feature module is loaded asynchronously, the `CanLoad` guard is checked before the module is loaded.
If *any* guard returns false, pending guards that have not completed will be canceled, and the entire navigation is canceled.
If _any_ guard returns false, pending guards that have not completed will be canceled, and the entire navigation is canceled.
在分层路由的每个级别上,你都可以设置多个守卫。
路由器会先按照从最深的子路由由下往上检查的顺序来检查 `CanDeactivate()``CanActivateChild()` 守卫。
@ -3850,12 +3702,12 @@ The initial admin routing configuration:
<code-example path="router/src/app/admin/admin-routing.module.1.ts" header="src/app/admin/admin-routing.module.ts (admin routing)" region="admin-routes"></code-example>
The child route under the `AdminComponent` has a `path` and a `children` property but it's not using a `component`.
This defines a *component-less* route.
This defines a _component-less_ route.
`AdminComponent` 下的子路由有一个 `path` 和一个 `children` 属性,但是它没有使用 `component`。这就定义了一个无*组件*路由。
To group the `Crisis Center` management routes under the `admin` path a component is unnecessary.
Additionally, a *component-less* route makes it easier to [guard child routes](#can-activate-child-guard).
Additionally, a _component-less_ route makes it easier to [guard child routes](#can-activate-child-guard).
要把 `Crisis Center` 管理下的路由分组到 `admin` 路径下,组件是不必要的。此外,无*组件*路由可以更容易地[保护子路由](#can-activate-child-guard)。
@ -3970,13 +3822,13 @@ If the user is logged in, it returns true and the navigation continues.
该守卫返回一个同步的布尔值。如果用户已经登录,它就返回 `true`,导航会继续。
The `ActivatedRouteSnapshot` contains the *future* route that will be activated and the `RouterStateSnapshot` contains the *future* `RouterState` of the application, should you pass through the guard check.
The `ActivatedRouteSnapshot` contains the _future_ route that will be activated and the `RouterStateSnapshot` contains the _future_ `RouterState` of the application, should you pass through the guard check.
这个 `ActivatedRouteSnapshot` 包含了*即将*被激活的路由,而 `RouterStateSnapshot` 包含了该应用*即将*到达的状态。
你应该通过守卫进行检查。
If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url` and tell the router to redirect to a login pagea page you haven't created yet.
This secondary navigation automatically cancels the current navigation; `checkLogin()` returns `false`.
If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url` and tell the router to redirect to a login page&mdash;a page you haven't created yet.
Returning a `UrlTree` tells the `Router` to cancel the current navigation and schedule a new one to redirect the user.
如果用户还没有登录,你就会用 `RouterStateSnapshot.url` 保存用户来自的 URL 并让路由器跳转到登录页(你尚未创建该页)。
这间接导致路由器自动中止了这次导航,`checkLogin()` 返回 `false` 并不是必须的,但这样可以更清楚的表达意图。
@ -4037,7 +3889,7 @@ The key difference is that it runs before any child route is activated.
它们的区别在于,`CanActivateChild` 会在*任何子路由*被激活之前运行。
You protected the admin feature module from unauthorized access.
You should also protect child routes *within* the feature module.
You should also protect child routes _within_ the feature module.
你要保护管理特性模块,防止它被非授权访问,还要保护这个特性模块*内部*的那些子路由。
@ -4048,12 +3900,12 @@ Open `auth.guard.ts` and add the `CanActivateChild` interface to the imported to
打开 `auth.guard.ts` 并从路由库中导入 `CanActivateChild` 接口。
Next, implement the `canActivateChild()` method which takes the same arguments as the `canActivate()` method: an `ActivatedRouteSnapshot` and `RouterStateSnapshot`.
The `canActivateChild()` method can return an `Observable<boolean>` or `Promise<boolean>` for async checks and a `boolean` for sync checks.
This one returns a `boolean`:
The `canActivateChild()` method can return an `Observable<boolean|UrlTree>` or `Promise<boolean|UrlTree>` for async checks and a `boolean` or `UrlTree` for sync checks.
This one returns either `true` to allow the user to access the admin feature module or `UrlTree` to redirect the user to the login page instead:
接下来,实现 `CanActivateChild` 方法,它所接收的参数与 `CanActivate` 方法一样:一个 `ActivatedRouteSnapshot` 和一个 `RouterStateSnapshot`
`CanActivateChild` 方法可以返回 `Observable<boolean>` 或 `Promise<boolean>` 来支持异步检查,或 `boolean` 来支持同步检查。
这里返回的`boolean`
`CanActivateChild` 方法可以返回 `Observable<boolean|UrlTree>` 或 `Promise<boolean|UrlTree>` 来支持异步检查,或 `boolean` 或 `UrlTree` 来支持同步检查。
这里返回的或者是 `true` 以便允许用户访问管理特性模块,或者是 `UrlTree` 以便把用户重定向到登录页
<code-example path="router/src/app/auth/auth.guard.3.ts" header="src/app/auth/auth.guard.ts (excerpt)" region="can-activate-child"></code-example>
@ -4129,7 +3981,7 @@ response.
<div class="alert is-helpful">
You could wait for the user's answer with synchronous, blocking code, however, the app is more responsive—and can do other work—by waiting for the user's answer asynchronously.
You could wait for the user's answer with synchronous, blocking code, however, the app is more responsive&mdash;and can do other work&mdash;by waiting for the user's answer asynchronously.
你也可以用同步的方式等用户的答复,阻塞代码。但如果能用异步的方式等待用户的答复,应用就会响应性更好,还能同时做别的事。
@ -4156,7 +4008,7 @@ It returns an `Observable` that resolves when the user eventually decides what t
{@a CanDeactivate}
Generate a guard that checks for the presence of a `canDeactivate()` method in a componentany component.
Generate a guard that checks for the presence of a `canDeactivate()` method in a component&mdash;any component.
生成一个守卫guard以检查组件任意组件均可中是否存在 `canDeactivate()` 方法。
@ -4252,7 +4104,7 @@ If the crisis is not found, the router navigates back to the crisis list view.
如果该危机没有找到,路由器就会导航回危机列表视图。
The experience might be better if all of this were handled first, before the route is activated.
A `CrisisDetailResolver` service could retrieve a `Crisis` or navigate away, if the `Crisis` did not exist, *before* activating the route and creating the `CrisisDetailComponent`.
A `CrisisDetailResolver` service could retrieve a `Crisis` or navigate away, if the `Crisis` did not exist, _before_ activating the route and creating the `CrisisDetailComponent`.
如果能在该路由将要激活时提前处理了这个问题,那么用户体验会更好。
`CrisisDetailResolver` 服务可以接收一个 `Crisis`,而如果这个 `Crisis` 不存在,就会在激活该路由并创建 `CrisisDetailComponent` 之前先行离开。
@ -4614,7 +4466,7 @@ Ideally, you'd only load the `AdminModule` if the user is logged in.
但是路由器仍然会加载 `AdminModule` —— 即使用户无法访问它的任何一个组件。
理想的方式是,只有在用户已登录的情况下你才加载 `AdminModule`
Add a `CanLoad` guard that only loads the `AdminModule` once the user is logged in *and* attempts to access the admin feature area.
Add a `CanLoad` guard that only loads the `AdminModule` once the user is logged in _and_ attempts to access the admin feature area.
添加一个 `CanLoad` 守卫,它只在用户已登录*并且*尝试访问管理特性区的时候,才加载 `AdminModule` 一次。
@ -5266,7 +5118,7 @@ In the [LocationStrategy and browser URL styles](#browser-url-styles) section, l
</div>
You must add a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href> element</a> to the app's `index.html` for `pushState` routing to work.
You must add a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; element</a> to the app's `index.html` for `pushState` routing to work.
The browser uses the `<base href>` value to prefix relative URLs when referencing CSS files, scripts, and images.
你必须在应用的 `index.html` 中**添加一个 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; 元素</a>**才能让 `pushState` 路由正常工作。
@ -5288,7 +5140,7 @@ While the router uses the <a href="https://developer.mozilla.org/en-US/docs/Web/
由于路由器默认使用 “<a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" target="_blank" title="Browser history push-state">HTML 5 pushState</a>” 风格,所以你*必须*用一个 `<base href>` 来配置该策略Strategy
The preferred way to configure the strategy is to add a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href> element</a> tag in the `<head>` of the `index.html`.
The preferred way to configure the strategy is to add a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base" title="base href">&lt;base href&gt; element</a> tag in the `<head>` of the `index.html`.
配置该策略的首选方式是往 `index.html``<head>` 中添加一个[&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)标签。
@ -5311,9 +5163,9 @@ Those developers may still use HTML5 URLs by taking the following two steps:
用适当的[APP_BASE_HREF][]值提供provide路由器。
1. Use _root URLs_ for all web resources: CSS, images, scripts, and template HTML files.
1. Use root URLs for all web resources: CSS, images, scripts, and template HTML files.
对所有 Web 资源使用**绝对地址**CSS、图片、脚本、模板 HTML。
对所有 Web 资源使用绝对地址CSS、图片、脚本、模板 HTML。
{@a hashlocationstrategy}
@ -5402,7 +5254,7 @@ You can use the [resolve guard](#resolve-guard) to retrieve dynamic data.
第三个路由中的 `data` 属性是存放与该特定路由关联的任意数据的地方。每个激活的路由都可以访问 `data` 属性。可以用它来存储页面标题,面包屑文本和其它只读静态数据等项目。你可以尝试使用[解析器守卫](#resolve-guard)来检索动态数据。
The empty path in the fourth route represents the default path for the applicationthe place to go when the path in the URL is empty, as it typically is at the start.
The empty path in the fourth route represents the default path for the application&mdash;the place to go when the path in the URL is empty, as it typically is at the start.
This default route redirects to the route for the `/heroes` URL and, therefore, displays the `HeroesListComponent`.
第四个路由中的空路径表示该应用的默认路径 - 当 URL 中的路径为空时通常要去的地方,就像它在刚进来时一样。这个默认路由重定向到了 `/heroes` 这个 URL 的路由,因此会显示 `HeroesListComponent`

View File

@ -3,7 +3,7 @@
# 库的原理图
When you create an Angular library, you can provide and package it with schematics that integrate it with the Angular CLI.
With your schematics, your users can use `ng add` to install an initial version of your library,
With your schematics, your users can use `ng add` to install an initial version of your library,
`ng generate` to create artifacts defined in your library, and `ng update` to adjust their project for a new version of your library that introduces breaking changes.
当创建 Angular 库时,你可以为同时为它打包进一组原理图,并把它与 Angular CLI 集成在一起。借助原理图,用户可以用 `ng add` 来安装你这个库的初始版本,可以用 `ng generate` 来创建你在库中定义的一些工件,可以用 `ng update` 来调整他们的项目,以支持你在库的新版本中引入的重大变更。
@ -205,19 +205,19 @@ When you add a schematic to the collection, you have to point to it in the colle
<code-example header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json">
</code-example>
* *id* : A unique id for the schema in the collection.
* *id*: A unique id for the schema in the collection.
*id*:这个模式定义在集合中的唯一 id。
* *title* : A human-readable description of the schema.
* *title*: A human-readable description of the schema.
*title*:一个人类可读的模式描述。
* *type* : A descriptor for the type provided by the properties.
* *type*: A descriptor for the type provided by the properties.
*type*:由这些属性提供的类型描述符。
* *properties* : An object that defines the available options for the schematic.
* *properties*: An object that defines the available options for the schematic.
*properties*:一个定义该原理图可用选项的对象。
@ -237,15 +237,15 @@ See the workspace schema for additional customizations for schematic options.
<code-example header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts">
</code-example>
* *name* : The name you want to provide for the created service.
* *name*: The name you want to provide for the created service.
*name*:你要为创建的这个服务指定的名称。
* *path* : Overrides the path provided to the schematic. The default path value is based on the current working directory.
* *path*: Overrides the path provided to the schematic. The default path value is based on the current working directory.
*path*:覆盖为原理图提供的路径。默认情况下,路径是基于当前工作目录的。
* *project* : Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user.
* *project*: Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user.
*project*:提供一个具体项目来运行原理图。在原理图中,如果用户没有给出该选项,你可以提供一个默认值。
@ -302,11 +302,11 @@ It fills these in using values passed into the `Rule`.
Schematics 框架提供了一个文件模板系统,它支持路径和内容模板。系统会操作在这个输入文件树(`Tree`)中加载的文件内或路径中定义的占位符,用传给 `Rule` 的值来填充它们。
For details of these data structure and syntax, see the [Schematics README](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/README.md).
For details of these data structures and syntax, see the [Schematics README](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/README.md).
有关这些数据结构和语法的详细信息,请参见 [Schematics 的 README](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/README.md)。
1. Create the main file, `index.ts` and add the source code for your schematic factory function.
1. Create the main file `index.ts` and add the source code for your schematic factory function.
创建主文件 `index.ts` 并为你的原理图工厂函数添加源代码。

View File

@ -66,9 +66,13 @@ You can use these events to notify the user of a pending update or to refresh th
### 检查更新
It's possible to ask the service worker to check if any updates have been deployed to the server. You might choose to do this if you have a site that changes frequently or want updates to happen on a schedule.
It's possible to ask the service worker to check if any updates have been deployed to the server.
The service worker checks for updates during initialization and on each navigation request&mdash;that is, when the user navigates from a different address to your app.
However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule.
可以要求 Service Worker 检查是否有任何更新已经发布到了服务器上。如果你的站点更新非常频繁,或者希望它按照计划进行定时更新,你就可以用它来实现。
可以要求 Service Worker 检查是否有任何更新已经发布到了服务器上。
Service Worker 会在初始化和每次导航请求(也就是用户导航到应用中的另一个地址)时检查更新。
不过,如果你的站点更新非常频繁,或者需要按计划进行更新,你可能会选择手动检查更新。
Do this with the `checkForUpdate()` method:
@ -83,23 +87,22 @@ This method returns a `Promise` which indicates that the update check has comple
<div class="alert is-important">
In order to avoid negatively affecting the initial rendering, `ServiceWorkerModule` will by default
wait for the app to stabilize, before registering the ServiceWorker script. Constantly polling for
updates, e.g. with `interval()`, will prevent the app from stabilizing and the ServiceWorker
script will never be registered with the browser.
In order to avoid negatively affecting the initial rendering of the page, `ServiceWorkerModule` waits for up to 30 seconds by default for the app to stabilize, before registering the ServiceWorker script.
Constantly polling for updates, for example, with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), will prevent the app from stabilizing and the ServiceWorker script will not be registered with the browser until the 30 seconds upper limit is reached.
为了避免影响页面的首次渲染,在注册 ServiceWorker 脚本之前,`ServiceWorkerModule` 默认会等待应用程序达到稳定态。如果不断轮询更新(比如调用 `interval()`)将阻止应用程序达到稳定态,也就永远不会往浏览器中注册 ServiceWorker 脚本。
You can avoid that by waiting for the app to stabilize first, before starting to poll for updates
(as shown in the example above).
在开始轮询更新之前,你可以先等待应用程序达到稳定态,以避免这种情况(如上例所示)。
为了避免影响页面的首次渲染,在注册 ServiceWorker 脚本之前,`ServiceWorkerModule` 默认会在应用程序达到稳定态之前等待最多 30 秒。如果不断轮询更新(比如调用 [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 或 RxJS 的 [interval()](https://rxjs.dev/api/index/function/interval))就会阻止应用程序达到稳定态,则直到 30 秒结束之前都不会往浏览器中注册 ServiceWorker 脚本。
Note that this is true for any kind of polling done by your application.
Check the {@link ApplicationRef#isStable isStable} documentation for more information.
请注意,应用中所执行的各种轮询都会阻止它达到稳定态。欲知详情,参见 {@link ApplicationRef#isStable isStable} 文档。
You can avoid that delay by waiting for the app to stabilize first, before starting to poll for updates, as shown in the example above.
Alternatively, you might want to define a different {@link SwRegistrationOptions#registrationStrategy registration strategy} for the ServiceWorker.
你可以通过在开始轮询更新之前先等应用达到稳定态来消除这种延迟,如下面的例子所示。
另外,你还可以为 ServiceWorker 定义不一样的 {@link SwRegistrationOptions#registrationStrategy 注册策略}。
</div>
### Forcing update activation
@ -112,9 +115,15 @@ If the current tab needs to be updated to the latest app version immediately, it
<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" header="prompt-update.service.ts" region="sw-activate"></code-example>
Doing this could break lazy-loading in currently running apps, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
<div class="alert is-important">
这可能会让惰性加载的模块进入当前正在运行的应用中,特别是如果惰性加载的模块文件名中使用了哈希时,这将会改变每一个版本。
Calling `activateUpdate()` without reloading the page could break lazy-loading in a currently running app, especially if the lazy-loaded chunks use filenames with hashes, which change every version.
Therefore, it is recommended to reload the page once the promise returned by `activateUpdate()` is resolved.
如果调用 `activateUpdate()` 而不刷新页面,可能会破坏正在运行的应用中的惰性加载模块,特别是如果惰性加载的模块文件名中使用了哈希时,就会改变每一个版本。
所以,建议每当 `activateUpdate()` 返回的 Promise 被解析时,都刷新一次页面。
</div>
## More on Angular service workers

View File

@ -372,6 +372,37 @@ Angular Service Worker 可以使用两种缓存策略之一来获取数据资源
`freshness` 为数据的即时性而优化,优先从网络获取请求的数据。只有当网络超时时,请求才会根据 `timeout` 的设置回退到缓存中。这对于那些频繁变化的资源很有用,例如账户余额。
<div class="alert is-helpful">
You can also emulate a third strategy, [staleWhileRevalidate](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate), which returns cached data (if available), but also fetches fresh data from the network in the background for next time.
To use this strategy set `strategy` to `freshness` and `timeout` to `0u` in `cacheConfig`.
你还可以模拟第三种策略 [staleWhileRevalidate](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate),它会返回缓存的数据(如果可用),但是也会在后台从网络上获取新数据,以供下次使用。
要使用本策略,请在 `cacheConfig` 中把 `strategy` 设置为 `freshness`,并且把 `timeout` 设置为 `0u`
This will essentially do the following:
本质上说,它会做如下工作:
1. Try to fetch from the network first.
首先尝试从网络上获取。
2. If the network request does not complete after 0ms (i.e. immediately), fall back to the cache (ignoring cache age).
如果网络请求没有在 0ms 内(也就是立刻)完成,就用缓存做为后备(忽略缓存有效期)。
3. Once the network request completes, update the cache for future requests.
一旦网络请求完成,就更新缓存,以供将来的请求使用。
4. If the resource does not exist in the cache, wait for the network request anyway.
如果指定的资源在缓存中不存在,总是等待网络请求。
</div>
### `cacheQueryOptions`
See [assetGroups](#assetgroups) for details.

View File

@ -48,9 +48,9 @@ The above command completes the following actions:
修改 `index.html` 文件:
* Includes a link to add the `manifest.json` file.
* Includes a link to add the `manifest.webmanifest` file.
包含要添加到 `manifest.json` 文件中的链接。
包含要添加到 `manifest.webmanifest` 文件中的链接。
* Adds meta tags for `theme-color`.
@ -207,7 +207,7 @@ Pay attention to two key points:
注意如下两个关键点:
1. The generated `ngsw-config.json` includes a limited list of cachable fonts and images extentions. In some cases, you might want to modify the glob pattern to suit your needs.
1. The generated `ngsw-config.json` includes a limited list of cacheable fonts and images extentions. In some cases, you might want to modify the glob pattern to suit your needs.
所生成的 `ngsw-config.json` 包括一个可缓存字体和图像的有限列表。在某些情况下,你可能要按需修改这些 glob 模式。

View File

@ -15,7 +15,7 @@ It includes information about prerequisites, installing the CLI, creating an ini
If you are new to Angular, you might want to start with [Try it now!](start), which introduces the essentials of Angular in the context of a ready-made basic online store app that you can examine and modify. This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com/) environment for online development. You don't need to set up your local environment until you're ready.
如果你不熟悉Angular可能要从[立即尝试!](start)开始,它可以在查看和修改一个现成的基础版在线商店的上下文中介绍 Angular 的要点。这个独立的教程利用交互式的 [StackBlitz](https://stackblitz.com/) 环境进行在线开发。在你准备好这些之前,无需设置本地环境。
如果你不熟悉 Angular可能要从[立即尝试!](start)开始,它可以在查看和修改一个现成的基础版在线商店的上下文中介绍 Angular 的要点。这个独立的教程利用交互式的 [StackBlitz](https://stackblitz.com/) 环境进行在线开发。在你准备好这些之前,无需设置本地环境。
</div>
@ -37,71 +37,68 @@ Knowledge of [TypeScript](https://www.typescriptlang.org/) is helpful, but not r
关于 [TypeScript](https://www.typescriptlang.org/) 的知识会很有用,但不是必须的。
To install Angular on your local system, you need the following:
要想在你的本地系统中安装 Angular需要如下步骤
{@a nodejs}
### Node.js
Make sure your development environment includes `Node.js®` and an npm package manager.
* **Node.js**
确保你的开发环境中包括 `Node.js®` 和一个包管理器。
Angular requires a [current, active LTS, or maintenance LTS](https://nodejs.org/about/releases) version of Node.js.
Angular requires a [current, active LTS, or maintenance LTS](https://nodejs.org/about/releases/) version of `Node.js`. See the `engines` key for the specific version requirements in our [package.json](https://unpkg.com/@angular/cli/package.json).
Angular 需要 Node.js 的[当前版、活跃 LTS 版或维护期 LTS版](https://nodejs.org/about/releases)。
Angular 需要 `Node.js` 版本 10.9.0 或更高版本。
<div class="alert is-helpful">
* To check your version, run `node -v` in a terminal/console window.
For information about specific version requirements, see the `engines` key in the [package.json](https://unpkg.com/@angular/cli/package.json) file.
要检查你的版本,请在终端/控制台窗口中运行 `node -v`。
关于具体版本需求,参见 [package.json](https://unpkg.com/@angular/cli/package.json) 文件中的 `engines`。
* To get `Node.js`, go to [nodejs.org](https://nodejs.org "Nodejs.org").
</div>
要获取 `Node.js`,请转到 [nodejs.org](https://nodejs.org "Nodejs.org")。
For more information on installing Node.js, see [nodejs.org](http://nodejs.org "Nodejs.org").
If you are unsure what version of Node.js runs on your system, run `node -v` in a terminal window.
要了解如何安装 Node.js参见 [nodejs.org](http://nodejs.org "Nodejs.org")。
如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行 `node -v`
{@a npm}
### npm package manager
### npm 包管理器
* **npm package manager**
Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm). To download and install npm packages, you must have an npm package manager.
**npm 包管理器**
Angular、Angular CLI 和 Angular 应用都依赖于 [npm 包](https://docs.npmjs.com/getting-started/what-is-npm)中提供的特性和功能。要想下载并安装 npm 包,你必须拥有一个 npm 包管理器。
Angular, the Angular CLI, and Angular applications depend on [npm packages](https://docs.npmjs.com/getting-started/what-is-npm) for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default.
To check that you have the npm client installed, run `npm -v` in a terminal window.
This setup guide uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default.
本搭建指南使用 [npm 客户端](https://docs.npmjs.com/cli/install)命令行界面,`Node.js` 已经默认安装了它。
To check that you have the npm client installed, run `npm -v` in a terminal/console window.
要检查你是否安装了 npm 客户端,请在终端/控制台窗口中运行 `npm -v`
Angular、Angular CLI 以及 Angular 应用都要依赖 [npm 包](https://docs.npmjs.com/getting-started/what-is-npm)来实现很多特性和功能。要下载并安装 npm 包,你需要一个 npm 包管理器。本指南使用 [npm 客户端](https://docs.npmjs.com/cli/install)命令行界面,该界面默认安装在 `Node.js`。要检查你是否安装了 npm 客户端,请在终端窗口中运行 `npm -v`
{@a install-cli}
## Step 1: Install the Angular CLI
## Install the Angular CLI
## 第 1 步:安装 Angular CLI
## 安装 Angular CLI
You use the Angular CLI
to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
你可以使用 Angular CLI 来创建项目生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
你可以使用 Angular CLI 来创建项目生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
Install the Angular CLI globally.
全局安装 Angular CLI。
To install the CLI using `npm`, open a terminal/console window and enter the following command:
To install the Angular CLI, open a terminal window and run the following command:
要使用 `npm` 命令安装 CLI请打开终端/控制台窗口,输入如下命令:
<code-example language="sh" class="code-shell">
npm install -g @angular/cli
</code-example>
{@a create-proj}
## Step 2: Create a workspace and initial application
## Create a workspace and initial application
## 第 2 步:创建工作空间和初始应用
## 创建工作空间和初始应用
You develop apps in the context of an Angular [**workspace**](guide/glossary#workspace).
@ -132,23 +129,33 @@ The CLI creates a new workspace and a simple Welcome app, ready to run.
CLI 会创建一个新的工作区和一个简单的欢迎应用,随时可以运行它。
<div class="alert is-helpful">
You also have the option to use Angular's strict mode, which can help you write better, more maintainable code.
For more information, see [Strict mode](/guide/strict-mode).
你还可以使用 Angular 的严格模式,他可以帮助你编写更好、更容易维护的代码。
欲知详情,参见[严格模式](/guide/strict-mode)。
</div>
{@a serve}
## Step 3: Run the application
## Run the application
## 第 3 步:运行应用
## 运行应用
The Angular CLI includes a server, so that you can easily build and serve your app locally.
The Angular CLI includes a server, so that you can build and serve your app locally.
Angular CLI 中包含一个服务器,方便你在本地构建和提供应用。
1. Go to the workspace folder (`my-app`).
1. Navigate to the workspace folder, such as `my-app`.
转到 workspace 文件夹(`my-app`
导航到 workspace 文件夹,比如 `my-app`
1. Launch the server by using the CLI command `ng serve`, with the `--open` option.
1. Run the following command:
使用 CLI 命令 `ng serve``--open` 选项来启动服务器。
运行下列命令:
<code-example language="sh" class="code-shell">
cd my-app
@ -165,9 +172,9 @@ to `http://localhost:4200/`.
`--open`(或者只用 `-o` 缩写)选项会自动打开你的浏览器,并访问 `http://localhost:4200/`
You will see:
If your installation and setup was successful, you should see a page similar to the following.
你会看到:
如果的安装和环境搭建成功了,就会看到如下页面
<div class="lightbox">
<img src='generated/images/guide/setup-local/app-works.png' alt="Welcome to my-app!">

View File

@ -71,10 +71,10 @@ For more information on how to choose, see the [next question](#how-do-i-choose)
### 如何选择 `static` 标志:`true` 还是 `false`
In the official API docs, we have always recommended retrieving query results in [`ngAfterViewInit` for view queries](https://angular.io/api/core/ViewChild#description) and [`ngAfterContentInit` for content queries](https://angular.io/api/core/ContentChild#description).
In the official API docs, we have always recommended retrieving query results in [`ngAfterViewInit` for view queries](api/core/ViewChild#description) and [`ngAfterContentInit` for content queries](api/core/ContentChild#description).
This is because by the time those lifecycle hooks run, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results.
在官方 API 文档中,我们建议对于[视图查询](https://angular.cn/api/core/ViewChild#description) 总是在 `ngAfterViewInit` 中获取查询结果,对于[内容查询](https://angular.io/api/core/ContentChild#description) 总是在 `ngAfterContentInit` 中获取查询结果。
在官方 API 文档中,我们建议对于[视图查询](api/core/ViewChild#description) 总是在 `ngAfterViewInit` 中获取查询结果,对于[内容查询](https://angular.io/api/core/ContentChild#description) 总是在 `ngAfterContentInit` 中获取查询结果。
这是因为当这些生命周期钩子运行时,相关节点的变更检测已完成,我们可以确信收集到了所有可能的查询结果。
Most applications will want to use `{static: false}` for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside `*ngIf`s or `*ngFor`s) will be found by the query.
@ -258,8 +258,16 @@ This guarantees your app will work in version 8 even if libraries take longer to
{@a update-library-to-use-static-flag}
### Can I update my library to version 8 by adding the `static` flag to view queries, while still being compatible with Angular version 7 apps?
### 我可以通过为视图查询添加 `static` 标志来把我的库更新到版本 8那它还能同时和 Angular 7 应用兼容吗?
Yes, the Angular team's recommendation for libraries is to update to version 8 and add the `static` flag. Angular version 7 apps will continue to work with libraries that have this flag.
是的Angular 团队对库的建议是更新到版本 8 并添加 `static` 标志。Angular 7 的应用可以继续使用那些带有此标志的库。
However, if you update your library to Angular version 8 and want to take advantage of the new version 8 APIs, or you want more recent dependencies (such as Typescript or RxJS) your library will become incompatible with Angular version 7 apps. If your goal is to make your library compatible with Angular versions 7 and 8, you should not update your lib at all—except for `peerDependencies` in `package.json`.
但是,如果你把你的库更新到 Angular 8并希望利用新的第 8 版 API或者你想要新版依赖项例如 Typescript 或 RxJS你的库就会变得与 Angular 7 的应用不兼容。如果你的目标是同时与 Angular 7 和 8 兼容,那你就不应该更新你的库,只有 `package.json` 中的 `peerDependencies` 除外。
In general, the most efficient plan is for libraries to adopt a 6 month major version schedule and bump the major version after each Angular update. That way, libraries stay in the same release cadence as Angular.
一般来说,最有效的计划是让库采用 6 个月的主版本计划,并在每次 Angular 升级之后适配主版本。这样,库就可以和 Angular 保持同样的发布节奏了。

View File

@ -0,0 +1,46 @@
# Strict mode
When you create a new workspace or a project you have an option to create them in a strict mode using the `--strict` flag.
Enabling this flag initializes your new workspace or project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your application.
Additionally, applications that use these stricter settings are easier to statically analyze, which can help the `ng update` command refactor code more safely and precisely when you are updating to future versions of Angular.
Specifically, the `strict` flag does the following:
* Enables [`strict` mode in TypeScript](https://www.staging-typescript.org/tsconfig#strict), as well as other strictness flags recommended by the TypeScript team. Specifically, `forceConsistentCasingInFileNames`, `noImplicitReturns`, `noFallthroughCasesInSwitch`.
* Turns on strict Angular compiler flags [`strictTemplates`](guide/angular-compiler-options#stricttemplates) and [`strictInjectionParameters`](guide/angular-compiler-options#strictinjectionparameters)
* [Bundle size budgets](guide/build#configuring-size-budgets) have been reduced by ~75%
* Turns on [`no-any` tslint rule](https://palantir.github.io/tslint/rules/no-any/) to prevent declarations of type `any`
* [Marks your application as side-effect free](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) to enable more advanced tree-shaking
You can apply these settings at the workspace and project level.
To create a new workspace and application using the strict mode, run the following command:
<code-example language="sh" class="code-shell">
ng new [project-name] --strict
</code-example>
To create a new application in the strict mode within an existing non-strict workspace, run the following command:
<code-example language="sh" class="code-shell">
ng generate application [project-name] --strict
</code-example>
{@a side-effect}
### Non-local side effects in applications
When you create projects and workspaces using the `strict` mode, you'll notice an additional `package.json` file, located in `src/app/` directory.
This file informs tools and bundlers that the code under this directory is free of non-local side effects. Non-local side effects in the application code are not common and using them is not considered a good coding pattern.
More importantly, code with these types of side effects cannot be optimized, resulting in increased bundle sizes and applications that load more slowly.
If you need more information, the following links may be helpful.
* [Tree-shaking](https://webpack.js.org/guides/tree-shaking/)
* [Dealing with side effects and pure functions in JavaScript](https://dev.to/vonheikemen/dealing-with-side-effects-and-pure-functions-in-javascript-16mg)
* [How to deal with dirty side effects in your pure function JavaScript](https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/)

View File

@ -76,7 +76,11 @@ and how to [write your own](guide/structural-directives#unless) structural direc
<div class="callout is-helpful">
<header>Directive spelling</header>
<header>
Directive spelling
</header>
<header>指令的拼写形式</header>
@ -304,10 +308,10 @@ You enable these features in the string assigned to `ngFor`, which you write in
Everything _outside_ the `ngFor` string stays with the host element
(the `<div>`) as it moves inside the `<ng-template>`.
In this example, the `[ngClass]="odd"` stays on the `<div>`.
In this example, the `[class.odd]="odd"` stays on the `<div>`.
`ngFor` 字符串*之外*的每一样东西都会留在宿主元素(`<div>`)上,也就是说它移到了 `<ng-template>` 内部。
在这个例子中,`[ngClass]="odd"` 留在了 `<div>` 上。
在这个例子中,`[class.odd]="odd"` 留在了 `<div>` 上。
</div>
@ -1226,7 +1230,7 @@ Here is the source from the `src/app/` folder.
</code-tabs>
You learned
You learned:
你学到了

View File

@ -749,7 +749,7 @@ Attributes can be changed by `setAttribute()`, which re-initializes correspondin
</div>
For more information, see the [MDN Interfaces documentation](https://developer.mozilla.org/en-US/docs/Web/API#Interfaces) which has API docs for all the standard DOM elements and their properties.
Comparing the [`<td>` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) attributes to the [`<td>` properties](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) provides a helpful example for differentiation.
Comparing the [`<td>` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) to the [`<td>` properties](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) provides a helpful example for differentiation.
In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to `HTMLTableCellElement`.
欲知详情,参见 [MDN 接口文档](https://developer.mozilla.org/en-US/docs/Web/API#Interfaces),其中包含所有标准 DOM 元素及其 Property 的 API 文档。
@ -819,7 +819,7 @@ To control the state of the button, set the `disabled` *property*,
<div class="alert is-helpful">
Though you could technically set the `[attr.disabled]` attribute binding, the values are different in that the property binding requires to a boolean value, while its corresponding attribute binding relies on whether the value is `null` or not. Consider the following:
Though you could technically set the `[attr.disabled]` attribute binding, the values are different in that the property binding requires to be a boolean value, while its corresponding attribute binding relies on whether the value is `null` or not. Consider the following:
虽然技术上说你可以设置 `[attr.disabled]` 属性绑定但是它们的值是不同的Property 绑定要求一个布尔值,而其相应的 Attribute 绑定则取决于该值是否为 `null`。例子如下:
@ -1402,8 +1402,8 @@ of the `evilTitle` examples.
插值处理 `<script>` 标记与属性绑定的方式不同,但是这两种方法都可以使内容无害。以下是 `evilTitle` 示例的浏览器输出。
<code-example language="bash">
"Template <script>alert('evil never sleeps');</script> Syntax" is the interpolated evil title.
"Template alert("evil never sleeps")Syntax" is the property bound evil title.
"Template &lt;script&gt;alert("evil never sleeps")&lt;/script&gt; Syntax" is the interpolated evil title.
"Template Syntax" is the property bound evil title.
</code-example>
<hr/>
@ -2118,7 +2118,9 @@ Angular 为此提供了一种特殊*的双向数据绑定*语法 `[()]`。`[()]`
<div class="callout is-important">
<header>[( )] = banana in a box</header>
<header>
[( )] = banana in a box
</header>
<header>[( )] = 盒子里的香蕉</header>
@ -2400,9 +2402,9 @@ Angular provides *value accessors* for all of the basic HTML form elements and t
You can't apply `[(ngModel)]` to a non-form native element or a
third-party custom component until you write a suitable value accessor. For more information, see
the API documentation on [DefaultValueAccessor](https://angular.io/api/forms/DefaultValueAccessor).
the API documentation on [DefaultValueAccessor](api/forms/DefaultValueAccessor).
在编写适当的值访问器之前,不能将 `[(ngModel)]` 应用于非表单的原生元素或第三方自定义组件。欲知详情,参见[DefaultValueAccessor](https://angular.cn/api/forms/DefaultValueAccessor)上的 API 文档。
在编写适当的值访问器之前,不能将 `[(ngModel)]` 应用于非表单的原生元素或第三方自定义组件。欲知详情,参见[DefaultValueAccessor](api/forms/DefaultValueAccessor)上的 API 文档。
You don't need a value accessor for an Angular component that
you write because you can name the value and event properties

View File

@ -7,10 +7,10 @@
## 模板类型检查概述
Just as TypeScript catches type errors in your code, Angular checks the expressions and bindings within the templates of your application and can report any type errors it finds.
Angular currently has three modes of doing this, depending on the value of the `fullTemplateTypeCheck` and `strictTemplates` flags in the [TypeScript configuration file](guide/typescript-configuration), `tsconfig.json`.
Angular currently has three modes of doing this, depending on the value of the `fullTemplateTypeCheck` and `strictTemplates` flags in the [TypeScript configuration file](guide/typescript-configuration).
正如 TypeScript 在代码中捕获类型错误一样Angular 也会检查应用程序模板中的表达式和绑定,并可以报告所发现的任何类型错误。
Angular 当前有三种执行此操作的模式,具体取决于 [TypeScript 配置文件](guide/typescript-configuration) `tsconfig.json` 中的 `fullTemplateTypeCheck``strictTemplates` 标志的值。
Angular 当前有三种执行此操作的模式,具体取决于 [TypeScript 配置文件](guide/typescript-configuration) 中的 `fullTemplateTypeCheck``strictTemplates` 标志的值。
### Basic mode
@ -209,10 +209,9 @@ In case of a false positive like these, there are a few options:
在某些情况下,使用 [`$any()` 类型转换函数](guide/template-syntax#any-type-cast-function)可以选择不对部分表达式进行类型检查。
* You can disable strict checks entirely by setting `strictTemplates: false` in the application's TypeScript configuration file, `tsconfig.json`.
* You can disable strict checks entirely by setting `strictTemplates: false` in the application's TypeScript configuration file.
你可以通过在应用程序的 TypeScript 配置文件 `tsconfig.json` 中设置 `strictTemplates: false` 来完全禁用严格检查。
* You can disable certain type-checking operations individually, while maintaining strictness in other aspects, by setting a _strictness flag_ to `false`.
通过将*严格性标志*设置为 `false`,可以在保持其它方面的严格性的同时,单独禁用某些特定的类型检查操作。

View File

@ -162,7 +162,7 @@ Adopt these two conventions in your own projects for _every kind_ of test file.
## 建立持续集成环境
One of the best ways to keep your project bug free is through a test suite, but it's easy to forget to run tests all the time.
One of the best ways to keep your project bug-free is through a test suite, but it's easy to forget to run tests all the time.
Continuous integration (CI) servers let you set up your project repository so that your tests run on every commit and pull request.
避免项目出 BUG 的最佳方式之一,就是使用测试套件。但是很容易忘了一直运行它。

View File

@ -253,9 +253,9 @@ You can define more than one animation trigger for a component. You can attach a
### 父-子动画
Each time an animation is triggered in Angular, the parent animation always get priority and child animations are blocked. In order for a child animation to run, the parent animation must query each of the elements containing child animations and then allow the animations to run using the [`animateChild()`](https://angular.io/api/animations/animateChild) function.
Each time an animation is triggered in Angular, the parent animation always get priority and child animations are blocked. In order for a child animation to run, the parent animation must query each of the elements containing child animations and then allow the animations to run using the [`animateChild()`](api/animations/animateChild) function.
每次在 Angular 中触发动画时,父动画始终会优先,而子动画会被阻塞。为了运行子动画,父动画必须查询出包含子动画的每个元素,然后使用 [`animateChild()`](https://angular.cn/api/animations/animateChild) 函数来运行它们。
每次在 Angular 中触发动画时,父动画始终会优先,而子动画会被阻塞。为了运行子动画,父动画必须查询出包含子动画的每个元素,然后使用 [`animateChild()`](api/animations/animateChild) 函数来运行它们。
#### Disabling an animation on an HTML element
@ -292,10 +292,10 @@ However, selective child animations can still be run on a disabled parent in one
不过,选择性的子动画仍然可以用如下方式之一在已禁用的父元素上运行:
* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
* A parent animation can use the [`query()`](api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
Those elements can still animate.
父动画可以使用 [`query()`](https://angular.cn/api/animations/query) 函数来收集 HTML 模板中位于禁止动画区域内部的元素。这些元素仍然可以播放动画。
父动画可以使用 [`query()`](api/animations/query) 函数来收集 HTML 模板中位于禁止动画区域内部的元素。这些元素仍然可以播放动画。
* A subanimation can be queried by a parent and then later animated with the `animateChild()` function.

View File

@ -28,33 +28,66 @@ that are important to Angular developers, including details about the following
{@a tsconfig}
## TypeScript configuration
## Configuration files
## TypeScript 配置
## 配置文件
A TypeScript configuration file called `tsconfig.json` guides the compiler as it generates JavaScript files for a project.
This file contains options and flags that are essential for Angular applications.
Typically, the file is found at the [root level of the workspace](guide/file-structure).
A given Angular workspace contains several TypeScript configuration files.
At the root level, there are two main TypeScript configuration files: a `tsconfig.json` file and a `tsconfig.base.json` file.
一个名为 `tsconfig.json` 的 TypeScript 配置文件会指导编译器如何为项目生成 JavaScript 文件。
该文件包含对 Angular 应用程序必不可少的选项和标志。
通常,该文件位于[工作区的根目录](guide/file-structure)中。
一个 Angular 工作空间中包含多个 TypeScript 配置文件。在根一级,有两个主要的 TypeScript 配置文件:`tsconfig.json` 文件和 `tsconfig.base.json` 文件。
The `tsconfig.json` file is a ["Solution Style"](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#support-for-solution-style-tsconfigjson-files) TypeScript configuration file.
Code editors and TypeScripts language server use this file to improve development experience.
Compilers do not use this file.
`tsconfig.json` 文件是一个[“解决方案型”](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#support-for-solution-style-tsconfigjson-files)的 TypeScript 配置文件。代码编辑器和 TypeScript 的语言服务都会使用这个文件来改善开发体验。而编译器不会使用这个文件。
The `tsconfig.json` file contains a list of paths to the other TypeScript configuration files used in the workspace.
`tsconfig.json` 文件中包含指向工作空间中其它 TypeScript 配置文件的路径列表。
<code-example lang="json" header="tsconfig.json" linenums="false">
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./projects/my-lib/tsconfig.lib.json"
}
]
}
</code-example>
The `tsconfig.base.json` file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.
`tsconfig.base.json` 文件指定了工作空间中所有项目都要继承的基础 TypeScript 编译选项和 Angular 编译选项。
The TypeScript and Angular have a wide range of options which can be used to configure type-checking features and generated output.
For more information, see the [Configuration inheritance with extends](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends) section of the TypeScript documentation.
TypeScript 和 Angular 提供了很多选项,可以用来配置类型检查功能和要生成的输出。更多信息,请参阅 TypeScript 文档中的[使用 extends 进行配置继承](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends)部分。
<div class="alert is-helpful">
For details about `tsconfig.json`, see the official
[TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
For more information TypeScript configuration files, see the official [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
For details about configuration inheritance, see the [Configuration inheritance with extends](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends) section.
要了解关于 `tsconfig.json` 的详情,请参阅官方提供的
[TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。
要了解 TypeScript 配置文件的详情,请参阅官方提供的
[TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。要了解配置继承的详情,参见[使用 extends 进行配置继承](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends)部分。
</div>
The initial `tsconfig.json` for an Angular app typically looks like the following example.
The initial `tsconfig.base.json` for an Angular workspace typically looks like the following example.
Angular 应用的初始 `tsconfig.json` 通常是这样的。
Angular 工作空间的初始 `tsconfig.base.json` 通常是这样的。
<code-example lang="json" header="tsconfig.json" linenums="false">
<code-example lang="json" header="tsconfig.base.json" linenums="false">
{
"compileOnSave": false,
"compilerOptions": {
@ -64,25 +97,28 @@ Angular 应用的初始 `tsconfig.json` 通常是这样的。
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"strictTemplates": true,
"strictInjectionParameters": true
}
}
</code-example>
### Strict mode
### 严格模式
When you create new workspaces and projects, you have the option to use Angular's strict mode, which can help you write better, more maintainable code.
For more information, see [Strict mode](/guide/strict-mode).
当你创建新的工作空间和项目时,你可以选择使用 Angular 的严格模式,它会帮助你写出更好、更容易维护的代码。
欲知详情,参见[严格模式](/guide/strict-mode)。
{@a noImplicitAny}
### *noImplicitAny* and *suppressImplicitAnyIndexErrors*
@ -196,9 +232,7 @@ By default, the target is `es2015`. If you are targeting `es5`, you still have n
默认情况下,目标是 `es2015`。如果你把目标改为 `es5`,那么由于包含了声明文件列表,你仍然拥有较新的类型声明:
<code-example path="getting-started/tsconfig.0.json" header="tsconfig.json (lib excerpt)" region="lib">
</code-example>
<code-example path="getting-started/tsconfig.0.json" header="tsconfig.json (lib excerpt)" region="lib"></code-example>
### Installable typings files

View File

@ -73,11 +73,11 @@ src/
app/ ... <i>application code</i>
app.server.module.ts <i>* server-side application module</i>
server.ts <i>* express web server</i>
tsconfig.json <i>TypeScript client configuration</i>
tsconfig.app.json <i>TypeScript client configuration</i>
tsconfig.server.json <i>* TypeScript server configuration</i>
tsconfig.spec.json <i>TypeScript spec configuration</i>
package.json <i>npm configuration</i>
tsconfig.json <i>TypeScript solution style configuration</i>
tsconfig.base.json <i>TypeScript base configuration</i>
tsconfig.app.json <i>TypeScript browser application configuration</i>
tsconfig.server.json <i>TypeScript server application configuration</i>
tsconfig.spec.json <i>TypeScript tests configuration</i>
</code-example>
The files marked with `*` are new and not in the original tutorial sample.
@ -406,7 +406,7 @@ as a navigation URL intended for the router.
Fortunately, application routes have something in common: their URLs lack file extensions.
(Data requests also lack extensions but they're easy to recognize because they always begin with `/api`.)
All static asset requests have a file extension (such as `main.js` or `/node_modules/zone.js/dist/zone.js`).
All static asset requests have a file extension (such as `main.js` or `/node_modules/zone.js/bundles/zone.umd.js`).
幸运的是,应用的路由具有一些共同特征:它们的 URL 一般不带文件扩展名。
(数据请求也可能缺少扩展名,但是它们很容易识别出来,因为它们总是以 `/api` 开头,所有的静态资源的请求都会带有一个扩展名,比如 `main.js``/node_modules/zone.js/dist/zone.js`)。
@ -419,11 +419,11 @@ Because we use routing, we can easily recognize the three types of requests and
**数据请求**:请求的 URL 用 `/api` 开头
2. **App navigation**: request URL with no file extension.
1. **App navigation**: request URL with no file extension.
**应用导航**:请求的 URL 不带扩展名
3. **Static asset**: all other requests.
1. **Static asset**: all other requests.
**静态资源**:所有其它请求。

View File

@ -0,0 +1,82 @@
# Updating to Angular version 10
This guide contains information related to updating to version 10 of Angular.
<div class="alert is-helpful">
For information on upgrading to Angular version 9, see [Updating to Angular version 9](https://v9.angular.io/guide/updating-to-version-9).
</div>
## Updating CLI Apps
For step-by-step instructions on how to update to the latest Angular release (and leverage our automated migration tools to do so), use the interactive update guide at [update.angular.io](https://update.angular.io).
If you're curious about the specific migrations being run by the CLI, see the [automated migrations section](#migrations) for details on what code is changing and why.
## Changes and Deprecations in Version 10
<div class="alert is-helpful">
For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices").
</div>
{@a breaking-changes}
### New Breaking Changes
* Typescript 3.6, 3.7, and 3.8 are no longer supported. Please update to Typescript 3.9.
* Input fields of type `number` fire the `valueChanges` event only once per value change (as opposed to twice in some cases). See [PR 36087](https://github.com/angular/angular/pull/36087).
* The `minLength` and `maxLength` validators only validate values that have a numeric `length` property. See [PR 36157](https://github.com/angular/angular/pull/36157).
* Templates with unknown property bindings or unknown element names now log errors instead of warnings. See [PR 36399](https://github.com/angular/angular/pull/36399).
* `UrlMatcher` can now return `null` values. See [PR 36402](https://github.com/angular/angular/pull/36402).
* Transplanted views now refresh at insertion point only. See PR 35968](https://github.com/angular/angular/pull/35968).
* Formatting times with the `b` or `B` format codes now supports time periods that cross midnight. See [PR 36611](https://github.com/angular/angular/pull/36611).
* Navigation is canceled for routes with at least one empty resolver. See [PR 24621](https://github.com/angular/angular/pull/24621).
{@a deprecations}
### New Deprecations
| Area | API or Feature | May be removed in |
| ----------------------------- | --------------------------------------------------------------------------- | ----------------- |
| `@angular/core` | [`WrappedValue`](guide/deprecations#wrapped-value) | <!--v10--> v12 |
| browser support | [`IE 9, 10, and IE Mobile`](guide/deprecations#ie-9-10-and-ie-mobile-support) | <!--v10--> v11 |
{@a removals}
### New Removals of Deprecated APIs
The following APIs have been removed starting with version 10.0.0*:
| Package | API | Replacement | Notes |
| ---------------- | -------------- | ----------- | ----- |
| `@angular/core` | Undecorated base classes that use Angular features | Add Angular decorator | See [migration guide](guide/migration-undecorated-classes) for more info |
| `@angular/core` | `ModuleWithProviders` without a generic | `ModuleWithProviders` with a generic | See [migration guide](guide/migration-module-with-providers) for more info |
| `@angular/core` | Style Sanitization | no action needed | See [style sanitization API removal](/guide/deprecations#style-sanitization) for more info
| `@angular/bazel` | [`Bazel builder and schematics`](guide/deprecations#bazelbuilder) | `bazelbuild/rules_nodejs` | [More info](https://github.com/angular/angular/tree/10.0.x/packages/bazel/src/schematics) |
*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
{@a ivy}
## Ivy features and compatibility
Since version 9, Angular Ivy is the default rendering engine. If you haven't heard of Ivy, you can read more about it in the [Angular Ivy guide](guide/ivy).
* Among other features, Ivy introduces more comprehensive type-checking within templates. For details, see [Template Type-checking](guide/template-typecheck).
* For general guidance on debugging and a list of minor changes associated with Ivy, see the [Ivy compatibility guide](guide/ivy-compatibility).
* For help with opting out of Ivy, see the instructions [here](guide/ivy#opting-out-of-angular-ivy).
{@a migrations}
## Automated Migrations for Version 10
Read about the migrations the CLI handles for you automatically:
* [Migrating missing `@Directive()`/`@Component()` decorators](guide/migration-undecorated-classes)
* [Migrating `ModuleWithProviders`](guide/migration-module-with-providers)
* [Solution-style `tsconfig.json` migration](guide/migration-solution-style-tsconfig)
* [`tslib` direct dependency migration](guide/migration-update-libraries-tslib)
* [Update `module` and `target` compiler options migration](guide/migration-update-module-and-target-compiler-options)

View File

@ -1,177 +0,0 @@
# Updating to Angular version 9
# 更新到 Angular 9
This guide contains information related to updating to version 9 of Angular.
本指南包含关于更新到下一个 Angular 版本所需的全部知识。
## Updating CLI Apps
## 更新 CLI 应用
For step-by-step instructions on how to update to the latest Angular release (and leverage our automated migration tools to do so), use the interactive update guide at [update.angular.io](https://update.angular.io).
有关如何更新到最新 Angular 版本的分步说明(并利用我们的自动迁移工具进行更新),请使用 [update.angular.io](https://update.angular.io) 上的交互式更新指南。
If you're curious about the specific migrations being run by the CLI, see the [automated migrations section](#migrations) for details on what code is changing and why.
如果你对 CLI 正在运行的某些迁移工作感到好奇,参见[“自动迁移”部分](#migrations)以了解关于要更改哪些代码以及更改原因的详细信息。
## Changes and Deprecations in Version 9
## 版本 9 中的更改和弃用
<div class="alert is-helpful">
For information about Angular's deprecation and removal practices, see [Angular Release Practices](guide/releases#deprecation-practices "Angular Release Practices: Deprecation practices").
有关 Angular 弃用和移除实践的信息,参见 [Angular 的发布实践](guide/releases#deprecation-practices "Angular 发布惯例:弃用惯例")。
</div>
{@a breaking-changes}
### New Breaking Changes
### 新的重大变化
- Angular now compiles with Ivy by default. See the [Ivy compatibility section](#ivy).
Angular 现在默认使用 Ivy 进行编译。参见 [Ivy 兼容性部分](#ivy)。
- CLI apps compile in [AOT mode](/guide/aot-compiler) by default (which includes template type-checking).
Users who only built with JIT before may see new type errors.
See our [template type-checking guide](guide/template-typecheck) for more information and debugging tips.
CLI 应用程序默认情况下以 [AOT 模式](/guide/aot-compiler)编译(包括模板类型检查)。以前仅使用 JIT 构建的用户可能会看到新的类型错误。有关更多信息和调试提示,请参见我们的[模板类型检查指南](guide/template-typecheck)。
- Typescript 3.4 and 3.5 are no longer supported. Please update to Typescript 3.7.
不再支持 TypeScript 3.4 和 3.5。请更新至 Typescript 3.7。
- `tslib` is now listed as a peer dependency rather than a direct dependency. If you are not using the CLI, you must manually install `tslib`, using `yarn add tslib` or `npm install tslib --save`.
`tslib` 现在被列为对等(peer)依赖,而不是直接依赖。如果不使用 CLI则必须手动安装 `tslib`,使用 `yarn add tslib``npm install tslib --save`
{@a deprecations}
{@a 弃用}
### New Deprecations
### 新的弃用
| API | Replacement | Notes |
| --- | ----------- | ----- |
| API | 替代品 | 备注 |
| [`entryComponents`](api/core/NgModule#entryComponents) | none | See [`entryComponents`](guide/deprecations#entryComponents) |
| [`entryComponents`](api/core/NgModule#entryComponents) | 无 | 参见 [`entryComponents`](guide/deprecations#entryComponents) |
| [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation)| `{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}` | From v11 the default code will be extracted from the locale data given by `LOCAL_ID`, rather than `USD`. |
| [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation)| `{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}` | 从 v11 开始,默认代码将从由 `LOCAL_ID` 提供的语言环境数据中提取,而不再是固定值 `USD`。|
| [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | none | See [`ANALYZE_FOR_ENTRY_COMPONENTS`](guide/deprecations#entryComponents) |
| [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | 无 | 见[`ANALYZE_FOR_ENTRY_COMPONENTS`](guide/deprecations#entryComponents) |
| `ModuleWithProviders` without a generic | `ModuleWithProviders` with a generic | |
| 不带泛型的 `ModuleWithProviders` | 带泛型的 `ModuleWithProviders` | |
| Undecorated base classes that use Angular features | Base classes with `@Directive()` decorator that use Angular features | |
| 使用 Angular 特性的不带装饰器的基类 | 具有 Angular 特性的带 `@Directive()` 装饰器的基类 | |
| `esm5` and `fesm5` distribution in `@angular/*` npm packages | `esm2015` and `fesm2015` entrypoints | See [`esm5` and `fesm5`](guide/deprecations#esm5-fesm5) |
| `@angular/*` npm 软件包中的 `esm5``fesm5` 分发版 | `esm2015``fesm2015` 入口点 | 参见 [`esm5` 和 `fesm5`](guide/deprecations#esm5-fesm5) |
| [`TestBed.get`](api/core/testing/TestBed#get) | [`TestBed.inject`](api/core/testing/TestBed#inject) | Same behavior, but type safe. |
| [`TestBed.get`](api/core/testing/TestBed#get) | [`TestBed.inject`](api/core/testing/TestBed#inject) | 行为相同,但类型安全。|
{@a removals}
### New Removals of Deprecated APIs
### 新删除的已弃用 API
| Package | API | Replacement | Notes | |
| ------- | --- | ----------- | ----- | --- |
| 包 | API | 替代品 | 备注 | |
| `@angular/core` | [`Renderer`](https://v8.angular.io/api/core/Renderer) | [`Renderer2`](api/core/Renderer2) | [Migration guide.](guide/migration-renderer) | |
| `@angular/core` | [`Renderer`](https://v8.angular.io/api/core/Renderer) | [`Renderer2`](api/core/Renderer2) | [迁移指南](guide/migration-renderer) | |
| `@angular/core` | [`RootRenderer`](https://v8.angular.io/api/core/RootRenderer) | [`RendererFactory2`](api/core/RendererFactory2) | none | |
| `@angular/core` | [`RootRenderer`](https://v8.angular.io/api/core/RootRenderer) | [`RendererFactory2`](api/core/RendererFactory2) | 无 | |
| `@angular/core` | [`RenderComponentType`](https://v8.angular.io/api/core/RenderComponentType) | [`RendererType2`](api/core/RendererType2) | none | |
| `@angular/core` | [`RenderComponentType`](https://v8.angular.io/api/core/RenderComponentType) | [`RendererType2`](api/core/RendererType2) | 无 | |
| `@angular/core` | [`WtfScopeFn`](https://v8.angular.io/api/core/WtfScopeFn) | none | v8 | See [Web Tracing Framework](guide/deprecations#wtf) |
| `@angular/core` | [`WtfScopeFn`](https://v8.angular.io/api/core/WtfScopeFn) | 无 | v8 | 参见 [Web 跟踪框架](guide/deprecations#wtf) |
| `@angular/core` | [`wtfCreateScope`](https://v8.angular.io/api/core/wtfCreateScope) | none | v8 | See [Web Tracing Framework](guide/deprecations#wtf) |
| `@angular/core` | [`wtfCreateScope`](https://v8.angular.io/api/core/wtfCreateScope) | 无 | v8 | 参见 [Web 跟踪框架](guide/deprecations#wtf) |
| `@angular/core` | [`wtfStartTimeRange`](https://v8.angular.io/api/core/wtfStartTimeRange) | none | v8 | See [Web Tracing Framework](guide/deprecations#wtf) |
| `@angular/core` | [`wtfStartTimeRange`](https://v8.angular.io/api/core/wtfStartTimeRange) | 无 | v8 | 参见 [Web 跟踪框架](guide/deprecations#wtf) |
| `@angular/core` | [`wtfEndTimeRange`](https://v8.angular.io/api/core/wtfEndTimeRange) | none | v8 | See [Web Tracing Framework](guide/deprecations#wtf) |
| `@angular/core` | [`wtfEndTimeRange`](https://v8.angular.io/api/core/wtfEndTimeRange) | 无 | v8 | 参见 [Web 跟踪框架](guide/deprecations#wtf) |
| `@angular/core` | [`wtfLeave`](https://v8.angular.io/api/core/wtfLeave) | none | v8 | See [Web Tracing Framework](guide/deprecations#wtf) |
| `@angular/core` | [`wtfLeave`](https://v8.angular.io/api/core/wtfLeave) | 无 | v8 | 参见 [Web 跟踪框架](guide/deprecations#wtf) |
| `@angular/common` | `DeprecatedI18NPipesModule` | [`CommonModule`](api/common/CommonModule#pipes) | none | |
| `@angular/common` | `DeprecatedI18NPipesModule` | [`CommonModule`](api/common/CommonModule#pipes) | 无 | |
| `@angular/common` | `DeprecatedCurrencyPipe` | [`CurrencyPipe`](api/common/CurrencyPipe) | none | |
| `@angular/common` | `DeprecatedCurrencyPipe` | [`CurrencyPipe`](api/common/CurrencyPipe) | 无 | |
| `@angular/common` | `DeprecatedDatePipe` | [`DatePipe`](api/common/DatePipe) | none | |
| `@angular/common` | `DeprecatedDatePipe` | [`DatePipe`](api/common/DatePipe) | 无 | |
| `@angular/common` | `DeprecatedDecimalPipe` | [`DecimalPipe`](api/common/DecimalPipe) | none | |
| `@angular/common` | `DeprecatedDecimalPipe` | [`DecimalPipe`](api/common/DecimalPipe) | 无 | |
| `@angular/common` | `DeprecatedPercentPipe` | [`PercentPipe`](api/common/PercentPipe) | none | |
| `@angular/common` | `DeprecatedPercentPipe` | [`PercentPipe`](api/common/PercentPipe) | 无 | |
| `@angular/forms` | [`NgFormSelectorWarning`](https://v8.angular.io/api/forms/NgFormSelectorWarning) | none | | |
| `@angular/forms` | [`NgFormSelectorWarning`](https://v8.angular.io/api/forms/NgFormSelectorWarning) | 无 | | |
| `@angular/forms` | `ngForm` element selector | `ng-form` element selector | none | |
| `@angular/forms` | `ngForm` 元素选择器 | `ng-form` 元素选择器 | 无 | |
| `@angular/service-worker` | `versionedFiles` | `files` | In the service worker configuration file `ngsw-config.json`, replace `versionedFiles` with `files`. See [Service Worker Configuration](guide/service-worker-config#assetgroups). | |
| `@angular/service-worker` | `versionedFiles` | `files` | 在 Service Worker 配置文件 `ngsw-config.json`,用 `files` 替换 `versionedFiles`。参见 [Service Worker 配置](guide/service-worker-config#assetgroups)。| |
{@a ivy}
## Ivy features and compatibility
## Ivy 的特性与兼容性
In Version 9, Angular Ivy is the default rendering engine. If you haven't heard of Ivy, you can read more about it in the [Angular Ivy guide](guide/ivy).
在版本 9 中Angular Ivy 是默认渲染引擎。如果你还没有听说过 Ivy则可以在 [Angular Ivy 指南](guide/ivy)中阅读有关它的更多信息。
* Among other features, Ivy introduces more comprehensive type-checking within templates. For details, see [Template Type-checking](guide/template-typecheck).
除其它功能外Ivy 在模板中引入了更全面的类型检查。有关详细信息,请参见[模板类型检查](guide/template-typecheck)。
* For general guidance on debugging and a list of minor changes associated with Ivy, see the [Ivy compatibility guide](guide/ivy-compatibility).
关于调试的一般性指南以及与 Ivy 相关的较小更改的列表,请参见 [Ivy 兼容性指南](guide/ivy-compatibility)。
* For help with opting out of Ivy, see the instructions [here](guide/ivy#opting-out-of-angular-ivy).
有关选择性禁用 Ivy 的帮助,参见[此处](guide/ivy#opting-out-of-angular-ivy)的说明。
{@a migrations}
## Automated Migrations for Version 9
## 版本 9 的自动迁移
Read about the migrations the CLI handles for you automatically:
了解 CLI 自动为你处理的迁移:
- [Migrating from `Renderer` to `Renderer2`](guide/migration-renderer)
[从 `Renderer` 迁移到 `Renderer2`](guide/migration-renderer)
- [Migrating missing `@Directive()`/`@Component()` decorators](guide/migration-undecorated-classes)
[迁移缺失的 `@Directive()` / `@Component()` 装饰器](guide/migration-undecorated-classes)
- [Migrating missing `@Injectable()` decorators and incomplete provider definitions](guide/migration-injectable)
[迁移缺失的 `@Injectable()` 装饰器和不完整的服务提供者定义](guide/migration-injectable)
- [Migrating dynamic queries](guide/migration-dynamic-flag)
[迁移动态查询](guide/migration-dynamic-flag)
- [Migrating to the new `$localize` i18n support](guide/migration-localize)
[迁移到新的 `$localize` i18n 支持](guide/migration-localize)
- [Migrating `ModuleWithProviders`](guide/migration-module-with-providers)
[迁移 `ModuleWithProviders`](guide/migration-module-with-providers)

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