diff --git a/.bazelrc b/.bazelrc
index 8e2871830605..d0f63e8c11a5 100644
--- a/.bazelrc
+++ b/.bazelrc
@@ -114,11 +114,11 @@ build:remote --cpu=k8
build:remote --host_cpu=k8
# Toolchain and platform related flags
-build:remote --crosstool_top=//dev-infra/bazel/remote-execution/cpp:cc_toolchain_suite
-build:remote --extra_toolchains=//dev-infra/bazel/remote-execution/cpp:cc_toolchain
-build:remote --extra_execution_platforms=//dev-infra/bazel/remote-execution:platform
-build:remote --host_platform=//dev-infra/bazel/remote-execution:platform
-build:remote --platforms=//dev-infra/bazel/remote-execution:platform
+build:remote --crosstool_top=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain_suite
+build:remote --extra_toolchains=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain
+build:remote --extra_execution_platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
+build:remote --host_platform=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
+build:remote --platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
# Remote instance and caching
build:remote --remote_instance_name=projects/internal-200822/instances/primary_instance
diff --git a/.bazelversion b/.bazelversion
index 21e00cfe036a..fcdb2e109f68 100644
--- a/.bazelversion
+++ b/.bazelversion
@@ -1,3 +1 @@
4.0.0
-# [NB: this comment has to be after the first line, see https://github.com/bazelbuild/bazelisk/issues/117]
-# When updating the Bazel version you also need to update the RBE toolchains version in package.bzl
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2997e4006ea7..795dccc415d6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -24,19 +24,19 @@ version: 2.1
# **NOTE 2 **: If you change the cache key prefix, also sync the cache_key_fallback to match.
# **NOTE 3 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
# See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
-var_3: &cache_key v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-{{ checksum "aio/yarn.lock" }}
+var_3: &cache_key v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
# We invalidate the cache if the Bazel version changes because otherwise the `bazelisk` cache
# folder will contain all previously used versions and ultimately cause the cache restoring to
# be slower due to its growing size.
-var_4: &cache_key_fallback v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
+var_4: &cache_key_fallback v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
# Windows needs its own cache key because binaries in node_modules are different.
-var_3_win: &cache_key_win v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-{{ checksum "aio/yarn.lock" }}
-var_4_win: &cache_key_win_fallback v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
+var_3_win: &cache_key_win v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
+var_4_win: &cache_key_win_fallback v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
# 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 v1-angular-components-{{ checksum "month.txt" }}-7cc42f5d835b7971e9ff73e220b801cf7834d515
+var_5: &components_repo_unit_tests_cache_key v1-angular-components-{{ checksum "month.txt" }}-d090617912da8e70aa336aa5b4d804b1b535402e
var_6: &components_repo_unit_tests_cache_key_fallback v1-angular-components-{{ checksum "month.txt" }}
# Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
@@ -213,6 +213,10 @@ commands:
keys:
- *cache_key_win
- *cache_key_win_fallback
+ # Install @bazel/bazelisk globally and use that for the first run.
+ # Workaround for https://github.com/bazelbuild/rules_nodejs/issues/894
+ # NB: the issue was for @bazel/bazel but the same problem applies to @bazel/bazelisk
+ - run: yarn global add @bazel/bazelisk@$env:BAZELISK_VERSION
# On Windows `~/` is not resolved when using as a CLI value. `../` results in the same path.
- run: yarn install --frozen-lockfile --non-interactive --cache-folder ../.cache/yarn
@@ -291,6 +295,7 @@ jobs:
- run: yarn -s ng-dev pullapprove verify
- run: yarn -s ng-dev ngbot verify
- run: yarn -s ng-dev commit-message validate-range $CI_GIT_BASE_REVISION $CI_GIT_REVISION
+ - run: yarn -s check-tooling-setup
test:
executor:
@@ -676,11 +681,6 @@ jobs:
name: Starting Saucelabs tunnel service
command: ./tools/saucelabs/sauce-service.sh run
background: true
- # add module umd tsc compile option so the test can work
- # properly in the legacy browsers
- - run: yarn tsc -p packages --module UMD
- - run: yarn tsc -p modules --module UMD
- - run: yarn bazel build //packages/zone.js:npm_package
# Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
# specific tests which are reliant on such generated fixtures is not an option as SystemJS
# in the Saucelabs legacy job always fetches referenced files, even if the imports would be
@@ -689,10 +689,26 @@ jobs:
- run:
name: Preparing Bazel-generated fixtures required in legacy tests
command: |
- yarn bazel build //packages/core/test:downleveled_es5_fixture
+ yarn bazel build \
+ //packages/core/test:downleveled_es5_fixture \
+ //packages/common/locales
+
# Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
+ mkdir -p dist/all/@angular/core/test/reflection/
cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
dist/all/@angular/core/test/reflection/es5_downleveled_inheritance_fixture.js
+ # Locale files are needed for i18n tests running within Saucelabs. These are added
+ # directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
+ # can succeed. Note that the base locale and currencies files are checked-in, so
+ # we do not need to re-generate those through Bazel.
+ mkdir -p packages/common/locales/extra
+ cp dist/bin/packages/common/locales/*.ts packages/common/locales
+ cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
+ # add module umd tsc compile option so the test can work
+ # properly in the legacy browsers
+ - run: yarn tsc -p packages/tsconfig-legacy-saucelabs.json --module UMD
+ - run: yarn tsc -p modules --module UMD
+ - run: yarn bazel build //packages/zone.js:npm_package
- run:
# Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
name: Waiting for Saucelabs tunnel to connect
@@ -741,10 +757,6 @@ jobs:
# variable. It needs to be hardcoded here, because env variables interpolation is
# not supported.
- '/tmp/angular-components-repo'
- - run:
- # TODO(devversion): remove once https://github.com/angular/components/pull/23056 is available.
- name: Replace RBE container instance name
- command: sed -i "s#default_instance#primary_instance#g" ${COMPONENTS_REPO_TMP_DIR}/.bazelrc
- run:
# Updates the `angular/components` `package.json` file to refer to the release output
# inside the `packages-dist` directory.
@@ -791,11 +803,11 @@ jobs:
- setup_win
- run:
name: Build all windows CI targets
- command: yarn bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/... //tools/ts-api-guardian/...
+ command: bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
no_output_timeout: 15m
- run:
name: Test all windows CI targets
- command: yarn bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/... //tools/ts-api-guardian/...
+ command: bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
no_output_timeout: 15m
test_ivy_aot_win:
@@ -804,11 +816,11 @@ jobs:
- setup_win
- run:
name: Build all windows CI targets
- command: yarn bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/... //tools/ts-api-guardian/...
+ command: bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
no_output_timeout: 15m
- run:
name: Test all windows CI targets
- command: yarn bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //tools/ts-api-guardian/... //packages/localize/...
+ command: bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
no_output_timeout: 15m
# Save dependencies to use on subsequent runs.
- save_cache:
diff --git a/.circleci/env.sh b/.circleci/env.sh
index 6b5cb208e110..3ddc7ea8099c 100755
--- a/.circleci/env.sh
+++ b/.circleci/env.sh
@@ -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 "7cc42f5d835b7971e9ff73e220b801cf7834d515"
+setPublicVar COMPONENTS_REPO_COMMIT "d090617912da8e70aa336aa5b4d804b1b535402e"
####################################################################################################
diff --git a/.gitattributes b/.gitattributes
index b45635737ca2..0acf0cd70da0 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -5,8 +5,5 @@
*.js eol=lf
*.ts eol=lf
-# API guardian patch must always use LF for tests to work
-*.patch eol=lf
-
# Must keep Windows line ending to be parsed correctly
scripts/windows/packages.txt eol=crlf
diff --git a/.github/ISSUE_TEMPLATE/1-bug-report.md b/.github/ISSUE_TEMPLATE/1-bug-report.md
deleted file mode 100644
index f918378db6ce..000000000000
--- a/.github/ISSUE_TEMPLATE/1-bug-report.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-name: "Bug Report"
-about: Report a bug in the Angular Framework
----
-
-
-
-# Bug Report
-
-### Affected Package
-
- The issue is caused by package @angular/....
-
-
-### Is this a regression?
-
-
- Yes, the previous version in which this bug was not present was: ....
-
-
-### Description
- A clear and concise description of the problem...
-
-
-## Minimal Reproduction
-
- https://stackblitz.com/...
-
-
-
-## Exception or Error
-
-
-
-
-
-
-## Your Environment
-
-**Angular Version:**
-
-
-
-
-
-**Anything else relevant?**
-
-
-
diff --git a/.github/ISSUE_TEMPLATE/1-bug-report.yaml b/.github/ISSUE_TEMPLATE/1-bug-report.yaml
new file mode 100644
index 000000000000..a20d7ed0c6db
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1-bug-report.yaml
@@ -0,0 +1,85 @@
+name: Bug Report
+description: Report a bug in the Angular Framework
+
+body:
+ - type: dropdown
+ id: affected-packages
+ attributes:
+ label: Which @angular/* package(s) are the source of the bug?
+ options:
+ - animations
+ - bazel
+ - common
+ - compiler-cli
+ - compiler
+ - core
+ - elements
+ - forms
+ - language-service
+ - localize
+ - platform-browser-dynamic
+ - platform-browser
+ - platform-server
+ - router
+ - service-worker
+ - upgrade
+ - Don't known / other
+ multiple: true
+ validations:
+ required: true
+
+ - type: dropdown
+ id: is-regression
+ attributes:
+ label: Is this a regression?
+ options:
+ - 'Yes'
+ - 'No'
+ validations:
+ required: true
+
+ - type: textarea
+ id: description
+ attributes:
+ label: Description
+ validations:
+ required: true
+
+ - type: input
+ id: reproduction
+ attributes:
+ label: Please provide a link to a minimal reproduction of the bug
+
+ - type: textarea
+ id: exception-or-error
+ attributes:
+ label: Please provide the exception or error you saw
+ render: true
+
+ - type: textarea
+ id: environment
+ attributes:
+ label: Please provide the environment you discovered this bug in
+ render: true
+ placeholder: |
+ Angular CLI: 12.0.5
+ Node: 14.17.0
+ Package Manager: yarn 1.22.10
+ OS: linux x64
+
+ Angular: 12.0.5
+ ... animations, cli, common, compiler, compiler-cli, core, forms
+ ... platform-browser, platform-browser-dynamic, router
+
+ Package Version
+ ---------------------------------------------------------
+ @angular-devkit/architect 0.1200.5
+ @angular-devkit/build-angular 12.0.5
+ @angular-devkit/core 12.0.5
+ rxjs 6.6.7
+ typescript 4.2.4
+
+ - type: textarea
+ id: other
+ attributes:
+ label: Anything else?
diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.md b/.github/ISSUE_TEMPLATE/2-feature-request.md
deleted file mode 100644
index c88cc8186b3c..000000000000
--- a/.github/ISSUE_TEMPLATE/2-feature-request.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-name: "Feature Request"
-about: Suggest a feature for Angular Framework
----
-
-
-
-# Feature Request
-
-### Relevant Package
-
- This feature request is for @angular/....
-
-
-### Description
- A clear and concise description of the problem or missing capability...
-
-
-### Describe the solution you'd like
- If you have a solution in mind, please describe it.
-
-
-### Describe alternatives you've considered
- Have you considered any alternative solutions or workarounds?
diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.yaml b/.github/ISSUE_TEMPLATE/2-feature-request.yaml
new file mode 100644
index 000000000000..28b02ade3193
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/2-feature-request.yaml
@@ -0,0 +1,47 @@
+name: 'Feature Request'
+description: Suggest a feature for Angular Framework
+
+body:
+ - type: dropdown
+ id: affected-packages
+ attributes:
+ label: Which @angular/* package(s) are relevant/releated to the feature request?
+ options:
+ - animations
+ - bazel
+ - common
+ - compiler-cli
+ - compiler
+ - core
+ - elements
+ - forms
+ - language-service
+ - localize
+ - platform-browser-dynamic
+ - platform-browser
+ - platform-server
+ - router
+ - service-worker
+ - upgrade
+ multiple: true
+
+ - type: textarea
+ id: description
+ attributes:
+ label: Description
+ validations:
+ required: true
+
+ - type: textarea
+ id: proposed-solution
+ attributes:
+ label: Proposed solution
+ validations:
+ required: true
+
+ - type: textarea
+ id: alternatives-considered
+ attributes:
+ label: Alternatives considered
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/3-docs-bug.md b/.github/ISSUE_TEMPLATE/3-docs-bug.md
deleted file mode 100644
index caa23d5fbc5f..000000000000
--- a/.github/ISSUE_TEMPLATE/3-docs-bug.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-name: "Docs or angular.io Bug Report"
-about: Report an issue in Angular's documentation or angular.io application
----
-
-
-# Docs or angular.io Bug Report
-
-### Description
-
- A clear and concise description of the problem...
-
-
-## Minimal Reproduction
-
-### What's the affected URL?**
- https://angular.io/...
-
-### Reproduction Steps**
-
-
-### Expected vs Actual Behavior**
-
-
-## Screenshot
-
-
-
-## Exception or Error
-
-
-
-
-
-## Your Environment
-
-### Browser info
-
-
-### Anything else relevant?
-
diff --git a/.github/ISSUE_TEMPLATE/3-docs-bug.yaml b/.github/ISSUE_TEMPLATE/3-docs-bug.yaml
new file mode 100644
index 000000000000..ec3f8337e81c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/3-docs-bug.yaml
@@ -0,0 +1,42 @@
+name: 'Docs or angular.io Bug Report'
+description: Report an issue in Angular's documentation or angular.io application
+
+body:
+ - type: textarea
+ id: description
+ attributes:
+ label: Description
+ validations:
+ required: true
+
+ - type: input
+ id: affected-url
+ attributes:
+ label: What is the affected URL?
+
+ - type: textarea
+ id: reproduction-steps
+ attributes:
+ label: Please provide the steps to reproduce the issue
+
+ - type: textarea
+ id: expected-vs-actual-behavior
+ attributes:
+ label: Please provide the expected behavior vs the actual behavior you encountered
+
+ - type: textarea
+ id: screenshot
+ attributes:
+ label: Please provide a screenshot if possible
+
+ - type: textarea
+ id: exception-or-error
+ attributes:
+ label: Please provide the exception or error you saw
+ render: true
+
+ - type: textarea
+ id: browser-info
+ attributes:
+ label: Is this a browser-specific issue? If so, please specify the device, browser, and version.
+ render: true
diff --git a/.github/angular-robot.yml b/.github/angular-robot.yml
index 04c72688c1b8..39c903cbe325 100644
--- a/.github/angular-robot.yml
+++ b/.github/angular-robot.yml
@@ -38,7 +38,6 @@ merge:
- 'modules/benchmarks/**'
- 'modules/system.d.ts'
- 'packages/**'
- - 'dev-infra/benchmark/driver-utilities/**'
# list of patterns to ignore for the files changed by the PR
exclude:
- 'packages/*'
diff --git a/.github/workflows/dev-infra.yml b/.github/workflows/dev-infra.yml
new file mode 100644
index 000000000000..51fe79480f75
--- /dev/null
+++ b/.github/workflows/dev-infra.yml
@@ -0,0 +1,14 @@
+name: DevInfra
+
+on:
+ pull_request_target:
+ types: [opened, synchronize, reopened]
+
+jobs:
+ breaking-changes-label:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: angular/dev-infra/github-actions/breaking-changes-label@861dc90572784e714aeaa9dfb20ceebeb57cdb07
+ with:
+ angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
diff --git a/.github/workflows/feature-requests.yml b/.github/workflows/feature-requests.yml
index 14be22ab2ff3..c3d59c784664 100644
--- a/.github/workflows/feature-requests.yml
+++ b/.github/workflows/feature-requests.yml
@@ -10,6 +10,6 @@ jobs:
if: github.repository == 'angular/angular'
runs-on: ubuntu-latest
steps:
- - uses: angular/dev-infra/github-actions/feature-request@8467fd69f068914f8f25e10b1a80c183ee886de4
+ - uses: angular/dev-infra/github-actions/feature-request@f83903fe1ac848407ef81465f66588e5accb6537
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
diff --git a/.gitignore b/.gitignore
index 7a597d9a6c87..140aed39fc01 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,8 +50,5 @@ baseline.json
# Ignore .history for the xyz.local-history VSCode extension
.history
-# CLDR data
-tools/gulp-tasks/cldr/cldr-data/
-
# Husky
.husky/_
diff --git a/.gitmessage b/.gitmessage
index 536045e1d90f..c607c42e74a9 100644
--- a/.gitmessage
+++ b/.gitmessage
@@ -106,8 +106,7 @@ Fixes #
# │ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
# │ elements|forms|http|language-service|localize|platform-browser|
# │ platform-browser-dynamic|platform-server|router|service-worker|
-# │ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
-# │ ngcc|ve
+# │ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
# │ https://github.com/angular/angular/blob/master/CONTRIBUTING.md#scope
# │
# └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
diff --git a/.husky/.gitignore b/.husky/.gitignore
deleted file mode 100644
index 31354ec13899..000000000000
--- a/.husky/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-_
diff --git a/.ng-dev/caretaker.ts b/.ng-dev/caretaker.ts
index 6d6aaa9684e2..1b2a720e7a38 100644
--- a/.ng-dev/caretaker.ts
+++ b/.ng-dev/caretaker.ts
@@ -1,4 +1,4 @@
-import {CaretakerConfig} from '../dev-infra/caretaker/config';
+import {CaretakerConfig} from '@angular/dev-infra-private/ng-dev/caretaker/config';
/** The configuration for `ng-dev caretaker` commands. */
export const caretaker: CaretakerConfig = {
@@ -15,5 +15,6 @@ export const caretaker: CaretakerConfig = {
name: 'Initial Triage Queue',
query: `is:open no:milestone`,
}
- ]
+ ],
+ caretakerGroup: 'angular-caretaker',
};
diff --git a/.ng-dev/commit-message.ts b/.ng-dev/commit-message.ts
index 4a74d244d783..13da4dc5ae20 100644
--- a/.ng-dev/commit-message.ts
+++ b/.ng-dev/commit-message.ts
@@ -1,4 +1,4 @@
-import {CommitMessageConfig} from '../dev-infra/commit-message/config';
+import {CommitMessageConfig} from '@angular/dev-infra-private/ng-dev/commit-message/config';
/**
* The configuration for `ng-dev commit-message` commands.
diff --git a/.ng-dev/format.ts b/.ng-dev/format.ts
index c56366c57f8f..a729d4201f64 100644
--- a/.ng-dev/format.ts
+++ b/.ng-dev/format.ts
@@ -1,4 +1,4 @@
-import {FormatConfig} from '../dev-infra/format/config';
+import {FormatConfig} from '@angular/dev-infra-private/ng-dev/format/config';
/**
* Configuration for the `ng-dev format` command.
@@ -26,6 +26,11 @@ export const format: FormatConfig = {
'!dev-infra/build-worker.js',
// Do not format compliance test-cases since they must match generated code
'!packages/compiler-cli/test/compliance/test_cases/**/*.js',
+ // Do not format the locale files which are checked-in for Google3, but generated using
+ // the `generate-locales-tool` from `packages/common/locales`.
+ '!packages/core/src/i18n/locale_en.ts',
+ '!packages/common/locales/closure-locale.ts',
+ '!packages/common/src/i18n/currencies.ts',
]
},
'buildifier': true
diff --git a/.ng-dev/github.ts b/.ng-dev/github.ts
index c9b009bea572..6af18a58938b 100644
--- a/.ng-dev/github.ts
+++ b/.ng-dev/github.ts
@@ -1,11 +1,11 @@
-import {GithubConfig} from '../dev-infra/utils/config';
+import {GithubConfig} from '@angular/dev-infra-private/ng-dev/utils/config';
/**
* Github configuration for the `ng-dev` command. This repository is used as
* remote for the merge script and other utilities like `ng-dev pr rebase`.
*/
-
export const github: GithubConfig = {
owner: 'angular',
- name: 'angular'
+ name: 'angular',
+ mainBranchName: 'master',
};
diff --git a/.ng-dev/merge.ts b/.ng-dev/merge.ts
index 9dcd09968450..5d62f3ad82c6 100644
--- a/.ng-dev/merge.ts
+++ b/.ng-dev/merge.ts
@@ -1,30 +1,24 @@
-import {DevInfraMergeConfig} from '../dev-infra/pr/merge/config';
-import {getDefaultTargetLabelConfiguration} from '../dev-infra/pr/merge/defaults';
-import {github} from './github';
-import {release} from './release';
+import {MergeConfig} from '@angular/dev-infra-private/ng-dev/pr/merge/config';
/**
* Configuration for the merge tool in `ng-dev`. This sets up the labels which
* are respected by the merge script (e.g. the target labels).
*/
-export const merge: DevInfraMergeConfig['merge'] = async api => {
- return {
- githubApiMerge: false,
- claSignedLabel: 'cla: yes',
- mergeReadyLabel: /^action: merge(-assistance)?/,
- caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
- commitMessageFixupLabel: 'commit message fixup',
- breakingChangeLabel: 'flag: breaking change',
- // We can pick any of the NPM packages as we are in a monorepo where all packages are
- // published together with the same version and branching.
- labels: await getDefaultTargetLabelConfiguration(api, github, release),
- 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',
- '10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
- },
- targetLabelExemptScopes: ['dev-infra', 'docs-infra']
- };
+export const merge: MergeConfig = {
+ githubApiMerge: false,
+ claSignedLabel: 'cla: yes',
+ mergeReadyLabel: /^action: merge(-assistance)?/,
+ caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
+ commitMessageFixupLabel: 'commit message fixup',
+ 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',
+ '10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
+ },
+ // `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
+ // the `bazel` package is not considered part of the public API so that features
+ // can land in patch branches.
+ targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
};
diff --git a/.ng-dev/release.ts b/.ng-dev/release.ts
index dbb836175b65..e6442a92403e 100644
--- a/.ng-dev/release.ts
+++ b/.ng-dev/release.ts
@@ -1,5 +1,5 @@
+import {ReleaseConfig} from '@angular/dev-infra-private/ng-dev/release/config';
import {join} from 'path';
-import {ReleaseConfig} from '../dev-infra/release/config';
/** Configuration for the `ng-dev release` command. */
export const release: ReleaseConfig = {
@@ -22,7 +22,7 @@ export const release: ReleaseConfig = {
'@angular/service-worker',
'@angular/upgrade',
],
- buildPackages: async (stampForRelease: boolean) => {
+ buildPackages: async (stampForRelease: boolean|undefined) => {
// The buildTargetPackages function is loaded at runtime as the loading the script causes an
// invocation of bazel.
const {buildTargetPackages} = require(join(__dirname, '../scripts/build/package-builder'));
diff --git a/.ng-dev/tsconfig.json b/.ng-dev/tsconfig.json
new file mode 100644
index 000000000000..9e9c1b746523
--- /dev/null
+++ b/.ng-dev/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "target": "es2015",
+ "module": "commonjs",
+ "noEmit": true,
+ "skipLibCheck": true,
+ "types": []
+ },
+}
diff --git a/.pullapprove.yml b/.pullapprove.yml
index 66e19b8ddc5e..25cfd6b1db04 100644
--- a/.pullapprove.yml
+++ b/.pullapprove.yml
@@ -79,7 +79,6 @@ meta:
# one are those that appear above it.
no-groups-above-this-pending: &no-groups-above-this-pending len(groups.active.pending.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
no-groups-above-this-rejected: &no-groups-above-this-rejected len(groups.active.rejected.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
- no-groups-above-this-active: &no-groups-above-this-active len(groups.active.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
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'
@@ -97,22 +96,23 @@ meta:
# https://developer.github.com/v3/previews/#draft-pull-requests
github_api_version: 'shadow-cat-preview'
-pullapprove_conditions:
+# https://docs.pullapprove.com/config/overrides/
+# Note that overrides are processed in order.
+overrides:
# For PRs which are still being worked on, either still in draft mode or indicated through WIP in
# title or label, PullApprove stays in a pending state until its ready for review.
- - condition: "'WIP' not in title"
- unmet_status: pending
+ - if: "draft or 'WIP' in title or 'PR state: WIP' in labels"
+ status: pending
explanation: 'Waiting to send reviews as PR is WIP'
- - condition: "'PR state: WIP' not in labels"
- unmet_status: pending
- explanation: 'Waiting to send reviews as PR is WIP'
- - condition: 'not draft'
- unmet_status: pending
- explanation: 'Waiting to send reviews as PR is in draft'
# Disable PullApprove on specific PRs by adding the `PullApprove: disable` label
- - condition: "'PullApprove: disable' not in labels"
- unmet_status: success
+ - if: "'PullApprove: disable' in labels"
+ status: success
explanation: "PullApprove skipped because of 'PullApprove: disable' label"
+ # If no file matching based groups are active, report this pull request as failing. Most likely,
+ # the PR author would need to update the PullApprove config, or create new group.
+ - if: len(groups.active.exclude("required-minimum-review").exclude("global-*")) == 0 and len(groups.approved.include("global-*")) == 0
+ status: failure
+ explanation: 'At least one group must match this PR. Please update an existing review group, or create a new group.'
groups:
# =========================================================
@@ -190,7 +190,6 @@ groups:
- JiaLiPassion # Jia Li
- JoostK # Joost Koehoorn
- josephperrott # Joey Perrott
- - kyliau # Keen Yee Liau
- manughub # Manu Murthy
- mgechev # Minko Gechev
- mmalerba # Miles Malerba
@@ -246,8 +245,9 @@ groups:
])
reviewers:
users:
- - alxhub
- AndrewKushnir
+ - alxhub
+ - atscott
- JoostK
# =========================================================
@@ -569,7 +569,6 @@ groups:
users:
- alan-agius4
- alxhub
- - kyliau
# =========================================================
# Framework: Router
@@ -762,7 +761,6 @@ groups:
users:
- IgorMinar
- josephperrott
- - kyliau
# =========================================================
# Language Service
@@ -780,7 +778,6 @@ groups:
])
reviewers:
users:
- - kyliau
- atscott
- zarend
@@ -1020,7 +1017,7 @@ groups:
users:
- alan-agius4
- clydin
- - kyliau
+ - dgp1130
- IgorMinar
reviews:
request: -1 # request reviews from everyone
@@ -1154,7 +1151,6 @@ groups:
'.ng-dev/**',
'.vscode/**',
'.yarn/**',
- 'dev-infra/**',
'docs/*.md',
'docs/images/**',
'goldens/*',
@@ -1177,7 +1173,6 @@ groups:
'tools/source-map-test/**',
'tools/symbol-extractor/**',
'tools/testing/**',
- 'tools/ts-api-guardian/**',
'tools/tslint/**',
'tools/utils/**',
'tools/yarn/**',
@@ -1305,49 +1300,3 @@ groups:
- atscott
- jelbourn
- josephperrott
-
- # ====================================================
- # 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:
- - *no-groups-above-this-active
- # 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
- - *can-be-global-docs-approved
- # PullApprove uses a combination of users defined in the pullapprove configuration and the
- # number of users who have performed reviews on Github in the recent past if the configuration
- # does not specify it. Because, as an open source project, anyone on Github can perform a
- # review we need to ensure that all groups, including the fallback group, have at least one user
- # or group defined as reviewers.
- reviewers:
- users:
- - josephperrott
- reviews:
- request: 0
- required: 1
- # Reviewed-for is required on fallback as it should not ever actually be reviewed, requiring
- # Reviewed-for helps insure an accidental approval doesn't occur on the fallback group.
- reviewed_for: required
diff --git a/BUILD.bazel b/BUILD.bazel
index a02b4906e298..596b2934d61e 100644
--- a/BUILD.bazel
+++ b/BUILD.bazel
@@ -24,7 +24,7 @@ filegroup(
"//packages/zone.js/bundles:zone-testing.umd.js",
"//packages/zone.js/bundles:task-tracking.umd.js",
"//:test-events.js",
- "//:third_party/shims_for_IE.js",
+ "//:third_party/shims_for_internal_tests.js",
# Including systemjs because it defines `__eval`, which produces correct stack traces.
"@npm//:node_modules/systemjs/dist/system.src.js",
"@npm//:node_modules/reflect-metadata/Reflect.js",
@@ -36,18 +36,18 @@ filegroup(
srcs = [
# We also declare the unminified AngularJS files since these can be used for
# local debugging (e.g. see: packages/upgrade/test/common/test_helpers.ts)
- "@npm//:node_modules/angular/angular.js",
- "@npm//:node_modules/angular/angular.min.js",
"@npm//:node_modules/angular-1.5/angular.js",
"@npm//:node_modules/angular-1.5/angular.min.js",
"@npm//:node_modules/angular-1.6/angular.js",
"@npm//:node_modules/angular-1.6/angular.min.js",
"@npm//:node_modules/angular-1.7/angular.js",
"@npm//:node_modules/angular-1.7/angular.min.js",
- "@npm//:node_modules/angular-mocks/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.5/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.6/angular-mocks.js",
"@npm//:node_modules/angular-mocks-1.7/angular-mocks.js",
+ "@npm//:node_modules/angular-mocks-1.8/angular-mocks.js",
+ "@npm//:node_modules/angular-1.8/angular.js",
+ "@npm//:node_modules/angular-1.8/angular.min.js",
],
)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fdd16aa40879..7ded528a7184 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,370 @@
+
+# 13.0.0-next.4 (2021-09-01)
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [4341a5f4cb](https://github.com/angular/angular/commit/4341a5f4cb7969b5c06d46a6afbd95cbccab8d95) | fix: Emit type annotations for synthesized decorator fields ([#43021](https://github.com/angular/angular/pull/43021)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [faf9f5a3bc](https://github.com/angular/angular/commit/faf9f5a3bc444bb6cbf75916c8022f60e0742bca) | feat: new output that would notify when link is activated ([#43280](https://github.com/angular/angular/pull/43280)) |
+## Special Thanks:
+Alan Agius, Andrew Scott, Daniel Trevino, George Kalpakas, Jessica Janiuk, Joey Perrott, JoostK, Kristiyan Kostadinov, anandtiwary, nickreid and segunb
+
+
+
+# 12.2.4 (2021-09-01)
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [8233906be2](https://github.com/angular/angular/commit/8233906be25e19da6d8115094616d3e4b5e36fea) | fix: Emit type annotations for synthesized decorator fields ([#43021](https://github.com/angular/angular/pull/43021)) |
+## Special Thanks:
+Andrew Scott, Daniel Trevino, George Kalpakas, Joey Perrott, Kristiyan Kostadinov, nickreid and segunb
+
+
+
+# 13.0.0-next.3 (2021-08-25)
+## Breaking Changes
+### router
+- Previously `null` and `undefined` inputs for `routerLink` were
+equivalent to empty string and there was no way to disable the link's
+navigation.
+In addition, the `href` is changed from a property `HostBinding()` to an
+attribute binding (`HostBinding('attr.href')`). The effect of this
+change is that `DebugElement.properties['href']` will now return the
+`href` value returned by the native element which will be the full URL
+rather than the internal value of the `RouterLink` `href` property.
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [bed121c34f](https://github.com/angular/angular/commit/bed121c34f9c4ec4741a4690693423bb7ed66982) | feat: inline resources when generating class metadata calls ([#43178](https://github.com/angular/angular/pull/43178)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [e57691c9c5](https://github.com/angular/angular/commit/e57691c9c5f8456f7dc75180aa1e80330da560fe) | feat: Add migration to update empty routerLinks in templates ([#43176](https://github.com/angular/angular/pull/43176)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [b10d90bef6](https://github.com/angular/angular/commit/b10d90bef6a3d1b721d087268aa7377985dd4c4f) | feat: Add method for retrieving the component template at the cursor location ([#43208](https://github.com/angular/angular/pull/43208)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [ccb09b4558](https://github.com/angular/angular/commit/ccb09b4558a3864fb5b2fe2214d08f1c1fe2758f) | fix: null/undefined routerLink should disable navigation ([#43087](https://github.com/angular/angular/pull/43087)) |
+### service-worker
+| Commit | Description |
+| -- | -- |
+| [6e924313c3](https://github.com/angular/angular/commit/6e924313c3bd93236227e92a5054fc8cc9b37644) | fix: NPE if onActionClick is undefined ([#43210](https://github.com/angular/angular/pull/43210)) |
+## Special Thanks:
+Alex Rickabaugh, Andrew Scott, Daniel Trevino, George Kalpakas, Paul Gschwendtner, dario-piotrowicz and shlasouski
+
+
+
+# 12.2.3 (2021-08-25)
+### service-worker
+| Commit | Description |
+| -- | -- |
+| [fc7f92159d](https://github.com/angular/angular/commit/fc7f92159df16e894d9909cfc8969ed4b7d9924a) | fix: NPE if onActionClick is undefined ([#43210](https://github.com/angular/angular/pull/43210)) |
+## Special Thanks:
+Daniel Trevino, Erik Slack, George Kalpakas, dario-piotrowicz and shlasouski
+
+
+
+# 13.0.0-next.2 (2021-08-18)
+### animations
+| Commit | Description |
+| -- | -- |
+| [3cb1f18f97](https://github.com/angular/angular/commit/3cb1f18f976190189440e281581e712aaf0250e4) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [27a89a9298](https://github.com/angular/angular/commit/27a89a929818dc2d249c2833c4a75582a7dc1349) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [d5f9890c92](https://github.com/angular/angular/commit/d5f9890c9205b4a121275ace84b26776aedd0478) | feat: auto-apply optional chaining on nullable symbol ([#42995](https://github.com/angular/angular/pull/42995)) |
+### platform-browser
+| Commit | Description |
+| -- | -- |
+| [7e71370fe6](https://github.com/angular/angular/commit/7e71370fe6a9e802f68f7d3dbbfd0194ecde2d4f) | perf: avoid intermediate arrays in server transition ([#43145](https://github.com/angular/angular/pull/43145)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [286b2807de](https://github.com/angular/angular/commit/286b2807de61dcd6e24ced5c142fbc6eda9dfbec) | fix: eagerly update internal state on browser-triggered navigations ([#43102](https://github.com/angular/angular/pull/43102)) |
+## Special Thanks:
+Alan Agius, Andrew Scott, Aristeidis Bampakos, Charles Lyding, Dylan Hunn, Edoardo Dusi, Erik Slack, George Kalpakas, Joe Martin (Crowdstaffing), Joey Perrott, Kirk Larkin, Kristiyan Kostadinov, Paul Gschwendtner, Pete Bacon Darwin, TIffany Davis, Theoklitos Bampouris, ali, dario-piotrowicz, ivanwonder and pichuser
+
+
+
+# 12.2.2 (2021-08-18)
+### animations
+| Commit | Description |
+| -- | -- |
+| [bb6555979d](https://github.com/angular/angular/commit/bb6555979dd02e706f7e98022b9c37a4f54db1ba) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [738b23347e](https://github.com/angular/angular/commit/738b23347e5eeadfa0321d1429537837dba5e4c1) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
+### platform-browser
+| Commit | Description |
+| -- | -- |
+| [535837e617](https://github.com/angular/angular/commit/535837e617a0434f8e7bd9071cc4d8c27fd9f373) | perf: avoid intermediate arrays in server transition ([#43145](https://github.com/angular/angular/pull/43145)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [6449590ec8](https://github.com/angular/angular/commit/6449590ec81eff0873af911fb65679b5a77db27b) | fix: eagerly update internal state on browser-triggered navigations ([#43102](https://github.com/angular/angular/pull/43102)) |
+## Special Thanks:
+Andrew Scott, Aristeidis Bampakos, Charles Lyding, Edoardo Dusi, George Kalpakas, Joe Martin (Crowdstaffing), Joey Perrott, Kirk Larkin, Kristiyan Kostadinov, Pete Bacon Darwin, TIffany Davis, Theoklitos Bampouris, ali, dario-piotrowicz and pichuser
+
+
+
+# 13.0.0-next.1 (2021-08-11)
+### forms
+| Commit | Description |
+| -- | -- |
+| [e49fc96ed3](https://github.com/angular/angular/commit/e49fc96ed33c26434a14b80487dd912d8c76cace) | feat(forms): Make Form Statuses use stricter types. ([#42952](https://github.com/angular/angular/pull/42952)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [bbad42310b](https://github.com/angular/angular/commit/bbad42310b6ba4df803917fa9b32e1e702eca531) | fix(router): ensure check for match options is compatible with property renaming ([#43086](https://github.com/angular/angular/pull/43086)) |
+| [784671597e](https://github.com/angular/angular/commit/784671597e0b28d9696bdc325b426a6c7be0cd8e) | fix(router): Allow question marks in query param values ([#31187](https://github.com/angular/angular/pull/31187)) |
+## Breaking Changes
+### forms
+A new type called `FormControlStatus` has been introduced, which is a union of all possible status strings for form controls. `AbstractControl.status` has been narrowed from `string` to `FormControlStatus`, and `statusChanges` has been narrowed from `Observable` to `Observable`. Most applications should consume the new types seamlessly. Any breakage caused by this change is likely due to one of the following two problems: (1) the app is comparing `AbstractControl.status` against a string which is not a valid status; or, (2) the app is using `statusChanges` events as if they were something other than strings.
+### router
+The default url serializer would previously drop
+everything after and including a question mark in query parameters. That
+is, for a navigation to `/path?q=hello?&other=123`, the query
+params would be parsed to just `{q: 'hello'}`. This is
+incorrect because the URI spec allows for question mark characers in
+query data. This change will now correctly parse the params for the
+above example to be `{v: 'hello?', other: '123'}`.
+## Special Thanks:
+Amadou Sall, Andrew Kushnir, Andrew Scott, Daniel Trevino, Dylan Hunn, Erik Slack, Fabien BERNARD, George Kalpakas, Jeroen van Warmerdam, Joey Perrott, Jon Rimmer, Tim Gates and Vugar_Abdullayev
+
+
+
+# 12.2.1 (2021-08-11)
+### router
+| Commit | Description |
+| -- | -- |
+| [dd3abdb9d9](https://github.com/angular/angular/commit/dd3abdb9d9b2c4363fb1f468a05bf449b55f55a5) | fix(router): ensure check for match options is compatible with property renaming ([#43086](https://github.com/angular/angular/pull/43086)) |
+## Special Thanks:
+Amadou Sall, Andrew Kushnir, Andrew Scott, Daniel Trevino, Erik Slack, Fabien BERNARD, George Kalpakas, Jeroen van Warmerdam, Joey Perrott, Tim Gates and Vugar_Abdullayev
+
+
+
+# 13.0.0-next.0 (2021-08-04)
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [ed9cfb674f](https://github.com/angular/angular/commit/ed9cfb674f8e52b416ccdaf9aa9c46955b8448f5) | fix(compiler-cli): use correct module resolution context for absolute imports in .d.ts files ([#42879](https://github.com/angular/angular/pull/42879)) |
+| [5fb23eccea](https://github.com/angular/angular/commit/5fb23ecceaccf0629308dd50210b65f67d51f024) | perf(compiler-cli): skip analysis in incremental builds for files without Angular behavior ([#42562](https://github.com/angular/angular/pull/42562)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [8628826535](https://github.com/angular/angular/commit/8628826535233ba5bc6b973cef860355b4c41931) | fix(core): incorrect error reported when trying to re-create view which had an error during creation ([#43005](https://github.com/angular/angular/pull/43005)) |
+| [eefe1682e8](https://github.com/angular/angular/commit/eefe1682e8099b73b6e50bb227b5a7f63105c63d) | fix(core): correctly handle `null` or `undefined` in `ErrorHandler#handleError()` ([#42881](https://github.com/angular/angular/pull/42881)) |
+### forms
+| Commit | Description |
+| -- | -- |
+| [1d9d02696e](https://github.com/angular/angular/commit/1d9d02696eadbee2c2f719e432efca22f1e494e9) | feat(forms): add hasValidators, addValidators, and removeValidators methods (for both sync and async) ([#42838](https://github.com/angular/angular/pull/42838)) |
+| [a502279592](https://github.com/angular/angular/commit/a50227959222f39884aac284544d1626aee5ca64) | feat(forms): allow minLength/maxLength validator to be bound to `null` ([#42565](https://github.com/angular/angular/pull/42565)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [f0c5ba08f6](https://github.com/angular/angular/commit/f0c5ba08f63c60f7542dfd3592c4cfd42bd579bc) | fix(language-service): global autocomplete doesn't work when the user tries to modify the symbol ([#42923](https://github.com/angular/angular/pull/42923)) |
+| [7c35ca0e00](https://github.com/angular/angular/commit/7c35ca0e0030f2ded12ddca9092e31f510cebeb1) | feat(language-service): support autocomplete string literal union types in templates ([#42729](https://github.com/angular/angular/pull/42729)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [0d81b007e4](https://github.com/angular/angular/commit/0d81b007e48a0ac801d2614601fb8180a3517865) | fix(router): add missing outlet events to RouterOutletContract ([#42431](https://github.com/angular/angular/pull/42431)) |
+| [dbae00195e](https://github.com/angular/angular/commit/dbae00195e114ac8b967201283962a7e2c0581b4) | feat(router): ability to provide custom route reuse strategy via DI for `RouterTestingModule` ([#42434](https://github.com/angular/angular/pull/42434)) |
+## Special Thanks:
+Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Daniel Trevino, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Joe Martin, Joey Perrott, JoostK, Kristiyan Kostadinov, Nichola Alkhouri, Paul Gschwendtner, Pete Bacon Darwin, Steven Masala, Teri Glover, Vladyslav, Yuvaraj, atscott, codebriefcase, dario-piotrowicz, iRealNirmal and ivanwonder
+
+
+
+# 12.2.0 (2021-08-04)
+### core
+| Commit | Description |
+| -- | -- |
+| [bd7f0d8b70](https://github.com/angular/angular/commit/bd7f0d8b70150a7e4e7550f4380a2e731cf2b942) | fix(core): incorrect error reported when trying to re-create view which had an error during creation ([#43005](https://github.com/angular/angular/pull/43005)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [aace1e71d8](https://github.com/angular/angular/commit/aace1e71d8fb5e1e52fcd86e2a26892d1016c43e) | fix(language-service): global autocomplete doesn't work when the user tries to modify the symbol ([#42923](https://github.com/angular/angular/pull/42923)) |
+## Special Thanks:
+Alex Rickabaugh, Joe Martin, Joey Perrott, Kristiyan Kostadinov, Nichola Alkhouri, Paul Gschwendtner, Pete Bacon Darwin, atscott, dario-piotrowicz and ivanwonder
+
+
+
+# 12.1.5 (2021-08-04)
+This release contains various API docs improvements.
+
+
+
+# 12.2.0-rc.0 (2021-07-28)
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [ed9cfb674f](https://github.com/angular/angular/commit/ed9cfb674f8e52b416ccdaf9aa9c46955b8448f5) | fix(compiler-cli): use correct module resolution context for absolute imports in .d.ts files ([#42879](https://github.com/angular/angular/pull/42879)) |
+| [5fb23eccea](https://github.com/angular/angular/commit/5fb23ecceaccf0629308dd50210b65f67d51f024) | perf(compiler-cli): skip analysis in incremental builds for files without Angular behavior ([#42562](https://github.com/angular/angular/pull/42562)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [eefe1682e8](https://github.com/angular/angular/commit/eefe1682e8099b73b6e50bb227b5a7f63105c63d) | fix(core): correctly handle `null` or `undefined` in `ErrorHandler#handleError()` ([#42881](https://github.com/angular/angular/pull/42881)) |
+### forms
+| Commit | Description |
+| -- | -- |
+| [1d9d02696e](https://github.com/angular/angular/commit/1d9d02696eadbee2c2f719e432efca22f1e494e9) | feat(forms): add hasValidators, addValidators, and removeValidators methods (for both sync and async) ([#42838](https://github.com/angular/angular/pull/42838)) |
+| [a502279592](https://github.com/angular/angular/commit/a50227959222f39884aac284544d1626aee5ca64) | feat(forms): allow minLength/maxLength validator to be bound to `null` ([#42565](https://github.com/angular/angular/pull/42565)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [7c35ca0e00](https://github.com/angular/angular/commit/7c35ca0e0030f2ded12ddca9092e31f510cebeb1) | feat(language-service): support autocomplete string literal union types in templates ([#42729](https://github.com/angular/angular/pull/42729)) |
+### router
+| Commit | Description |
+| -- | -- |
+| [0d81b007e4](https://github.com/angular/angular/commit/0d81b007e48a0ac801d2614601fb8180a3517865) | fix(router): add missing outlet events to RouterOutletContract ([#42431](https://github.com/angular/angular/pull/42431)) |
+| [dbae00195e](https://github.com/angular/angular/commit/dbae00195e114ac8b967201283962a7e2c0581b4) | feat(router): ability to provide custom route reuse strategy via DI for `RouterTestingModule` ([#42434](https://github.com/angular/angular/pull/42434)) |
+## Special Thanks:
+Andrew Scott, Daniel Trevino, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Joey Perrott, JoostK, Paul Gschwendtner, Pete Bacon Darwin, Steven Masala, Teri Glover, Vladyslav, Yuvaraj, codebriefcase, iRealNirmal and ivanwonder
+
+
+
+# 12.1.4 (2021-07-28)
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [77ae4459d3](https://github.com/angular/angular/commit/77ae4459d34515493ddf62c7ecdf237260176809) | fix(compiler-cli): use correct module resolution context for absolute imports in .d.ts files ([#42879](https://github.com/angular/angular/pull/42879)) |
+| [f589b01672](https://github.com/angular/angular/commit/f589b01672d13c1a174b880437d00a910899f29d) | perf(compiler-cli): skip analysis in incremental builds for files without Angular behavior ([#42562](https://github.com/angular/angular/pull/42562)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [a779a1029b](https://github.com/angular/angular/commit/a779a1029b90039ea39d579ecbc98812c301080a) | fix(core): correctly handle `null` or `undefined` in `ErrorHandler#handleError()` ([#42881](https://github.com/angular/angular/pull/42881)) |
+## Special Thanks:
+Andrew Scott, Daniel Trevino, Dylan Hunn, George Kalpakas, Joey Perrott, JoostK, Paul Gschwendtner, Pete Bacon Darwin, Teri Glover, Vladyslav, Yuvaraj and codebriefcase
+
+
+# 12.2.0-next.3 (2021-07-21)
+### animations
+| Commit | Description |
+| -- | -- |
+| [f12c53342c](https://github.com/angular/angular/commit/f12c53342c433eb8ef5650c78f0115f82f5b1567) | fix(animations): normalize final styles in buildStyles ([#42763](https://github.com/angular/angular/pull/42763)) |
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [70c3461be3](https://github.com/angular/angular/commit/70c3461be38765efedac1e4c5dd1156023a29690) | fix(compiler-cli): use correct module import for types behind a `forwardRef` ([#42887](https://github.com/angular/angular/pull/42887)) |
+| [07d7e6034f](https://github.com/angular/angular/commit/07d7e6034f2a9adae643b3a8e64e2cc794596c8c) | perf(compiler-cli): optimize cycle detection using a persistent cache ([#41271](https://github.com/angular/angular/pull/41271)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [307dac67bc](https://github.com/angular/angular/commit/307dac67bc933ab3b017333b3085af8fba8193dc) | fix(core): use correct injector when resolving DI tokens from within a directive provider factory ([#42886](https://github.com/angular/angular/pull/42886)) |
+## Special Thanks:
+Alan Agius, Alex Rickabaugh, David Shevitz, George Kalpakas, Joey Perrott, JoostK, Krzysztof Kotowicz, Minko Gechev, Paul Gschwendtner and dario-piotrowicz
+
+
+# 12.1.3 (2021-07-21)
+### animations
+| Commit | Description |
+| -- | -- |
+| [3cddc3d6bc](https://github.com/angular/angular/commit/3cddc3d6bc1045b76980ba3e866350d58deb0718) | fix(animations): normalize final styles in buildStyles ([#42763](https://github.com/angular/angular/pull/42763)) |
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [d207ea06d1](https://github.com/angular/angular/commit/d207ea06d1bb554e822bab2eadcf12ef50117bd4) | fix(compiler-cli): use correct module import for types behind a `forwardRef` ([#42887](https://github.com/angular/angular/pull/42887)) |
+| [e6d520f3d9](https://github.com/angular/angular/commit/e6d520f3d9104c63129b94fbf5fe54b392715fc5) | perf(compiler-cli): optimize cycle detection using a persistent cache ([#41271](https://github.com/angular/angular/pull/41271)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [a6db152c78](https://github.com/angular/angular/commit/a6db152c78bc82ef39e529ab5ea55f810b17fa2e) | fix(core): use correct injector when resolving DI tokens from within a directive provider factory ([#42886](https://github.com/angular/angular/pull/42886)) |
+## Special Thanks:
+Alan Agius, David Shevitz, George Kalpakas, Joey Perrott, JoostK, Krzysztof Kotowicz, Minko Gechev, Paul Gschwendtner and dario-piotrowicz
+
+
+
+# 12.2.0-next.2 (2021-07-14)
+### bazel
+| Commit | Description |
+| -- | -- |
+| [7e04116d15](https://github.com/angular/angular/commit/7e04116d1572b5b2b7862ba037f90ab6142a927f) | fix(bazel): enable dts bundling for Ivy packages ([#42728](https://github.com/angular/angular/pull/42728)) |
+### common
+| Commit | Description |
+| -- | -- |
+| [e42aa6c13b](https://github.com/angular/angular/commit/e42aa6c13b9f1f8f5b2e8c27e97380bf574db873) | fix(common): re-sort output of `KeyValuePipe` when `compareFn` changes ([#42821](https://github.com/angular/angular/pull/42821)) |
+### compiler
+| Commit | Description |
+| -- | -- |
+| [b33665ab2c](https://github.com/angular/angular/commit/b33665ab2c7c8c5536b5dc4f488a457100524dc3) | fix(compiler): add mappings for all HTML entities ([#42818](https://github.com/angular/angular/pull/42818)) |
+| [404c8d0d88](https://github.com/angular/angular/commit/404c8d0d88b88ae3ab5a80609d508fb2ecdf0d27) | fix(compiler): incorrect context object being referenced from listener instructions inside embedded views ([#42755](https://github.com/angular/angular/pull/42755)) |
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [81dce5c664](https://github.com/angular/angular/commit/81dce5c6649ddc56903a37ef6a26dcd3ee37df96) | fix(compiler-cli): check split two way binding ([#42601](https://github.com/angular/angular/pull/42601)) |
+| [4c482bf3f1](https://github.com/angular/angular/commit/4c482bf3f1768a18b35e0648c91029504a8d8649) | fix(compiler-cli): properly emit literal types when recreating type parameters in a different file ([#42761](https://github.com/angular/angular/pull/42761)) |
+| [30c82cd177](https://github.com/angular/angular/commit/30c82cd17757f41d56afe71f69a90ac812a3201f) | fix(compiler-cli): inline type checking instructions no longer prevent incremental reuse ([#42759](https://github.com/angular/angular/pull/42759)) |
+| [4c78984ad2](https://github.com/angular/angular/commit/4c78984ad26825851d78d6f0339d8e4cb7bf1e54) | fix(compiler-cli): support reflecting namespace declarations ([#42728](https://github.com/angular/angular/pull/42728)) |
+| [74350a5cf1](https://github.com/angular/angular/commit/74350a5cf1035f0d33640dce845a1f78aa33f009) | fix(compiler-cli): return directives for an element on a microsyntax template ([#42640](https://github.com/angular/angular/pull/42640)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [cd2d82a91a](https://github.com/angular/angular/commit/cd2d82a91a5f547ae4c3d369f7f777245324c9e5) | fix(core): associate the NgModule scope for an overridden component ([#42817](https://github.com/angular/angular/pull/42817)) |
+| [51156f3f07](https://github.com/angular/angular/commit/51156f3f0798fe5bc6f69cf38ba2f2947aab89aa) | fix(core): allow proper type inference when `ngFor` is used with a `trackBy` function ([#42692](https://github.com/angular/angular/pull/42692)) |
+| [0f23f7343e](https://github.com/angular/angular/commit/0f23f7343ec9bdcd2d40f6f474d2a4f5e38e2627) | fix(core): error in TestBed if module is reset mid-compilation in ViewEngine ([#42669](https://github.com/angular/angular/pull/42669)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [ffeea63f43](https://github.com/angular/angular/commit/ffeea63f43e6a7fd46be4a8cd5a5d254c98dea08) | fix(language-service): Do not override TS LS methods not supported by VE NgLS ([#42727](https://github.com/angular/angular/pull/42727)) |
+### service-worker
+| Commit | Description |
+| -- | -- |
+| [cb2ca9a66e](https://github.com/angular/angular/commit/cb2ca9a66ef54d9f1b3df5ac14962dc3810b4cc1) | fix(service-worker): correctly handle unrecoverable state when a client no longer exists ([#42736](https://github.com/angular/angular/pull/42736)) |
+| [f592a12005](https://github.com/angular/angular/commit/f592a120057c3787ad6b7385b6f8e10928627e9e) | fix(service-worker): avoid storing redundant metadata for hashed assets ([#42606](https://github.com/angular/angular/pull/42606)) |
+## Special Thanks:
+Alan Agius, Andrew Kushnir, Andrew Scott, Arthur Ming, Bastian, Borislav Ivanov, Daniel Trevino, David Gilson, David Shevitz, Gabriele Franchitto, George Kalpakas, Joey Perrott, JoostK, Kristiyan Kostadinov, Mark Goho, Meir Blumenfeld, Paul Gschwendtner, Pete Bacon Darwin, Ryan Andersen, Theoklitos Bampouris, behrooz bozorg chami, dario-piotrowicz, ivanwonder and mgechev
+
+
+
+# 12.1.2 (2021-07-14)
+### bazel
+| Commit | Description |
+| -- | -- |
+| [4a8ab4f149](https://github.com/angular/angular/commit/4a8ab4f1499a560bb4373b088785e43f26384e1c) | fix(bazel): enable dts bundling for Ivy packages ([#42728](https://github.com/angular/angular/pull/42728)) |
+### common
+| Commit | Description |
+| -- | -- |
+| [d654c7933a](https://github.com/angular/angular/commit/d654c7933a732c23dc1e68b17766457d2d11a4d8) | fix(common): re-sort output of `KeyValuePipe` when `compareFn` changes ([#42821](https://github.com/angular/angular/pull/42821)) |
+### compiler
+| Commit | Description |
+| -- | -- |
+| [2566cbb48c](https://github.com/angular/angular/commit/2566cbb48cddd23c4b29d01ad557bc71ac716700) | fix(compiler): add mappings for all HTML entities ([#42818](https://github.com/angular/angular/pull/42818)) |
+| [65330f03a9](https://github.com/angular/angular/commit/65330f03a92f2743719d0e0d4cedcaadbb8c5b21) | fix(compiler): incorrect context object being referenced from listener instructions inside embedded views ([#42755](https://github.com/angular/angular/pull/42755)) |
+### compiler-cli
+| Commit | Description |
+| -- | -- |
+| [17d3de25da](https://github.com/angular/angular/commit/17d3de25daf339612c267001f0c2237533d7c789) | fix(compiler-cli): properly emit literal types when recreating type parameters in a different file ([#42761](https://github.com/angular/angular/pull/42761)) |
+| [0a17e98ae2](https://github.com/angular/angular/commit/0a17e98ae2813338f03e3e01bb7cfa6024f4632b) | fix(compiler-cli): inline type checking instructions no longer prevent incremental reuse ([#42759](https://github.com/angular/angular/pull/42759)) |
+| [45116097c1](https://github.com/angular/angular/commit/45116097c1dafd902014e0f680e0d50023467883) | fix(compiler-cli): support reflecting namespace declarations ([#42728](https://github.com/angular/angular/pull/42728)) |
+| [df5cc1fbbf](https://github.com/angular/angular/commit/df5cc1fbbf1b1f02f1f45603552a2530bb59688d) | fix(compiler-cli): return directives for an element on a microsyntax template ([#42640](https://github.com/angular/angular/pull/42640)) |
+### core
+| Commit | Description |
+| -- | -- |
+| [63013546e1](https://github.com/angular/angular/commit/63013546e130d823db26ad96e1d4cb346e633a03) | fix(core): associate the NgModule scope for an overridden component ([#42817](https://github.com/angular/angular/pull/42817)) |
+| [9ebd41e39c](https://github.com/angular/angular/commit/9ebd41e39c597ef6df2de2fb63d6458337e2757d) | fix(core): allow proper type inference when `ngFor` is used with a `trackBy` function ([#42692](https://github.com/angular/angular/pull/42692)) |
+| [41c6877c01](https://github.com/angular/angular/commit/41c6877c013ba84ba5e46309b2310c097ad9e354) | fix(core): error in TestBed if module is reset mid-compilation in ViewEngine ([#42669](https://github.com/angular/angular/pull/42669)) |
+### language-service
+| Commit | Description |
+| -- | -- |
+| [97c18f4527](https://github.com/angular/angular/commit/97c18f4527187206db8b0f5730b80d2220027f9f) | fix(language-service): Do not override TS LS methods not supported by VE NgLS ([#42727](https://github.com/angular/angular/pull/42727)) |
+### service-worker
+| Commit | Description |
+| -- | -- |
+| [d87917542a](https://github.com/angular/angular/commit/d87917542a00ed6f58c7b95e3eba6aeddc5eee01) | fix(service-worker): correctly handle unrecoverable state when a client no longer exists ([#42736](https://github.com/angular/angular/pull/42736)) |
+| [f2523a8fef](https://github.com/angular/angular/commit/f2523a8fef549fab6ec480ecfc966c9d938a5423) | fix(service-worker): avoid storing redundant metadata for hashed assets ([#42606](https://github.com/angular/angular/pull/42606)) |
+## Special Thanks:
+Alan Agius, Andrew Kushnir, Andrew Scott, Arthur Ming, Bastian, Borislav Ivanov, David Gilson, David Shevitz, Gabriele Franchitto, George Kalpakas, Joey Perrott, JoostK, Kristiyan Kostadinov, Mark Goho, Meir Blumenfeld, Paul Gschwendtner, Pete Bacon Darwin, Ryan Andersen, Theoklitos Bampouris, behrooz bozorg chami, dario-piotrowicz, ivanwonder and mgechev
+
+
# 12.2.0-next.1 (2021-06-30)
### compiler
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9a8ba801c235..bf9c0ad45de4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -248,8 +248,7 @@ Any line of the commit message cannot be longer than 100 characters.
│ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
│ elements|forms|http|language-service|localize|platform-browser|
│ platform-browser-dynamic|platform-server|router|service-worker|
- │ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
- │ ngcc|ve
+ │ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
│
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
```
@@ -302,7 +301,7 @@ There are currently a few exceptions to the "use package name" rule:
* `changelog`: used for updating the release notes in CHANGELOG.md
-* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
+* `dev-infra`: used for dev-infra related changes within the directories /scripts and /tools
* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo
diff --git a/WORKSPACE b/WORKSPACE
index 6af362e52683..84c53edc5b0f 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -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 = "0fa2d443571c9e02fcb7363a74ae591bdcce2dd76af8677a95965edf329d778a",
- urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.6.0/rules_nodejs-3.6.0.tar.gz"],
+ sha256 = "8a7c981217239085f78acc9898a1f7ba99af887c1996ceb3b4504655383a2c3c",
+ urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0/rules_nodejs-4.0.0.tar.gz"],
)
# Check the rules_nodejs version and download npm dependencies
@@ -34,11 +34,6 @@ yarn_install(
yarn_lock = "//:yarn.lock",
)
-# Load angular dependencies
-load("//packages/bazel:package.bzl", "rules_angular_dev_dependencies")
-
-rules_angular_dev_dependencies()
-
# Load protractor dependencies
load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
@@ -49,16 +44,21 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
web_test_repositories()
-load("//dev-infra/bazel/browsers:browser_repositories.bzl", "browser_repositories")
+load("@npm//@angular/dev-infra-private/bazel/browsers:browser_repositories.bzl", "browser_repositories")
browser_repositories()
-# Setup the rules_sass toolchain
-load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
-
-sass_repositories()
-
-# Setup the skydoc toolchain
-load("@io_bazel_skydoc//skylark:skylark.bzl", "skydoc_repositories")
-
-skydoc_repositories()
+load("//packages/common/locales/generate-locales-tool:cldr-data.bzl", "cldr_data_repository")
+
+cldr_data_repository(
+ name = "cldr_data",
+ # Since we use the Github archives for CLDR 37, we need to specify a path
+ # to the available locales. This wouldn't be needed with CLDR 39 as that
+ # comes with an official JSON archive not containing a version suffix.
+ available_locales_path = "cldr-core-37.0.0/availableLocales.json",
+ urls = {
+ "https://github.com/unicode-cldr/cldr-core/archive/37.0.0.zip": "32b5c49c3874aa342b90412c207b42e7aefb2435295891fb714c34ce58b3c706",
+ "https://github.com/unicode-cldr/cldr-dates-full/archive/37.0.0.zip": "e1c410dd8ad7d75df4a5393efaf5d28f0d56c0fa126c5d66e171a3f21a988a1e",
+ "https://github.com/unicode-cldr/cldr-numbers-full/archive/37.0.0.zip": "a921b90cf7f436e63fbdd55880f96e39a203acd9e174b0ceafa20a02c242a12e",
+ },
+)
diff --git a/aio/.eslintrc.json b/aio/.eslintrc.json
new file mode 100644
index 000000000000..2f94590cd8a6
--- /dev/null
+++ b/aio/.eslintrc.json
@@ -0,0 +1,91 @@
+{
+ "root": true,
+ "overrides": [
+ {
+ "files": [
+ "*.ts"
+ ],
+ "parserOptions": {
+ "project": [
+ "tsconfig.json",
+ "tests/e2e/tsconfig.json"
+ ],
+ "createDefaultProgram": true
+ },
+ "extends": [
+ "plugin:@angular-eslint/ng-cli-compat",
+ "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@typescript-eslint/ban-types": "error",
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "aio",
+ "style": "kebab-case"
+ }
+ ],
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "aio",
+ "style": "camelCase"
+ }
+ ],
+ "dot-notation": "error",
+ "indent": "off",
+ "@typescript-eslint/member-delimiter-style": ["error", {
+ "singleline": {
+ "delimiter": "comma",
+ "requireLast": false
+ }
+ }],
+ "@typescript-eslint/member-ordering": "off",
+ "@typescript-eslint/naming-convention": "off",
+ "no-console": ["error", {"allow": ["log", "warn", "error"]}],
+ "no-empty-function": "off",
+ "no-restricted-syntax": [
+ "error",
+ {
+ "selector": "CallExpression[callee.name=/^(fdescribe|fit)$/]",
+ "message": "Don't keep jasmine focus methods."
+ }
+ ],
+ "no-shadow": "off",
+ "@typescript-eslint/no-shadow": ["error"],
+ "no-tabs": "error",
+ "no-underscore-dangle": "off",
+ "no-unused-expressions": "error",
+ "no-use-before-define": "off",
+ "prefer-arrow/prefer-arrow-functions": "off",
+ "quotes": "off",
+ "@typescript-eslint/quotes": ["error", "single", {"avoidEscape": true}],
+ "semi": "error"
+ }
+ },
+ {
+ "files": [
+ "*.html"
+ ],
+ "extends": [
+ "plugin:@angular-eslint/template/recommended"
+ ],
+ "rules": {
+ "@angular-eslint/template/accessibility-alt-text": "error",
+ "@angular-eslint/template/accessibility-elements-content": "error",
+ "@angular-eslint/template/accessibility-label-has-associated-control": "error",
+ "@angular-eslint/template/accessibility-table-scope": "error",
+ "@angular-eslint/template/accessibility-valid-aria": "error",
+ "@angular-eslint/template/click-events-have-key-events": "error",
+ "@angular-eslint/template/eqeqeq": "off",
+ "@angular-eslint/template/mouse-events-have-key-events": "error",
+ "@angular-eslint/template/no-autofocus": "error",
+ "@angular-eslint/template/no-distracting-elements": "error",
+ "@angular-eslint/template/no-positive-tabindex": "error"
+ }
+ }
+ ]
+}
diff --git a/aio/angular.json b/aio/angular.json
index 513d7eef7f42..c91e73d6255e 100644
--- a/aio/angular.json
+++ b/aio/angular.json
@@ -138,6 +138,11 @@
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "headers": {
+ "Content-Security-Policy": "require-trusted-types-for 'script'; trusted-types angular angular#bundler angular#unsafe-bypass aio#analytics google#safe"
+ }
+ },
"configurations": {
"next": {
"browserTarget": "site:build:next"
@@ -196,16 +201,12 @@
}
},
"lint": {
- "builder": "@angular-devkit/build-angular:tslint",
+ "builder": "@angular-eslint/builder:lint",
"options": {
- "tsConfig": [
- "tsconfig.app.json",
- "tsconfig.spec.json",
- "tsconfig.worker.json",
- "tests/e2e/tsconfig.json"
- ],
- "exclude": [
- "**/node_modules/**"
+ "lintFilePatterns": [
+ "src/!(generated)/**/*.ts",
+ "src/!(generated)/**/*.html",
+ "tests/**/*.ts"
]
}
},
diff --git a/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts b/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts
index ac89f882d0a6..1902bcde0a45 100644
--- a/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts
@@ -2,7 +2,7 @@
* This example project is special in that it is not a cli app. To run tests appropriate for this
* project, the test command is overwritten in `aio/content/examples/observables/example-config.json`.
*
- * This is an empty placeholder file to ensure that `aio/tools/examples/run-example-e2e.js` runs
+ * This is an empty placeholder file to ensure that `aio/tools/examples/run-example-e2e.mjs` runs
* tests for this project.
*
* TODO: Fix our infrastructure/tooling, so that this hack is not necessary.
diff --git a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
index 3f0d07787abb..67e3fd2d2a76 100644
--- a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
@@ -13,11 +13,11 @@ import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'app-countdown-parent-lv',
template: `
-
- `,
+ `
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md
index b8a0ff887fec..02b880dd99af 100644
--- a/aio/content/file-not-found.md
+++ b/aio/content/file-not-found.md
@@ -1,6 +1,6 @@
-
+
Page Not Found
We're sorry. The page you are looking for cannot be found.
diff --git a/aio/content/guide/angular-compiler-options.md b/aio/content/guide/angular-compiler-options.md
index 0dad034e5915..d79b2e841fd9 100644
--- a/aio/content/guide/angular-compiler-options.md
+++ b/aio/content/guide/angular-compiler-options.md
@@ -21,7 +21,7 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
{@a tsconfig-extends}
## Configuration inheritance with extends
-Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
+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`.
A TypeScript configuration can inherit settings from another file using the `extends` property.
diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index 408575107633..487be796dcce 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -558,7 +558,6 @@ In [Angular Ivy](guide/ivy), the template type checker has been completely rewri
As a result, templates that previously compiled under View Engine can fail type checking under Ivy. This can happen because Ivy's stricter checking catches genuine errors, or because application code is not typed correctly, or because the application uses libraries in which typings are inaccurate or not specific enough.
This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option.
-We do expect to make strict type checking the default in the future.
For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-typecheck).
diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md
index b56c104ce284..42e7c416e82a 100644
--- a/aio/content/guide/attribute-binding.md
+++ b/aio/content/guide/attribute-binding.md
@@ -13,7 +13,7 @@ See the for a working example containing the code
It is recommended that you set an element property with a [property binding](guide/property-binding) whenever possible.
However, sometimes you don't have an element property to bind.
-In those situations, you can use attribute binding.
+In those situations, use attribute binding.
For example, [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and
[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) are purely attributes.
@@ -58,7 +58,7 @@ To use attribute binding with the `
` attribute `colspan`:
1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`.
1. Set `[attr.colspan]` equal to an expression.
-In the following example, we bind the `colspan` attribute to the expression `1 + 1`.
+In the following example, you bind the `colspan` attribute to the expression `1 + 1`.
@@ -78,7 +78,7 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
{@a class-binding}
## Binding to the `class` attribute
-You can use class binding to add and remove CSS class names from an element's `class` attribute.
+Use class binding to add and remove CSS class names from an element's `class` attribute.
### Binding to a single CSS `class`
@@ -161,7 +161,7 @@ The following table summarizes class binding syntax.
{@a style-binding}
## Binding to the style attribute
-You can use style binding to set styles dynamically.
+Use style binding to set styles dynamically.
### Binding to a single style
@@ -263,7 +263,7 @@ The following table summarizes style binding syntax.
The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings.
-However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
+However, using the preceding style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
@@ -294,7 +294,7 @@ When there are multiple bindings to the same class name or style property, Angul
The more specific a class or style binding is, the higher its precedence.
-A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding.
+A binding to a specific class (for example, `[class.foo]`) takes precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) takes precedence over a generic `[style]` binding.
@@ -311,7 +311,7 @@ Directives often augment component behavior, so host bindings from components ha
In addition, bindings take precedence over static attributes.
-In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic.
+In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding takes precedence because it is dynamic.
@@ -319,14 +319,14 @@ In the following case, `class` and `[class]` have similar specificity, but the `
### Delegating to styles with lower precedence
It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values.
-Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style.
+Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` causes Angular to fall back to the next-highest precedence binding to that style.
For example, consider the following template:
Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding.
-In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding.
+In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property falls back to the value of the `comp-with-host-binding` host binding.
However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.
diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md
index 8d079cab3138..f5be188b2dbe 100644
--- a/aio/content/guide/component-interaction.md
+++ b/aio/content/guide/component-interaction.md
@@ -258,7 +258,7 @@ The `CountdownLocalVarParentComponent` that hosts the timer component is as foll
The parent component cannot data bind to the child's
`start` and `stop` methods nor to its `seconds` property.
-You can place a local variable, `#timer`, on the tag `` representing the child component.
+You can place a local variable, `#timer`, on the tag `` representing the child component.
That gives you a reference to the child component and the ability to access
*any of its properties or methods* from within the parent template.
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index 8c2c6aa67490..9a1a200a7ad9 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -249,7 +249,7 @@ See the [Styles configuration guide](guide/workspace-config#styles-and-scripts-c
### Non-CSS style files
If you're building with the CLI,
-you can write style files in [sass](https://sass-lang.com/), [less](http://lesscss.org/), or [stylus](https://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
+you can write style files in [sass](https://sass-lang.com/), or [less](http://lesscss.org/), and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`) as in the following example:
@Component({
diff --git a/aio/content/guide/content-projection.md b/aio/content/guide/content-projection.md
index a98cdc312a5a..8c2e243bc40c 100644
--- a/aio/content/guide/content-projection.md
+++ b/aio/content/guide/content-projection.md
@@ -23,43 +23,43 @@ The most basic form of content projection is *single-slot content projection*. S
To create a component that uses single-slot content projection:
-1. [Create](guide/component-overview) a component.
+1. [Create a component](guide/component-overview#creating-a-component).
-1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
+1. In the template for your component, add an `` element where you want the projected content to appear.
-For example, the following component uses an `ng-content` element to display a message.
+For example, the following component uses an `` element to display a message.
-With the `ng-content` element in place, users of this component can now project their own message into the component. For example:
+With the `` element in place, users of this component can now project their own message into the component. For example:
-The `ng-content` element is a placeholder that does not create a real DOM element. Custom attributes applied to `ng-content` are ignored.
+The `` element is a placeholder that does not create a real DOM element. Custom attributes applied to `` are ignored.
{@a multi-slot}
## Multi-slot content projection
-A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `ng-content`.
+A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of ``.
To create a component that uses multi-slot content projection:
-1. [Create](guide/component-overview) a component.
+1. [Create a component](guide/component-overview#creating-a-component).
-1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
+1. In the template for your component, add an `` element where you want the projected content to appear.
-1. Add a `select` attribute to the `ng-content` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
+1. Add a `select` attribute to the `` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
- For example, the following component uses two `ng-content` elements.
+ For example, the following component uses two `` elements.
-Content that uses the `question` attribute is projected into the `ng-content` element with the `select=[question]` attribute.
+Content that uses the `question` attribute is projected into the `` element with the `select=[question]` attribute.
@@ -68,9 +68,9 @@ region="multi-slot">ng-content without a select attribute
-If your component includes an `ng-content` element without a `select` attribute, that instance receives all projected components that do not match any of the other `ng-content` elements.
+If your component includes an `` element without a `select` attribute, that instance receives all projected components that do not match any of the other `` elements.
-In the preceding example, only the second `ng-content` element defines a `select` attribute. As a result, the first `ng-content` element receives any other content projected into the component.
+In the preceding example, only the second `` element defines a `select` attribute. As a result, the first `` element receives any other content projected into the component.
@@ -78,41 +78,41 @@ In the preceding example, only the second `ng-content` element defines a `select
## Conditional content projection
-If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `ng-template` element that contains the content you want to conditionally render.
+If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `` element that contains the content you want to conditionally render.
-Using an `ng-content` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `ng-content` element or if that `ng-content` element is inside of an `ngIf` statement.
+Using an `` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `` element or if that `` element is inside of an `ngIf` statement.
-With an `ng-template` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `ng-template` element until that element is explicitly rendered.
+With an `` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `` element until that element is explicitly rendered.
-The following steps demonstrate a typical implementation of conditional content projection using `ng-template`.
+The following steps demonstrate a typical implementation of conditional content projection using ``.
-1. [Create](guide/component-overview) a component.
+1. [Create a component](guide/component-overview#creating-a-component).
-1. In the component that accepts an `ng-template` element, use an `ng-container` element to render that template, such as:
+1. In the component that accepts an `` element, use an `` element to render that template, such as:
- This example uses the `ngTemplateOutlet` directive to render a given `ng-template` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `ng-container` element because the component does not need to render a real DOM element.
+ This example uses the `ngTemplateOutlet` directive to render a given `` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `` element because the component does not need to render a real DOM element.
-1. Wrap the `ng-container` element in another element, such as a `div` element, and apply your conditional logic.
+1. Wrap the `` element in another element, such as a `div` element, and apply your conditional logic.
-1. In the template where you want to project content, wrap the projected content in an `ng-template` element, such as:
+1. In the template where you want to project content, wrap the projected content in an `` element, such as:
- The `ng-template` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or [`TemplateRef`](/api/core/TemplateRef), by using either the [`@ContentChild`](/api/core/ContentChild) or [`@ContentChildren`](/api/core/ContentChildren) decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `ng-template` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the [`ngTemplateOutlet`](/api/common/NgTemplateOutlet) directive, or with [`ViewContainerRef.createEmbeddedView`](/api/core/ViewContainerRef#createembeddedview).
+ The `` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or `TemplateRef`, by using either the `@ContentChild` or `@ContentChildren` decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the `ngTemplateOutlet` directive, or with the `ViewContainerRef` method `createEmbeddedView()`.
-1. Create a directive with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
+1. [Create an attribute directive](guide/attribute-directives#building-an-attribute-directive) with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
- In the previous step, you added an `ng-template` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
+ In the previous step, you added an `` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
1. In the component you want to project content into, use `@ContentChild` to get the template of the projected content.
@@ -144,14 +144,14 @@ For instance, consider the following HTML snippet:
-This example uses an `ng-container` attribute to simulate projecting a component into a more complex structure.
+This example uses an `` attribute to simulate projecting a component into a more complex structure.
Reminder!
-The `ng-container` element is a logical construct that you can use to group other DOM elements; however, the `ng-container` itself is not rendered in the DOM tree.
+The `` element is a logical construct that you can use to group other DOM elements; however, the `` itself is not rendered in the DOM tree.
-In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `ng-container` element is projected into a component using the `[question]` selector.
+In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `` element is projected into a component using the `[question]` selector.
diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md
index b292d904bfbe..fafe1080a516 100644
--- a/aio/content/guide/event-binding.md
+++ b/aio/content/guide/event-binding.md
@@ -1,6 +1,6 @@
# Event binding
-Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
+Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
@@ -26,7 +26,7 @@ The event binding listens for the button's click events and calls the component'
## Binding to passive events
-Angular also supports passive event listeners. For example, you can use the following steps to make a scroll event passive.
+Angular also supports passive event listeners. For example, use the following steps to make a scroll event passive.
1. Create a file `zone-flags.ts` under `src` directory.
2. Add the following line into this file.
diff --git a/aio/content/guide/file-structure.md b/aio/content/guide/file-structure.md
index 1585b02ac200..3fb4833aca49 100644
--- a/aio/content/guide/file-structure.md
+++ b/aio/content/guide/file-structure.md
@@ -111,20 +111,6 @@ Project-specific [TypeScript](https://www.typescriptlang.org/) configuration fil
| `tsconfig.spec.json` | [TypeScript](https://www.typescriptlang.org/) configuration for the application tests. See [TypeScript Configuration](guide/typescript-configuration). |
| `tslint.json` | Application-specific [TSLint](https://palantir.github.io/tslint/) configuration. |
-### End-to-end test files
-
-An `e2e/` folder at the top level contains source files for a set of end-to-end tests that correspond to the root-level application, along with test-specific configuration files.
-
-For a multi-project workspace, application-specific end-to-end tests are in the project root, under `projects/project-name/e2e/`.
-
-
- e2e/
- src/ (end-to-end tests for my-app)
- app.e2e-spec.ts
- app.po.ts
- protractor.conf.js (test-tool config)
- tsconfig.json (TypeScript config inherits from workspace)
-
{@a multiple-projects}
@@ -160,9 +146,6 @@ my-workspace/
projects/ (generated applications and libraries)
my-first-app/ --(an explicitly generated application)
... --(application-specific config)
- e2e/ ----(corresponding e2e tests)
- src/ ----(e2e tests source)
- ... ----(e2e-specific config)
src/ --(source and support files for application)
my-lib/ --(a generated library)
... --(library-specific config)
@@ -173,7 +156,7 @@ 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](guide/creating-libraries).
-Libraries (unlike applications and their associated e2e projects) have their own `package.json` configuration file.
+Libraries unlike applications have their own `package.json` configuration file.
Under the `projects/` folder, the `my-lib` folder contains your library code.
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
index b767eb7057a3..46721a60020a 100644
--- a/aio/content/guide/glossary.md
+++ b/aio/content/guide/glossary.md
@@ -1092,7 +1092,7 @@ See [custom element](#custom-element).
## workspace
-A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
+A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI](#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root").
In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name.
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
index 3d33a5a35efe..b152df9a5b33 100644
--- a/aio/content/guide/hierarchical-dependency-injection.md
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -380,7 +380,7 @@ The following is an example of how the `` and `` view trees
...content goes here...
- <#VIEW>
+
```
@@ -1021,8 +1021,8 @@ The logical tree representation shows why this is:
@Inject(AnimalService, @Optional)=>"🦔">
- <#VIEW @Provide(AnimalService="🦔")
- @Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🐶">
+ <#VIEW @Provide(AnimalService="🐶")
+ @Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index b70d0542925f..572ce6f545c0 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -3,88 +3,94 @@
{@searchKeywords i18n}
{@a angular-i18n}
-*Internationalization* (i18n) is the process of designing and preparing your app to be usable in different locales around the world.
-*Localization* is the process of building versions of your app for different locales, including extracting text for translation into different languages, and formatting data for particular locales.
+*Internationalization* (i18n) is the process of designing and preparing your application to be usable in different locales around the world.
+*Localization* is the process of building versions of your application for different locales, including extracting text for translation into different languages, and formatting data for particular locales.
-A *locale* identifies a region (such as a country) in which people speak a particular language or language variant. The locale determines the formatting and parsing of dates, times, numbers, and currencies as well as measurement units and the translated names for time zones, languages, and countries.
+A *locale* identifies a region (such as a country) in which people speak a particular language or language variant.
+The locale determines the formatting and parsing of dates, times, numbers, and currencies as well as measurement units and the translated names for time zones, languages, and countries.
-Create an adaptable user interface for all of your target locales that takes into consideration the differences in spacing for different languages. For details, see [How to approach internationalization](https://marketfinder.thinkwithgoogle.com/intl/en_us/guide/how-to-approach-i18n/#overview "How to approach internationalization").
+Create an adaptable user interface for all of your target locales that takes into consideration the differences in spacing for different languages.
+For details, see [How to approach internationalization][ThinkwithgoogleMarketfinderIntlEnUsGuideHowToApproachI18nOverview].
Use Angular to internationalize your app:
-* Use built-in pipes to display dates, numbers, percentages, and currencies in a local format.
-* Mark text in component templates for translation.
-* Mark plural forms of expressions for translation.
-* Mark alternate text for translation.
+* Use built-in pipes to display dates, numbers, percentages, and currencies in a local format.
+* Mark text in component templates for translation.
+* Mark plural forms of expressions for translation.
+* Mark alternate text for translation.
-After preparing your app for an international audience, use the [Angular CLI](cli) to localize your app by performing the following tasks:
+After you prepare your application for an international audience, use the [Angular CLI][AioCliMain] to localize your application.
+Complete the following tasks to localize your application.
-* Use the CLI to extract marked text to a _source language_ file.
-* Make a copy of this file for each language, and send these _translation files_ to a translator or service.
-* Use the CLI to merge the finished translation files when building your app for one or more locales.
+* Use the CLI to extract marked text to a *source language* file.
+* Make a copy of this file for each language, and send these *translation files* to a translator or service.
+* Use the CLI to merge the finished translation files when building your application for one or more locales.
- To explore the sample app with French translations used in this guide, see the .
+To explore the sample application with French translations used in this guide, see .
## Prerequisites
-To prepare your app for translations, you should have a basic understanding of the following:
+To prepare your application for translations, you should have a basic understanding of the following subjects.
-* [Templates](guide/glossary#template "Definition of a template")
-* [Components](guide/glossary#component "Definition of a component")
-* [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI") command-line tool for managing the Angular development cycle
-* [Extensible Markup Language (XML)](https://www.w3.org/XML/ "W3C: Extensible Markup Language (XML)") used for translation files
+* [Templates][AioGuideGlossaryTemplate]
+* [Components][AioGuideGlossaryComponent]
+* [Angular CLI][AioGuideGlossaryCommandLineInterfaceCli] command-line tool for managing the Angular development cycle
+* [Extensible Markup Language (XML)][W3Xml] used for translation files
## Steps to localize your app
-To localize your app, follow these general steps:
+To localize your application, complete the following general actions.
-1. [Add the localize package](#setting-up-cli).
-2. [Refer to locales by ID](#setting-up-locale).
-3. [Format data based on locale](#i18n-pipes).
-4. [Prepare templates for translations](#Template-translations).
-5. [Work with translation files](#ng-xi18n).
-6. [Merge translations into the app](#merge).
-7. [Deploy multiple locales](#deploy-locales).
+1. [Add the localize package][AioGuideI18nSettingUpCli].
+2. [Refer to locales by ID][AioGuideI18nSettingUpLocale].
+3. [Format data based on locale][AioGuideI18nPipes].
+4. [Prepare templates for translations][AioGuideI18nTemplatetranslations].
+5. [Work with translation files][AioGuideI18nNgXi18n].
+6. [Merge translations into the app][AioGuideI18nMerge].
+7. [Deploy multiple locales][AioGuideI18nDeployLocales].
-While following these steps, you can [explore the translated example app](#app-pre-translation).
+While you follow the actions, [explore the translated example app][AioGuideI18nAppPreTranslation].
-The following are optional practices that may be required in special cases:
+In special cases, the following actions are required.
-* [Set the source locale manually](#set-source-manually) if you need to set the [LOCALE_ID](api/core/LOCALE_ID "API reference for LOCALE_ID") token.
-* [Import global variants of the locale data](#import-locale) for extra locale data.
-* [Manage marked text with custom IDs](#custom-id) if you require more control over matching translations.
+* [Set the source locale manually][AioGuideI18nSetSourceManually], if you need to set the [LOCALE_ID][AioApiCoreLocaleId] token.
+* [Import global variants of the locale data][AioGuideI18nImportLocale] for extra locale data.
+* [Manage marked text with custom IDs][AioGuideI18nCustomId], if you require more control over matching translations.
+
+
{@a setting-up-cli}
{@a add-localize}
## Add the localize package
-To take advantage of Angular's localization features, use the Angular CLI to add the `@angular/localize` package to your project:
+To take advantage of the localization features of Angular, use the Angular CLI to add the `@angular/localize` package to your project.
- ng add @angular/localize
+ng add @angular/localize
-This command updates your project's `package.json` and `polyfills.ts` files to import the `@angular/localize` package.
+This command updates the `package.json` and `polyfills.ts` files of your project to import the `@angular/localize` package.
-For more information about `package.json` and polyfill packages, see [Workspace npm dependencies](guide/npm-packages).
+For more information about `package.json` and polyfill packages, see [Workspace npm dependencies][AioGuideNpmPackages].
-If `@angular/localize` is not installed, the Angular CLI may generate an error when you try to build a localized version of your app.
+If `@angular/localize` is not installed, the Angular CLI may generate an error when you try to build a localized version of your application.
-{@a setting-up-locale}
+
+{@a setting-up-locale}
{@a setting-up-the-locale-of-your-app}
## Refer to locales by ID
@@ -94,10 +100,10 @@ Refer to a locale using the Unicode *locale identifier* (ID), which specifies th
Unicode locale identifiers
-* For a list of language codes, see [ISO 639-2](https://www.loc.gov/standards/iso639-2/ "ISO 639-2 Registration Authority").
-* IDs conform to the Unicode Common Locale Data Repository (CLDR).
-For more information about Unicode locale identifiers, see the [CLDR core specification](http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers "CLDR - Unicode Common Locale Data Repository").
-* CLDR and Angular base their identifiers on [BCP47 tags](https://tools.ietf.org/html/bcp47 "BCP47 Tags for Identifying Languages").
+* For a list of language codes, see [ISO 639-2][LocStandardsIso6392].
+* IDs conform to the Unicode Common Locale Data Repository (CLDR).
+ For more information about Unicode locale identifiers, see [CLDR core specification][UnicodeCldrCoreSpecUnicodeLanguageAndLocaleIdentifiers].
+* CLDR and Angular base their identifiers on [BCP47 tags][RfcEditorInfoBcp47].
@@ -108,44 +114,50 @@ Angular uses this ID to find the correct corresponding locale data.
Many countries, such as France and Canada, use the same language (French, identified as `fr`) but differ in grammar, punctuation, and formats for currency, decimal numbers, and dates.
-Use a more specific locale ID, such as French for Canada (`fr-CA`), when localizing your app.
+Use a more specific locale ID, such as French for Canada (`fr-CA`), when localizing your application.
-Angular by default uses `en-US` (English in the United States) as your app's source locale.
+Angular by default uses `en-US` (English in the United States) as the source locale of your application.
+
+The [Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales] includes common locales.
+To change the source locale of your application for the build, set the source locale in the `sourceLocale` field in the [workspace configuration][AioGuideWorkspaceConfig] file (`angular.json`) of your application.
+The build process (described in [Merge translations into the app][AioGuideI18nMerge] in this guide) uses the `angular.json` file of your application to automatically set the [`LOCALE_ID`][AioApiCoreLocaleId] token and load the locale data.
-The [Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales "Common locales in the Angular repository") includes common locales.
-You can change your app's source locale for the build by setting the source locale in the `sourceLocale` field of your app's [workspace configuration](guide/workspace-config "Angular workspace configuration") file (`angular.json`).
-The build process (described in [Merge translations into the app](#merge) in this guide) uses your app's `angular.json` file to automatically set the [`LOCALE_ID`](api/core/LOCALE_ID "API reference for LOCALE_ID") token and load the locale data.
+
{@a i18n-pipes}
## Format data based on locale
-Angular provides the following built-in data transformation [pipes](guide/glossary#pipe "Definition of a pipe") that use the [`LOCALE_ID`](api/core/LOCALE_ID "API reference for LOCALE_ID") token to format data according to the locale's rules:
+Angular provides the following built-in data transformation [pipes][AioGuideGlossaryPipe]. The data transformation pipes use the [`LOCALE_ID`][AioApiCoreLocaleId] token to format data based on rules of each locale.
-* [`DatePipe`](api/common/DatePipe): Formats a date value.
-* [`CurrencyPipe`](api/common/CurrencyPipe): Transforms a number to a currency string.
-* [`DecimalPipe`](/api/common/DecimalPipe): Transforms a number into a decimal number string.
-* [`PercentPipe`](api/common/PercentPipe): Transforms a number to a percentage string.
+* [`DatePipe`][AioApiCommonDatepipe]: Formats a date value.
+* [`CurrencyPipe`][AioApiCommonCurrencypipe]: Transforms a number to a currency string.
+* [`DecimalPipe`][AioApiCommonDecimalpipe]: Transforms a number into a decimal number string.
+* [`PercentPipe`][AioApiCommonPercentpipe]: Transforms a number to a percentage string.
For example, `{{today | date}}` uses `DatePipe` to display the current date in the format for the locale in `LOCALE_ID`.
To override the value of `LOCALE_ID`, add the `locale` parameter.
For example, to force the currency to use `en-US` no matter which language-locale you set for `LOCALE_ID`, use this form: `{{amount | currency : 'en-US'}}`.
-{@a Template-translations}
+
+
+{@a template-translations}
## Prepare templates for translations
-To translate your app's templates, you need to prepare the text for a translator or translation service by marking text, attributes, and other elements with the Angular `i18n` attribute.
-Follow these general steps:
+To translate the templates of your application, prepare the text for a translator or translation service by marking text, attributes, and other elements with the Angular `i18n` attribute.
+Complete the following actions to mark text, attributes, and other elements with the Angular `i18n` attribute.
+
+1. [Mark text for translations][AioGuideI18nI18nAttribute].
+2. [Add helpful descriptions and meanings][AioGuideI18nHelpTranslator] to help the translator with additional information or context.
+3. [Translate text not for display][AioGuideI18nNoElement].
+4. [Mark element attributes for translations][AioGuideI18nTranslateAttributes], such as the `title` attribute of an image.
+5. [Mark plurals and alternates for translation][AioGuideI18nPluralsAlternates] in order to comply with the pluralization rules and grammatical constructions of different languages.
-1. [Mark text for translations](#i18n-attribute).
-2. [Add helpful descriptions and meanings](#help-translator) to help the translator with additional information or context.
-3. [Translate text not for display](#no-element).
-4. [Mark element attributes for translations](#translate-attributes), such as an image's `title` attribute.
-5. [Mark plurals and alternates for translation](#plurals-alternates) in order to comply with the pluralization rules and grammatical constructions of different languages.
+
{@a i18n-attribute}
@@ -154,7 +166,7 @@ Follow these general steps:
Mark the static text messages in your component templates for translation using the `i18n` attribute.
Place it on every element tag with fixed text to be translated.
-For example, the following `
` tag displays a simple English language greeting, "Hello i18n!"
+For example, the following `
` tag displays a simple English language greeting, "Hello i18n!".
@@ -165,131 +177,152 @@ To mark the greeting for translation, add the `i18n` attribute to the `
` tag
`i18n` is a custom attribute, recognized by Angular tools and compilers.
-After translation, the compiler removes it. It is not an Angular directive.
+After translation, the compiler removes it.
+It is not an Angular directive.
+
+
{@a help-translator}
### Add helpful descriptions and meanings
To translate a text message accurately, the translator may need additional information or context.
-Add a _description_ of the text message as the value of the `i18n` attribute, as shown in the following example:
+Add a *description* of the text message as the value of the `i18n` attribute.
+The following example displays the value of the `i18n` attribute.
-The translator may also need to know the meaning or intent of the text message within this particular app context, in order to translate it the same way as other text with the same meaning.
-Start the `i18n` attribute value with the _meaning_ and
-separate it from the _description_ with the `|` character: `|`.
+The translator may also need to know the meaning or intent of the text message within this particular application context, in order to translate it the same way as other text with the same meaning.
+Start the `i18n` attribute value with the *meaning* and separate it from the *description* with the `|` character: `|`.
-For example, you can add the meaning that this `
` tag is a site header that needs to be translated the same way not only when used as a header, but also when referred to from another section of text:
+For example, you may want to indicate that the `
` tag is a site header that needs to be translated the same way whether it used as a header or referenced in another section of text.
+The following example displays how to indicate that the `
` tag needs to be translated as a header or referenced elsewhere.
-As a result, any text marked with `site header` as the _meaning_ is translated exactly the same way.
+The result is any text marked with `site header` as the *meaning* is translated exactly the same way.
+
+
{@a transaction-unit-ids}
How meanings control text extraction and merging
-The Angular extraction tool (described in [Work with translation files](#ng-xi18n) in this guide) generates a translation unit entry for each `i18n`
-attribute in a template.
-It assigns each translation unit a unique ID based on the _meaning_ and _description_.
+The Angular extraction tool generates a translation unit entry for each `i18n` attribute in a template.
+The Angular extraction tool assigns each translation unit a unique ID based on the *meaning* and *description*.
+For more information about the Angular extraction tool, see [Work with translation files][AioGuideI18nNgXi18n] in this guide.
-The same text elements with different _meanings_ are extracted with separate IDs.
-For example, if the word "right" appears with the meaning `correct` (as in "You are right") in one place, and with the meaning `direction` (as in "Turn right") in another place, the word is translated differently and merged back into the app as different translation entries.
+The same text elements with different *meanings* are extracted with different IDs.
+For example, if the word "right" uses the following two definitions in two different locations, the word is translated differently and merged back into the application as different translation entries.
-If the same text elements have different _descriptions_ but the same _meaning_, they are extracted only once, with only one ID. That one translation entry is merged back into the app wherever the same text elements appear.
+* `correct` as in you are "right"
+* `direction` as in turn "right"
+
+If the same text elements meet the following conditions, the text elements are extracted only once and use the same ID.
+
+* Same meaning or definition
+* Different descriptions
+
+That one translation entry is merged back into the application wherever the same text elements appear.
+
+
{@a no-element}
### Translate text not for display
-While you can translate non-displayed text using a `` tag, you are creating a new DOM element. To avoid doing so, wrap the text in an `` element, which is transformed into a non-displayed HTML comment as shown in this example:
+If you translate non-displayed text using the `` tag, you create a new DOM element.
+To avoid doing a new DOM element, wrap the text in an `` element.
+The following example displays the `` element transformed into a non-displayed HTML comment.
+
+
{@a translate-attributes}
### Mark element attributes for translations
HTML attributes such as `title` include text that should be translated along with the rest of the displayed text in the template.
-The following example shows an image with a `title` attribute:
+The following example displays an image with a `title` attribute.
To mark an attribute for translation, add `i18n-`*attribute* in which *attribute* is the attribute to translate.
-The following example shows how to mark the
-`title` attribute on the `img` tag by adding `i18n-title`:
+The following example displays how to mark the `title` attribute on the `img` tag by adding `i18n-title`.
-You can use `i18n-`*attribute* with any attribute of any element.
-You also can assign a meaning, description, and custom ID with the `i18n-`*attribute*`="|@@"` syntax.
+Use `i18n-`*attribute* with any attribute of any element.
+Also, to assign a meaning, description, and custom ID, use the `i18n-`*attribute*`="|@@"` syntax.
+
+
{@a plurals-alternates}
### Mark plurals and alternates for translation
-Different languages have different pluralization rules and grammatical constructions that can make translation difficult.
+Different languages have different pluralization rules and grammatical constructions that increase the difficulty of translation.
To simplify translation, use International Components for Unicode (ICU) clauses with regular expressions, such as `plural` to mark the uses of plural numbers, and `select` to mark alternate text choices.
-The ICU clauses adhere to the [ICU Message Format](http://userguide.icu-project.org/formatparse/messages "ICU Message Format") specified in the [CLDR pluralization rules](http://cldr.unicode.org/index/cldr-spec/plural-rules "Pluralization Rules").
+The ICU clauses adhere to the [ICU Message Format][GithubUnicodeOrgIcuUserguideFormatParseMessages] specified in the [CLDR pluralization rules][UnicodeCldrIndexCldrSpecPluralRules].
+
+
{@a plural-ICU}
#### Mark plurals
Use the `plural` clause to mark expressions that may not be meaningful if translated word-for-word.
-For example, if you want to display "updated x minutes ago" in English, you may want to display "just now", "one minute ago", or "_x_ minutes ago" (with _x_ as the actual number).
+For example, if you want to display "updated x minutes ago" in English, you may want to display "just now", "one minute ago", or "*x* minutes ago" (with *x* as the actual number).
Other languages might express this cardinality differently.
-The following example shows how to use a `plural` clause to express these three options:
+The following example displays how to use a `plural` clause to express each of the three situations.
-In the above example:
+Review the following details in the above example.
-* The first parameter, `minutes`, is bound to the component property (`minutes`), which determines the number of minutes.
-
-* The second parameter identifies this as a `plural` translation type.
-
-* The third parameter defines a pattern of pluralization categories and their matching values:
- * For zero minutes, use `=0 {just now}`.
- * For one minute, use `=1 {one minute}`.
- * For any unmatched cardinality, use `other {{{minutes}} minutes ago}`.
- You can use HTML markup and [interpolations](guide/glossary#interpolation "Definition of interpolation") such as `{{{minutes}}` with the `plural` clause in expressions.
- * After the pluralization category, put the default text (English) within braces (`{}`).
+* The first parameter, `minutes`, is bound to the component property (`minutes`), which determines the number of minutes.
+* The second parameter identifies this as a `plural` translation type.
+* The third parameter defines a pattern of pluralization categories and the matching values:
+ * For zero minutes, use `=0 {just now}`.
+ * For one minute, use `=1 {one minute}`.
+ * For any unmatched cardinality, use `other {{{minutes}} minutes ago}`.
+ Use HTML markup and [interpolations][AioGuideGlossaryInterpolation], such as `{{{minutes}}` with the `plural` clause in expressions.
+ * After the pluralization category, put the default text (English) within braces (`{}`).
Pluralization categories include (depending on the language):
-* `=0` (or any other number)
-* `zero`
-* `one`
-* `two`
-* `few`
-* `many`
-* `other`
+* `=0` (or any other number)
+* `zero`
+* `one`
+* `two`
+* `few`
+* `many`
+* `other`
Locales may not support some pluralization categories
Many locales don't support some of the pluralization categories.
For example, the default locale (`en-US`) and other locales (such as `es`) have very simple `plural()` functions that don't support the `few` category.
-The following shows the [en-US](https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L15-L18) `plural()` function:
+The following code example displays the [en-US][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL15L18] `plural()` function.
-```
+```typescript
function plural(n: number): number {
- let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
- if (i === 1 && v === 0) return 1;
- return 5;
+ let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
+ if (i === 1 && v === 0) return 1;
+ return 5;
}
```
@@ -298,10 +331,12 @@ The `few` category will never match.
If none of the pluralization categories match, Angular will try to match `other`.
Use `other` as the standard fallback for a missing category.
-For more information about pluralization categories, see [Choosing plural category names](http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names) in the CLDR - Unicode Common Locale Data Repository.
+For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the CLDR - Unicode Common Locale Data Repository.
+
+
{@a select-ICU}
{@a nesting-ICUS}
@@ -311,15 +346,17 @@ If you need to display alternate text depending on the value of a variable, you
need to translate all of the alternates.
The `select` clause, similar to the `plural` clause, marks choices for alternate text based on your defined string values.
-For example, the following clause in the component template binds to the component's `gender` property, which outputs one of the following string values: "male", "female" or "other".
-The clause maps those values to the appropriate translations:
+For example, the following clause in the component template binds to the `gender` property of the component, which outputs one of the following string values: `"male"`, `"female"`, or `"other"`.
+The clause maps the values to the appropriate translations.
-You can also nest different clauses together, such as the `plural` and `select` clauses in the following example:
+Also, nest different clauses together, such as the `plural` and `select` clauses.
+The following example displays nested clauses.
-
-
+
+
+
{@a ng-xi18n}
{@a ng-xi18n-options}
@@ -327,71 +364,82 @@ You can also nest different clauses together, such as the `plural` and `select`
## Work with translation files
-After preparing a template for translation, use the Angular CLI [`extract-i18n`](cli/extract-i18n) command to extract the marked text in the template into a _source language_ file.
+After preparing a template for translation, use the [`extract-i18n`][AioCliExtractI18n] Angular CLI command to extract the marked text in the template into a *source language* file.
+
The marked text includes text marked with `i18n` and attributes marked with `i18n-`*attribute* as described in the previous section.
Follow these steps:
-1. [Extract the source language file](#create-source).
-You can optionally change the location, format, and name.
-2. [Create a translation file for each language](#localization-folder) by copying the source language file.
-3. [Translate each translation file](#translate-text-nodes).
-4. [Translate plurals and alternate expressions](#translate-plural-select) separately.
+1. [Extract the source language file][AioGuideI18nCreateSource].
+ Optionally, change the location, format, and name.
+2. [Create a translation file for each language][AioGuideI18nLocalizationFolder] by copying the source language file.
+3. [Translate each translation file][AioGuideI18nTranslateTextNodes].
+4. [Translate plurals and alternate expressions][AioGuideI18nTranslatePluralSelect] separately.
+
+
{@a create-source}
### Extract the source language file
-To extract the source language file, open a terminal window, change to the root directory of your app project, and run the following CLI command:
+To extract the source language file, open a terminal window, change to the root directory of your application project, and run the following CLI command:
- ng extract-i18n
+ng extract-i18n
-The `extract-i18n` command creates a source language file named `messages.xlf` in your project's root directory using the [XML Localization Interchange File Format (XLIFF, version 1.2)](https://en.wikipedia.org/wiki/XLIFF "Wikipedia page about XLIFF").
+The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project using the [XML Localization Interchange File Format (XLIFF, version 1.2)][WikipediaWikiXliff].
-Use the following [`extract-i18n` command options](cli/extract-i18n) to change the source language file location, format, and file name:
+Use the following [`extract-i18n` command options][AioCliExtractI18n] to change the source language file location, format, and file name:
-* `--output-path`: Change the location.
-* `--format`: Change the format.
-* `--outFile`: Change the file name.
+* `--output-path`: Change the location.
+* `--format`: Change the format.
+* `--outFile`: Change the file name.
-Note: The `--i18n-locale` option is deprecated.
-Angular 9 uses the source locale configured in your app's [workspace configuration](guide/workspace-config "Angular workspace configuration") file (`angular.json`).
+
+
+**Note**: The `--i18n-locale` option is deprecated.
+Angular 9 uses the source locale configured in the [workspace configuration][AioGuideWorkspaceConfig] file (`angular.json`) of your application.
+
+
#### Change the source language file location
-To create a file in the `src/locale` directory, specify the output path as an option, as shown in the following example:
+To create a file in the `src/locale` directory, specify the output path as an option.
+The following example specifies the output path as an option.
- ng extract-i18n --output-path src/locale
+ng extract-i18n --output-path src/locale
+
+
{@a other-formats}
#### Change the source language file format
-The `extract-i18n` command can read and write files in three translation formats:
+The `extract-i18n` command writes files in the following translation formats.
-* XLIFF 1.2 (default)
-* XLIFF 2
-* [XML Message Bundle (XMB)](http://cldr.unicode.org/development/development-process/design-proposals/xmb)
-* JSON
-* [ARB](https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification)
+* XLIFF 1.2 (default)
+* XLIFF 2
+* [XML Message Bundle (XMB)][UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]
+* JSON
+* [ARB][GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]
-Specify the translation format explicitly with the `--format` command option, as shown in the following examples:
+Specify the translation format explicitly with the `--format` command option.
+The following example demonstrates several translation formats.
-ng extract-i18n --format=xlf
-ng extract-i18n --format=xlf2
-ng extract-i18n --format=xmb
-ng extract-i18n --format=json
-ng extract-i18n --format=arb
+ng extract-i18n --format=xlf
+ng extract-i18n --format=xlf2
+ng extract-i18n --format=xmb
+ng extract-i18n --format=json
+ng extract-i18n --format=arb
- XLIFF files use the extension `.xlf`.
- The XMB format generates `.xmb` source language files but uses`.xtb` (XML Translation Bundle: XTB) translation files.
+XLIFF files use the extension `.xlf`.
+The XMB format generates `.xmb` source language files but uses`.xtb` (XML Translation Bundle: XTB) translation files.
@@ -401,9 +449,11 @@ To change the name of the source language file generated by the extraction tool,
the `--outFile` command option:
- ng extract-i18n --out-file source.xlf
+ng extract-i18n --out-file source.xlf
+
+
{@a localization-folder}
### Create a translation file for each language
@@ -415,12 +465,14 @@ Use a filename extension that matches the associated locale, such as `messages.f
For example, to create a French translation file, follow these steps:
-1. Make a copy of the `messages.xlf` source language file.
-2. Put the copy in the `src/locale` folder.
-3. Rename the copy to `messages.fr.xlf` for the French language (`fr`) translation.
-Send this translation file to the translator.
+1. Make a copy of the `messages.xlf` source language file.
+2. Put the copy in the `src/locale` folder.
+3. Rename the copy to `messages.fr.xlf` for the French language (`fr`) translation.
+ Send this translation file to the translator.
+
+Repeat the above steps for each language you want to add to your application.
-Repeat the above steps for each language you want to add to your app.
+
{@a translate-text-nodes}
@@ -428,123 +480,140 @@ Repeat the above steps for each language you want to add to your app.
Unless you are fluent in the language and have the time to edit translations, you would likely send each translation file to a translator, who would then use an XLIFF file editor to create and edit the translation.
-To demonstrate this process, see the `messages.fr.xlf` file in the , which includes a French translation you can edit without a special XLIFF editor or knowledge of French.
-Follow these steps:
-
-1. Open `messages.fr.xlf` and find the first `` element. This is a *translation unit*, also known as a *text node*, representing the translation of the `
` greeting tag that was previously marked with the `i18n` attribute:
-
->
-
-> The `id="introductionHeader"` is a [custom ID](#custom-id "Manage marked text with custom IDs"), but without the `@@` prefix required in the source HTML.
-
-2. Duplicate the `...` element in the text node, rename it to `target`, and then replace its content with the French text:
-
->
-
-> In a more complex translation, the information and context in the [description and meaning elements](#help-translator "Add helpful descriptions and meanings") described previously would help you choose the right words for translation.
-
-3. Translate the other text nodes the same way as shown in the following example:
-
->
-
-
-
- Don't change the IDs for translation units.
- Each `id` is generated by Angular and depends on the content of the template text and its assigned meaning.
- If you change either the text or the meaning, then the `id` changes.
- For more about managing text updates and IDs, see the section on [custom IDs](#custom-id "Manage marked text with custom IDs").
-
-
+To demonstrate this process, review the `messages.fr.xlf` file in the . The live example includes a French translation for you to edit without a special XLIFF editor or knowledge of French.
+Complete the following actions.
+
+1. Open `messages.fr.xlf` and find the first `` element.
+ This is a *translation unit*, also known as a *text node*, representing the translation of the `
` greeting tag that was previously marked with the `i18n` attribute:
+
+ >
+
+ > The `id="introductionHeader"` is a [custom ID][AioGuideI18nCustomId], but without the `@@` prefix required in the source HTML.
+
+2. Duplicate the `...` element in the text node, rename it to `target`, and then replace its content with the French text:
+
+ >
+
+ > In a more complex translation, the information and context in the [description and meaning elements][AioGuideI18nHelpTranslator] described previously would help you choose the right words for translation.
+
+3. Translate the other text nodes.
+ The following example displays the way to translate.
+
+ >
+
+
+
+ Don't change the IDs for translation units.
+ Each `id` is generated by Angular and depends on the content of the template text and its assigned meaning.
+ If you change either the text or the meaning, then the `id` changes.
+ For more about managing text updates and IDs, see [custom IDs][AioGuideI18nCustomId].
+
+
+
+
{@a translate-plural-select}
### Translate plurals and alternate expressions
-The [`plural` and `select` ICU expressions](#plurals-alternates "Mark plurals and alternates for translation") are extracted as additional messages, so you must translate them separately.
+The [`plural` and `select` ICU expressions][AioGuideI18nPluralsAlternates] are extracted as additional messages, so you must translate them separately.
+
+
{@a translate-plural}
#### Translate plurals
-To translate a `plural`, translate its ICU format match values as shown in the following example:
+To translate a `plural`, translate the ICU format match values.
+
+* `just now`
+* `one minute ago`
+* ` minutes ago`
-* `just now`
-* `one minute ago`
-* ` minutes ago`
+
+The following example displays the way to translate.
-You can add or remove plural cases as needed for each language.
+Add or remove plural cases as needed for each language.
-For language plural rules, see
-[CLDR plural rules](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html "CLDR Charts to view the Common Locale Data Repository data").
+For language plural rules, see [CLDR plural rules][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml].
+
+
{@a translate-select}
#### Translate alternate expressions
Angular also extracts alternate `select` ICU expressions as separate translation units.
-The following shows a `select` ICU expression in the component template:
+The following example displays a `select` ICU expression in the component template.
-In this example, Angular extracts the expression into two translation units. The first contains the text outside of the `select` clause, and uses a placeholder for `select` (``):
+In this example, Angular extracts the expression into two translation units.
+The first contains the text outside of the `select` clause, and uses a placeholder for `select` (``):
-When translating the text, you can move the placeholder if necessary, but don't remove it.
-If you remove the placeholder, the ICU expression will not appear in your translated app.
+When you translate the text, move the placeholder if necessary, but don't remove it.
+If you remove the placeholder, the ICU expression is removed from your translated application.
-The second translation unit contains the `select` clause:
+The following example displays the second translation unit that contains the `select` clause.
-The following example shows both translation units after translating:
+The following example displays both translation units after translation is complete.
+
+
{@a translate-nested}
#### Translate nested expressions
-Angular treats a nested expression in the same manner as an alternate expression, extracting it into two translation units. The first contains the text outside of the nested expression:
+Angular treats a nested expression in the same manner as an alternate expression. Angular extracts the expression into two translation units.
+The following example displays the first translation unit that contains the text outside of the nested expression.
-The second translation unit contains the complete nested expression:
+The following example displays the second translation unit that contains the complete nested expression.
-The following example shows both translation units after translating:
+The following example displays both translation units after translating.
+
+
{@a merge}
{@a merge-aot}
## Merge translations into the app
-To merge the completed translations into the app, use the [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI") to build a copy of the app's distributable files for each locale.
-The build process replaces the original text with translated text, and sets the `LOCALE_ID` token for each distributable copy of the app.
+To merge the completed translations into your application, use the [Angular CLI][AioGuideGlossaryCommandLineInterfaceCli] to build a copy of the distributable files of your application for each locale.
+
+The build process replaces the original text with translated text, and sets the `LOCALE_ID` token for each distributable copy of your application.
It also loads and registers the locale data.
-After merging, you can serve each distributable copy of the app using server-side language detection or different subdirectories, as described in the next section about [deploying multiple locales](#deploy-locales).
+After you merge the translations, serve each distributable copy of the application using server-side language detection or different subdirectories.
+For more information about how to serve each distributable copy of the application, see [deploying multiple locales][AioGuideI18nDeployLocales].
-The build process uses [ahead-of-time (AOT) compilation](guide/glossary#ahead-of-time-aot-compilation) to produce a small, fast,
-ready-to-run app. With Ivy in Angular version 9, AOT is used by default for both
-development and production builds, and AOT is required to localize component templates.
+The build process uses [ahead-of-time (AOT) compilation][AioGuideGlossaryAheadOfTimeAotCompilation] to produce a small, fast, ready-to-run application.
+With Ivy in Angular version 9, AOT is used by default for both development and production builds, and AOT is required to localize component templates.
-For a detailed explanation of the build process, see [Building and serving Angular apps](guide/build "Building and serving Angular apps").
+For a detailed explanation of the build process, see [Building and serving Angular apps][AioGuideBuild].
This build process works for translation files in the `.xlf` format or in another format that Angular understands, such as `.xtb`.
@@ -552,146 +621,168 @@ This build process works for translation files in the `.xlf` format or in anothe
Ivy does not support merging i18n translations when using JIT mode.
-If you [disable Ivy](guide/ivy#opting-out-of-ivy-in-version-9) and are using JIT mode, see [merging with the JIT compiler](https://v8.angular.io/guide/i18n#merge-with-the-jit-compiler "Merge with the JIT compiler").
+If you [disable Ivy][AioGuideIvyOptingOutOfIvyInVersion9] and are using JIT mode, navigate [merging with the JIT compiler][AngularV8GuideI18nMergeWithTheJitCompiler].
-To build a separate distributable copy of the app for each locale, [define the locales in the build configuration](#localize-config) in your project's workspace configuration file [`angular.json`](guide/workspace-config "Angular workspace configuration").
-This method shortens the build process by removing the requirement to perform a full app build for each locale.
+To build a separate distributable copy of the application for each locale, [define the locales in the build configuration][AioGuideI18nLocalizeConfig] in the workspace configuration file [`angular.json`][AioGuideWorkspaceConfig] of your project.
+
+This method shortens the build process by removing the requirement to perform a full application build for each locale.
-You can then [generate app versions for each locale](#localize-generate) using the `"localize"` option in `angular.json`. You can also [build from the command line](#localize-build-command) using the Angular CLI [`build`](/cli/build "CLI reference for ng build") command with the `--localize` option.
+Then, to [generate application versions for each locale][AioGuideI18nLocalizeGenerate], use the `"localize"` option in `angular.json`.
+Also, to [build from the command line][AioGuideI18nLocalizeBuildCommand], use the [`build`][AioCliBuild] Angular CLI command with the `--localize` option.
-You can optionally [apply specific build options for just one locale](#localize-build-one-locale) for a custom locale configuration.
+Optionally, [apply specific build options for just one locale][AioGuideI18nLocalizeBuildOneLocale] for a custom locale configuration.
+
+
{@a localize-config}
### Define locales in the build configuration
-Use the `i18n` project option in your app's build configuration file ([`angular.json`](guide/workspace-config "Angular workspace configuration")) to define locales for a project.
+Use the `i18n` project option in the build configuration file ([`angular.json`][AioGuideWorkspaceConfig]) of your application to define locales for a project.
+
The following sub-options identify the source language and tell the compiler where to find supported translations for the project:
-* `sourceLocale`: The locale you use within the app source code (`en-US` by default)
-* `locales`: A map of locale identifiers to translation files
+* `sourceLocale`: The locale you use within the application source code (`en-US` by default)
+* `locales`: A map of locale identifiers to translation files
For example, the following excerpt of an `angular.json` file sets the source locale to `en-US` and provides the path to the `fr` (French) locale translation file:
...
"projects": {
- "angular.io-example": {
- ...
- "i18n": {
- "sourceLocale": "en-US",
- "locales": {
- "fr": "src/locale/messages.fr.xlf"
- }
- },
- "architect": {
- ...
+ "my-project": {
+ ...
+ "i18n": {
+ "sourceLocale": "en-US",
+ "locales": {
+ "fr": "src/locale/messages.fr.xlf"
+ }
+ },
+ "architect": {
+ ...
+ },
+ ...
}
}
+
+
{@a localize-generate}
-### Generate app versions for each locale
+### Generate application versions for each locale
To use your locale definition in the build configuration, use the `"localize"` option in `angular.json` to tell the CLI which locales to generate for the build configuration:
-* Set `"localize"` to `true` for *all* the locales previously defined in the build configuration.
-* Set `"localize"` to an array of a subset of the previously-defined locale identifiers to build only those locale versions.
-* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions.
+* Set `"localize"` to `true` for *all* the locales previously defined in the build configuration.
+* Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions.
+* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions.
-Note: [Ahead-of-time (AOT) compilation](guide/glossary#ahead-of-time-aot-compilation) is required to localize component templates.
+**NOTE**: [Ahead-of-time (AOT) compilation][AioGuideGlossaryAheadOfTimeAotCompilation] is required to localize component templates.
+
If you changed this setting, set `"aot"` to `true` in order to use AOT.
-The following example shows the `"localize"` option set to `true` in `angular.json` so that all locales defined in the build configuration are built:
+The following example displays the `"localize"` option set to `true` in `angular.json`, so that all locales defined in the build configuration are built.
"build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "localize": true,
- "aot": true,
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "localize": true,
+ "aot": true,
+ ...
+ }
...
+}
Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time.
-Setting the `"localize"` option to `true` will cause an error when using `ng serve` if more than one locale is defined.
-Setting the option to a specific locale, such as `"localize": ["fr"]`, can work if you want to develop against a specific locale (such as `fr`).
+If you set the `"localize"` option to `true`, define more than one locale, and use `ng serve`; then an error occurs.
+If you want to develop against a specific locale, set the `"localize"` option to a specific locale.
+For example, for French (`fr`), specify `"localize": ["fr"]`.
The CLI loads and registers the locale data, places each generated version in a locale-specific directory to keep it separate from other locale versions, and puts the directories within the configured `outputPath` for the project.
For each application variant the `lang` attribute of the `html` element is set to the locale.
-The CLI also adjusts the HTML base HREF for each version of the app by adding the locale to the configured `baseHref`.
+The CLI also adjusts the HTML base HREF for each version of the application by adding the locale to the configured `baseHref`.
-You can set the `"localize"` property as a shared configuration that all the configurations effectively inherit (or can override).
+Set the `"localize"` property as a shared configuration to effectively inherit for all the configurations.
+Also, set the property to override other configurations.
+
+
{@a localize-build-command}
### Build from the command line
-You can also use the `--localize` option with the [`ng build`](/cli/build "CLI reference for ng build") command and your existing `production` configuration.
-The CLI builds all locales defined in the build configuration, which is similar to setting the `"localize"` option to `true` as described in the previous section.
+Also, use the `--localize` option with the [`ng build`][AioCliBuild] command and your existing `production` configuration.
+The CLI builds all locales defined in the build configuration.
+If you set the locales in build configuration, it is similar to when you set the `"localize"` option to `true`.
+For more information about how to set the locales, see [Generate application versions for each locale][AioGuideI18nLocalizeGenerate].
- ng build --localize
+ng build --localize
+
+
{@a localize-build-one-locale}
### Apply specific build options for just one locale
-To apply specific build options to only one locale, you can create a custom locale-specific configuration by specifying a single locale as shown in the following example:
+To apply specific build options to only one locale, specify a single locale to create a custom locale-specific configuration.
+The following example displays a custom locale-specific configuration using a single locale.
"build": {
- ...
- "configurations": {
...
- "fr": {
- "localize": ["fr"],
- "main": "src/main.fr.ts",
- ...
+ "configurations": {
+ ...
+ "fr": {
+ "localize": ["fr"],
+ "main": "src/main.fr.ts",
+ ...
+ }
}
- }
},
"serve": {
- ...
- "configurations": {
...
- "fr": {
- "browserTarget": "*project-name*:build:fr"
+ "configurations": {
+ ...
+ "fr": {
+ "browserTarget": "*project-name*:build:fr"
+ }
}
- }
}
-You can then pass this configuration to the `ng serve` or `ng build` commands.
-The following shows how to serve the French language file created in the example for this guide:
+Pass this configuration to the `ng serve` or `ng build` commands.
+The following code example displays how to serve the French language file.
- ng serve --configuration=fr
+ng serve --configuration=fr
-You can use the CLI development server (`ng serve`), but only with a single locale.
+Use the CLI development server (`ng serve`) with only a single locale.
-For production builds, you can use configuration composition to execute both configurations:
+For production builds, use configuration composition to run both configurations.
ng build --configuration=production,fr
@@ -700,103 +791,115 @@ For production builds, you can use configuration composition to execute both con
...
"architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": { ... },
- "configurations": {
- "fr": {
- "localize": ["fr"],
- }
- }
- },
- ...
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "my-project:build"
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": { ... },
+ "configurations": {
+ "fr": {
+ "localize": ["fr"],
+ }
+ }
},
- "configurations": {
- "production": {
- "browserTarget": "my-project:build:production"
- },
- "fr": {
- "browserTarget": "my-project:build:fr"
- }
+ ...
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "my-project:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "my-project:build:production"
+ },
+ "fr": {
+ "browserTarget": "my-project:build:fr"
+ }
+ }
}
- }
}
+
+
{@a missing-translation}
### Report missing translations
-When a translation is missing, the build succeeds but generates a warning such as
-`Missing translation for message "foo"`. You can configure the level of warning that is generated by the Angular compiler:
+When a translation is missing, the build succeeds but generates a warning such as `Missing translation for message "foo"`.
+To configure the level of warning that is generated by the Angular compiler, specify one of the following levels.
-* `error`: Throw an error. If you are using AOT compilation, the build will fail.
-If you are using JIT compilation, the app will fail to load.
-* `warning` (default): Show a `Missing translation` warning in the console or shell.
-* `ignore`: Do nothing.
+* `error`: Throw an error.
+ If you are using AOT compilation, the build will fail.
+ If you are using JIT compilation, the application will fail to load.
+* `warning` (default): Displays a `Missing translation` warning in the console or shell.
+* `ignore`: Do nothing.
-Specify the warning level in the `options` section for the `build` target of your Angular CLI configuration file (`angular.json`). The following example shows how to set the warning level to `error`:
+Specify the warning level in the `options` section for the `build` target of your Angular CLI configuration file (`angular.json`).
+The following example displays how to set the warning level to `error`.
"options": {
- ...
- "i18nMissingTranslation": "error"
+ ...
+ "i18nMissingTranslation": "error"
}
+
+
{@a deploy-locales}
## Deploy multiple locales
-If `myapp` is the directory containing your app's distributable files, you would typically make available different versions for different locales in locale directories such as `myapp/fr` for the French version and `myapp/es` for the Spanish version.
+If `myapp` is the directory containing the distributable files of your application, you would typically make available different versions for different locales in locale directories such as `myapp/fr` for the French version and `myapp/es` for the Spanish version.
-The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links. If you set the `"localize"` option in `angular.json` to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the app by adding the locale to the configured `"baseHref"`. You can specify the `"baseHref"` for each locale in your workspace configuration file (`angular.json`), as shown in the following example, which sets `"baseHref"` to an empty string:
+The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links.
+If you set the `"localize"` option in `angular.json` to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application.
+To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"baseHref"`.
+Specify the `"baseHref"` for each locale in your workspace configuration file (`angular.json`).
+The following example displays `"baseHref"` set to an empty string.
...
"projects": {
- "angular.io-example": {
- ...
- "i18n": {
- "sourceLocale": "en-US",
- "locales": {
- "fr": {
- "translation": "src/locale/messages.fr.xlf",
- "baseHref": ""
+ "angular.io-example": {
+ ...
+ "i18n": {
+ "sourceLocale": "en-US",
+ "locales": {
+ "fr": {
+ "translation": "src/locale/messages.fr.xlf",
+ "baseHref": ""
+ }
+ }
+ },
+ "architect": {
+ ...
}
- }
- },
- "architect": {
...
}
}
-You can also use the CLI `--baseHref` option with [`ng build`](cli/build "CLI reference for ng build") to declare the base `href` at compile time.
+Also, to declare the base `href` at compile time, use the CLI `--baseHref` option with [`ng build`][AioCliBuild].
### Configuring servers
Typical deployment of multiple languages serve each language from a different subdirectory.
-Users are redirected to the preferred language defined in the browser using the
-`Accept-Language` HTTP header. If the user has not defined a preferred language,
-or if the preferred language is not available, then the server falls back to the default language.
-Users can change the language by navigating to other subdirectories, which often occurs using a
-menu implemented in the application.
+Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header.
+If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language.
+To change the language, see another subdirectory.
+The change of subdirectory often occurs using a menu implemented in the application.
-For more information on how to deploy apps to a remote server, see [Deployment](guide/deployment "Deployment guide").
+For more information on how to deploy apps to a remote server, see [Deployment][AioGuideDeployment].
#### Nginx
-The following is an example of an Nginx configuration.
+The following example displays an Nginx configuration.
-```
+```nginx
http {
- # Browser preferred language detection (does NOT require AcceptLanguageModule)
+ # Browser preferred language detection (does NOT require
+ # AcceptLanguageModule)
map $http_accept_language $accept_language {
~*^de de;
~*^fr fr;
@@ -815,10 +918,11 @@ server {
set $accept_language "fr";
}
- # Redirect "/" to Angular app in browser's preferred language
+ # Redirect "/" to Angular application in the preferred language of the browser
rewrite ^/$ /$accept_language permanent;
- # Everything under the Angular app is always redirected to Angular in the correct language
+ # Everything under the Angular application is always redirected to Angular in the
+ # correct language
location ~ ^/(fr|de|en) {
try_files $uri /$1/index.html?$args;
}
@@ -828,9 +932,9 @@ server {
#### Apache
-The following is an example of an Apache configuration.
+The following example displays an Apache configuration.
-```
+```apache
ServerName localhost
DocumentRoot /www/data
@@ -856,69 +960,80 @@ The following is an example of an Apache configuration.
```
+
+
{@a app-pre-translation}
## Explore the translated example app
-The following tabs show the example app and its translation files:
+The following tabs display the example application and the associated translation files.
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
## Optional practices
-The following are optional practices that may be required in special cases:
+In special cases, the following practices are required.
-* [Set the source locale manually](#set-source-manually) by setting the [LOCALE_ID](api/core/LOCALE_ID "API reference for LOCALE_ID") token.
-* [Import global variants of the locale data](#import-locale) for extra locale data.
-* [Manage marked text with custom IDs](#custom-id) if you require more control over matching translations.
+* [Set the source locale manually][AioGuideI18nSetSourceManually] by setting the [`LOCALE_ID`][AioApiCoreLocaleId] token.
+* [Import global variants of the locale data][AioGuideI18nImportLocale] for extra locale data.
+* [Manage marked text with custom IDs][AioGuideI18nCustomId] if you require more control over matching translations.
+
+
{@a set-source-manually}
### Set the source locale manually
Angular already contains locale data for `en-US`.
-The Angular CLI automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`](cli/build "ng build description").
+The Angular CLI automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][AioCliBuild].
+
+To manually set the source locale of an application to one other than the automatic value, complete the following actions.
-To manually set an app's source locale to one other than the automatic value, follow these steps:
+1. Search for the ID in the language-locale combination in [the Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales].
+2. Set the [`LOCALE_ID`][AioApiCoreLocaleId] token.
-1. Look up the ID for the language-locale combination in [the Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales "Common locales in the Angular repository").
-2. Set the [`LOCALE_ID`](api/core/LOCALE_ID "API reference for LOCALE_ID") token.
-The following example sets the value of `LOCALE_ID` to `fr` (French):
+The following example sets the value of `LOCALE_ID` to `fr` for French.
+
+
{@a import-locale}
### Import global variants of the locale data
-Angular will automatically include locale data if you configure the locale using the `--localize` option with [`ng build`](cli/build "ng build description") CLI command.
+Angular will automatically include locale data if you configure the locale using the `--localize` option with [`ng build`][AioCliBuild] CLI command.
-The [Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales "Common locales in the Angular repository") files (`@angular/common/locales`) contain most of the locale data that you need, but some advanced formatting options require additional locale data.
-Global variants of the locale data are available in [`@angular/common/locales/global`](https://github.com/angular/angular/tree/master/packages/common/locales/global "Global locale variants in the Angular repository").
-The following example imports the global variants for French (`fr`):
+The [Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales] files (`@angular/common/locales`) contain most of the locale data that you need, but some advanced formatting options require additional locale data.
+
+Global variants of the locale data are available in [`@angular/common/locales/global`][GithubAngularAngularTreeMasterPackagesCommonLocalesGlobal].
+
+The following example imports the global variants for French (`fr`)
import '@angular/common/locales/global/fr';
+
+
{@a custom-id}
### Manage marked text with custom IDs
-The Angular extractor generates a file with a translation unit entry for each `i18n`
-attribute in a template.
-As described previously (in [How meanings control text extraction and merging](#transaction-unit-ids)), Angular assigns each translation unit a unique ID such as the following:
+The Angular extractor generates a file with a translation unit entry for each `i18n` attribute in a template.
+As described in [How meanings control text extraction and merging][AioGuideI18nTransactionUnitIds], Angular assigns each translation unit a unique ID.
+The following example displays translation units with unique IDs.
@@ -927,15 +1042,15 @@ In most cases a text change would also require a change to the translation.
Therefore, using a new ID keeps the text change in sync with translations.
However, some translation systems require a specific form or syntax for the ID.
-To address this requirement, you can mark text with _custom_ IDs.
-While most developers don't need to use custom IDs, some may want to use IDs that have a unique syntax to convey additional metadata (such as the library, component, or area of the app in which the text appears).
+To address this requirement, mark text with custom IDs.
+While most developers don't need to use custom IDs, some may want to use IDs that have a unique syntax to convey additional metadata (such as the library, component, or area of the application in which the text appears).
-Specify a custom ID in the `i18n` attribute by using the prefix `@@`.
-The following example defines the custom ID `introductionHeader`:
+Specify a custom ID in the `i18n` attribute by using the `@@` prefix.
+The following example defines the `introductionHeader` custom ID.
-When you specify a custom ID, the extractor generates a translation unit with the custom ID:
+When you specify a custom ID, the extractor generates a translation unit with the custom ID.
@@ -946,11 +1061,11 @@ The drawback of using custom IDs is that if you change the text, your translatio
#### Use a custom ID with a description
Use a custom ID in combination with a description and a meaning to further help the translator.
-The following example includes a description, followed by the custom `id`:
+The following example includes a description, followed by the custom ID.
-The following example adds a meaning:
+The following example adds a meaning.
@@ -959,29 +1074,116 @@ The following example adds a meaning:
Be sure to define custom IDs that are unique.
If you use the same ID for two different text elements, the extraction tool extracts only the first one, and Angular uses its translation in place of both original text elements.
-For example, in the following code the same custom ID `myId` is defined for two different text elements:
+For example, in the following code snippet the same `myId` custom ID is defined for two different text elements.
+
+```html
+
Hello
+
+
Good bye
+```
+
+The following displays the translation in French.
+
+```xml
+
+ Hello
+ Bonjour
+
+```
+
+Both elements now use the same translation (`Bonjour`), because both were defined with the same custom ID.
+
+```html
+
Bonjour
+
+
Bonjour
+```
+
+
+
+[AioGuideI18nAppPreTranslation]: #app-pre-translation "Explore the translated example application - Localizing your application | Angular"
+[AioGuideI18nCreateSource]: #create-source "Extract the source language file - Localizing your application | Angular"
+[AioGuideI18nCustomId]: #custom-id "Manage marked text with custom IDs - Localizing your application | Angular"
+[AioGuideI18nDeployLocales]: #deploy-locales "Deploy multiple locales - Localizing your application | Angular"
+[AioGuideI18nHelpTranslator]: #help-translator "Add helpful descriptions and meanings - Localizing your application | Angular"
+[AioGuideI18nI18nAttribute]: #i18n-attribute "Mark text for translations - Localizing your application | Angular"
+[AioGuideI18nPipes]: #i18n-pipes "Format data based on locale - Localizing your application | Angular"
+[AioGuideI18nImportLocale]: #import-locale "Import global variants of the locale data - Localizing your application | Angular"
+[AioGuideI18nLocalizationFolder]: #localization-folder "Create a translation file for each language - Localizing your application | Angular"
+[AioGuideI18nLocalizeBuildCommand]: #localize-build-command "Build from the command line - Localizing your application | Angular"
+[AioGuideI18nLocalizeBuildOneLocale]: #localize-build-one-locale "Apply specific build options for just one locale - Localizing your application | Angular"
+[AioGuideI18nLocalizeConfig]: #localize-config "Define locales in the build configuration - Localizing your application | Angular"
+[AioGuideI18nLocalizeGenerate]: #localize-generate "Generate application versions for each locale - Localizing your application | Angular"
+[AioGuideI18nMerge]: #merge "Merge translations into the application - Localizing your application | Angular"
+[AioGuideI18nNgXi18n]: #ng-xi18n "Work with translation files - Localizing your application | Angular"
+[AioGuideI18nNoElement]: #no-element "Translate text not for display - Localizing your application | Angular"
+[AioGuideI18nPluralsAlternates]: #plurals-alternates "Mark plurals and alternates for translation - Localizing your application | Angular"
+[AioGuideI18nSetSourceManually]: #set-source-manually "Set the source locale manually - Localizing your application | Angular"
+[AioGuideI18nSettingUpCli]: #setting-up-cli "Add the localize package - Localizing your application | Angular"
+[AioGuideI18nSettingUpLocale]: #setting-up-locale "Refer to locales by ID - Localizing your application | Angular"
+[AioGuideI18nTemplatetranslations]: #template-translations "Prepare templates for translations - Localizing your application | Angular"
+[AioGuideI18nTransactionUnitIds]: #transaction-unit-ids "How meanings control text extraction and merging - Localizing your application | Angular"
+[AioGuideI18nTranslateAttributes]: #translate-attributes "Mark element attributes for translations - Localizing your application | Angular"
+[AioGuideI18nTranslatePluralSelect]: #translate-plural-select "Translate plurals and alternate expressions - Localizing your application | Angular"
+[AioGuideI18nTranslateTextNodes]: #translate-text-nodes "Translate each translation file - Localizing your application | Angular"
+
+[AioApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular"
+[AioApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"
+[AioApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"
+[AioApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"
+[AioApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular"
+
+[AioCliMain]: cli "CLI Overview and Command Reference | Angular"
+[AioCliBuild]: cli/build "ng build | CLI | Angular"
+[AioCliExtractI18n]: cli/extract-i18n "ng extract-i18n | CLI | Angular"
+
+[AioGuideBuild]: guide/build "Building and serving Angular apps | Angular"
+
+[AioGuideDeployment]: guide/deployment "Deployment | Angular"
+
+[AioGuideGlossaryAheadOfTimeAotCompilation]: guide/glossary#ahead-of-time-aot-compilation "ahead-of-time (AOT) compilation - Glossary | Angular"
+[AioGuideGlossaryCommandLineInterfaceCli]: guide/glossary#command-line-interface-cli "command-line interface (CLI) - Glossary | Angular"
+[AioGuideGlossaryComponent]: guide/glossary#component "component - Glossary | Angular"
+[AioGuideGlossaryInterpolation]: guide/glossary#interpolation "interpolation - Glossary | Angular"
+[AioGuideGlossaryPipe]: guide/glossary#pipe "pipe - Glossary | Angular"
+[AioGuideGlossaryTemplate]: guide/glossary#template "template - Glossary | Angular"
+
+[AioGuideIvyOptingOutOfIvyInVersion9]: guide/ivy#opting-out-of-ivy-in-version-9 "Opting out of Ivy in version 9 - Angular Ivy | Angular"
+
+[AioGuideNpmPackages]: guide/npm-packages "Workspace npm dependencies | Angular"
+
+[AioGuideWorkspaceConfig]: guide/workspace-config "Angular workspace configuration | Angular"
+
+
+
+[AngularV8GuideI18nMergeWithTheJitCompiler]: https://v8.angular.io/guide/i18n#merge-with-the-jit-compiler "Merge with the JIT compiler - Internationalization (i18n) | Angular v8"
+
+[GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL15L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L15-L18 "Line 15 to 18 - angular/packages/core/src/i18n/locale_en.ts | angular/angular | GitHub"
+[GithubAngularAngularTreeMasterPackagesCommonLocales]: https://github.com/angular/angular/tree/master/packages/common/locales "angular/packages/common/locales | angular/angular | GitHub"
+[GithubAngularAngularTreeMasterPackagesCommonLocalesGlobal]: https://github.com/angular/angular/tree/master/packages/common/locales/global "angular/packages/common/locales/global | angular/angular | GitHub"
+
+[GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]: https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification "ApplicationResourceBundleSpecification | google/app-resource-bundle | GitHub"
+
+[GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]: https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html "Language Plural Rules - CLDR Charts | Unicode | GitHub"
+[GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages "ICU Message Format - ICU Documentation | Unicode | GitHub"
+
+[LocStandardsIso6392]: https://www.loc.gov/standards/iso639-2 "ISO 639-2 Registration Authority | Library of Congress"
+
+[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 "BCP 47 | RFC Editor"
+
+[ThinkwithgoogleMarketfinderIntlEnUsGuideHowToApproachI18nOverview]: https://marketfinder.thinkwithgoogle.com/intl/en_us/guide/how-to-approach-i18n#overview "Overview - How to approach internationalization | Market Finder | Think with Google"
+
+[UnicodeCldrCoreSpecUnicodeLanguageAndLocaleIdentifiers]: http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers "Unicode Language and Locale Identifiers - Core Specification | CLDR - Unicode Common Locale Data Repository | Unicode"
- ```html
-
Hello
-
-
Good bye
- ```
+[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: http://cldr.unicode.org/development/development-process/design-proposals/xmb "XMB | CLDR - Unicode Common Locale Data Repository | Unicode"
-The following shows the translation to French:
+[UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules "Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode"
+[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names "Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode"
- ```xml
-
- Hello
- Bonjour
-
- ```
+[W3Xml]: https://www.w3.org/XML "Extensible Markup Language (XML) | W3C"
-Both elements now use the same translation (`Bonjour`) because they were defined with the same custom ID:
+[WikipediaWikiXliff]: https://en.wikipedia.org/wiki/XLIFF "XLIFF | Wikipedia"
- ```html
-
Bonjour
-
-
Bonjour
- ```
+
-@reviewed 2020-04-10
\ No newline at end of file
+@reviewed 2021-08-17
diff --git a/aio/content/guide/inputs-outputs.md b/aio/content/guide/inputs-outputs.md
index b10223e65052..e15cf0302dc1 100644
--- a/aio/content/guide/inputs-outputs.md
+++ b/aio/content/guide/inputs-outputs.md
@@ -1,7 +1,7 @@
# Sharing data between child and parent directives and components
A common pattern in Angular is sharing data between a parent component and one or more child components.
-You can implement this pattern by using the `@Input()` and `@Output()` directives.
+To implement this pattern use the `@Input()` and `@Output()` decorators.
@@ -21,8 +21,8 @@ Consider the following hierarchy:
The `` serves as the context for the ``.
`@Input()` and `@Output()` give a child component a way to communicate with its parent component.
-`@Input()` allows a parent component to update data in the child component.
-Conversely, `@Output()` allows the child to send data to a parent component.
+`@Input()` lets a parent component update data in the child component.
+Conversely, `@Output()` lets the child send data to a parent component.
{@a input}
@@ -80,14 +80,14 @@ The binding source, the part to the right of the equal sign, is the data that th
### Watching for `@Input()` changes
-To watch for changes on an `@Input()` property, you can use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks).
+To watch for changes on an `@Input()` property, use `OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks).
See the [`OnChanges`](guide/lifecycle-hooks#onchanges) section of the [Lifecycle Hooks](guide/lifecycle-hooks) guide for more details and examples.
{@a output}
## Sending data to a parent component
-The `@Output()` decorator in a child component or directive allows data to flow from the child to the parent.
+The `@Output()` decorator in a child component or directive lets data flow from the child to the parent.
@@ -118,7 +118,7 @@ The following example features an `` where a user can enter a value and c
- The different parts of the above declaration are as follows:
+ The different parts of the preceding declaration are as follows:
* `@Output()`—a decorator function marking the property as a way for data to go from the child to the parent
* `newItemEvent`—the name of the `@Output()`
@@ -166,7 +166,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t
The `$event` contains the data that the user types into the `` in the child template UI.
- To see the `@Output()` working, you can add the following to the parent's template:
+ To see the `@Output()` working, add the following to the parent's template:
```html
@@ -180,7 +180,7 @@ The `addItem()` method takes an argument in the form of a string and then adds t
## Using `@Input()` and `@Output()` together
-You can use `@Input()` and `@Output()` on the same child component as follows:
+Use `@Input()` and `@Output()` on the same child component as follows:
diff --git a/aio/content/guide/interpolation.md b/aio/content/guide/interpolation.md
index 7e5098655b3d..69ad6d4babfe 100644
--- a/aio/content/guide/interpolation.md
+++ b/aio/content/guide/interpolation.md
@@ -1,7 +1,7 @@
# Text interpolation
-Text interpolation allows you to incorporate dynamic string values into your HTML templates.
-With interpolation, you can dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
+Text interpolation lets you incorporate dynamic string values into your HTML templates.
+Use interpolation to dynamically change what appears in an application view, such as displaying a custom greeting that includes the user's name.
@@ -18,7 +18,7 @@ To illustrate how interpolation works, consider an Angular component that contai
-You can use interpolation to display the value of this variable in the corresponding component template:
+Use interpolation to display the value of this variable in the corresponding component template:
@@ -55,7 +55,7 @@ With interpolation, Angular performs the following tasks:
-You can configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata.
+Configure the interpolation delimiter with the [interpolation](api/core/Component#interpolation) option in the `@Component()` metadata.
@@ -131,7 +131,7 @@ When using template expressions, follow these best practices:
* **Use short expressions**
Use property names or method calls whenever possible.
- Keep application and business logic in the component, where it is easier to develop and test.
+ Keep application and business logic in the component, where it is accessible to develop and test.
* **Quick execution**
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
index 30332a3786b1..6414baf01a4a 100644
--- a/aio/content/guide/pipes.md
+++ b/aio/content/guide/pipes.md
@@ -1,7 +1,7 @@
# Transforming Data Using Pipes
Use [pipes](guide/glossary#pipe "Definition of a pipe") to transform strings, currency amounts, dates, and other data for display.
-Pipes are simple functions you can use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
+Pipes are simple functions to use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.
@@ -27,7 +27,7 @@ The following are commonly used built-in pipes for data formatting:
-You can also create pipes to encapsulate custom transformations and use your custom pipes in template expressions.
+Create pipes to encapsulate custom transformations and use your custom pipes in template expressions.
## Prerequisites
@@ -64,12 +64,12 @@ The component's `birthday` value flows through the pipe operator, `|` to the [`d
## Transforming data with parameters and chained pipes
Use optional parameters to fine-tune a pipe's output.
-For example, you can use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter.
+For example, use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter.
The template expression `{{ amount | currency:'EUR' }}` transforms the `amount` to currency in euros.
Follow the pipe name (`currency`) with a colon (`:`) and the parameter value (`'EUR'`).
If the pipe accepts multiple parameters, separate the values with colons.
-For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. You can use any valid template expression as a parameter, such as a string literal or a component property.
+For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string. Use any valid template expression as a parameter, such as a string literal or a component property.
Some pipes require at least one parameter and allow more optional parameters, such as [`SlicePipe`](/api/common/SlicePipe "API reference for SlicePipe"). For example, `{{ slice:1:5 }}` creates a new array or string containing a subset of the elements starting with element `1` and ending with element `5`.
@@ -110,7 +110,7 @@ For `date` pipe format options, see [DatePipe](api/common/DatePipe "DatePipe API
### Example: Applying two formats by chaining pipes
-You can chain pipes so that the output of one pipe becomes the input to the next.
+Chain pipes so that the output of one pipe becomes the input to the next.
In the following example, chained pipes first apply a format to a date value, then convert the formatted date to uppercase characters.
The first tab for the `src/app/app.component.html` template chains `DatePipe` and `UpperCasePipe` to display the birthday as **APR 15, 1988**.
@@ -134,7 +134,7 @@ The second tab for the `src/app/app.component.html` template passes the `fullDat
## Creating pipes for custom data transformations
Create custom pipes to encapsulate transformations that are not provided with the built-in pipes.
-You can then use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.
+Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.
### Marking a class as a pipe
@@ -160,9 +160,9 @@ Angular invokes the `transform` method with the value of a binding as the first
### Example: Transforming a value exponentially
-In a game, you may want to implement a transformation that raises a value exponentially to increase a hero's power.
+In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power.
For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024.
-You can use a custom pipe for this transformation.
+Use a custom pipe for this transformation.
The following code example shows two component definitions:
@@ -261,7 +261,7 @@ In other words, given the same input, a pure function should always return the s
With a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects.
Angular can quickly determine if it can skip executing the pipe and updating the view.
-However, a pure pipe with an array as input may not work the way you want.
+However, a pure pipe with an array as input might not work the way you want.
To demonstrate this issue, change the previous example to filter the list of heroes to just those heroes who can fly.
Use the `FlyingHeroesPipe` in the `*ngFor` repeater as shown in the following code.
The tabs for the example show the following:
@@ -290,16 +290,16 @@ This happens because the code that adds a hero does so by pushing it onto the `h
The change detector ignores changes to elements of an array, so the pipe doesn't run.
The reason Angular ignores the changed array element is that the *reference* to the array hasn't changed.
-Since the array is the same, Angular does not update the display.
+Because the array is the same, Angular does not update the display.
One way to get the behavior you want is to change the object reference itself.
-You can replace the array with a new array containing the newly changed elements, and then input the new array to the pipe.
-In the above example, you can create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe.
+Replace the array with a new array containing the newly changed elements, and then input the new array to the pipe.
+In the preceding example, create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe.
To summarize, if you mutate the input array, the pure pipe doesn't execute.
If you *replace* the input array, the pipe executes and the display is updated.
-The above example demonstrates changing a component's code to accommodate a pipe.
+The preceding example demonstrates changing a component's code to accommodate a pipe.
To keep your component independent of HTML templates that use pipes, you can, as an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section.
@@ -341,7 +341,7 @@ The example shows that you don't have to change anything else—the only differe
You can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.
-As shown in the code below, only the pipe in the template changes.
+As shown in the following code, only the pipe in the template changes.
@@ -382,7 +382,7 @@ The following code example binds an observable of message strings
To [communicate with backend services using HTTP](/guide/http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server.
The asynchronous method sends an HTTP request, and returns an observable that emits the requested data for the response.
-As shown in the previous section, you can use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically.
+As shown in the previous section, use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically.
You can also create an impure pipe to make and cache an HTTP request.
Impure pipes are called whenever change detection runs for a component, which could be as often as every few milliseconds.
@@ -403,7 +403,7 @@ The tabs show the following:
-In the above example, a breakpoint on the pipe's request for data shows the following:
+In the preceding example, a breakpoint on the pipe's request for data shows the following:
* Each binding gets its own pipe instance.
* Each pipe instance caches its own URL and data and calls the server only once.
diff --git a/aio/content/guide/property-binding.md b/aio/content/guide/property-binding.md
index 5e63c648342f..b92a24598eb7 100644
--- a/aio/content/guide/property-binding.md
+++ b/aio/content/guide/property-binding.md
@@ -2,7 +2,7 @@
# Property binding
Property binding in Angular helps you set values for properties of HTML elements or directives.
-With property binding, you can do things such as toggle button functionality, set paths programmatically, and share values between components.
+Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.
@@ -77,7 +77,7 @@ You'd get this error:
Template parse errors:
- Can't bind to 'colspan' since it isn't a known native property
+ Can't bind to 'colspan' because it isn't a known built-in property
As the message says, the `
` element does not have a `colspan` property. This is true
@@ -191,7 +191,7 @@ The following binding pairs do the same thing.
-You can use either form when rendering data values as strings, though interpolation is preferable for readability.
+Use either form when rendering data values as strings, though interpolation is preferable for readability.
However, when setting an element property to a non-string data value, you must use property binding.
## What's next
diff --git a/aio/content/guide/releases.md b/aio/content/guide/releases.md
index 2850251fd2a7..f789dc379e9c 100644
--- a/aio/content/guide/releases.md
+++ b/aio/content/guide/releases.md
@@ -110,9 +110,8 @@ Version | Status | Released | Active Ends | LTS Ends
^12.0.0 | Active | May 12, 2021 | Nov 12, 2021 | Nov 12, 2022
^11.0.0 | LTS | Nov 11, 2020 | May 11, 2021 | May 11, 2022
^10.0.0 | LTS | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021
-^9.0.0 | LTS | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
-Angular versions v4, v5, v6, v7, and v8 are no longer under support.
+Angular versions v4, v5, v6, v7, v8, and v9 are no longer under support.
### LTS fixes
diff --git a/aio/content/guide/routing-overview.md b/aio/content/guide/routing-overview.md
index cde3543be722..dc17edc6e194 100644
--- a/aio/content/guide/routing-overview.md
+++ b/aio/content/guide/routing-overview.md
@@ -6,7 +6,7 @@ As users perform application tasks, they need to move between the different [vie
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.
-To explore a sample app featuring the router's primary features, see the .
+To explore a sample app featuring the router's primary features, see the .
## Prerequisites
@@ -34,9 +34,14 @@ Before creating a route, you should be familiar with the following:
Add more routing features to the Tour of Heroes tutorial.
-
\ No newline at end of file
+
diff --git a/aio/content/guide/schematics-authoring.md b/aio/content/guide/schematics-authoring.md
index 39a4fa1f981e..807a3b219de5 100644
--- a/aio/content/guide/schematics-authoring.md
+++ b/aio/content/guide/schematics-authoring.md
@@ -197,8 +197,7 @@ By using the long form, the schematic can provide more explicit formatting of th
"css",
"scss",
"sass",
- "less",
- "styl"
+ "less"
],
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
@@ -207,8 +206,7 @@ By using the long form, the schematic can provide more explicit formatting of th
{ "value": "css", "label": "CSS" },
{ "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
{ "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
- { "value": "less", "label": "Less [ http://lesscss.org/ ]" },
- { "value": "styl", "label": "Stylus [ https://stylus-lang.com/ ]" }
+ { "value": "less", "label": "Less [ http://lesscss.org/ ]" }
]
},
},
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index 8132fad343a9..fc87af1afb35 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -59,6 +59,8 @@ To systematically block XSS bugs, Angular treats all values as untrusted by defa
Unlike values to be used for rendering, Angular templates are considered trusted by default, and should be treated as executable code. Never generate templates by concatenating user input and template syntax. Doing this would enable attackers to [inject arbitrary code](https://en.wikipedia.org/wiki/Code_injection) into your application. To prevent these vulnerabilities, always use the default [AOT template compiler](/guide/security#offline-template-compiler) in production deployments.
+An additional layer of protection can be provided through the use of Content security policy and Trusted Types. These web platform features operate at the DOM level which is the most effective place to prevent XSS issues because they can't be bypassed using other, lower-level APIs. For this reason, we strongly encourage developers to take advantage of these features by configuring the [content security policy](#content-security-policy) for their application and enabling [trusted types enforcement](#trusted-types).
+
### Sanitization and security contexts
_Sanitization_ is the inspection of an untrusted value, turning it into a value that's safe to insert into
@@ -100,7 +102,7 @@ Angular recognizes the value as unsafe and automatically sanitizes it, which rem
### Direct use of the DOM APIs and explicit sanitization calls
-Built-in browser DOM APIs don't automatically protect you from security vulnerabilities.
+Unless you enforce Trusted Types, the built-in browser DOM APIs don't automatically protect you from security vulnerabilities.
For example, `document`, the node available through `ElementRef`, and many third-party APIs
contain unsafe methods. In the same way, if you interact with other libraries that manipulate
the DOM, you likely won't have the same automatic sanitization as with Angular interpolations.
@@ -169,6 +171,59 @@ technique to prevent XSS. To enable CSP, configure your web server to return an
[Web Fundamentals guide](https://developers.google.com/web/fundamentals/security/csp) on the
Google Developers website.
+{@a trusted-types}
+### Enforcing Trusted Types
+
+We recommend the use of [Trusted Types](https://w3c.github.io/webappsec-trusted-types/dist/spec/) as a way to help secure your applications from cross-site scripting attacks. Trusted Types is a [web platform](https://en.wikipedia.org/wiki/Web_platform)
+feature that can help you prevent cross-site scripting attacks by enforcing
+safer coding practices. Trusted Types can also help simplify the auditing of application code.
+
+
+
+Trusted Types might not yet be available in all browsers your application targets. In the case your Trusted-Types-enabled application runs in a browser that doesn't support Trusted Types, the functionality of the application will be preserved, and your application will be guarded against XSS by way of Angular's DomSanitizer. See [caniuse.com/trusted-types](https://caniuse.com/trusted-types) for the current browser support.
+
+
+
+To enforce Trusted Types for your application, you must configure your application's web server to emit HTTP headers with one of the following Angular policies:
+
+* `angular` - This policy is used in security-reviewed code that is internal to Angular, and is required for Angular to function when Trusted Types are enforced. Any inline template values or content sanitized by Angular is treated as safe by this policy.
+* `angular#unsafe-bypass` - This policy is used for applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypass security, such as `bypassSecurityTrustHtml`. Any application that uses these methods must enable this policy.
+* `angular#unsafe-jit` - This policy is used by the [JIT compiler](api/core/Compiler). You must enable this policy if your application interacts directly with the JIT compiler or is running in JIT mode using the [platform browser dynamic](api/platform-browser-dynamic/platformBrowserDynamic).
+
+You should configure the HTTP headers for Trusted Types in the following locations:
+
+* Production serving infrastructure
+* Angular CLI (`ng serve`), using the `headers` property in the `angular.json` file, for local development and end-to-end testing
+* Karma (`ng test`), using the `customHeaders` property in the `karma.config.js` file, for unit testing
+
+The following is an example of a header specifically configured for Trusted Types and Angular:
+
+
+Content-Security-Policy: trusted-types angular; require-trusted-types-for 'script';
+
+
+The following is an example of a header specifically configured for Trusted Types and Angular applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypasses security.
+
+
+Content-Security-Policy: trusted-types angular angular#unsafe-bypass; require-trusted-types-for 'script';
+
+
+The following is an example of a header specifically configured for Trusted Types and Angular applications using JIT:
+
+
+Content-Security-Policy: trusted-types angular angular#unsafe-jit; require-trusted-types-for 'script';
+
+
+
+
+Community contributions
+
+To learn more about troubleshooting Trusted Type configurations, the following resource might be helpful:
+
+[Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types](https://web.dev/trusted-types/#how-to-use-trusted-types)
+
+
+
{@a offline-template-compiler}
### Use the AOT template compiler
diff --git a/aio/content/guide/setup-local.md b/aio/content/guide/setup-local.md
index 799be7fda7b2..3d3188b30326 100644
--- a/aio/content/guide/setup-local.md
+++ b/aio/content/guide/setup-local.md
@@ -6,7 +6,7 @@ It includes information about prerequisites, installing the CLI, creating an ini
Try Angular without local setup
-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.
+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 for you to 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.
@@ -87,7 +87,7 @@ The CLI creates a new workspace and a simple Welcome app, ready to run.
## Run the application
-The Angular CLI includes a server, so that you can build and serve your app locally.
+The Angular CLI includes a server, for you to build and serve your app locally.
1. Navigate to the workspace folder, such as `my-app`.
@@ -118,6 +118,6 @@ If your installation and setup was successful, you should see a page similar to
* Work through the [Tour of Heroes Tutorial](tutorial), a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems.
-* To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment.
+* To learn more about using the Angular CLI, see the [CLI Overview](cli "CLI Overview"). In addition to creating the initial workspace and app scaffolding, use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment.
* For more information about the Angular files generated by `ng new`, see [Workspace and Project File Structure](guide/file-structure).
diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index d2c53bdf4fca..020916543e06 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -53,7 +53,7 @@ The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent t
## Single responsibility
Apply the
-single responsibility principle (SRP)
+single responsibility principle (SRP)
to all components, services, and other symbols.
This helps make the application cleaner, easier to read and maintain, and more testable.
diff --git a/aio/content/guide/svg-in-templates.md b/aio/content/guide/svg-in-templates.md
index ddeba5309eca..4f588f70bdf7 100644
--- a/aio/content/guide/svg-in-templates.md
+++ b/aio/content/guide/svg-in-templates.md
@@ -1,6 +1,6 @@
# SVG as templates
-You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics.
+You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. Use these features to dynamically generate interactive graphics.
diff --git a/aio/content/guide/template-reference-variables.md b/aio/content/guide/template-reference-variables.md
index fc0d91d8ee00..6421d467e3ab 100644
--- a/aio/content/guide/template-reference-variables.md
+++ b/aio/content/guide/template-reference-variables.md
@@ -1,7 +1,7 @@
# Template variables
Template variables help you use data from one part of a template in another part of the template.
-With template variables, you can perform tasks such as respond to user input or finely tune your application's forms.
+Use template variables to perform tasks such as respond to user input or finely tune your application's forms.
A template variable can refer to the following:
@@ -24,7 +24,7 @@ The following template variable, `#phone`, declares a `phone` variable on an `
-You can refer to a template variable anywhere in the component's template.
+Refer to a template variable anywhere in the component's template.
Here, a `
+ 
@@ -118,7 +118,7 @@ The following example features an `` where a user can enter a value and c