release: cut the zone.js-0.10.2 release (#32128)

PR Close #32128

.bazelrc

@@ -36,6 +36,22 @@ build --incompatible_strict_action_env
 run --incompatible_strict_action_env
 test --incompatible_strict_action_env
 
+###############################
+# Saucelabs support           #
+# Turn on these settings with #
+#  --config=saucelabs         #
+###############################
+
+# Expose SauceLabs environment to actions
+# These environment variables are needed by
+# web_test_karma to run on Saucelabs
+test:saucelabs --action_env=SAUCE_USERNAME
+test:saucelabs --action_env=SAUCE_ACCESS_KEY
+test:saucelabs --action_env=SAUCE_READY_FILE
+test:saucelabs --action_env=SAUCE_PID_FILE
+test:saucelabs --action_env=SAUCE_TUNNEL_IDENTIFIER
+test:saucelabs --define=KARMA_WEB_TEST_MODE=SL_REQUIRED
+
 ###############################
 # Release support             #
 # Turn on these settings with #

.circleci/bazel.rc

@@ -28,3 +28,14 @@ test --flaky_test_attempts=2
 
 # More details on failures
 build --verbose_failures=true
+
+# We have seen some flakiness in using TS workers on CircleCI
+# https://angular-team.slack.com/archives/C07DT5M6V/p1562693245183400
+# > failures like `ERROR: /home/circleci/ng/packages/core/test/BUILD.bazel:5:1:
+# > Compiling TypeScript (devmode) //packages/core/test:test_lib failed: Worker process did not return a WorkResponse:`
+# > I saw that issue a couple times today.
+# > Example job: https://circleci.com/gh/angular/angular/385517
+# We expect that TypeScript compilations will parallelize wider than the number of local cores anyway
+# so we should saturate remote workers with TS compilations
+build --strategy=AngularTemplateCompile=local
+build --strategy=TypeScriptCompile=local

.circleci/config.yml

@@ -11,14 +11,12 @@
 # needed for jobs that run tests without Bazel. Bazel runs tests with browsers that will be
 # fetched by the Webtesting rules. Therefore for jobs that run tests with Bazel, we don't need a
 # docker image with browsers pre-installed.
-# **NOTE 1**: Pin to exact images using an ID (SHA). See https://circleci.com/docs/2.0/circleci-images/#using-a-docker-image-id-to-pin-an-image-to-a-fixed-version.
-#             (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)
-# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
-# **NOTE 3**: If you change the version of the `*-browsers` docker image, make sure the
+# **NOTE 1**: If you change the version of the `*-browsers` docker image, make sure the
 #             `CI_CHROMEDRIVER_VERSION_ARG` env var (in `.circleci/env.sh`) points to a ChromeDriver
 #             version that is compatible with the Chrome version in the image.
-var_1: &default_docker_image circleci/node:10.16@sha256:75c05084fff4afa3683a03c5a04a4a3ad95c536ff2439d8fe14e7e1f5c58b09a
-var_2: &browsers_docker_image circleci/node:10.16-browsers@sha256:d2a96fe1cbef51257ee626b5f645e64dade3e886f00ba9cb7e8ea65b4efe8db1
+# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
+var_1: &default_docker_image circleci/node:10.16
+var_2: &browsers_docker_image circleci/node:10.16-browsers
 # We don't want to include the current branch name in the cache key because that would prevent
 # PRs from being able to restore the cache since the branch names are always different for PRs.
 # The cache key should only consist of dynamic values that change whenever something in the
@@ -37,7 +35,7 @@ var_4: &init_environment
     # Overwrite the yarn installed in the docker container with our own version.
     command: |
       ./.circleci/env.sh
-      ourYarn=$(realpath ./third_party/github.com/yarnpkg/yarn/releases/download/v1.17.3/bin/yarn.js)
+      ourYarn=$(realpath ./third_party/github.com/yarnpkg/yarn/releases/download/v1.13.0/bin/yarn.js)
       sudo chmod a+x $ourYarn
       sudo ln -fs $ourYarn /usr/local/bin/yarn
       echo "Yarn version: $(yarn --version)"
@@ -145,7 +143,7 @@ var_14: &notify_dev_infra_on_fail
 
 # Cache key for the Material unit tests job. **Note** when updating the SHA in the cache keys,
 # also update the SHA for the "MATERIAL_REPO_COMMIT" environment variable.
-var_15: &material_unit_tests_cache_key v4-angular-material-18b9ef3f5529f0fa8f034944681486447af7b879
+var_15: &material_unit_tests_cache_key v4-angular-material-097f4335a4e0b6e6b579829ae3a9cffce6292d2b
 var_16: &material_unit_tests_cache_key_short v4-angular-material
 
 version: 2
@@ -189,7 +187,6 @@ jobs:
               (echo -e "\n.bzl files have lint errors. Please run ''yarn bazel:lint-fix''"; exit 1)'
 
       - run: yarn gulp lint
-      - run: node tools/verify-codeownership
 
   test:
     <<: *job_defaults
@@ -201,6 +198,13 @@ jobs:
       # Setup remote execution and run RBE-compatible tests.
       - *setup_bazel_remote_execution
       - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
+      - run: mkdir ~/testlogs
+      - run: cp -Lr dist/testlogs/* ~/testlogs
+      - store_test_results:
+          # Bazel always writes test.xml files under this directory
+          path: ~/testlogs
+      - store_artifacts:
+          path: ~/testlogs
 
   # Temporary job to test what will happen when we flip the Ivy flag to true
   test_ivy_aot:
@@ -251,21 +255,24 @@ jobs:
       - *attach_workspace
       - *init_environment
       - *setup_circleci_bazel_config
-      - *setup_bazel_remote_execution
       - run:
-          name: Run Bazel tests in saucelabs
-          # All web tests are contained within a single //:test_web_all target for Saucelabs
-          # as running each set of tests as a separate target will attempt to acquire too
-          # many browsers on Saucelabs (7 per target currently) and some tests will always
-          # fail to acquire browsers. For example:
-          # 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
-          # //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
-          command:  |
-            ./scripts/saucelabs/run-bazel-via-tunnel.sh \
-              --tunnel-id angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX} \
-              --username $SAUCE_USERNAME \
-              --key $(echo $SAUCE_ACCESS_KEY | rev) \
-              yarn bazel test //:test_web_all
+          name: Preparing environment for running tests on Saucelabs.
+          command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - run:
+          name: Starting Saucelabs tunnel
+          command: ./scripts/saucelabs/start-tunnel.sh
+          background: true
+        # Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
+        # too early without Saucelabs not being ready.
+      - run: ./scripts/saucelabs/wait-for-tunnel.sh
+        # All web tests are contained within a single //:test_web_all target for Saucelabs
+        # as running each set of tests as a separate target will attempt to acquire too
+        # many browsers on Saucelabs (7 per target currently) and some tests will always
+        # fail to acquire browsers. For example:
+        # 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
+        # //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
+      - run: yarn bazel test --config=saucelabs //:test_web_all
+      - run: ./scripts/saucelabs/stop-tunnel.sh
       - *notify_dev_infra_on_fail
 
   test_aio:
@@ -370,7 +377,7 @@ jobs:
         # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL} --retry 2
+      - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   test_docs_examples_ivy:
     <<: *job_defaults
@@ -396,7 +403,7 @@ jobs:
         # Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --ivy --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL} --retry 2
+      - run: yarn --cwd aio example-e2e --setup --local --ivy --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:
@@ -666,10 +673,7 @@ workflows:
   version: 2
   default_workflow:
     jobs:
-      - setup:
-          filters:
-            branches:
-              ignore: g3
+      - setup
       - lint:
           requires:
             - setup
@@ -780,3 +784,9 @@ workflows:
             branches:
               only:
                 - master
+
+# TODO:
+# - don't build the g3 branch
+# - verify that we are bootstrapping with the right yarn version coming from the docker image
+# - check local chrome version pulled from docker image
+# - remove /tools/ngcontainer

.circleci/env.sh

@@ -19,20 +19,16 @@ setPublicVar PROJECT_ROOT "$projectDir";
 setPublicVar CI_AIO_MIN_PWA_SCORE "95";
 # This is the branch being built; e.g. `pull/12345` for PR builds.
 setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
-setPublicVar CI_BUILD_URL "$CIRCLE_BUILD_URL";
 # ChromeDriver version compatible with the Chrome version included in the docker image used in
 # `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
 # This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
 # `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
 setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 75.0.3770.90";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
-# `CI_COMMIT_RANGE` is only used on push builds (a.k.a. non-PR, non-scheduled builds and rerun
-# workflows of such builds).
-# NOTE: With [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) enabled,
-#       `CIRCLE_COMPARE_URL` is no longer available and the commit range cannot be reliably
-#       detected. Fall back to only considering the last commit (which is accurate in the majority
-#       of cases for push builds).
-setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || echo "$CIRCLE_SHA1~1...$CIRCLE_SHA1"`";
+# `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
+# retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and
+# rerun workflows of such builds). That is fine, since we only need it in push builds.
+setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || node $getCommitRangePath "$CIRCLE_BUILD_NUM" "$CIRCLE_COMPARE_URL"`";
 setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
 setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
@@ -65,7 +61,6 @@ else
   setPublicVar SAUCE_USERNAME "angular-ci";
   setSecretVar SAUCE_ACCESS_KEY "9b988f434ff8-fbca-8aa4-4ae3-35442987";
 fi
-# TODO(josephperrott): Remove environment variables once all saucelabs tests are via bazel method.
 setPublicVar SAUCE_LOG_FILE /tmp/angular/sauce-connect.log
 setPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock
 setPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock
@@ -84,7 +79,7 @@ setPublicVar MATERIAL_REPO_TMP_DIR "/tmp/material2"
 setPublicVar MATERIAL_REPO_URL "https://github.com/angular/material2.git"
 setPublicVar MATERIAL_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI "config.yml".
-setPublicVar MATERIAL_REPO_COMMIT "18b9ef3f5529f0fa8f034944681486447af7b879"
+setPublicVar MATERIAL_REPO_COMMIT "097f4335a4e0b6e6b579829ae3a9cffce6292d2b"
 
 # Source `$BASH_ENV` to make the variables available immediately.
 source $BASH_ENV;

.circleci/get-commit-range.js

@@ -10,13 +10,6 @@
  * format of the `CIRCLE_COMPARE_URL` environment variable, or by retrieving the equivalent of
  * `CIRCLE_COMPARE_URL` for jobs that are part of a rerun workflow and extracting it from there.
  *
- * > !!! WARNING !!!
- * > !!
- * > !! When [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) is enabled, the
- * > !! `CIRCLE_COMPARE_URL` environment variable is not available at all and this script does not
- * > !! work.
- * > !!!!!!!!!!!!!!!
- *
  * **Context:**
  * CircleCI sets the `CIRCLE_COMPARE_URL` environment variable (from which we can extract the commit
  * range) on push builds (a.k.a. non-PR, non-scheduled builds). Yet, when a workflow is rerun
@@ -28,7 +21,7 @@
  * (undocumented) fact that the workspace ID happens to be the same as the workflow ID that first
  * created it.
  *
- * For example, for a job on push build workflows, the CircleCI API will return data that look like:
+ * For example, for a job on push build workflow, the CircleCI API will return data that look like:
  * ```js
  * {
  *   compare: 'THE_COMPARE_URL_WE_ARE_LOOKING_FOR',

.github/CODEOWNERS

@@ -44,19 +44,23 @@
 #  alxhub - Alex Rickabaugh
 #  AndrewKushnir - Andrew Kushnir
 #  andrewseguin - Andrew Seguin
-#  atscott - Andrew Scott
+#  benlesh - Ben Lesh
+#  brandonroberts - Brandon Roberts
 #  devversion - Paul Gschwendtner
 #  filipesilva - Filipe Silva
 #  gkalpak - George Kalpakas
+#  hansl - Hans Larsen
 #  IgorMinar - Igor Minar
+#  jasonaden - Jason Aden
+#  jenniferfell - Jennifer Fell
 #  JiaLiPassion - Jia Li
 #  josephperrott - Joey Perrott
-#  kapunahelewong - Kapunahele Wong
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
 #  mgechev - Minko Gechev
 #  mhevery - Misko Hevery
+#  ocombe - Olivier Combe
 #  petebacondarwin - Pete Bacon Darwin
 #  pkozlowski-opensource - Pawel Kozlowski
 #  robwormald - Rob Wormald
@@ -84,9 +88,9 @@
 #  (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
 #
 #   - IgorMinar
-#   - josephperrott
 #   - kara
 #   - mhevery
+#   - alexeagle
 
 
 # ===========================================================
@@ -95,8 +99,9 @@
 #  Used for approving minor documentation-only changes that don't require engineering review.
 #  (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
 #
+#   - brandonroberts
 #   - gkalpak
-#   - kapunahelewong
+#   - jenniferfell
 #   - petebacondarwin
 
 
@@ -121,9 +126,10 @@
 #  @angular/tools-cli
 # ===========================================================
 #
+#   - alexeagle
 #   - filipesilva
+#   - hansl
 #   - mgechev
-#   - vikerman
 
 
 # ===========================================================
@@ -174,7 +180,8 @@
 #  @angular/fw-forms
 # ===========================================================
 #
-#   - AndrewKushnir
+#   - kara
+#   - jasonaden
 
 
 # ===========================================================
@@ -196,7 +203,7 @@
 #  @angular/fw-router
 # ===========================================================
 #
-#   - atscott
+#   - jasonaden
 
 
 # ===========================================================
@@ -214,6 +221,7 @@
 #
 #   - gkalpak
 #   - petebacondarwin
+#   - jasonaden
 
 
 # ===========================================================
@@ -229,7 +237,7 @@
 #
 #   - AndrewKushnir
 #   - mhevery
-#   - petebacondarwin
+#   - ocombe
 #   - vikerman
 
 
@@ -261,8 +269,8 @@
 #  @angular/fw-integration
 # ===========================================================
 #
+#   - alexeagle
 #   - IgorMinar
-#   - josephperrott
 #   - mhevery
 
 
@@ -270,6 +278,7 @@
 #  @angular/docs-infra
 # ===========================================================
 #
+#   - brandonroberts
 #   - gkalpak
 #   - IgorMinar
 #   - petebacondarwin
@@ -279,6 +288,8 @@
 #  @angular/fw-docs-intro
 # ===========================================================
 #
+#   - jenniferfell
+#   - brandonroberts
 #   - IgorMinar
 #   - stephenfluin
 
@@ -287,15 +298,16 @@
 #  @angular/fw-docs-observables
 # ===========================================================
 #
-#   - alxhub
+#   - benlesh
+#   - jasonaden
 
 
 # ===========================================================
 #  @angular/fw-docs-packaging
 # ===========================================================
 #
+#   - alexeagle
 #   - IgorMinar
-#   - vikerman
 
 
 # ===========================================================
@@ -303,9 +315,10 @@
 # ===========================================================
 #
 #   - alan-agius4
+#   - alexeagle
+#   - hansl
 #   - IgorMinar
 #   - mgechev
-#   - vikerman
 
 
 # ===========================================================
@@ -313,9 +326,11 @@
 # ===========================================================
 #
 #   - alan-agius4
+#   - alexeagle
+#   - hansl
 #   - IgorMinar
 #   - mgechev
-#   - vikerman
+
 
 
 # ===========================================================
@@ -334,9 +349,10 @@
 
 
 # ===========================================================
-#  @angular/dev-infra-framework
+#  @angular/fw-dev-infra
 # ===========================================================
 #
+#   - alexeagle
 #   - devversion
 #   - filipesilva
 #   - gkalpak
@@ -394,7 +410,6 @@
 # ================================================
 
 /packages/bazel/**                                              @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/bazel.md                                     @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -404,11 +419,8 @@
 # ================================================
 
 /packages/compiler/**                                           @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/compiler/**                                  @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/compiler-cli/**                                       @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/angular-compiler-options.md                  @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/aot-compiler.md                              @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/aot-metadata-errors.md                       @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -427,7 +439,6 @@
 # ================================================
 
 /packages/compiler-cli/src/ngtools/**                           @angular/tools-cli @angular/framework-global-approvers
-/aio/content/guide/cli-builder.md                               @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/ivy.md                                       @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/web-worker.md                                @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -443,18 +454,12 @@
 # ================================================
 
 /packages/core/**                                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/core/**                                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/common/**                                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser/**                                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/platform-browser/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser-dynamic/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker/**                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker-dynamic/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/examples/common/**                                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/docs/**                                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-
-/aio/content/guide/accessibility.md                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/accessibility/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/architecture-components.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/architecture-modules.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -511,8 +516,6 @@
 
 /aio/content/guide/hierarchical-dependency-injection.md         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/hierarchical-dependency-injection/**      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/providers-viewproviders/**                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/resolution-modifiers/**                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/lazy-loading-ngmodules.md                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/lazy-loading-ngmodules/**                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -547,12 +550,11 @@
 /aio/content/examples/attribute-binding/**                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/two-way-binding/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/built-in-directives/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/built-in-directives/**                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-reference-variables/**           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/inputs-outputs/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/inputs-outputs/**                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-expression-operators/**          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+
 /aio/content/guide/pipes.md                                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/pipes/**                                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/pipes/**                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -585,7 +587,6 @@
 
 /packages/common/http/**                                        @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/http/**                                               @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/http/**                                      @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/http.md                                      @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/http/**                                   @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/http/**                               @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -608,7 +609,6 @@
 # ================================================
 
 /packages/forms/**                                              @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/forms/**                                     @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/forms.md                                     @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/forms/**                                  @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/forms/**                              @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -652,7 +652,6 @@
 # ================================================
 
 /packages/router/**                                             @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/router/**                                    @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/router.md                                    @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/router/**                                 @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/router/**                             @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -664,7 +663,6 @@
 # ================================================
 
 /packages/service-worker/**                                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/service-worker/**                            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-getting-started.md            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/service-worker-getting-started/**         @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/app-shell.md                                 @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -691,7 +689,6 @@
 /aio/content/examples/upgrade-phonecat-2-hybrid/**              @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/upgrade-phonecat-3-final/**               @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/upgrade-performance.md                       @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/upgrade-setup.md                             @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/ajs-quick-reference.md                       @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/ajs-quick-reference/**                    @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -729,6 +726,7 @@ testing/**                                                      @angular/fw-test
 /aio/content/examples/i18n/**                                   @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
+
 # ================================================
 #  @angular security
 # ================================================
@@ -779,6 +777,7 @@ testing/**                                                      @angular/fw-test
 /aio/tools/**                                                   @angular/docs-infra @angular/framework-global-approvers
 
 # Hidden docs
+/aio/content/guide/change-log.md                                @angular/docs-infra @angular/framework-global-approvers
 /aio/content/guide/docs-style-guide.md                          @angular/docs-infra @angular/framework-global-approvers
 /aio/content/examples/docs-style-guide/**                       @angular/docs-infra @angular/framework-global-approvers
 /aio/content/images/guide/docs-style-guide/**                   @angular/docs-infra @angular/framework-global-approvers
@@ -791,8 +790,9 @@ testing/**                                                      @angular/fw-test
 #  Docs: getting started & tutorial
 # ================================================
 
-/aio/content/guide/setup-local.md                               @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/setup-local/**                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/quickstart.md                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/cli-quickstart/**                         @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/cli-quickstart/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/tutorial/**                                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/toh/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/toh-pt0/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -804,8 +804,8 @@ testing/**                                                      @angular/fw-test
 /aio/content/examples/toh-pt6/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/getting-started-v0/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/getting-started/**                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/start/**                                           @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/start/**                              @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/getting-started/**                                 @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/getting-started/**                    @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 # ================================================
@@ -831,19 +831,17 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/npm-packages.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/browser-support.md                           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/typescript-configuration.md                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/setup.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/setup/**                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/build.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/build/**                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/deployment.md                                @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/deployment/**                         @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/file-structure.md                            @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/releases.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/updating.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/workspace-config.md                          @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/deprecations.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-renderer.md                        @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-undecorated-classes.md             @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-dynamic-flag.md                        @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 
 
 # ================================================
@@ -880,38 +878,44 @@ testing/**                                                      @angular/fw-test
 
 
 # ================================================
-#  Build, CI & Dev-infra Owners
+#  Build & CI Owners
 # ================================================
 
-/*                                                              @angular/dev-infra-framework
-/.buildkite/**                                                  @angular/dev-infra-framework
-/.circleci/**                                                   @angular/dev-infra-framework
-/.devcontainer/**                                               @angular/dev-infra-framework
-/.github/**                                                     @angular/dev-infra-framework
-/.vscode/**                                                     @angular/dev-infra-framework
-/docs/BAZEL.md                                                  @angular/dev-infra-framework
-/packages/*                                                     @angular/dev-infra-framework
-/packages/examples/test-utils/**                                @angular/dev-infra-framework
-/packages/private/**                                            @angular/dev-infra-framework
-/scripts/**                                                     @angular/dev-infra-framework
-/third_party/**                                                 @angular/dev-infra-framework
-/tools/build/**                                                 @angular/dev-infra-framework
-/tools/cjs-jasmine/**                                           @angular/dev-infra-framework
-/tools/gulp-tasks/**                                            @angular/dev-infra-framework
-/tools/ngcontainer/**                                           @angular/dev-infra-framework
-/tools/npm/**                                                   @angular/dev-infra-framework
-/tools/npm_workspace/**                                         @angular/dev-infra-framework
-/tools/public_api_guard/**                                      @angular/dev-infra-framework
-/tools/rxjs/**                                                  @angular/dev-infra-framework
-/tools/source-map-test/**                                       @angular/dev-infra-framework
-/tools/symbol-extractor/**                                      @angular/dev-infra-framework
-/tools/testing/**                                               @angular/dev-infra-framework
-/tools/ts-api-guardian/**                                       @angular/dev-infra-framework
-/tools/tslint/**                                                @angular/dev-infra-framework
-/tools/validate-commit-message/**                               @angular/dev-infra-framework
-/tools/yarn/**                                                  @angular/dev-infra-framework
-/tools/*                                                        @angular/dev-infra-framework
-*.bzl                                                           @angular/dev-infra-framework
+/*                                                              @angular/fw-dev-infra
+/.buildkite/**                                                  @angular/fw-dev-infra
+/.circleci/**                                                   @angular/fw-dev-infra
+/.devcontainer/**                                               @angular/fw-dev-infra
+/.github/**                                                     @angular/fw-dev-infra
+/.vscode/**                                                     @angular/fw-dev-infra
+/docs/BAZEL.md                                                  @angular/fw-dev-infra
+/packages/*                                                     @angular/fw-dev-infra
+/scripts/**                                                     @angular/fw-dev-infra
+/third_party/**                                                 @angular/fw-dev-infra
+/tools/build/**                                                 @angular/fw-dev-infra
+/tools/cjs-jasmine/**                                           @angular/fw-dev-infra
+/tools/gulp-tasks/**                                            @angular/fw-dev-infra
+/tools/ngcontainer/**                                           @angular/fw-dev-infra
+/tools/npm/**                                                   @angular/fw-dev-infra
+/tools/npm_workspace/**                                         @angular/fw-dev-infra
+/tools/public_api_guard/**                                      @angular/fw-dev-infra
+/tools/rxjs/**                                                  @angular/fw-dev-infra
+/tools/source-map-test/**                                       @angular/fw-dev-infra
+/tools/symbol-extractor/**                                      @angular/fw-dev-infra
+/tools/testing/**                                               @angular/fw-dev-infra
+/tools/ts-api-guardian/**                                       @angular/fw-dev-infra
+/tools/tslint/**                                                @angular/fw-dev-infra
+/tools/validate-commit-message/**                               @angular/fw-dev-infra
+/tools/yarn/**                                                  @angular/fw-dev-infra
+/tools/*
+*.bzl                                                           @angular/fw-dev-infra
+
+
+
+# ================================================
+#  Material CI
+# ================================================
+
+/tools/material-ci/**                                           @angular/fw-core @angular/framework-global-approvers
 
 
 
@@ -927,14 +931,6 @@ testing/**                                                      @angular/fw-test
 
 
 
-# ================================================
-#  Special cases
-# ================================================
-
-/aio/content/guide/static-query-migration.md                    @kara @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-
-
-
 # ================================================
 #  CODEOWNERS Owners owners ...
 # ================================================

CHANGELOG.md

@@ -1,63 +1,18 @@
-<a name="8.2.9"></a>
-## [8.2.9](https://github.com/angular/angular/compare/8.2.8...8.2.9) (2019-10-02)
+<a name="9.0.0-next.2"></a>
+# [9.0.0-next.2](https://github.com/angular/angular/compare/9.0.0-next.1...9.0.0-next.2) (2019-08-12)
 
 
 ### Bug Fixes
 
-* **upgrade:** fix AngularJsUrlCodec to support Safari ([#32959](https://github.com/angular/angular/issues/32959)) ([57457fb](https://github.com/angular/angular/commit/57457fb))
+* **bazel:** disable treeshaking when generating FESM and UMD bundles ([#32069](https://github.com/angular/angular/issues/32069)) ([4f37487](https://github.com/angular/angular/commit/4f37487))
+* **compiler:** do not remove whitespace wrapping i18n expansions ([#31962](https://github.com/angular/angular/issues/31962)) ([0ddf0c4](https://github.com/angular/angular/commit/0ddf0c4))
+* **ivy:** reuse compilation scope for incremental template changes. ([#31932](https://github.com/angular/angular/issues/31932)) ([eb5412d](https://github.com/angular/angular/commit/eb5412d)), closes [#31654](https://github.com/angular/angular/issues/31654)
 
 
 
-<a name="8.2.8"></a>
-## [8.2.8](https://github.com/angular/angular/compare/8.2.7...8.2.8) (2019-09-25)
+### Performance Improvements
 
-This release contains various API docs improvements.
-
-
-
-<a name="8.2.7"></a>
-## [8.2.7](https://github.com/angular/angular/compare/8.2.6...8.2.7) (2019-09-18)
-
-
-### Bug Fixes
-
-* **bazel:** ng_package(data) should support non-text files ([#32721](https://github.com/angular/angular/issues/32721)) ([ba1ef6b](https://github.com/angular/angular/commit/ba1ef6b))
-* **compiler-cli:** fix typo in diagnostic template info. ([#32684](https://github.com/angular/angular/issues/32684)) ([947c076](https://github.com/angular/angular/commit/947c076)), closes [#32662](https://github.com/angular/angular/issues/32662)
-* **language-service:** cache module resolution ([#32483](https://github.com/angular/angular/issues/32483)) ([1c5b157](https://github.com/angular/angular/commit/1c5b157))
-
-
-
-<a name="8.2.6"></a>
-## [8.2.6](https://github.com/angular/angular/compare/8.2.5...8.2.6) (2019-09-11)
-
-This release contains various API docs improvements.
-
-
-
-<a name="8.2.5"></a>
-## [8.2.5](https://github.com/angular/angular/compare/8.2.4...8.2.5) (2019-09-04)
-
-
-### Bug Fixes
-
-* **common:** HttpParams fromObject accepts ReadonlyArray<string> ([#31072](https://github.com/angular/angular/issues/31072)) ([b3ea698](https://github.com/angular/angular/commit/b3ea698)), closes [#28452](https://github.com/angular/angular/issues/28452)
-
-
-
-<a name="8.2.4"></a>
-## [8.2.4](https://github.com/angular/angular/compare/8.2.3...8.2.4) (2019-08-28)
-
-This release contains various API docs improvements.
-
-
-
-<a name="8.2.3"></a>
-## [8.2.3](https://github.com/angular/angular/compare/8.2.2...8.2.3) (2019-08-21)
-
-
-### Bug Fixes
-
-* **bazel:** pin `[@microsoft](https://github.com/microsoft)/api-extractor` ([#32187](https://github.com/angular/angular/issues/32187)) ([a7b9478](https://github.com/angular/angular/commit/a7b9478))
+* **ivy:** don't read global state when interpolated values don't change ([#32093](https://github.com/angular/angular/issues/32093)) ([6eb9c2f](https://github.com/angular/angular/commit/6eb9c2f))
 
 
 
@@ -70,6 +25,18 @@ This release contains various API docs improvements.
 * **bazel:** disable treeshaking when generating FESM and UMD bundles ([#32069](https://github.com/angular/angular/issues/32069)) ([3420d29](https://github.com/angular/angular/commit/3420d29))
 
 
+<a name="9.0.0-next.1"></a>
+# [9.0.0-next.1](https://github.com/angular/angular/compare/9.0.0-next.0...9.0.0-next.1) (2019-08-08)
+
+
+### Bug Fixes
+
+* **language-service:** getSourceFile() should only be called on TS files ([#31920](https://github.com/angular/angular/issues/31920)) ([e8b8f6d](https://github.com/angular/angular/commit/e8b8f6d))
+* **language-service:** Make Definition and QuickInfo compatible with TS LS ([#31972](https://github.com/angular/angular/issues/31972)) ([a8e2ee1](https://github.com/angular/angular/commit/a8e2ee1))
+* **upgrade:** compile downgraded components synchronously (if possible) ([#31840](https://github.com/angular/angular/issues/31840)) ([c1ae612](https://github.com/angular/angular/commit/c1ae612)), closes [#27217](https://github.com/angular/angular/issues/27217) [#30330](https://github.com/angular/angular/issues/30330)
+
+
+
 <a name="8.2.1"></a>
 ## [8.2.1](https://github.com/angular/angular/compare/8.2.0...8.2.1) (2019-08-08)
 
@@ -80,38 +47,47 @@ This release contains various API docs improvements.
 
 
 
+<a name="9.0.0-next.0"></a>
+# [9.0.0-next.0](https://github.com/angular/angular/compare/8.2.0-next.2...9.0.0-next.0) (2019-07-31)
+
+* Ivy related improvements and fixes
+
+
 <a name="8.2.0"></a>
 # [8.2.0](https://github.com/angular/angular/compare/8.2.0-rc.0...8.2.0) (2019-07-31)
 
 
-### Bug Fixes
-
-* **core:** DebugElement.listeners not cleared on destroy ([#31820](https://github.com/angular/angular/issues/31820)) ([46b160e](https://github.com/angular/angular/commit/46b160e))
-
-
-
-<a name="8.2.0-rc.0"></a>
-# [8.2.0-rc.0](https://github.com/angular/angular/compare/8.2.0-next.2...8.2.0-rc.0) (2019-07-26)
-
-
-### Bug Fixes
-
-* **bazel:** increase memory limit of ngc under bazel from 2 to 4 GB ([#31784](https://github.com/angular/angular/issues/31784)) ([5a8eb92](https://github.com/angular/angular/commit/5a8eb92))
-* **core:** allow Z variations of CSS transforms in sanitizer ([#29264](https://github.com/angular/angular/issues/29264)) ([78e7fdd](https://github.com/angular/angular/commit/78e7fdd))
-* **elements:** handle falsy initial value ([#31604](https://github.com/angular/angular/issues/31604)) ([7151eae](https://github.com/angular/angular/commit/7151eae)), closes [angular/angular#30834](https://github.com/angular/angular/issues/30834)
-* **platform-browser:** debug element query predicates not compatible with strictFunctionTypes ([#30993](https://github.com/angular/angular/issues/30993)) ([10a1e19](https://github.com/angular/angular/commit/10a1e19))
-
-
 ### Features
 
+* **core:** TypeScript 3.5 support ([#31615](https://github.com/angular/angular/issues/31615)) ([6ece7db](https://github.com/angular/angular/commit/6ece7db))
+* **core:** add automatic migration from Renderer to Renderer2 ([#30936](https://github.com/angular/angular/issues/30936)) ([c095597](https://github.com/angular/angular/commit/c095597))
 * **bazel:** compile targets used for indexing by Kythe with Ivy ([#31786](https://github.com/angular/angular/issues/31786)) ([82055b2](https://github.com/angular/angular/commit/82055b2))
 * **upgrade:** support $element in upgraded component template/templateUrl functions ([#31637](https://github.com/angular/angular/issues/31637)) ([29e1c53](https://github.com/angular/angular/commit/29e1c53))
+* **bazel:** allow passing a custom bazel compiler host to ngc compile ([#31341](https://github.com/angular/angular/issues/31341)) ([a29dc96](https://github.com/angular/angular/commit/a29dc96))
+* **bazel:** allow passing and rewriting an old bazel host ([#31381](https://github.com/angular/angular/issues/31381)) ([11a208f](https://github.com/angular/angular/commit/11a208f)), closes [#31341](https://github.com/angular/angular/issues/31341)
 
 
 ### Performance Improvements
 
 * **compiler:** avoid copying from prototype while cloning an object ([#31638](https://github.com/angular/angular/issues/31638)) ([24ca582](https://github.com/angular/angular/commit/24ca582)), closes [#31627](https://github.com/angular/angular/issues/31627)
 
+### Bug Fixes
+
+* **core:** DebugElement.listeners not cleared on destroy ([#31820](https://github.com/angular/angular/issues/31820)) ([46b160e](https://github.com/angular/angular/commit/46b160e))
+ * **bazel:** increase memory limit of ngc under bazel from 2 to 4 GB ([#31784](https://github.com/angular/angular/issues/31784)) ([5a8eb92](https://github.com/angular/angular/commit/5a8eb92))
+* **core:** allow Z variations of CSS transforms in sanitizer ([#29264](https://github.com/angular/angular/issues/29264)) ([78e7fdd](https://github.com/angular/angular/commit/78e7fdd))
+* **elements:** handle falsy initial value ([#31604](https://github.com/angular/angular/issues/31604)) ([7151eae](https://github.com/angular/angular/commit/7151eae)), closes [angular/angular#30834](https://github.com/angular/angular/issues/30834)
+* **platform-browser:** debug element query predicates not compatible with strictFunctionTypes ([#30993](https://github.com/angular/angular/issues/30993)) ([10a1e19](https://github.com/angular/angular/commit/10a1e19))
+* use the correct WTF array to iterate over ([#31208](https://github.com/angular/angular/issues/31208)) ([9204de9](https://github.com/angular/angular/commit/9204de9))
+* **bazel:** pass custom bazel compiler host rather than rewriting one ([#31496](https://github.com/angular/angular/issues/31496)) ([0c61a35](https://github.com/angular/angular/commit/0c61a35))
+* **compiler-cli:** Return original sourceFile instead of redirected sourceFile from getSourceFile ([#26036](https://github.com/angular/angular/issues/26036)) ([3166cff](https://github.com/angular/angular/commit/3166cff)), closes [#22524](https://github.com/angular/angular/issues/22524)
+* **language-service:** Eagarly initialize data members ([#31577](https://github.com/angular/angular/issues/31577)) ([0110de2](https://github.com/angular/angular/commit/0110de2))
+* **bazel:** revert location of xi18n outputs to bazel-genfiles ([#31410](https://github.com/angular/angular/issues/31410)) ([1d3e227](https://github.com/angular/angular/commit/1d3e227))
+* **compiler:** give ASTWithSource its own visit method ([#31347](https://github.com/angular/angular/issues/31347)) ([6aaca21](https://github.com/angular/angular/commit/6aaca21))
+* **core:** handle `undefined` meta in `injectArgs` ([#31333](https://github.com/angular/angular/issues/31333)) ([80ccd6c](https://github.com/angular/angular/commit/80ccd6c)), closes [CLI #14888](https://github.com/angular/angular-cli/issues/14888)
+* **service-worker:** cache opaque responses in data groups with `freshness` strategy ([#30977](https://github.com/angular/angular/issues/30977)) ([d7be38f](https://github.com/angular/angular/commit/d7be38f)), closes [#30968](https://github.com/angular/angular/issues/30968)
+* **service-worker:** cache opaque responses when requests exceeds timeout threshold ([#30977](https://github.com/angular/angular/issues/30977)) ([93abc35](https://github.com/angular/angular/commit/93abc35))
+
 
 
 <a name="8.1.3"></a>
@@ -128,17 +104,6 @@ This release contains various API docs improvements.
 * **compiler:** avoid copying from prototype while cloning an object ([#31638](https://github.com/angular/angular/issues/31638)) ([1f3daa0](https://github.com/angular/angular/commit/1f3daa0)), closes [#31627](https://github.com/angular/angular/issues/31627)
 
 
-<a name="8.2.0-next.2"></a>
-# [8.2.0-next.2](https://github.com/angular/angular/compare/8.2.0-next.1...8.2.0-next.2) (2019-07-17)
-
-
-### Bug Fixes
-
-* use the correct WTF array to iterate over ([#31208](https://github.com/angular/angular/issues/31208)) ([9204de9](https://github.com/angular/angular/commit/9204de9))
-* **bazel:** pass custom bazel compiler host rather than rewriting one ([#31496](https://github.com/angular/angular/issues/31496)) ([0c61a35](https://github.com/angular/angular/commit/0c61a35))
-* **compiler-cli:** Return original sourceFile instead of redirected sourceFile from getSourceFile ([#26036](https://github.com/angular/angular/issues/26036)) ([3166cff](https://github.com/angular/angular/commit/3166cff)), closes [#22524](https://github.com/angular/angular/issues/22524)
-* **language-service:** Eagarly initialize data members ([#31577](https://github.com/angular/angular/issues/31577)) ([0110de2](https://github.com/angular/angular/commit/0110de2))
-
 
 
 <a name="8.1.2"></a>
@@ -152,23 +117,6 @@ This release contains various API docs improvements.
 * **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
 
 
-
-<a name="8.2.0-next.1"></a>
-# [8.2.0-next.1](https://github.com/angular/angular/compare/8.2.0-next.0...8.2.0-next.1) (2019-07-10)
-
-
-### Bug Fixes
-
-* **bazel:** revert location of xi18n outputs to bazel-genfiles ([#31410](https://github.com/angular/angular/issues/31410)) ([1d3e227](https://github.com/angular/angular/commit/1d3e227))
-* **compiler:** give ASTWithSource its own visit method ([#31347](https://github.com/angular/angular/issues/31347)) ([6aaca21](https://github.com/angular/angular/commit/6aaca21))
-
-
-### Features
-
-* **core:** add automatic migration from Renderer to Renderer2 ([#30936](https://github.com/angular/angular/issues/30936)) ([c095597](https://github.com/angular/angular/commit/c095597))
-
-
-
 <a name="8.1.1"></a>
 ## [8.1.1](https://github.com/angular/angular/compare/8.1.0...8.1.1) (2019-07-10)
 
@@ -178,23 +126,6 @@ This release contains various API docs improvements.
 * **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
 
 
-<a name="8.2.0-next.0"></a>
-# [8.2.0-next.0](https://github.com/angular/angular/compare/8.1.0-rc.0...8.2.0-next.0) (2019-07-02)
-
-
-### Bug Fixes
-
-* **core:** handle `undefined` meta in `injectArgs` ([#31333](https://github.com/angular/angular/issues/31333)) ([80ccd6c](https://github.com/angular/angular/commit/80ccd6c)), closes [CLI #14888](https://github.com/angular/angular-cli/issues/14888)
-* **service-worker:** cache opaque responses in data groups with `freshness` strategy ([#30977](https://github.com/angular/angular/issues/30977)) ([d7be38f](https://github.com/angular/angular/commit/d7be38f)), closes [#30968](https://github.com/angular/angular/issues/30968)
-* **service-worker:** cache opaque responses when requests exceeds timeout threshold ([#30977](https://github.com/angular/angular/issues/30977)) ([93abc35](https://github.com/angular/angular/commit/93abc35))
-
-
-### Features
-
-* **bazel:** allow passing a custom bazel compiler host to ngc compile ([#31341](https://github.com/angular/angular/issues/31341)) ([a29dc96](https://github.com/angular/angular/commit/a29dc96))
-* **bazel:** allow passing and rewriting an old bazel host ([#31381](https://github.com/angular/angular/issues/31381)) ([11a208f](https://github.com/angular/angular/commit/11a208f)), closes [#31341](https://github.com/angular/angular/issues/31341)
-
-
 
 <a name="8.1.0"></a>
 # [8.1.0](https://github.com/angular/angular/compare/8.1.0-rc.0...8.1.0) (2019-07-02)

CONTRIBUTING.md

@@ -233,7 +233,6 @@ There are currently a few exceptions to the "use package name" rule:
 * **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
   repo
 * **ivy**: used for changes to the [Ivy renderer](https://github.com/angular/angular/issues/21706).
-* **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
 * none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
   packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
   specific package (e.g. `docs: fix typo in tutorial`).

README.md

@@ -6,7 +6,7 @@
 
 # Angular
 
-Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages.
+Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
 
 ## Quickstart
 
@@ -14,7 +14,7 @@ Angular is a development platform for building mobile and desktop web applicatio
 
 ## Changelog
 
-[Learn about the latest improvements][changelog].
+[Learn about the latest improvements][changelog]. 
 
 ## Want to help?
 

WORKSPACE

@@ -65,9 +65,6 @@ node_repositories(
     },
     node_version = "10.16.0",
     package_json = ["//:package.json"],
-    yarn_repositories = {
-        "1.17.3": ("yarn-v1.17.3.tar.gz", "yarn-v1.17.3", "e3835194409f1b3afa1c62ca82f561f1c29d26580c9e220c36866317e043c6f3"),
-    },
     # yarn 1.13.0 under Bazel has a regression on Windows that causes build errors on rebuilds:
     # ```
     # ERROR: Source forest creation failed: C:/.../fyuc5c3n/execroot/angular/external (Directory not empty)
@@ -76,7 +73,7 @@ node_repositories(
     # It possible that versions of yarn past 1.13.0 do not have this issue, however, before
     # advancing this version we need to test manually on Windows that the above error does not
     # happen as the issue is not caught by CI.
-    yarn_version = "1.17.3",
+    yarn_version = "1.12.1",
 )
 
 yarn_install(

aio/README.md

@@ -46,15 +46,6 @@ Here are the most important tasks you might need to use:
   - `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
   - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
-> **Note for Windows users**
->
-> Setting up the examples involves creating some [symbolic links](https://en.wikipedia.org/wiki/Symbolic_link) (see [here](./tools/examples/README.md#symlinked-node_modules) for details). On Windows, this requires to either have [Developer Mode enabled](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (supported on Windows 10 or newer) or run the setup commands as administrator.
->
-> The affected commands are:
-> - `yarn setup` / `yarn setup-*`
-> - `yarn build` / `yarn build-*`
-> - `yarn boilerplate:add`
-> - `yarn example-e2e --setup`
 
 ## Using ServiceWorker locally
 

aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts

@@ -1,21 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('Accessibility example e2e tests', () => {
-
-  beforeEach(() => {
-    browser.get('');
-  });
-
-  it('should display Accessibility Example', function () {
-    expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
-  });
-
-  it('should take a number and change progressbar width', function () {
-    element(by.css('input')).sendKeys('16');
-    expect(element(by.css('input')).getAttribute('value')).toEqual('016');
-    expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
-  });
-
-});

aio/content/examples/accessibility/src/app/app.component.html

@@ -1,13 +0,0 @@
-<h1>Accessibility Example</h1>
-<!-- #docregion template -->
-<label>
-  Enter an example progress value
-  <input type="number" min="0" max="100"
-      [value]="progress" (input)="progress = $event.target.value">
-</label>
-
-<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
-<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
-</app-example-progressbar>
-<!-- #enddocregion template -->
-

aio/content/examples/accessibility/src/app/app.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
-})
-export class AppComponent  {
-  progress = 0;
-}

aio/content/examples/accessibility/src/app/app.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ExampleProgressbarComponent } from './progress-bar.component';
-
-@NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent, ExampleProgressbarComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/accessibility/src/app/progress-bar.component.css

@@ -1,12 +0,0 @@
-    :host { 
-      display: block; 
-      width: 300px; 
-      height: 25px; 
-      border: 1px solid black; 
-      margin-top: 16px;
-    }
-    
-    .bar { 
-      background: blue; 
-      height: 100%; 
-    }

aio/content/examples/accessibility/src/app/progress-bar.component.ts

@@ -1,28 +0,0 @@
-// #docregion progressbar-component
-import { Component, Input } from '@angular/core';
-
-/**
- * Example progressbar component.
- */
-@Component({
-  selector: 'app-example-progressbar',
-  template: `<div class="bar" [style.width.%]="value"></div>`,
-  styleUrls: ['./progress-bar.component.css'],
-  host: {
-    // Sets the role for this component to "progressbar"
-    role: 'progressbar',
-
-    // Sets the minimum and maximum values for the progressbar role.
-    'aria-valuemin': '0',
-    'aria-valuemax': '100',
-
-    // Binding that updates the current value of the progressbar.
-    '[attr.aria-valuenow]': 'value',
-  }
-})
-export class ExampleProgressbarComponent  {
-  /** Current value of the progressbar. */
-  @Input() value = 0;
-}
-
-// #enddocregion progressbar-component

aio/content/examples/accessibility/src/index.html

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

aio/content/examples/accessibility/src/main.ts

@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/accessibility/stackblitz.json

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

aio/content/examples/getting-started/src/app/cart/cart.component.3.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CartService } from '../cart.service';
 // #enddocregion imports
 
@@ -10,14 +10,12 @@ import { CartService } from '../cart.service';
   styleUrls: ['./cart.component.css']
 })
 // #docregion props-services, submit
-export class CartComponent implements OnInit {
+export class CartComponent {
   items;
 
   constructor(
     private cartService: CartService
-  ) { }
-
-  ngOnInit() {
+  ) {
     this.items = this.cartService.getItems();
   }
 }

aio/content/examples/getting-started/src/app/shipping/shipping.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CartService } from '../cart.service';
 // #enddocregion
@@ -11,7 +11,7 @@ import { CartService } from '../cart.service';
   styleUrls: ['./shipping.component.css']
 })
 // #docregion props, ctor
-export class ShippingComponent implements OnInit {
+export class ShippingComponent {
   shippingCosts;
 // #enddocregion props
 
@@ -19,12 +19,10 @@ export class ShippingComponent implements OnInit {
   constructor(
     private cartService: CartService
   ) {
+// #enddocregion inject-cart-service
+    this.shippingCosts = this.cartService.getShippingPrices();
+// #docregion inject-cart-service
   }
 // #enddocregion inject-cart-service
-
-  ngOnInit() {
-    this.shippingCosts = this.cartService.getShippingPrices();
-  }
-
 // #docregion props
 }

aio/content/examples/http/src/app/app.component.html

@@ -1,6 +1,6 @@
 <h1>HTTP Sample</h1>
 <div>
-  <input type="checkbox" id="heroes" [checked]="showHeroes" (click)="toggleHeroes()">
+  <input type="checkbox" id="heroes" [checked]="toggleHeroes" (click)="toggleHeroes()">
   <label for="heroes">Heroes</label>
 
   <input type="checkbox" id="config" [checked]="showConfig" (click)="toggleConfig()">

aio/content/examples/i18n/doc-files/main.2.ts

@@ -12,7 +12,7 @@ if (environment.production) {
 // use the require method provided by webpack
 declare const require;
 // we use the webpack raw-loader to return the content as a string
-const translations = require('raw-loader!./locale/messages.fr.xlf').default;
+const translations = require(`raw-loader!./locale/messages.fr.xlf`);
 
 platformBrowserDynamic().bootstrapModule(AppModule, {
   providers: [

aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts

@@ -1,24 +0,0 @@
-import { browser, element, by } from 'protractor';
-import { logging } from 'selenium-webdriver';
-
-describe('Providers and ViewProviders', function () {
-
-
-  beforeEach(() => {
-    browser.get('');
-  });
-
-  it('shows basic flower emoji', function() {
-    expect(element.all(by.css('p')).get(0).getText()).toContain('🌺');
-  });
-
-  it('shows whale emoji', function() {
-    expect(element.all(by.css('p')).get(1).getText()).toContain('🐳');
-  });
-
-  it('shows sunflower from FlowerService', function() {
-    expect(element.all(by.css('p')).get(8).getText()).toContain('🌻');
-  });
-
-});
-

aio/content/examples/providers-viewproviders/src/app/animal.service.ts

@@ -1,10 +0,0 @@
-// #docregion animal-service
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class AnimalService {
-  emoji = '🐳';
-}
-// #enddocregion animal-service

aio/content/examples/providers-viewproviders/src/app/app.component.1.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { FlowerService } from './flower.service';
-import { AnimalService } from './animal.service';
-
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
-})
-// #docregion injection
-export class AppComponent  {
-  constructor(public flower: FlowerService) {}
-}
-// #enddocregion injection

aio/content/examples/providers-viewproviders/src/app/app.component.html

@@ -1,15 +0,0 @@
-
-<h2>From AppComponent:</h2>
-<!-- #docregion binding-flower -->
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
-<!-- #enddocregion binding-flower -->
-<!-- #docregion binding-animal -->
-<p>Emoji from AnimalService: {{animal.emoji}}</p>
-<!-- #enddocregion binding-animal -->
-
-<hr />
-
-<h2>From ChildComponent:</h2>
-<!-- #docregion content-projection -->
-<app-child><app-inspector></app-inspector></app-child>
-<!-- #enddocregion content-projection -->

aio/content/examples/providers-viewproviders/src/app/app.component.ts

@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-import { FlowerService } from './flower.service';
-import { AnimalService } from './animal.service';
-
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
-})
-// #docregion inject-animal-service
-export class AppComponent  {
-  constructor(public flower: FlowerService, public animal: AnimalService) {}
-}
-// #enddocregion inject-animal-service
-
-// When using @Host() together with @SkipSelf() in
-// child.component.ts for the AnimalService, add the
-// following viewProviders array to the @Component metadata:
-
-// viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
-
-// So, the entire @ChildComponent() decorator and its
-// metadata should be as follows:
-
-// @Component({
-//   selector: 'app-root',
-//   templateUrl: './app.component.html',
-//   styleUrls: [ './app.component.css' ],
-//   viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
-// })

aio/content/examples/providers-viewproviders/src/app/app.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { ChildComponent } from './child/child.component';
-import { InspectorComponent } from './inspector/inspector.component';
-
-// #docregion appmodule
-@NgModule({
-  imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, ChildComponent, InspectorComponent ],
-  bootstrap:    [ AppComponent ],
-  providers: []
-})
-export class AppModule { }
-// #enddocregion appmodule

aio/content/examples/providers-viewproviders/src/app/child/child.component.1.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
-import { FlowerService } from '../flower.service';
-
-// #docregion flowerservice
-@Component({
-  selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
-  // use the providers array to provide a service
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
-})
-
-export class ChildComponent {
-  // inject the service
-  constructor( public flower: FlowerService) { }
-}
-
-// #enddocregion flowerservice
-

aio/content/examples/providers-viewproviders/src/app/child/child.component.css

@@ -1,4 +0,0 @@
-.container {
-  border: 1px solid darkblue;
-  padding: 1rem;
-}

aio/content/examples/providers-viewproviders/src/app/child/child.component.html

@@ -1,24 +0,0 @@
-<!-- #docplaster -->
-<!-- #docregion child-component -->
-<!-- #docregion flower-binding -->
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
-<!-- #enddocregion flower-binding -->
-<!-- #docregion animal-binding -->
-<p>Emoji from AnimalService: {{animal.emoji}}</p>
-<!-- #enddocregion animal-binding -->
-
-<div class="container">
-  <h3>Content projection</h3>
-  <!-- #enddocregion child-component -->
-  <p>The following is coming from content. It doesn't get to see the puppy because the puppy is declared inside the view only.</p>
-  <!-- #docregion child-component -->
-	<ng-content></ng-content>
-</div>
-
-<h3>Inside the view</h3>
-<!-- #enddocregion child-component -->
-<p>The following is inside the view so it does see the puppy.</p>
-<!-- #docregion child-component -->
-<app-inspector></app-inspector>
-<!-- #enddocregion child-component -->
-

aio/content/examples/providers-viewproviders/src/app/child/child.component.ts

@@ -1,44 +0,0 @@
-// #docplaster
-import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
-import { FlowerService } from '../flower.service';
-import { AnimalService } from '../animal.service';
-
-// #docregion provide-animal-service
-@Component({
-  selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
-  // provide services
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
-  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
-})
-
-export class ChildComponent {
-  // inject service
-  constructor( public flower: FlowerService, public animal: AnimalService) { }
-// #enddocregion provide-animal-service
-
-  // viewProviders ensures that only the view gets to see this.
-  // With the AnimalService in the viewProviders, the
-  // InspectorComponent doesn't get to see it because the
-  // inspector is in the content.
-
-
-  // constructor( public flower: FlowerService, @Optional() @Host()  public animal: AnimalService) { }
-
-// Comment out the above constructor and alternately
-// uncomment the two following constructors to see the
-// effects of @Host() and @Host() + @SkipSelf().
-
-// constructor(
-//     @Host() public animal : AnimalService,
-//     @Host() @Optional() public flower : FlowerService) { }
-
-// constructor(
-//     @SkipSelf() @Host() public animal : AnimalService,
-//     @SkipSelf() @Host() @Optional() public flower : FlowerService) { }
-
-// #docregion provide-animal-service
-}
-// #enddocregion provide-animal-service
-

aio/content/examples/providers-viewproviders/src/app/flower.service.ts

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-
-// #docregion flowerservice
-@Injectable({
-  providedIn: 'root'
-})
-export class FlowerService {
-  emoji = '🌺';
-}
-// #enddocregion flowerservice
-

aio/content/examples/providers-viewproviders/src/app/inspector/inspector.component.html

@@ -1,4 +0,0 @@
- <!-- #docregion binding -->
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
-<p>Emoji from AnimalService: {{animal.emoji}}</p>
- <!-- #enddocregion binding -->

aio/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { FlowerService } from '../flower.service';
-import { AnimalService } from '../animal.service';
-
-@Component({
-  selector: 'app-inspector',
-  templateUrl: './inspector.component.html',
-  styleUrls: ['./inspector.component.css']
-})
-// #docregion injection
-export class InspectorComponent {
-  constructor(public flower: FlowerService, public animal: AnimalService) { }
-}
-// #enddocregion injection

aio/content/examples/providers-viewproviders/src/index.html

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

aio/content/examples/providers-viewproviders/src/main.ts

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

aio/content/examples/providers-viewproviders/stackblitz.json

@@ -1,10 +0,0 @@
-{
-  "description": "Inputs and Outputs",
-  "files": [
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1,2].*"
-  ],
-  "file": "src/app/app.component.ts",
-  "tags": ["Inputs and Outputs"]
-}

aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts

@@ -1,21 +0,0 @@
-import { browser, element, by } from 'protractor';
-
-describe('Resolution-modifiers-example', function () {
-
-  beforeAll(function () {
-    browser.get('');
-  });
-
-  it('shows basic flower emoji', function() {
-    expect(element.all(by.css('p')).get(0).getText()).toContain('🌸');
-  });
-
-  it('shows basic leaf emoji', function() {
-    expect(element.all(by.css('p')).get(1).getText()).toContain('🌿');
-  });
-
-  it('shows yellow flower in host child', function() {
-    expect(element.all(by.css('p')).get(9).getText()).toContain('🌼');
-  });
-
-});

aio/content/examples/resolution-modifiers/src/app/app.component.html

@@ -1,14 +0,0 @@
-<h1>DI resolution modifiers</h1>
-
-<p>Basic flower service: {{flower.emoji}}</p>
-<p>Basic leaf service: {{leaf.emoji}}</p>
-
-<app-optional></app-optional>
-
-<app-self></app-self>
-
-<app-self-no-data></app-self-no-data>
-
-<app-skipself></app-skipself>
-
-<app-host-parent></app-host-parent>

aio/content/examples/resolution-modifiers/src/app/app.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { LeafService } from './leaf.service';
-import { FlowerService } from './flower.service';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
-})
-export class AppComponent {
-  name = 'Angular';
-  constructor(public flower: FlowerService, public leaf: LeafService) {}
-}

aio/content/examples/resolution-modifiers/src/app/app.module.ts

@@ -1,33 +0,0 @@
-;
-import { OptionalComponent } from './optional/optional.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { SelfNoDataComponent } from './self-no-data/self-no-data.component';
-import { HostComponent } from './host/host.component';
-import { SelfComponent } from './self/self.component';
-import { SkipselfComponent } from './skipself/skipself.component';
-import { HostParentComponent } from './host-parent/host-parent.component';
-import { HostChildComponent } from './host-child/host-child.component';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule
-  ],
-  declarations: [
-    AppComponent,
-    OptionalComponent,
-    SelfComponent,
-    SelfNoDataComponent,
-    HostComponent,
-    SkipselfComponent,
-    HostParentComponent,
-    HostChildComponent
-  ],
-  bootstrap: [AppComponent],
-  providers: []
-})
-export class AppModule { }

aio/content/examples/resolution-modifiers/src/app/flower.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root' // provide this service in the root ModuleInjector
-
-})
-export class FlowerService {
-  emoji = '🌸';
-}

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.html

@@ -1,4 +0,0 @@
-<div class="section">
-	<h2>Child of @Host() Component</h2>
-  <p>Flower emoji: {{flower.emoji}}</p>
-</div>

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import { FlowerService } from '../flower.service';
-
-@Component({
-  selector: 'app-host-child',
-  templateUrl: './host-child.component.html',
-  styleUrls: ['./host-child.component.css']
-})
-export class HostChildComponent {
-  constructor(public flower: FlowerService) { }
-}

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.html

@@ -1,5 +0,0 @@
-<div class="section">
-	<h2>Parent of @Host() Component</h2>
-	<p>Flower emoji: {{flower.emoji}}</p>
-	<app-host></app-host>
-</div>

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts

@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { FlowerService } from '../flower.service';
-
-
-@Component({
-  selector: 'app-host-parent',
-  templateUrl: './host-parent.component.html',
-  styleUrls: ['./host-parent.component.css'],
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌺' } }]
-
-})
-export class HostParentComponent {
-
-  constructor(public flower: FlowerService) { }
-
-}

aio/content/examples/resolution-modifiers/src/app/host/host.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/host/host.component.html

@@ -1,6 +0,0 @@
-<div class="section">
-	<h2>@Host() Component</h2>
-	<p>Flower emoji: {{flower.emoji}}</p>
-	<p><i>(@Host() stops it here)</i></p>
-	<app-host-child></app-host-child>
-</div>

aio/content/examples/resolution-modifiers/src/app/host/host.component.ts

@@ -1,21 +0,0 @@
-import { Component, Host, Optional } from '@angular/core';
-import { FlowerService } from '../flower.service';
-
-// #docregion host-component
-@Component({
-  selector: 'app-host',
-  templateUrl: './host.component.html',
-  styleUrls: ['./host.component.css'],
-  //  provide the service
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
-})
-export class HostComponent {
-  // use @Host() in the constructor when injecting the service
-  constructor(@Host() @Optional() public flower: FlowerService) { }
-
-}
-// #enddocregion host-component
-
-// if you take out @Host() and the providers array, flower will be red hibiscus
-
-

aio/content/examples/resolution-modifiers/src/app/leaf.service.ts

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-// #docregion leafservice
-export class LeafService {
-  emoji = '🌿';
-}
-// #enddocregion leafservice
-

aio/content/examples/resolution-modifiers/src/app/optional.service.ts

@@ -1,7 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class OptionalService {
-}
-
-// This service isn't provided anywhere.

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.html

@@ -1,4 +0,0 @@
-<div class="section">
-	<h2>@Optional() Component</h2>
-	<p>This component still works even though the OptionalService (notice @Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
-</div>

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.ts

@@ -1,21 +0,0 @@
-import { Component, Optional } from '@angular/core';
-import { OptionalService } from '../optional.service';
-
-@Component({
-  selector: 'app-optional',
-  templateUrl: './optional.component.html',
-  styleUrls: ['./optional.component.css']
-})
-
-// #docregion optional-component
-export class OptionalComponent {
-  constructor(@Optional() public optional: OptionalService) {}
-}
-// #enddocregion optional-component
-
-// The OptionalService isn't provided here, in the @Injectable()
-// providers array, or in the NgModule. If you remove @Optional()
-// from the constructor, you'll get an error.
-
-
-

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.html

@@ -1,4 +0,0 @@
-<div class="section">
-	<h2>@Self() Component (without a provider)</h2>
-  <p>Leaf emoji: {{leaf?.emoji}}</p>
-</div>

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts

@@ -1,18 +0,0 @@
-import { Component, Self, Optional } from '@angular/core';
-import { LeafService } from '../leaf.service';
-
-// #docregion self-no-data-component
-@Component({
-  selector: 'app-self-no-data',
-  templateUrl: './self-no-data.component.html',
-  styleUrls: ['./self-no-data.component.css']
-})
-export class SelfNoDataComponent {
-  constructor(@Self() @Optional() public leaf: LeafService) { }
-}
-
-// #enddocregion self-no-data-component
-
-// The app doesn't break because the value being available at self is optional.
-// If you remove @Optional(), the app breaks.
-

aio/content/examples/resolution-modifiers/src/app/self/self.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/self/self.component.html

@@ -1,4 +0,0 @@
-<div class="section">
-	<h2>@Self() Component</h2>
-  <p>Flower emoji: {{flower?.emoji}}</p>
-</div>

aio/content/examples/resolution-modifiers/src/app/self/self.component.ts

@@ -1,19 +0,0 @@
-import { Component, Self } from '@angular/core';
-import { FlowerService } from '../flower.service';
-
-// #docregion self-component
-@Component({
-  selector: 'app-self',
-  templateUrl: './self.component.html',
-  styleUrls: ['./self.component.css'],
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
-
-})
-export class SelfComponent {
-  constructor(@Self() public flower: FlowerService) {}
-}
-// #enddocregion self-component
-
-// This component provides the FlowerService so the injector
-// doesn't have to look further up the injector tree
-

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.css

@@ -1,5 +0,0 @@
-.section {
-  border: 2px solid #369;
-  padding: 1rem;
-  margin: 1rem 0;
-}

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.html

@@ -1,4 +0,0 @@
-<div class="section">
-	<h2>@SkipSelf() Component</h2>
-  <p>Leaf emoji: {{leaf.emoji}}</p>
-</div>

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts

@@ -1,18 +0,0 @@
-import { Component, SkipSelf } from '@angular/core';
-import { LeafService } from '../leaf.service';
-
-// #docregion skipself-component
-@Component({
-  selector: 'app-skipself',
-  templateUrl: './skipself.component.html',
-  styleUrls: ['./skipself.component.css'],
-  // Angular would ignore this LeafService instance
-  providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }]
-})
-export class SkipselfComponent {
-  // Use @SkipSelf() in the constructor
-  constructor(@SkipSelf() public leaf: LeafService) { }
-}
-// #enddocregion skipself-component
-
-// @SkipSelf(): Specifies that the dependency resolution should start from the parent injector, not here.

aio/content/examples/resolution-modifiers/src/index.html

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

aio/content/examples/resolution-modifiers/src/main.ts

@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/resolution-modifiers/stackblitz.json

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

aio/content/examples/structural-directives/src/app/unless.directive.ts

@@ -12,7 +12,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * then the templated elements are removed removed from the DOM,
  * the templated elements are (re)inserted into the DOM.
  *
- * <div *appUnless="errorCount" class="success">
+ * <div *ngUnless="errorCount" class="success">
  *   Congrats! Everything is great!
  * </div>
  *

aio/content/guide/accessibility.md

@@ -84,15 +84,48 @@ The following example shows how to make a simple progress bar accessible by usin
 
 * The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
 
-   <code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
+   ```ts
+  import { Component, Input } from '@angular/core';
+   /**
+    * Example progressbar component.
+    */
+   @Component({
+     selector: 'example-progressbar',
+     template: `<div class="bar" [style.width.%]="value"></div>`,
+     styleUrls: ['./progress-bar.css'],
+     host: {
+       // Sets the role for this component to "progressbar"
+       role: 'progressbar',
 
+      // Sets the minimum and maximum values for the progressbar role.
+       'aria-valuemin': '0',
+       'aria-valuemax': '0',
+
+       // Binding that updates the current value of the progressbar.
+       '[attr.aria-valuenow]': 'value',
+     }
+   })
+   export class ExampleProgressbar  {
+     /** Current value of the progressbar. */
+     @Input() value: number = 0;
+   }
+   ```
 
 * In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
 
-   <code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
+   ```html
+   <label>
+      Enter an example progress value
+      <input type="number" min="0" max="100"
+         [value]="progress" (input)="progress = $event.target.value">
+   </label>
 
+   <!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
+   <example-progressbar [value]="progress" aria-label="Example of a progress bar">
+   </example-progressbar>
+   ```
 
-To see the progress bar in a working example app, refer to the <live-example></live-example>.
+[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html).
 
 ## Routing and focus management
 

aio/content/guide/angular-compiler-options.md

@@ -1,6 +1,6 @@
 # Angular compiler options
 
-When you use [AoT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
+When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
 
 The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
 
@@ -17,38 +17,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, `tsconfig.json`.
-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.
-The configuration options from the base file are loaded first, then overridden by those in the inheriting `tsconfig` file.
-
-For example:
-
-```json
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    ...
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "preserveWhitespaces": true,
-    ...
-  }
-}
-```
-
-For more informaton, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
-
-## Template options
-
-The following options are available for configuring the AoT template compiler.
+This page describes the available Angular template compiler options.
 
 ### `allowEmptyCodegenFiles`
 
@@ -60,7 +29,7 @@ Modifies how Angular-specific annotations are emitted to improve tree-shaking. N
 
 * By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes.
 
-* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note that the resulting code will not properly tree-shake.
+* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note taht the resulting code will not properly tree-shake.
 
 ### `annotateForClosureCompiler`
 
@@ -88,7 +57,7 @@ When enabled, the `.js` output of `ngc` does not include any lazy-loaded templat
 
 ### `enableLegacyTemplate`
 
-When true, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is false. Might be required by some third-party Angular libraries.
+When true, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is false. Might be required by some third-party Angular libraries. |
 
 ### `flatModuleId`
 

aio/content/guide/animations.md

@@ -260,7 +260,7 @@ What it does
 </tr>
 
 <tr>
-<td><code><a href="api/animations/state" class="code-anchor">state()</a></code></td>
+<td><code>state()</code></td>
 <td>Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.</td>
 </tr>
 
@@ -280,7 +280,7 @@ What it does
 </tr>
 
 <tr>
-<td><code><a href="api/animations/group" class="code-anchor">group()</a></code></td>
+<td><code>group()</code></td>
 <td>Specifies a group of animation steps (<em>inner animations</em>) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within <code>sequence()</code> or <code>transition().</code></td>
 </tr>
 

aio/content/guide/aot-metadata-errors.md

@@ -1,540 +0,0 @@
-# AoT metadata errors
-
-The following are metadata errors you may encounter, with explanations and suggested corrections.
-
-[Expression form not supported](#expression-form-not-supported)<br>
-[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)<br>
-[Only initialized variables and constants](#only-initialized-variables)<br>
-[Reference to a non-exported class](#reference-to-a-non-exported-class)<br>
-[Reference to a non-exported function](#reference-to-a-non-exported-function)<br>
-[Function calls are not supported](#function-calls-not-supported)<br>
-[Destructured variable or constant not supported](#destructured-variable-not-supported)<br>
-[Could not resolve type](#could-not-resolve-type)<br>
-[Name expected](#name-expected)<br>
-[Unsupported enum member name](#unsupported-enum-member-name)<br>
-[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
-[Symbol reference expected](#symbol-reference-expected)<br>
-
-<hr>
-
-{@a expression-form-not-supported}
-## Expression form not supported
-
-<div class="alert is-helpful">
-
-*The compiler encountered an expression it didn't understand while evaluating Angular metadata.*
-
-</div>
-
-Language features outside of the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
-can produce this error, as seen in the following example:
-
-```ts
-// ERROR
-export class Fooish { ... }
-...
-const prop = typeof Fooish; // typeof is not valid in metadata
-  ...
-  // bracket notation is not valid in metadata
-  { provide: 'token', useValue: { [prop]: 'value' } };
-  ...
-```
-
-You can use `typeof` and bracket notation in normal application code.
-You just can't use those features within expressions that define Angular metadata.
-
-Avoid this error by sticking to the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
-when writing Angular metadata
-and be wary of new or unusual TypeScript features.
-
-<hr>
-
-{@a reference-to-a-local-symbol}
-## Reference to a local (non-exported) symbol
-
-<div class="alert is-helpful">
-
-_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
-
-</div>
-
-The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
-
-Here's a `provider` example of the problem.
-
-```ts
-// ERROR
-let foo: number; // neither exported nor initialized
-
-@Component({
-  selector: 'my-component',
-  template: ... ,
-  providers: [
-    { provide: Foo, useValue: foo }
-  ]
-})
-export class MyComponent {}
-```
-The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
-
-You could fix the problem by initializing `foo`.
-
-```ts
-let foo = 42; // initialized
-```
-
-The compiler will [fold](guide/aot-compiler#code-folding) the expression into the provider as if you had written this.
-
-```ts
-  providers: [
-    { provide: Foo, useValue: 42 }
-  ]
-```
-
-Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
-
-```ts
-// CORRECTED
-export let foo: number; // exported
-
-@Component({
-  selector: 'my-component',
-  template: ... ,
-  providers: [
-    { provide: Foo, useValue: foo }
-  ]
-})
-export class MyComponent {}
-```
-
-Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
-
-Adding `export` doesn't work when the compiler needs the _actual value_
-in order to generate code.
-For example, it doesn't work for the `template` property.
-
-```ts
-// ERROR
-export let someTemplate: string; // exported but not initialized
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-The compiler needs the value of the `template` property _right now_ to generate the component factory.
-The variable reference alone is insufficient.
-Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
-
-<hr>
-
-{@a only-initialized-variables}
-## Only initialized variables and constants
-
-<div class="alert is-helpful">
-
-_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
-
-</div>
-
-The compiler found a reference to an exported variable or static field that wasn't initialized.
-It needs the value of that variable to generate code.
-
-The following example tries to set the component's `template` property to the value of
-the exported `someTemplate` variable which is declared but _unassigned_.
-
-```ts
-// ERROR
-export let someTemplate: string;
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
-
-```ts
-// ERROR - not initialized there either
-import { someTemplate } from './config';
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-The compiler cannot wait until runtime to get the template information.
-It must statically derive the value of the `someTemplate` variable from the source code
-so that it can generate the component factory, which includes
-instructions for building the element based on the template.
-
-To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
-
-```ts
-// CORRECTED
-export let someTemplate = '<h1>Greetings from Angular</h1>';
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-<hr>
-
-{@a reference-to-a-non-exported-class}
-## Reference to a non-exported class
-
-<div class="alert is-helpful">
-
-_Reference to a non-exported class <class name>. Consider exporting the class._
-
-</div>
-
-Metadata referenced a class that wasn't exported.
-
-For example, you may have defined a class and used it as an injection token in a providers array
-but neglected to export that class.
-
-```ts
-// ERROR
-abstract class MyStrategy { }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useValue: ... }
-  ]
-  ...
-```
-
-Angular generates a class factory in a separate module and that
-factory [can only access exported classes](guide/aot-compiler#exported-symbols).
-To correct this error, export the referenced class.
-
-```ts
-// CORRECTED
-export abstract class MyStrategy { }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useValue: ... }
-  ]
-  ...
-```
-<hr>
-
-{@a reference-to-a-non-exported-function}
-## Reference to a non-exported function
-
-<div class="alert is-helpful">
-
-*Metadata referenced a function that wasn't exported.*
-
-</div>
-
-For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
-
-```ts
-// ERROR
-function myStrategy() { ... }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy }
-  ]
-  ...
-```
-
-Angular generates a class factory in a separate module and that
-factory [can only access exported functions](guide/aot-compiler#exported-symbols).
-To correct this error, export the function.
-
-```ts
-// CORRECTED
-export function myStrategy() { ... }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy }
-  ]
-  ...
-```
-<hr>
-
-{@a function-calls-not-supported}
-## Function calls are not supported
-
-<div class="alert is-helpful">
-
-_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
-
-</div>
-
-The compiler does not currently support [function expressions or lambda functions](guide/aot-compiler#function-expression).
-For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
-
-```ts
-// ERROR
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: function() { ... } },
-    { provide: OtherStrategy, useFactory: () => { ... } }
-  ]
-  ...
-```
-You also get this error if you call a function or method in a provider's `useValue`.
-
-```ts
-// ERROR
-import { calculateValue } from './utilities';
-
-  ...
-  providers: [
-    { provide: SomeValue, useValue: calculateValue() }
-  ]
-  ...
-```
-
-To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
-
-```ts
-// CORRECTED
-import { calculateValue } from './utilities';
-
-export function myStrategy() { ... }
-export function otherStrategy() { ... }
-export function someValueFactory() {
-  return calculateValue();
-}
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy },
-    { provide: OtherStrategy, useFactory: otherStrategy },
-    { provide: SomeValue, useFactory: someValueFactory }
-  ]
-  ...
-```
-
-<hr>
-
-{@a destructured-variable-not-supported}
-## Destructured variable or constant not supported
-
-<div class="alert is-helpful">
-
-_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
-
-</div>
-
-The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
-
-For example, you cannot write something like this:
-
-```ts
-// ERROR
-import { configuration } from './configuration';
-
-// destructured assignment to foo and bar
-const {foo, bar} = configuration;
-  ...
-  providers: [
-    {provide: Foo, useValue: foo},
-    {provide: Bar, useValue: bar},
-  ]
-  ...
-```
-
-To correct this error, refer to non-destructured values.
-
-```ts
-// CORRECTED
-import { configuration } from './configuration';
-  ...
-  providers: [
-    {provide: Foo, useValue: configuration.foo},
-    {provide: Bar, useValue: configuration.bar},
-  ]
-  ...
-```
-
-<hr>
-
-{@a could-not-resolve-type}
-## Could not resolve type
-
-<div class="alert is-helpful">
-
-*The compiler encountered a type and can't determine which module exports that type.*
-
-</div>
-
-This can happen if you refer to an ambient type.
-For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
-
-You'll get an error if you reference it in the component constructor,
-which the compiler must statically analyze.
-
-```ts
-// ERROR
-@Component({ })
-export class MyComponent {
-  constructor (private win: Window) { ... }
-}
-```
-TypeScript understands ambient types so you don't import them.
-The Angular compiler does not understand a type that you neglect to export or import.
-
-In this case, the compiler doesn't understand how to inject something with the `Window` token.
-
-Do not refer to ambient types in metadata expressions.
-
-If you must inject an instance of an ambient type,
-you can finesse the problem in four steps:
-
-1. Create an injection token for an instance of the ambient type.
-1. Create a factory function that returns that instance.
-1. Add a `useFactory` provider with that factory function.
-1. Use `@Inject` to inject the instance.
-
-Here's an illustrative example.
-
-```ts
-// CORRECTED
-import { Inject } from '@angular/core';
-
-export const WINDOW = new InjectionToken('Window');
-export function _window() { return window; }
-
-@Component({
-  ...
-  providers: [
-    { provide: WINDOW, useFactory: _window }
-  ]
-})
-export class MyComponent {
-  constructor (@Inject(WINDOW) private win: Window) { ... }
-}
-```
-
-The `Window` type in the constructor is no longer a problem for the compiler because it
-uses the `@Inject(WINDOW)` to generate the injection code.
-
-Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
-
-```ts
-import { Inject }   from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
-
-@Component({ ... })
-export class MyComponent {
-  constructor (@Inject(DOCUMENT) private doc: Document) { ... }
-}
-```
-<hr>
-
-{@a name-expected}
-## Name expected
-
-<div class="alert is-helpful">
-
-*The compiler expected a name in an expression it was evaluating.*
-
-</div>
-
-This can happen if you use a number as a property name as in the following example.
-
-```ts
-// ERROR
-provider: [{ provide: Foo, useValue: { 0: 'test' } }]
-```
-
-Change the name of the property to something non-numeric.
-
-```ts
-// CORRECTED
-provider: [{ provide: Foo, useValue: { '0': 'test' } }]
-```
-
-<hr>
-
-{@a unsupported-enum-member-name}
-## Unsupported enum member name
-
-<div class="alert is-helpful">
-
-*Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata.*
-
-</div>
-
-The compiler can understand simple enum values but not complex values such as those derived from computed properties.
-
-```ts
-// ERROR
-enum Colors {
-  Red = 1,
-  White,
-  Blue = "Blue".length // computed
-}
-
-  ...
-  providers: [
-    { provide: BaseColor,   useValue: Colors.White } // ok
-    { provide: DangerColor, useValue: Colors.Red }   // ok
-    { provide: StrongColor, useValue: Colors.Blue }  // bad
-  ]
-  ...
-```
-
-Avoid referring to enums with complicated initializers or computed properties.
-
-<hr>
-
-{@a tagged-template-expressions-not-supported}
-## Tagged template expressions are not supported
-
-<div class="alert is-helpful">
-
-_Tagged template expressions are not supported in metadata._
-
-</div>
-
-The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as the following.
-
-```ts
-// ERROR
-const expression = 'funky';
-const raw = String.raw`A tagged template ${expression} string`;
- ...
- template: '<div>' + raw + '</div>'
- ...
-```
-[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
-is a _tag function_ native to JavaScript ES2015.
-
-The AoT compiler does not support tagged template expressions; avoid them in metadata expressions.
-
-<hr>
-
-{@a symbol-reference-expected}
-## Symbol reference expected
-
-<div class="alert is-helpful">
-
-*The compiler expected a reference to a symbol at the location specified in the error message.*
-
-</div>
-
-This error can occur if you use an expression in the `extends` clause of a class.
-
-<!--
-
-Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
-
--->

aio/content/guide/app-shell.md

@@ -44,12 +44,6 @@ After running this command you will notice that the `angular.json` configuration
     "browserTarget": "my-app:build",
     "serverTarget": "my-app:server",
     "route": "shell"
-  },
-  "configurations": {
-    "production": {
-      "browserTarget": "my-app:build:production",
-      "serverTarget": "my-app:server:production"
-    }
   }
 }
 </code-example>
@@ -62,12 +56,4 @@ Use the CLI to build the `app-shell` target.
 ng run my-app:app-shell
 </code-example>
 
-Or to use the production configuration.
-
-<code-example language="bash">
-ng run my-app:app-shell:production
-</code-example>
-
 To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.
-
-

aio/content/guide/build.md

@@ -8,7 +8,13 @@ This page discusses build-specific configuration options for Angular projects.
 
 You can define different named build configurations for your project, such as *stage* and *production*, with different defaults.
 
-Each named configuration can have defaults for any of the options that apply to the various [builder targets](guide/glossary#target), such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment.
+Each named build configuration can have defaults for any of the options that apply to the various build targets, such as `build`, `serve`, and `test`. The [Angular CLI](cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment.
+
+The following figure shows how a project has multiple build targets, which can be executed using the named configurations that you define.
+
+<figure>
+  <img src="generated/images/guide/build/build-config-targets.gif" alt="build configurations and targets">
+</figure>
 
 ### Configure environment-specific defaults
 
@@ -164,9 +170,8 @@ You can also configure the `serve` command to use the targeted build configurati
 ```
 
 {@a size-budgets}
-{@a configure-size-budgets}
 
-## Configuring size budgets
+## Configure size budgets
 
 As applications grow in functionality, they also grow in size.
 The CLI allows you to set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.
@@ -291,9 +296,10 @@ Autoprefixer looks for the `browserslist` configuration when it prefixes your CS
 
 See the [browserslist repo](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.
 
-### Backward compatibility with Lighthouse
+<div class="alert is-helpful">
+Backward compatibility
 
-If you want to produce a progressive web app and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project, add the following `browserslist` entry to your `package.json` file, in order to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes:
+If you want to produce a progressive web app and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project, add the following browserslist entry to your `package.json` file, in order to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes:
 
 ```
 "browserslist": [
@@ -303,23 +309,7 @@ If you want to produce a progressive web app and are using [Lighthouse](https://
 ]
 ```
 
-### Backward compatibility with CSS grid
-
-CSS grid layout support in Autoprefixer, which was previously on by default, is off by default in Angular 8 and higher.
-
-To use CSS grid with IE10/11, you must explicitly enable it using the `autoplace` option.
-To do this, add the following to the top of the global styles file (or within a specific css selector scope):
-
-```
-/* autoprefixer grid: autoplace /
-```
-or
-```
-/ autoprefixer grid: no-autoplace */
-```
-
-For more information, see [Autoprefixer documentation](https://autoprefixer.github.io/).
-
+</div>
 
 {@a proxy}
 

aio/content/guide/cli-builder.md

@@ -59,7 +59,8 @@ npm install @example/my-builder
 As an example, let’s create a builder that executes a shell command.
 To create a builder, use the `createBuilder()` CLI Builder function, and return a `BuilderOutput` object.
 
-<code-example language="typescript" header="/command/index.ts">
+```
+
 import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
 
 export default createBuilder(_commandBuilder);
@@ -71,13 +72,13 @@ function _commandBuilder(
   ...
 }
 
-</code-example>
+```
 
 Now let’s add some logic to it.
 The following code retrieves the command and arguments from the user options, spawns the new process, and waits for the process to finish.
 If the process is successful (returns a code of 0), it resolves the return value.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -94,8 +95,7 @@ function _commandBuilder(
     });
   });
 }
-
-</code-example>
+```
 
 ### Handling output
 
@@ -105,7 +105,7 @@ This also allows the builder itself to be executed in a separate process, even i
 
 We can retrieve a Logger instance from the context.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder, BuilderContext } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -130,7 +130,7 @@ function _commandBuilder(
   });
 }
 
-</code-example>
+```
 
 ### Progress and status reporting
 
@@ -147,7 +147,7 @@ Use the `BuilderContext.reportStatus()` method to generate a status string of an
 (Note that there’s no guarantee that a long string will be shown entirely; it could be cut to fit the  UI that displays it.)
 Pass an empty string to remove the status.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder, BuilderContext } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -174,8 +174,7 @@ function _commandBuilder(
     });
   });
 }
-
-</code-example>
+```
 
 ## Builder input
 
@@ -192,7 +191,8 @@ For our example builder, we expect the `options` value to be a `JsonObject` with
 
 We can provide the following schema for type validation of these values.
 
-<code-example language="json" header="command/schema.json">
+<code-example language="json">
+
 {
   "$schema": "http://json-schema.org/schema",
   "type": "object",
@@ -222,7 +222,7 @@ To link our builder implementation with its schema and name, we need to create a
 
 Create a file named `builders.json` file that looks like this.
 
-<code-example language="json" header="builders.json">
+<code-example language="json">
 
 {
   "builders": {
@@ -238,7 +238,7 @@ Create a file named `builders.json` file that looks like this.
 
 In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
 
-<code-example language="json" header="package.json">
+<code-example language="json">
 
 {
   "name": "@example/command-runner",
@@ -257,7 +257,7 @@ The first part  of this is the package name (resolved using node resolution), an
 
 Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`.
 
-<code-example language="typescript" header="/command/index.ts">
+<code-example language="typescript">
     context.reportStatus(`Executing "${options.command}"...`);
     const child = childProcess.spawn(options.command, options.args, { stdio: 'pipe' });
 
@@ -267,14 +267,14 @@ Using one of our `options` is very straightforward, we did this in the previous
 
 A builder must have a defined target that associates it with a specific input configuration and [project](guide/glossary#project).
 
-Targets are defined in the `angular.json` [CLI configuration file](guide/workspace-config).
+Targets are defined in the `angular.json` [workspace configuration file](guide/workspace-config).
 A target specifies the builder to use, its default options configuration, and named alternative configurations.
 The Architect tool uses the target definition to resolve input options for a given run.
 
 The  `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'lint'.
-By default, for example, the `build` command runs the builder  `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in   `angular.json`.
+By default, for example, the `build` command runs the builder  `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 {
   "myApp": {
     ...
@@ -361,7 +361,7 @@ npm install @example/command-runner
 
 If we create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 
 {
   // ...
@@ -413,7 +413,7 @@ We need to update the `angular.json` file to add a target for this builder to th
 
 * The configurations key is optional, we'll leave it out for now.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 
 {
   "projects": {
@@ -493,7 +493,7 @@ Use integration testing for your builder, so that you can use the Architect sche
 Here’s an example of a test that runs the command builder.
 The test uses the builder to run the `ls` command, then validates that it ran successfully and listed the proper files.
 
-<code-example language="typescript" header="command/index_spec.ts">
+<code-example language="typescript">
 
 import { Architect } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';

aio/content/guide/creating-libraries.md

@@ -188,23 +188,8 @@ You can rebuild your library whenever you make changes to it, but this extra ste
 *Incremental builds* functionality improves the library-development experience.
 Every time a file is changed a partial build is performed that emits the amended files.
 
-Incremental builds can be run as a background process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command:
+Incremental builds can be run as a backround process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command:
 
 <code-example language="bash">
 ng build my-lib --watch
 </code-example>
-
-<div class="alert is-important">
-
-The CLI `build` command uses a different builder and invokes a different build tool for libraries than it does for applications.
-
-* The  build system for apps, `@angular-devkit/build-angular`, is based on `webpack`, and is included in all new Angular CLI projects.
-* The build system for libraries is based on `ng-packagr`. It is only added to your dependencies when you add a library using `ng generate library my-lib`.
-
-The two build systems support different things, and even where they support the same things, they do those things differently.
-This means that the TypeScript source can result in different JavaScript code in a built library than it would in a built application.
-
-For this reason, an app that depends on a library should only use TypeScript path mappings that point to the *built library*.
-TypeScript path mappings should *not* point to the library source `.ts` files.
-
-</div>

aio/content/guide/dependency-injection.md

@@ -134,7 +134,7 @@ The `@NgModule()` and `@Component()` decorators have the `providers` metadata op
 
 Components are directives, and the `providers` option is inherited from `@Directive()`. You can also configure providers for directives and pipes at the same level as the component.
 
-Learn more about [where to configure providers](guide/hierarchical-dependency-injection).
+Learn more about [where to configure providers](guide/hierarchical-dependency-injection#where-to-register).
 
 </div>
 

aio/content/guide/deployment.md

@@ -8,7 +8,7 @@ When you are ready to deploy your Angular application to a remote server, you ha
 
 ## Simple deployment options
 
-Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques.
+Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques
 
 ### Building and serving from disk
 
@@ -41,7 +41,7 @@ You will need two terminals to get the live-reload experience.
 
   <code-example language="none" class="code-shell">
 
-   lite-server --baseDir="dist/project-name"
+   lite-server --baseDir="dist"
 
   </code-example>
 
@@ -53,35 +53,6 @@ This method is for development and testing only, and is not a supported or secur
 
 </div>
 
-### Automatic deployment with the CLI
-
-The Angular CLI command `ng deploy` (introduced in version 8.3.0) executes the `deploy` [CLI builder](https://angular.io/guide/cli-builder) associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by running `ng add [package name]`.
-
-When you add a package with deployment capability, it'll automatically update your workspace configuration (`angular.json` file) with a `deploy` section for the selected project. You can then use the `ng deploy` command to deploy that project.
-
-For example, the following command automatically deploys a project to Firebase.
-
-<code-example language="none" class="code-shell">
-ng add @angular/fire
-ng deploy
-</code-example>
-
-The command is interactive. In this case, you must have or create a Firebase account, and authenticate using that account. The command prompts you to select a Firebase project for deployment
-
-After the command produces an optimal build of your application (equivalent to `ng deploy --prod`), it'll upload the production assets to Firebase.
-
-In the table below, you can find a list of packages which implement deployment functionality to different platforms. The `deploy` command for each package may require different command line options. You can read more by following the links associated with the package names below:
-
-| Deployment to                                                 | Package                                                                        |
-|---------------------------------------------------------------|--------------------------------------------------------------------------------|
-| [Firebase hosting](https://firebase.google.com/docs/hosting)  | [`@angular/fire`](https://npmjs.org/package/@angular/fire)                     |
-| [Azure](https://azure.microsoft.com/en-us/)                   | [`@azure/ng-deploy`](https://npmjs.org/package/@azure/ng-deploy)               |
-| [Now](https://zeit.co/now)                                    | [`@zeit/ng-deploy`](https://npmjs.org/package/@zeit/ng-deploy)                 |
-| [Netlify](https://www.netlify.com/)                           | [`@netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy) |
-| [GitHub pages](https://pages.github.com/)                     | [`angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)         |
-
-If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your app.
-
 ### Basic deployment to a remote server
 
 For the simplest deployment, create a production build and copy the output directory to a web server.
@@ -304,7 +275,7 @@ Configure the Angular Router to defer loading of all other modules (and their as
 or by [_lazy loading_](guide/router#asynchronous-routing "Lazy loading")
 them on demand.
 
-<div class="callout is-helpful">
+<div class="callout is-helpful>
 
 <header>Don't eagerly import something from a lazy-loaded module</header>
 
@@ -618,14 +589,14 @@ In `angular.json` add two new configuration sections under the `build` and `serv
      ...
     },
     "es5": {
-      "browserTarget": "<app-name>:build:es5"
+      "browserTarget": "app:build:es5"
     }
   }
 },
 
 </code-example>
 
-You can then run the `ng serve` command with this configuration. Make sure to replace `<app-name>` (in `"<app-name>:build:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your app name is `myAngularApp` the config will become `"browserTarget": "myAngularApp:build:es5"`.
+You can then run the serve with this configuration.
 
 <code-example language="none" class="code-shell">
 
@@ -680,24 +651,24 @@ Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5)
 
 <code-example language="json">
 
-"e2e": {
+"test": {
   "builder": "@angular-devkit/build-angular:protractor",
   "options": {
       ...
   },
   "configurations": {
-	  "production": {
-		  ...
-	  },
+	"production": {
+		...
+	},
     "es5": {
-      "devServerTarget": "<app-name>:serve:es5"
+      "devServerTarget": "app:serve:es5"
     }
   }
 },
 
 </code-example>
 
-You can then run the `ng e2e` command with this configuration. Make sure to replace `<app-name>` (in `"<app-name>:serve:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your app name is `myAngularApp` the config will become `"devServerTarget": "myAngularApp:serve:es5"`.
+You can then run the e2e's with this configuration
 
 <code-example language="none" class="code-shell">
 

aio/content/guide/deprecations.md

@@ -321,7 +321,7 @@ In a typical Angular project, the polyfill is not used in production builds, so
 {@a static-query-resolution}
 ### `@ViewChild()` / `@ContentChild()` static resolution as the default
 
-See the [dedicated migration guide for static queries](guide/static-query-migration).
+See our [dedicated migration guide for static queries](guide/static-query-migration).
 
 {@a contentchild-input-together}
 ### `@ContentChild()` / `@Input()` used together
@@ -389,23 +389,6 @@ As of Angular version 8, all  `platform-webworker` APIs are deprecated.
 This includes both packages: `@angular/platform-webworker` and
 `@angular/platform-webworker-dynamic`.
 
-
-## Angular version 9 schematics
-
-{@a renderer-to-renderer2}
-### Migrating from `Renderer` to `Renderer2`
-
-See the [dedicated migration guide for Renderer](guide/migration-renderer).
-
-{@a undecorated-classes}
-### Migrating undecorated classes
-  See the [dedicated migration guide for undecorated classes](guide/migration-undecorated-classes).
-
-{@a flag-migration}
-### Dynamic queries flag migration
-
- See the [dedicated migration guide for dynamic queries](guide/migration-dynamic-flag).
-
 {@a removed}
 ## Removed APIs
 
@@ -413,10 +396,10 @@ The following APIs have been removed starting with version 8.0.0:
 
 | Package | API            | Replacement | Notes |
 | ------- | -------------- | ----------- | ----- |
-| [`@angular/http`](https://v7.angular.io/api/http) | All exports | [`@angular/common/http`](api/common/http) | See [below](#http). |
-[`@angular/http/testing`](https://v7.angular.io/api/http/testing) | All exports | [`@angular/common/http/testing`](api/common/http/testing) | See [below](#http). |
-| `@angular/platform-browser` | [`DOCUMENT`](https://v7.angular.io/api/platform-browser/DOCUMENT) | [`DOCUMENT` in `@angular/common`](api/common/DOCUMENT) | Updating to version 8 with [`ng update`](cli/update) changes this automatically.  |
-| `@angular/core/testing` | [`TestBed.deprecatedOverrideProvider()`](https://v7.angular.io/api/core/testing/TestBed#deprecatedoverrideprovider) | [`TestBed.overrideProvider()`](api/core/testing/TestBed#overrideprovider) | none |
+| [`@angular/http`](https://v7.angular.io/api/http) | All exports | [`@angular/common/http`](https://v7.angular.io/api/common/http) | See [below](#http). |
+[`@angular/http/testing`](https://v7.angular.io/api/http/testing) | All exports | [`@angular/common/http/testing`](https://v7.angular.io/api/common/http/testing) | See [below](#http). |
+| `@angular/platform-browser` | [`DOCUMENT`](https://v7.angular.io/api/platform-browser/DOCUMENT) | [`DOCUMENT` in `@angular/common`](https://v7.angular.io/api/common/DOCUMENT) | Updating to version 8 with [`ng update`](cli/update) changes this automatically.  |
+| `@angular/core/testing` | [`TestBed.deprecatedOverrideProvider()`](https://v7.angular.io/api/core/testing/TestBed#deprecatedoverrideprovider) | [`TestBed.overrideProvider()`] (api/core/testing/TestBed#overrideprovider) | none |
 | `@angular/core/testing` | [`TestBedStatic.deprecatedOverrideProvider()`](https://v7.angular.io/api/core/testing/TestBedStatic#deprecatedoverrideprovider) | [`TestBedStatic.overrideProvider()`](api/core/testing/TestBedStatic#overrideprovider) | none |
 
 
@@ -481,3 +464,100 @@ For more information about using `@angular/common/http`, see the [HttpClient gui
 | --------------------- | ------------------------------------------- |
 | `MockBackend` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
 | `MockConnection` | [`HttpTestingController`](/api/common/http/testing/HttpTestingController) |
+
+## Renderer to Renderer2 migration
+
+### Migration Overview
+
+The `Renderer` class has been marked as deprecated since Angular version 4. This section provides guidance on migrating from this deprecated API to the newer `Renderer2` API and what it means for your app.
+
+### Why should I migrate to Renderer2?
+
+The deprecated `Renderer` class has been removed in version 9 of Angular, so it's necessary to migrate to a supported API.  Using `Renderer2` is the recommended strategy because it supports a similar set of functionality to `Renderer`. The API surface is quite large (with 19 methods), but the schematic should simplify this process for your applications.
+
+### Is there action required on my end?
+
+No. The schematic should handle most cases with the exception of `Renderer.animate()` and `Renderer.setDebugInfo()`, which already aren’t supported.
+
+### What are the `__ngRendererX` methods? Why are they necessary?
+
+Some methods either don't have exact equivalents in `Renderer2`, or they correspond to more than one expression. For example, both renderers have a `createElement()` method, but they're not equal because a call such as `renderer.createElement(parentNode, namespaceAndName)` in the `Renderer` corresponds to the following block of code in `Renderer2`:
+
+```ts
+const [namespace, name] = splitNamespace(namespaceAndName);
+const el = renderer.createElement(name, namespace);
+if (parentNode) {
+  renderer.appendChild(parentNode, el);
+}
+return el;
+```
+
+Migration has to guarantee that the return values of functions and types of variables stay the same. To handle the majority of cases safely, the schematic declares helper functions at the bottom of the user's file. These helpers encapsulate your own logic and keep the replacements inside your code down to a single function call. Here's an example of how the `createElement()` migration looks:
+
+
+**Before:**
+
+```ts
+public createAndAppendElement() {
+  const el = this.renderer.createElement('span');
+  el.textContent = 'hello world';
+  return el;
+}
+```
+
+**After:**
+
+<code-example>
+
+public createAndAppendElement() {
+  const el = __ngRendererCreateElement(this.renderer, this.element, 'span');
+  el.textContent = 'hello world';
+  return el;
+}
+// Generated code at the bottom of the file
+__ngRendererCreateElement(renderer: any, parentNode: any, nameAndNamespace: any) {
+  const [namespace, name] = __ngRendererSplitNamespace(namespaceAndName);
+  const el = renderer.createElement(name, namespace);
+  if (parentNode) {
+    renderer.appendChild(parentNode, el);
+  }
+  return el;
+}
+__ngRendererSplitNamespace(nameAndNamespace: any) {
+  // returns the split name and namespace
+}
+
+</code-example>
+
+When implementing these helper functions, the schematic ensures that they're only declared once per file and that their names are unique enough that there's a small chance of colliding with pre-existing functions in your code. The schematic also keeps their parameter types as `any` so that it doesn't have to insert extra logic that ensures that their values have the correct type.
+
+### I’m a library author. Should I run this migration?
+
+**Library authors should definitely use this migration to move away from the `Renderer`. Otherwise, the libraries won't work with applications built with version 9.**
+
+
+### Full list of method migrations
+
+The following table shows all methods that the migration maps from `Renderer` to `Renderer2`.
+
+|Renderer|Renderer2|
+|---|---|
+|`listen(renderElement, name, callback)`|`listen(renderElement, name, callback)`|
+|`setElementProperty(renderElement, propertyName, propertyValue)`|`setProperty(renderElement, propertyName, propertyValue)`|
+|`setText(renderNode, text)`|`setValue(renderNode, text)`|
+|`listenGlobal(target, name, callback)`|`listen(target, name, callback)`|
+|`selectRootElement(selectorOrNode, debugInfo?)`|`selectRootElement(selectorOrNode)`|
+|`createElement(parentElement, name, debugInfo?)`|`appendChild(parentElement, createElement(name))`|
+|`setElementStyle(el, style, value?)`|`value == null ? removeStyle(el, style) : setStyle(el, style, value)`
+|`setElementAttribute(el, name, value?)`|`attributeValue == null ? removeAttribute(el, name) : setAttribute(el, name, value)`
+|`createText(parentElement, value, debugInfo?)`|`appendChild(parentElement, createText(value))`|
+|`createTemplateAnchor(parentElement)`|`appendChild(parentElement, createComment(''))`|
+|`setElementClass(renderElement, className, isAdd)`|`isAdd ? addClass(renderElement, className) : removeClass(renderElement, className)`|
+|`projectNodes(parentElement, nodes)`|`for (let i = 0; i < nodes.length; i<ins></ins>) { appendChild(parentElement, nodes<i>); }`|
+|`attachViewAfter(node, viewRootNodes)`|`const parentElement = parentNode(node); const nextSibling = nextSibling(node); for (let i = 0; i < viewRootNodes.length; i<ins></ins>) { insertBefore(parentElement, viewRootNodes<i>, nextSibling);}`|
+|`detachView(viewRootNodes)`|`for (let i = 0; i < viewRootNodes.length; i<ins></ins>) {const node = viewRootNodes<i>; const parentElement = parentNode(node); removeChild(parentElement, node);}`|
+|`destroyView(hostElement, viewAllNodes)`|`for (let i = 0; i < viewAllNodes.length; i<ins></ins>) { destroyNode(viewAllNodes<i>); }`|
+|`setBindingDebugInfo()`|This function is a noop in `Renderer2`.|
+|`createViewRoot(hostElement)`|Should be replaced with a reference to `hostElement`|
+|`invokeElementMethod(renderElement, methodName, args?)`|`(renderElement as any)<methodName>.apply(renderElement, args);`|
+|`animate(element, startingStyles, keyframes, duration, delay, easing, previousPlayers?)`|Throws an error (same behavior as `Renderer.animate()`)|

aio/content/guide/docs-style-guide.md

@@ -322,7 +322,6 @@ The <code class="no-auto-link">item</code> property is `true`.
 
 For block code snippets, we generally prefer to display code with
 the Angular documentation _code-example_ component represented by the `<code-example>` tag.
-The `<code-example>` tag has a `header` attribute that you use to identify the file that the example comes from. The header should be used whenever possible to establish the context of the example.
 See [Code snippets and code examples](guide/docs-style-guide#code-snippets-and-code-samples) for more details.
 
 <h3 class="no-toc">Inline code-snippets</h3>
@@ -349,8 +348,6 @@ user input in a command shell or the _output_ of some process.
 **Do not write inline code snippets** unless you have a good reason and the editor's permission to do so.
 In all other cases, code snippets should be generated automatically from tested code samples.
 
-For hypothetical examples such as illustrations of configuration options in a JSON file, you should still use The `<code-example>` tag with the `header` attribute to identify the context.
-
 {@a from-code-samples}
 
 <h3 class="no-toc">Code snippets and code samples</h3>

aio/content/guide/elements.md

@@ -170,7 +170,7 @@ You can download the full code for the example <live-example downloadOnly>here</
 
 Generic DOM APIs, such as `document.createElement()` or `document.querySelector()`, return an element type that is appropriate for the specified arguments. For example, calling `document.createElement('a')` will return an `HTMLAnchorElement`, which TypeScript knows has an `href` property. Similarly, `document.createElement('div')` will return an `HTMLDivElement`, which TypeScript knows has no `href` property.
 
-When called with unknown elements, such as a custom element name (`popup-element` in our example), the methods will return a generic type, such as `HTMLElement`, since TypeScript can't infer the correct type of the returned element.
+When called with unknown elements, such as a custom element name (`popup-element` in our example), the methods will return a generic type, such as `HTMLELement`, since TypeScript can't infer the correct type of the returned element.
 
 Custom elements created with Angular extend `NgElement` (which in turn extends `HTMLElement`). Additionally, these custom elements will have a property for each input of the corresponding component. For example, our `popup-element` will have a `message` property of type `string`.
 
@@ -194,7 +194,7 @@ aDialog.body = 'News';  // <-- ERROR: TypeScript knows there is no `body` proper
 
 This is a good way to quickly get TypeScript features, such as type checking and autocomplete support, for you custom element. But it can get cumbersome if you need it in several places, because you have to cast the return type on every occurrence.
 
-An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLElementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name (for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.):
+An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLELementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name (for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.):
 
 ```ts
 declare global {

aio/content/guide/http.md

@@ -40,7 +40,7 @@ into an application class as shown in the following `ConfigService` example.
   header="app/config/config.service.ts (excerpt)">
 </code-example>
 
-## Requesting data from server
+## Getting JSON data
 
 Applications often request JSON data from the server.
 For example, the app might need a configuration file on the server, `config.json`,
@@ -73,37 +73,45 @@ the component **subscribes** to the method's return value.
 The subscription callback copies the data fields into the component's `config` object,
 which is data-bound in the component template for display.
 
-<div class="callout is-helpful">
- <header>Why write a service?</header>
+### Why write a service
 
 This example is so simple that it is tempting to write the `Http.get()` inside the
 component itself and skip the service.
-In practice, however, data access rarely stays this simple.
-You typically need to post-process the data, add error handling, and maybe some retry logic to
+
+However, data access rarely stays this simple.
+You typically post-process the data, add error handling, and maybe some retry logic to
 cope with intermittent connectivity.
 
 The component quickly becomes cluttered with data access minutia.
 The component becomes harder to understand, harder to test, and the data access logic can't be re-used or standardized.
 
-That's why it's a best practice to separate presentation of data from data access by
+That's why it is a best practice to separate presentation of data from data access by
 encapsulating data access in a separate service and delegating to that service in
 the component, even in simple cases like this one.
-</div>
 
-### Requesting a typed response
+### Type-checking the response
 
-You can structure your `HttpClient` request to declare the type of the response object, to make consuming the output easier and more obvious.
-Specifying the response type acts as a type assertion during the compile time.
+The subscribe callback above requires bracket notation to extract the data values.
 
-To specify the response object type, first define an interface with the required properties.
-(Use an interface rather than a class; a response cannot be automatically converted to an instance of a class.)
+<code-example
+  path="http/src/app/config/config.component.ts"
+  region="v1_callback">
+</code-example>
+
+You can't write `data.heroesUrl` because TypeScript correctly complains that the `data` object from the service does not have a `heroesUrl` property.
+
+The `HttpClient.get()` method parsed the JSON server response into the anonymous `Object` type. It doesn't know what the shape of that object is.
+
+You can tell `HttpClient` the type of the response to make consuming the output easier and more obvious.
+
+First, define an interface with the correct shape:
 
 <code-example
   path="http/src/app/config/config.service.ts"
   region="config-interface">
 </code-example>
 
-Next, specify that interface as the `HttpClient.get()` call's type parameter in the service.
+Then, specify that interface as the `HttpClient.get()` call's type parameter in the service:
 
 <code-example
   path="http/src/app/config/config.service.ts"
@@ -111,12 +119,6 @@ Next, specify that interface as the `HttpClient.get()` call's type parameter in
   header="app/config/config.service.ts (getConfig v.2)">
 </code-example>
 
-<div class="alert is-helpful">
-
- When you pass an interface as a type parameter to the `HttpClient.get()` method, use the RxJS `map` operator to transform the response data as needed by the UI. You can then pass the transformed data to the [async pipe](api/common/AsyncPipe).
-
-</div>
-
 The callback in the updated component method receives a typed data object, which is
 easier and safer to consume:
 
@@ -126,24 +128,6 @@ easier and safer to consume:
   header="app/config/config.component.ts (showConfig v.2)">
 </code-example>
 
-<div class="alert is-important">
-
-Specifying the response type is a declaration to TypeScript that it should expect your response to be of the given type.
-This is a build-time check and doesn't guarantee that the server will actually respond with an object of this type. It is up to the server to ensure that the type specified by the server API is returned.
-
-</div>
-
-To access properties that are defined in an interface, you must explicitly convert the Object you get from the JSON to the required response type.
-For example, the following `subscribe` callback receives `data` as an Object, and then type-casts it in order to access the properties.
-
-<code-example>
-   .subscribe(data => this.config = {
-    heroesUrl: (data as any).heroesUrl,
-    textfile:  (data as any).textfile,
-   });
-</code-example>
-
-
 ### Reading the full response
 
 The response body doesn't return all the data you may need. Sometimes servers return special headers or status codes to indicate certain conditions that are important to the application workflow.
@@ -155,7 +139,7 @@ Tell `HttpClient` that you want the full response with the `observe` option:
   region="getConfigResponse">
 </code-example>
 
-Now `HttpClient.get()` returns an `Observable` of type `HttpResponse` rather than just the JSON data.
+Now `HttpClient.get()` returns an `Observable` of typed `HttpResponse` rather than just the JSON data.
 
 The component's `showConfigResponse()` method displays the response headers as well as the configuration:
 
@@ -168,54 +152,6 @@ The component's `showConfigResponse()` method displays the response headers as w
 
 As you can see, the response object has a `body` property of the correct type.
 
-### Making a JSONP request
-
-Apps can use the the `HttpClient` to make [JSONP](https://en.wikipedia.org/wiki/JSONP) requests across domains when the server doesn't support [CORS protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
-
-Angular JSONP requests return an `Observable`.
-Follow the pattern for subscribing to observables and use the RxJS `map` operator to transform the response before using the [async pipe](api/common/AsyncPipe) to manage the results.
-
-In Angular, use JSONP by including `HttpClientJsonpModule` in the `NgModule` imports.
-In the following example, the `searchHeroes()` method uses a JSONP request to query for heroes whose names contain the search term.
-
-```ts
-/* GET heroes whose name contains search term */
-searchHeroes(term: string): Observable {
-  term = term.trim();
-
-  let heroesURL = `${this.heroesURL}?${term}`;
-  return this.http.jsonp(heroesUrl, 'callback').pipe(
-      catchError(this.handleError('searchHeroes', []) // then handle the error
-    );
-};
-```
-
-This request passes the `heroesURL` as the first parameter and the callback function name as the second parameter.
-The response is wrapped in the callback function, which takes the observables returned by the JSONP method and pipes them through to the error handler.
-
-### Requesting non-JSON data
-
-Not all APIs return JSON data.
-In this next example, a `DownloaderService` method reads a text file from the server and logs the file contents, before returning those contents to the caller as an `Observable<string>`.
-
-<code-example
-  path="http/src/app/downloader/downloader.service.ts"
-  region="getTextFile"
-  header="app/downloader/downloader.service.ts (getTextFile)" linenums="false">
-</code-example>
-
-`HttpClient.get()` returns a string rather than the default JSON because of the `responseType` option.
-
-The RxJS `tap` operator (as in "wiretap") lets the code inspect both success and error values passing through the observable without disturbing them.
-
-A `download()` method in the `DownloaderComponent` initiates the request by subscribing to the service method.
-
-<code-example
-  path="http/src/app/downloader/downloader.component.ts"
-  region="download"
-  header="app/downloader/downloader.component.ts (download)" linenums="false">
-</code-example>
-
 ## Error handling
 
 What happens if the request fails on the server, or if a poor network connection prevents it from even reaching the server? `HttpClient` will return an _error_ object instead of a successful response.
@@ -268,7 +204,7 @@ and _pipe them through_ to the error handler.
   header="app/config/config.service.ts (getConfig v.3 with error handler)">
 </code-example>
 
-### Retrying
+### `retry()`
 
 Sometimes the error is transient and will go away automatically if you try again.
 For example, network interruptions are common in mobile scenarios, and trying again
@@ -306,34 +242,29 @@ If you're following along with these code snippets, note that you must import th
   header="app/config/config.service.ts (RxJS imports)">
 </code-example>
 
-## HTTP headers
+## Requesting non-JSON data
 
-Many servers require extra headers for save operations.
-For example, they may require a "Content-Type" header to explicitly declare the MIME type of the request body; or the server may require an authorization token.
-
-### Adding headers
-
-The `HeroesService` defines such headers in an `httpOptions` object that will be passed
-to every `HttpClient` save method.
+Not all APIs return JSON data. In this next example,
+a `DownloaderService` method reads a text file from the server
+and logs the file contents, before returning those contents to the caller
+as an `Observable<string>`.
 
 <code-example
-  path="http/src/app/heroes/heroes.service.ts"
-  region="http-options"
-  header="app/heroes/heroes.service.ts (httpOptions)">
+  path="http/src/app/downloader/downloader.service.ts"
+  region="getTextFile"
+  header="app/downloader/downloader.service.ts (getTextFile)">
 </code-example>
 
-### Updating headers
+`HttpClient.get()` returns a string rather than the default JSON because of the `responseType` option.
 
-You can't directly modify the existing headers within the previous options
-object because instances of the `HttpHeaders` class are immutable.
+The RxJS `tap` operator (as in "wiretap") lets the code inspect good and error values passing through the observable without disturbing them.
 
-Use the `set()` method instead, to return a clone of the current instance with the new changes applied.
-
-Here's how you might update the authorization header (after the old token expired) before making the next request.
+A `download()` method in the `DownloaderComponent` initiates the request by subscribing to the service method.
 
 <code-example
-  path="http/src/app/heroes/heroes.service.ts"
-   region="update-headers" linenums="false">
+  path="http/src/app/downloader/downloader.component.ts"
+  region="download"
+  header="app/downloader/downloader.component.ts (download)">
 </code-example>
 
 ## Sending data to the server
@@ -345,6 +276,22 @@ that fetches heroes and enables users to add, delete, and update them.
 
 The following sections excerpt methods of the sample's `HeroesService`.
 
+### Adding headers
+
+Many servers require extra headers for save operations.
+For example, they may require a "Content-Type" header to explicitly declare
+the MIME type of the request body.
+Or perhaps the server requires an authorization token.
+
+The `HeroesService` defines such headers in an `httpOptions` object that will be passed
+to every `HttpClient` save method.
+
+<code-example
+  path="http/src/app/heroes/heroes.service.ts"
+  region="http-options"
+  header="app/heroes/heroes.service.ts (httpOptions)">
+</code-example>
+
 ### Making a POST request
 
 Apps often POST data to a server. They POST when submitting a form.
@@ -466,8 +413,118 @@ in order to initiate the request.
 
 We have discussed the basic HTTP functionality in `@angular/common/http`, but sometimes you need to do more than make simple requests and get data back.
 
-{@a intercepting-requests-and-responses }
-### HTTP interceptors
+### Configuring the request
+
+Other aspects of an outgoing request can be configured via the options object
+passed as the last argument to the `HttpClient` method.
+
+You [saw earlier](#adding-headers) that the `HeroesService` sets the default headers by
+passing an options object (`httpOptions`) to its save methods.
+You can do more.
+
+#### Update headers
+
+You can't directly modify the existing headers within the previous options
+object because instances of the `HttpHeaders` class are immutable.
+
+Use the `set()` method instead.
+It returns a clone of the current instance with the new changes applied.
+
+Here's how you might update the authorization header (after the old token expired)
+before making the next request.
+
+<code-example
+  path="http/src/app/heroes/heroes.service.ts"
+  region="update-headers">
+</code-example>
+
+#### URL Parameters
+
+Adding URL search parameters works a similar way.
+Here is a `searchHeroes` method that queries for heroes whose names contain the search term.
+
+<code-example
+  path="http/src/app/heroes/heroes.service.ts"
+  region="searchHeroes">
+</code-example>
+
+If there is a search term, the code constructs an options object with an HTML URL-encoded search parameter. If the term were "foo", the GET request URL would be `api/heroes/?name=foo`.
+
+The `HttpParams` are immutable so you'll have to use the `set()` method to update the options.
+
+### Debouncing requests
+
+The sample includes an _npm package search_ feature.
+
+When the user enters a name in a search-box, the `PackageSearchComponent` sends
+a search request for a package with that name to the NPM web API.
+
+Here's a pertinent excerpt from the template:
+
+<code-example
+  path="http/src/app/package-search/package-search.component.html"
+  region="search"
+  header="app/package-search/package-search.component.html (search)">
+</code-example>
+
+The `(keyup)` event binding sends every keystroke to the component's `search()` method.
+
+Sending a request for every keystroke could be expensive.
+It's better to wait until the user stops typing and then send a request.
+That's easy to implement with RxJS operators, as shown in this excerpt.
+
+<code-example
+  path="http/src/app/package-search/package-search.component.ts"
+  region="debounce"
+  header="app/package-search/package-search.component.ts (excerpt)">
+</code-example>
+
+The `searchText$` is the sequence of search-box values coming from the user.
+It's defined as an RxJS `Subject`, which means it is a multicasting `Observable`
+that can also produce values for itself by calling `next(value)`,
+as happens in the `search()` method.
+
+Rather than forward every `searchText` value directly to the injected `PackageSearchService`,
+the code in `ngOnInit()` _pipes_ search values through three operators:
+
+1. `debounceTime(500)` - wait for the user to stop typing (1/2 second in this case).
+1. `distinctUntilChanged()` - wait until the search text changes.
+1. `switchMap()` - send the search request to the service.
+
+The code sets `packages$` to this re-composed `Observable` of search results.
+The template subscribes to `packages$` with the [AsyncPipe](api/common/AsyncPipe)
+and displays search results as they arrive.
+
+A search value reaches the service only if it's a new value and the user has stopped typing.
+
+<div class="alert is-helpful">
+
+The `withRefresh` option is explained [below](#cache-refresh).
+
+</div>
+
+#### _switchMap()_
+
+The `switchMap()` operator has three important characteristics.
+
+1. It takes a function argument that returns an `Observable`.
+`PackageSearchService.search` returns an `Observable`, as other data service methods do.
+
+2. If a previous search request is still _in-flight_ (as when the connection is poor),
+it cancels that request and sends a new one.
+
+3. It returns service responses in their original request order, even if the
+server returns them out of order.
+
+
+<div class="alert is-helpful">
+
+If you think you'll reuse this debouncing logic,
+consider moving it to a utility function or into the `PackageSearchService` itself.
+
+</div>
+
+### Intercepting requests and responses
 
 _HTTP Interception_ is a major feature of `@angular/common/http`.
 With interception, you declare _interceptors_ that inspect and transform HTTP requests from your application to the server.
@@ -585,7 +642,7 @@ You may have expected the `intercept()` and `handle()` methods to return observa
 
 Instead they return observables of `HttpEvent<any>`.
 
-That's because interceptors work at a lower level than those `HttpClient` methods. A single HTTP request can generate multiple _events_, including upload and download progress events. The `HttpResponse` class itself is actually an event, whose type is `HttpEventType.Response`.
+That's because interceptors work at a lower level than those `HttpClient` methods. A single HTTP request can generate multiple _events_, including upload and download progress events. The `HttpResponse` class itself is actually an event, whose type is `HttpEventType.HttpResponseEvent`.
 
 Many interceptors are only concerned with the outgoing request and simply return the event stream from `next.handle()` without modifying it.
 
@@ -788,117 +845,6 @@ the cached response first (and immediately), followed later
 by the response from the server.
 Subscribers see a sequence of _two_ responses.
 
-### Configuring the request
-
-Other aspects of an outgoing request can be configured via the options object
-passed as the last argument to the `HttpClient` method.
-
-In [Adding headers](#adding-headers), the `HeroesService` set the default headers by
-passing an options object (`httpOptions`) to its save methods.
-You can do more.
-
-#### URL query strings
-
-In this section, you will see how to use the `HttpParams` class to add URL query strings in your `HttpRequest`.
-
-The following `searchHeroes` method queries for heroes whose names contain the search term.
-Start by importing `HttpParams` class.
-
-<code-example hideCopy language="typescript">
-import {HttpParams} from "@angular/common/http";
-</code-example>
-
-<code-example
-  path="http/src/app/heroes/heroes.service.ts"
-  region="searchHeroes" linenums="false">
-</code-example>
-
-If there is a search term, the code constructs an options object with an HTML URL-encoded search parameter.
-If the term were "foo", the GET request URL would be `api/heroes?name=foo`.
-
-The `HttpParams` are immutable so you'll have to save the returned value of the `.set()` method in order  to update the options.
-
-#### Use `fromString` to create HttpParams
-
-You can also create HTTP parameters directly from a query string by using the `fromString` variable:
-
-<code-example hideCopy language="typescript">
-const params = new HttpParams({fromString: 'name=foo'});
-</code-example>
-
-### Debouncing requests
-
-The sample includes an _npm package search_ feature.
-
-When the user enters a name in a search-box, the `PackageSearchComponent` sends
-a search request for a package with that name to the NPM web API.
-
-Here's a pertinent excerpt from the template:
-
-<code-example
-  path="http/src/app/package-search/package-search.component.html"
-  region="search"
-  header="app/package-search/package-search.component.html (search)">
-</code-example>
-
-The `keyup` event binding sends every keystroke to the component's `search()` method.
-
-Sending a request for every keystroke could be expensive.
-It's better to wait until the user stops typing and then send a request.
-That's easy to implement with RxJS operators, as shown in this excerpt.
-
-<code-example
-  path="http/src/app/package-search/package-search.component.ts"
-  region="debounce"
-  header="app/package-search/package-search.component.ts (excerpt)">
-</code-example>
-
-The `searchText$` is the sequence of search-box values coming from the user.
-It's defined as an RxJS `Subject`, which means it is a multicasting `Observable`
-that can also emit values for itself by calling `next(value)`,
-as happens in the `search()` method.
-
-Rather than forward every `searchText` value directly to the injected `PackageSearchService`,
-the code in `ngOnInit()` _pipes_ search values through three operators:
-
-1. `debounceTime(500)` - wait for the user to stop typing (1/2 second in this case).
-
-2. `distinctUntilChanged()` - wait until the search text changes.
-
-3. `switchMap()` - send the search request to the service.
-
-The code sets `packages$` to this re-composed `Observable` of search results.
-The template subscribes to `packages$` with the [AsyncPipe](api/common/AsyncPipe)
-and displays search results as they arrive.
-
-A search value reaches the service only if it's a new value and the user has stopped typing.
-
-<div class="alert is-helpful">
-
-The `withRefresh` option is explained [below](#cache-refresh).
-
-</div>
-
-#### _switchMap()_
-
-The `switchMap()` operator has three important characteristics.
-
-1. It takes a function argument that returns an `Observable`.
-`PackageSearchService.search` returns an `Observable`, as other data service methods do.
-
-2. If a previous search request is still _in-flight_ (as when the network connection is poor),
-it cancels that request and sends a new one.
-
-3. It returns service responses in their original request order, even if the
-server returns them out of order.
-
-<div class="alert is-helpful">
-
-If you think you'll reuse this debouncing logic,
-consider moving it to a utility function or into the `PackageSearchService` itself.
-
-</div>
-
 ### Listening to progress events
 
 Sometimes applications transfer large amounts of data and those transfers can take a long time.
@@ -949,26 +895,22 @@ by returning an observable of simulated events.
 
 </div>
 
-## Security: XSRF protection
+## Security: XSRF Protection
 
-[Cross-Site Request Forgery (XSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery) is an attack technique by which the attacker can trick an authenticated user into unknowingly executing actions on your website.
-`HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-Header_Token) used to prevent XSRF attacks.
-When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`.
-Since only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
+[Cross-Site Request Forgery (XSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery) is an attack technique by which the attacker can trick an authenticated user into unknowingly executing actions on your website. `HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-Header_Token) used to prevent XSRF attacks. When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`. Since only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
 
-By default, an interceptor sends this header on all mutating requests (such as POST)
-to relative URLs, but not on GET/HEAD requests or on requests with an absolute URL.
+By default, an interceptor sends this header on all mutating requests (POST, etc.)
+to relative URLs but not on GET/HEAD requests or
+on requests with an absolute URL.
 
-To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request.
-On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request.
-The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens.
-Set the token to a digest of your site's authentication cookie with a salt for added security.
+To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request. On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens. Set the token to a digest of your site's authentication
+cookie with a salt for added security.
 
 In order to prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name.
 
 <div class="alert is-important">
 
-*`HttpClient` supports only the client half of the XSRF protection scheme.*
+*Note that `HttpClient` supports only the client half of the XSRF protection scheme.*
 Your backend service must be configured to set the cookie for your page, and to verify that
 the header is present on all eligible requests.
 If not, Angular's default protection will be ineffective.
@@ -987,13 +929,19 @@ use `HttpClientXsrfModule.withOptions()` to override the defaults.
 
 ## Testing HTTP requests
 
-As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server.
-The `@angular/common/http/testing` library makes it straightforward to set up such mocking .
+Like any external dependency, the HTTP backend needs to be mocked
+so your tests can simulate interaction with a remote server.
+The `@angular/common/http/testing` library makes
+setting up such mocking straightforward.
 
-Angular's HTTP testing library is designed for a pattern of testing in which the app executes code and makes requests first.
-The test then expects that certain requests have or have not been made,
+### Mocking philosophy
+
+Angular's HTTP testing library is designed for a pattern of testing wherein
+the app executes code and makes requests first.
+
+Then a test expects that certain requests have or have not been made,
 performs assertions against those requests,
-and finally provides responses by "flushing" each expected request.
+and finally provide responses by "flushing" each expected request.
 
 At the end, tests may verify that the app has made no unexpected requests.
 

aio/content/guide/i18n.md

@@ -193,7 +193,7 @@ text messages with different descriptions (not different meanings), then they ar
 The angular i18n extractor tool generates a file with a translation unit entry for each `i18n`
 attribute in a template. By default, it assigns each translation unit a unique id such as this one:
 
-<code-example path="i18n/doc-files/messages.fr.xlf.html" header="messages.fr.xlf.html" region="generated-id"></code-example>
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="generated-id"></code-example>
 
 When you change the translatable text, the extractor tool generates a new id for that translation unit.
 You must then update the translation file with the new id.
@@ -206,7 +206,7 @@ The example below defines the custom id `introductionHeader`:
 When you specify a custom id, the extractor tool and compiler generate a translation unit with that
 custom id.
 
-<code-example path="i18n/doc-files/messages.fr.xlf.html" header="messages.fr.xlf.html" region="custom-id"></code-example>
+<code-example path="i18n/doc-files/messages.fr.xlf.html" region="custom-id"></code-example>
 
 The custom id is persistent. The extractor tool does not change it when the translatable text changes.
 Therefore, you do not need to update the translation. This approach makes maintenance easier.
@@ -379,7 +379,7 @@ Open a terminal window at the root of the app project and run the CLI command `x
   ng xi18n
 </code-example>
 
-By default, the command creates a file named `messages.xlf` in your project's root directory.
+By default, the command creates a file named `messages.xlf` in your `src/` folder.
 
 <div class="alert is-helpful">
 
@@ -388,7 +388,7 @@ If you don't use the CLI, you have two options:
 For more information, see the [`ng xi18n` command documentation](cli/xi18n).
 * You can use the CLI Webpack plugin `AngularCompilerPlugin` from the `@ngtools/webpack` package.
 Set the parameters `i18nOutFile` and `i18nOutFormat` to trigger the extraction.
-For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/ngtools/webpack).
+For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
 
 </div>
 
@@ -645,9 +645,9 @@ ready-to-run application package, typically for production.
 
 When you internationalize with the AOT compiler, you must pre-build a separate application
 package for each language and serve the appropriate package based on either server-side language
-detection or URL parameters.
+detection or url parameters.
 
-To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your CLI configuration file, `angular.json`.
+To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your `angular.json` file.
 
 * `i18nFile`: the path to the translation file.
 * `i18nFormat`: the format of the translation file.
@@ -707,24 +707,22 @@ the CLI configuration file, `angular.json`.
         "i18nLocale": "fr",
         "i18nMissingTranslation": "error",
       }
-    }
+// ...
+"serve": {
+  "builder": "@angular-devkit/build-angular:dev-server",
+  "options": {
+    "browserTarget": "my-project:build"
   },
-  ...
-  "serve": {
-    "builder": "@angular-devkit/build-angular:dev-server",
-    "options": {
-      "browserTarget": "my-project:build"
+  "configurations": {
+    "production": {
+      "browserTarget": "my-project:build:production"
     },
-    "configurations": {
-      "production": {
-        "browserTarget": "my-project:build:production"
-      },
-      "fr": {
-        "browserTarget": "my-project:build:fr"
-      }
+    "fr": {
+      "browserTarget": "my-project:build:fr"
     }
   }
-}
+},
+
 ```
 
 The same configuration options can also be provided through the CLI with your existing `production` configuration.
@@ -763,7 +761,6 @@ Then provide the `LOCALE_ID` in the main module:
 
 {@a missing-translation}
 ### Report missing translations
-
 By default, 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:
@@ -773,7 +770,7 @@ compilation, the app will fail to load.
 * Warning (default): show a 'Missing translation' warning in the console or shell.
 * Ignore: do nothing.
 
-You specify the warning level in the `configurations` section of your Angular CLI configuration file, `angular.json`. The example below shows how to set the warning level to error.
+You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
 
 ```
 "configurations": {
@@ -787,7 +784,7 @@ You specify the warning level in the `configurations` section of your Angular CL
 
 If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
 the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
-error.
+error:
 
 <code-example path="i18n/doc-files/main.3.ts" header="src/main.ts">
 </code-example>

aio/content/guide/lazy-loading-ngmodules.md

@@ -5,13 +5,13 @@
 By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial
 bundle sizes smaller, which in turn helps decrease load times.
 
-For the final sample app with two lazy-loaded modules that this page describes, see the
+For the final sample app with two lazy loaded modules that this page describes, see the
 <live-example></live-example>.
 
-There are three main steps to setting up a lazy-loaded feature module:
+There are three main steps to setting up a lazy loaded feature module:
 
-1. Create the feature module with the CLI, using the `--route` flag.
-1. Create the feature module’s component.
+1. Create the feature module.
+1. Create the feature module’s routing module.
 1. Configure the routes.
 
 ## Set up an app
@@ -21,9 +21,9 @@ create one with the CLI. If you do already have an app, skip to
 [Configure the routes](#config-routes). Enter the following command
 where `customer-app` is the name of your app:
 
-<code-example language="bash">
+```sh
 ng new customer-app --routing
-</code-example>
+```
 
 This creates an app called `customer-app` and the `--routing` flag
 generates a file called `app-routing.module.ts`, which is one of
@@ -32,63 +32,71 @@ Navigate into the project by issuing the command `cd customer-app`.
 
 ## Create a feature module with routing
 
-Next, you’ll need a feature module with a component to route to.
-To make one, enter the following command in the terminal, where `customers` is the name of the feature module, and `customer-list` is the route path for loading the `customers` component:
+Next, you’ll need a feature module to route to. To make one, enter
+the following command at the terminal window prompt where `customers` is the name of the module:
 
-<code-example language="bash">
-ng generate module customers --route customer-list --module app.module
-</code-example>
+```sh
+ng generate module customers --routing
+```
 
-This creates a `customers` folder with the new lazy-loadable module `CustomersModule` defined in the file `customers.module.ts`. The command automatically adds the `CustomerComponent` to the new feature module.
+This creates a customers folder with two files inside; `CustomersModule`
+and `CustomersRoutingModule`. `CustomersModule` will act as the gatekeeper
+for anything that concerns customers. `CustomersRoutingModule` will handle
+any customer-related routing. This keeps the app’s structure organized as
+the app grows and allows you to reuse this module while easily keeping its routing intact.
 
-Because the new module is meant to be lazy-loaded, the command does NOT add a reference for the new feature module to the root application's module file, `app.module.ts`.
-Instead, it adds the declared route, `customer-list` to the `Routes` array declared in the module provided as the `--module` option.
+The CLI imports the `CustomersRoutingModule` into the `CustomersModule` by
+adding a JavaScript import statement at the top of the file and adding
+`CustomersRoutingModule` to the `@NgModule` `imports` array.
 
-<code-example language="typescript" header="src/app/app-routing.module.ts">
-const routes: Routes = [
-    { path: 'customer-list',
-      loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
-    ];
-</code-example>
+## Add a component to the feature module
 
-Notice that the lazy-loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports.
-The import path is the relative path to the module.
+In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads `CustomersModule`. At the command line, enter the following:
 
-### Add another feature module
+```sh
+ng generate component customers/customer-list
+```
 
-Use the same command to create a second lazy-loaded feature module with routing, along with its stub component.
+This creates a folder inside of `customers` called `customer-list`
+with the four files that make up the component.
 
-<code-example language="bash">
-ng generate module orders --route order-list --module app.module
-</code-example>
+Just like with the routing module, the CLI imports the
+`CustomerListComponent` into the `CustomersModule`.
 
-This creates a new folder called `orders` containing an `OrdersModule` and `OrdersRoutingModule`, along with the new `OrderComponent` source files.
-The `order-list` route is added to the `Routes` array in `app-routing.module.ts`, using the lazy-loading syntax.
 
-<code-example language="typescript" header="src/app/app-routing.module.ts">
-const routes: Routes = [
-    { path: 'customer-list',
-      loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
-    { path: 'order-list',
-      loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }
-    ];
-</code-example>
+## Add another feature module
+
+For another place to route to, create a second feature module with routing:
+
+```sh
+ng generate module orders --routing
+```
+
+This makes a new folder called `orders` containing an `OrdersModule` and an `OrdersRoutingModule`.
+
+Now, just like with the `CustomersModule`, give it some content:
+
+```sh
+ng generate component orders/order-list
+```
 
 ## Set up the UI
 
-Though you can type the URL into the address bar, a navigation UI is easier for the user and more common.
-Replace the default placeholder markup in `app.component.html` with a custom nav
+Though you can type the URL into the address bar, a nav
+is easier for the user and more common. Replace the default
+placeholder markup in `app.component.html` with a custom nav
 so you can easily navigate to your modules in the browser:
 
 
-<code-example path="lazy-loading-ngmodules/src/app/app.component.html" header="app.component.html" region="app-component-template" header="src/app/app.component.html"></code-example>
+<code-example path="lazy-loading-ngmodules/src/app/app.component.html" region="app-component-template" header="src/app/app.component.html"></code-example>
+
 
 
 To see your app in the browser so far, enter the following command in the terminal window:
 
-<code-example language="bash">
+```sh
 ng serve
-</code-example>
+```
 
 Then go to `localhost:4200` where you should see “app works!” and three buttons.
 
@@ -96,42 +104,59 @@ Then go to `localhost:4200` where you should see “app works!” and three butt
  <img src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300" alt="three buttons in the browser">
 </figure>
 
-These buttons work, because the CLI automatically added the routes to the feature modules to the `routes` array in `app.module.ts`.
+
+To make the buttons work, you need to configure the routing modules.
 
 {@a config-routes}
 
-## Imports and route configuration
+## Configure the routes
+
+The two feature modules, `OrdersModule` and `CustomersModule`, have to be
+wired up to the `AppRoutingModule` so the router knows about them. The structure is as follows:
+
+<figure>
+ <img src="generated/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg" width="400" alt="lazy loaded modules diagram">
+</figure>
+
+
+Each feature module acts as a doorway via the router. In the `AppRoutingModule`, you configure the routes to the feature modules, in this case `OrdersModule` and `CustomersModule`. This way, the router knows to go to the feature module. The feature module then connects the `AppRoutingModule` to the `CustomersRoutingModule` or the `OrdersRoutingModule`. Those routing modules tell the router where to go to load relevant components.
+
+### Routes at the app level
 
-The CLI automatically added each feature module to the routes map at the application level.
-Finish this off by adding the default route.
 In `AppRoutingModule`, update the `routes` array with the following:
 
-<code-example path="lazy-loading-ngmodules/src/app/app-routing.module.ts" id="app-routing.module.ts" region="const-routes" header="src/app/app-routing.module.ts"></code-example>
 
-The first two paths are the routes to the `CustomersModule` and the `OrdersModule`.
-The final entry defines a default route. The empty path matches everything that doesn't match an earlier path.
+<code-example path="lazy-loading-ngmodules/src/app/app-routing.module.ts" region="const-routes" header="src/app/app-routing.module.ts"></code-example>
 
 
+The import statements stay the same. The first two paths are the routes to the `CustomersModule` and the `OrdersModule` respectively. Notice that the lazy loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports. The import path is the relative path to the module.
+
 ### Inside the feature module
 
-Next, take a look at `customers.module.ts`. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here.
+Next, take a look at `customers.module.ts`. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here. The feature module is like a connector between the `AppRoutingModule` and the feature routing module. The `AppRoutingModule` imports the feature module, `CustomersModule`, and `CustomersModule` in turn imports the `CustomersRoutingModule`.
+
+
+<code-example path="lazy-loading-ngmodules/src/app/customers/customers.module.ts" region="customers-module" header="src/app/customers/customers.module.ts"></code-example>
+
 
-<code-example path="lazy-loading-ngmodules/src/app/customers/customers.module.ts" id="customers.module.ts" region="customers-module" header="src/app/customers/customers.module.ts"></code-example>
 
 The `customers.module.ts` file imports the `CustomersRoutingModule` and `CustomerListComponent` so the `CustomersModule` class can have access to them. `CustomersRoutingModule` is then listed in the `@NgModule` `imports` array giving `CustomersModule` access to its own routing module, and `CustomerListComponent` is in the `declarations` array, which means `CustomerListComponent` belongs to the `CustomersModule`.
 
 
-The feature module has its own routing module, `customers-routing.module.ts`. The `AppRoutingModule` imports the feature module, `CustomersModule`, and `CustomersModule` in turn imports the `CustomersRoutingModule`.
+### Configure the feature module’s routes
 
-The feature-specific routing module imports its own feature component, `CustomerListComponent`, along with the other JavaScript import statements. It also adds the route to its own component.
+The next step is in `customers-routing.module.ts`. First, import the component at the top of the file with the other JavaScript import statements. Then, add the route to `CustomerListComponent`.
+
+<code-example path="lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts" region="customers-routing-module" header="src/app/customers/customers-routing.module.ts"></code-example>
 
-<code-example path="lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts" id="customers-routing.module.ts" region="customers-routing-module" header="src/app/customers/customers-routing.module.ts"></code-example>
 
 Notice that the `path` is set to an empty string. This is because the path in `AppRoutingModule` is already set to `customers`, so this route in the `CustomersRoutingModule`, is already within the `customers` context. Every route in this routing module is a child route.
 
-The other feature module's routing module is configured similarly.
+Repeat this last step of importing the `OrdersListComponent` and configuring the Routes array for the `orders-routing.module.ts`:
 
-<code-example path="lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts" id="orders-routing.module.ts" region="orders-routing-module-detail" header="src/app/orders/orders-routing.module.ts (excerpt)"></code-example>
+<code-example path="lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts" region="orders-routing-module-detail" header="src/app/orders/orders-routing.module.ts (excerpt)"></code-example>
+
+Now, if you view the app in the browser, the three buttons take you to each module.
 
 ## Confirm it’s working
 
@@ -142,7 +167,7 @@ You can check to see that a module is indeed being lazy loaded with the Chrome d
 </figure>
 
 
-Click on the Orders or Customers button. If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.
+Click on the Orders or Customers button. If you see a chunk appear, you’ve wired everything up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.
 
 
 <figure>
@@ -161,17 +186,17 @@ Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform.
 
 ## `forRoot()` and `forChild()`
 
-You might have noticed that the CLI adds `RouterModule.forRoot(routes)` to the `app-routing.module.ts` `imports` array.
-This lets Angular know that this module, `AppRoutingModule`, is a routing module and `forRoot()` specifies that this is the root routing module.
-It configures all the routes you pass to it, gives you access to the router directives, and registers the `RouterService`.
+You might have noticed that the CLI adds `RouterModule.forRoot(routes)` to the `app-routing.module.ts` `imports` array. This lets Angular know that this module,
+`AppRoutingModule`, is a routing module and `forRoot()` specifies that this is the root
+routing module. It configures all the
+routes you pass to it, gives you access to the router directives, and registers the `RouterService`.
 Use `forRoot()` in the `AppRoutingModule`&mdash;that is, one time in the app at the root level.
 
-The CLI also adds `RouterModule.forChild(routes)` to feature routing modules.
-This way, Angular knows that the route list is only responsible for providing additional routes and is intended for feature modules.
-You can use `forChild()` in multiple modules.
+The CLI also adds `RouterModule.forChild(routes)` to feature routing modules. This way, Angular
+knows that the route list is only responsible for providing additional routes and is intended for feature modules. You can use `forChild()` in multiple modules.
+
+`forRoot()` contains injector configuration which is global; such as configuring the Router. `forChild()` has no injector configuration, only directives such as `RouterOutlet` and `RouterLink`.
 
-The `forRoot()` method takes care of the *global* injector configuration for the Router.
-The `forChild()` method has no injector configuration. It uses directives such as `RouterOutlet` and `RouterLink`.
 For more information, see the [`forRoot()` pattern](guide/singleton-services#forRoot) section of the [Singleton Services](guide/singleton-services) guide.
 
 <hr>
@@ -184,3 +209,4 @@ You may also be interested in the following:
 * [Types of Feature Modules](guide/module-types).
 * [Route-level code-splitting in Angular](https://web.dev/route-level-code-splitting-in-angular/)
 * [Route preloading strategies in Angular](https://web.dev/route-preloading-in-angular/)
+

aio/content/guide/lifecycle-hooks.md

@@ -2,7 +2,8 @@
 
 A component has a lifecycle managed by Angular.
 
-Angular creates and renders components along with their children, checks when their data-bound properties change, and destroys them before removing them from the DOM.
+Angular creates it, renders it, creates and renders its children,
+checks it when its data-bound properties change, and destroys it before removing it from the DOM.
 
 Angular offers **lifecycle hooks**
 that provide visibility into these key life moments and the ability to act when they occur.

aio/content/guide/migration-dynamic-flag.md

@@ -1,107 +0,0 @@
-
-# Dynamic queries flag migration
-
-## What does this migration do?
-
-In Angular version 8, a schematic added `static` flags to all `@ViewChild()`
-and `@ContentChild()` queries.
-This was the first step towards changing the default behavior.
-With version 9, the default value
-changes to `static: false` and the flag becomes optional.
-
-This schematic scans classes in the compilation and for each
-class, checks if the members have a `@ViewChild()` or
-`@ContentChild()` query with the `static` flag set to
-`false`. If so, the schematic removes the flag, as it
-now matches the default.
-
-**Before:**
-```ts
-@ViewChild('foo', {static: false}) foo: ElementRef;
-
-@ViewChild('bar', {static: true}) bar: ElementRef;
-```
-
-
-**After:**
-```ts
-@ViewChild('foo') foo: ElementRef;
-
-// this query doesn't change because the static value is true
-@ViewChild('bar', {static: true}) bar: ElementRef;
-```
-
-Note that the flag is not supported in `@ViewChildren()`
-or `@ContentChildren()` queries, so the schematic
-will not check these properties.
-
-
-## Why is this migration necessary?
-
-This schematic performs a code cleanup to remove `static`
-flags that match the default, as they are no longer
-necessary. Functionally, the code change should be a noop.
-
-Before version 9, Angular figured out the static or
-dynamic nature of a query automatically, based
-on how the template was written. Looking at templates
-in this way, however, caused buggy and surprising behavior
-(see more about that in the [Static Query Migration Guide](guide/static-query-migration#what-does-this-flag-mean)).
- As of version 9, Angular uses dynamic queries
-(`static: false`) by default, which simplifies
-queries. Developers can still explicitly set a
-query to `static: true` if necessary.
-
-
-<div class=" alert is-helpful">
-
-### What is the difference between static and dynamic queries?
-
-The `static` option for `@ViewChild()` and `@ContentChild()`
-queries determines when
-the query results become available.
-
-With static queries (`static: true`), the query resolves
-once the view has been created, but before change detection runs.
-The result, though, will never be updated to reflect
-changes to your view, such as
-changes to `ngIf` and `ngFor` blocks.
-
-With dynamic queries (`static: false`), the query resolves
-after either `ngAfterViewInit()` or
-`ngAfterContentInit()` for `@ViewChild()` and `@ContentChild()`
-respectively. The result will
-be updated for changes to your view, such as changes to
-`ngIf` and `ngFor` blocks.
-
-For more information, see the following entries in the
-[Static Query Migration Guide](https://angular.io/guide/static-query-migration):
-
-* [How do I choose which `static` flag value to use: `true` or `false`?](https://angular.io/guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
-
-* [Is there a case where I should use `{static: true}`?](https://angular.io/guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
-
-</div>
-
-
-## What does this mean for libraries?
-
-In order to support applications that are still running
-with version 8, the safest option for libraries is to
-retain the `static` flag to keep the resolution
-timing consistent.
-
-- *Libraries on version 9 with applications running version 8: *
-
-  The schematic won't run on libraries. As long as libraries retain their `static` flags from version 8, they should work with apps on 8.
-
-- *Libraries on version 8 with applications running version 9: *
-
-  Libraries will have explicit flags defined. The behavior
-  with explicit flags has not changed.
-
-
-### What about applications using non-migrated libraries?
-
-Because this is a code cleanup that is a noop,
-non-migrated libraries will work the same either way.

aio/content/guide/migration-renderer.md

@@ -1,96 +0,0 @@
-# `Renderer` to `Renderer2` migration
-
-## Migration Overview
-
-The `Renderer` class has been marked as deprecated since Angular version 4. This section provides guidance on migrating from this deprecated API to the newer `Renderer2` API and what it means for your app.
-
-## Why should I migrate to Renderer2?
-
-The deprecated `Renderer` class has been removed in version 9 of Angular, so it's necessary to migrate to a supported API.  Using `Renderer2` is the recommended strategy because it supports a similar set of functionality to `Renderer`. The API surface is quite large (with 19 methods), but the schematic should simplify this process for your applications.
-
-## Is there action required on my end?
-
-No. The schematic should handle most cases with the exception of `Renderer.animate()` and `Renderer.setDebugInfo()`, which already aren’t supported.
-
-## What are the `__ngRendererX` methods? Why are they necessary?
-
-Some methods either don't have exact equivalents in `Renderer2`, or they correspond to more than one expression. For example, both renderers have a `createElement()` method, but they're not equal because a call such as `renderer.createElement(parentNode, namespaceAndName)` in the `Renderer` corresponds to the following block of code in `Renderer2`:
-
-```ts
-const [namespace, name] = splitNamespace(namespaceAndName);
-const el = renderer.createElement(name, namespace);
-if (parentNode) {
-  renderer.appendChild(parentNode, el);
-}
-return el;
-```
-
-Migration has to guarantee that the return values of functions and types of variables stay the same. To handle the majority of cases safely, the schematic declares helper functions at the bottom of the user's file. These helpers encapsulate your own logic and keep the replacements inside your code down to a single function call. Here's an example of how the `createElement()` migration looks:
-
-
-**Before:**
-
-```ts
-public createAndAppendElement() {
-  const el = this.renderer.createElement('span');
-  el.textContent = 'hello world';
-  return el;
-}
-```
-
-**After:**
-
-<code-example>
-
-public createAndAppendElement() {
-  const el = __ngRendererCreateElement(this.renderer, this.element, 'span');
-  el.textContent = 'hello world';
-  return el;
-}
-// Generated code at the bottom of the file
-__ngRendererCreateElement(renderer: any, parentNode: any, nameAndNamespace: any) {
-  const [namespace, name] = __ngRendererSplitNamespace(namespaceAndName);
-  const el = renderer.createElement(name, namespace);
-  if (parentNode) {
-    renderer.appendChild(parentNode, el);
-  }
-  return el;
-}
-__ngRendererSplitNamespace(nameAndNamespace: any) {
-  // returns the split name and namespace
-}
-
-</code-example>
-
-When implementing these helper functions, the schematic ensures that they're only declared once per file and that their names are unique enough that there's a small chance of colliding with pre-existing functions in your code. The schematic also keeps their parameter types as `any` so that it doesn't have to insert extra logic that ensures that their values have the correct type.
-
-### I’m a library author. Should I run this migration?
-
-**Library authors should definitely use this migration to move away from the `Renderer`. Otherwise, the libraries won't work with applications built with version 9.**
-
-
-### Full list of method migrations
-
-The following table shows all methods that the migration maps from `Renderer` to `Renderer2`.
-
-|Renderer|Renderer2|
-|---|---|
-|`listen(renderElement, name, callback)`|`listen(renderElement, name, callback)`|
-|`setElementProperty(renderElement, propertyName, propertyValue)`|`setProperty(renderElement, propertyName, propertyValue)`|
-|`setText(renderNode, text)`|`setValue(renderNode, text)`|
-|`listenGlobal(target, name, callback)`|`listen(target, name, callback)`|
-|`selectRootElement(selectorOrNode, debugInfo?)`|`selectRootElement(selectorOrNode)`|
-|`createElement(parentElement, name, debugInfo?)`|`appendChild(parentElement, createElement(name))`|
-|`setElementStyle(el, style, value?)`|`value == null ? removeStyle(el, style) : setStyle(el, style, value)`
-|`setElementAttribute(el, name, value?)`|`attributeValue == null ? removeAttribute(el, name) : setAttribute(el, name, value)`
-|`createText(parentElement, value, debugInfo?)`|`appendChild(parentElement, createText(value))`|
-|`createTemplateAnchor(parentElement)`|`appendChild(parentElement, createComment(''))`|
-|`setElementClass(renderElement, className, isAdd)`|`isAdd ? addClass(renderElement, className) : removeClass(renderElement, className)`|
-|`projectNodes(parentElement, nodes)`|`for (let i = 0; i < nodes.length; i<ins></ins>) { appendChild(parentElement, nodes<i>); }`|
-|`attachViewAfter(node, viewRootNodes)`|`const parentElement = parentNode(node); const nextSibling = nextSibling(node); for (let i = 0; i < viewRootNodes.length; i<ins></ins>) { insertBefore(parentElement, viewRootNodes<i>, nextSibling);}`|
-|`detachView(viewRootNodes)`|`for (let i = 0; i < viewRootNodes.length; i<ins></ins>) {const node = viewRootNodes<i>; const parentElement = parentNode(node); removeChild(parentElement, node);}`|
-|`destroyView(hostElement, viewAllNodes)`|`for (let i = 0; i < viewAllNodes.length; i<ins></ins>) { destroyNode(viewAllNodes<i>); }`|
-|`setBindingDebugInfo()`|This function is a noop in `Renderer2`.|
-|`createViewRoot(hostElement)`|Should be replaced with a reference to `hostElement`|
-|`invokeElementMethod(renderElement, methodName, args?)`|`(renderElement as any)<methodName>.apply(renderElement, args);`|
-|`animate(element, startingStyles, keyframes, duration, delay, easing, previousPlayers?)`|Throws an error (same behavior as `Renderer.animate()`)|