release: cut the v12.2.2 release (#43195 )

docs: tidy up description of NgComponentOutlet (#43159 )
PR Close #43159
2026-09-14 13:54:52 +08:00 · 2021-08-18 10:15:31 -07:00 · 2021-08-18 09:17:44 -07:00 · 2021-08-17 20:00:58 -07:00 · 2021-08-17 09:23:09 -07:00 · 2021-08-17 09:23:09 -07:00
3289 changed files with 386277 additions and 310511 deletions
@@ -9,9 +9,14 @@ aio/content
 aio/node_modules
 aio/tools/examples/shared/node_modules
 packages/bazel/node_modules
-
+integration/bazel/bazel-bazel
+integration/bazel/bazel-bin
+integration/bazel/bazel-out
+integration/bazel/bazel-testlogs
+integration/bazel-schematics/demo
 # All integration test node_modules folders
-integration/bazel_workspace_tests/bazel_ngtsc_plugin/node_modules
+integration/bazel/node_modules
+integration/bazel-schematics/node_modules
 integration/cli-elements-universal/node_modules
 integration/cli-hello-world/node_modules
 integration/cli-hello-world-ivy-compat/node_modules
@@ -24,9 +29,6 @@ integration/hello_world__systemjs_umd/node_modules
 integration/i18n/node_modules
 integration/injectable-def/node_modules
 integration/ivy-i18n/node_modules
-integration/ng-add-localize/node_modules
-integration/trusted-types/node_modules
-integration/forms/node_modules
 integration/ng_elements/node_modules
 integration/ng_elements_schematics/node_modules
 integration/ng_update/node_modules
@@ -38,9 +40,9 @@ integration/side-effects/node_modules
 integration/terser/node_modules
 integration/typings_test_ts36/node_modules
 integration/typings_test_ts37/node_modules
-
 # All integration test .yarn_local_cache folders
-integration/bazel_workspace_tests/bazel_ngtsc_plugin/.yarn_local_cache
+integration/bazel/.yarn_local_cache
+integration/bazel-schematics/.yarn_local_cache
 integration/cli-elements-universal/.yarn_local_cache
 integration/cli-hello-world/.yarn_local_cache
 integration/cli-hello-world-ivy-compat/.yarn_local_cache
@@ -53,9 +55,6 @@ integration/hello_world__systemjs_umd/.yarn_local_cache
 integration/i18n/.yarn_local_cache
 integration/injectable-def/.yarn_local_cache
 integration/ivy-i18n/.yarn_local_cache
-integration/ng-add-localize/.yarn_local_cache
-integration/trusted-types/.yarn_local_cache
-integration/forms/.yarn_local_cache
 integration/ng_elements/.yarn_local_cache
 integration/ng_elements_schematics/.yarn_local_cache
 integration/ng_update/.yarn_local_cache
@@ -67,3 +66,29 @@ integration/side-effects/.yarn_local_cache
 integration/terser/.yarn_local_cache
 integration/typings_test_ts36/.yarn_local_cache
 integration/typings_test_ts37/.yarn_local_cache
+# All integration test NPM_PACKAGE_MANIFEST.json folders
+integration/bazel/NPM_PACKAGE_MANIFEST.json
+integration/bazel-schematics/NPM_PACKAGE_MANIFEST.json
+integration/cli-elements-universal/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-compat/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-i18n/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-minimal/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-lazy/NPM_PACKAGE_MANIFEST.json
+integration/dynamic-compiler/NPM_PACKAGE_MANIFEST.json
+integration/hello_world__closure/NPM_PACKAGE_MANIFEST.json
+integration/hello_world__systemjs_umd/NPM_PACKAGE_MANIFEST.json
+integration/i18n/NPM_PACKAGE_MANIFEST.json
+integration/injectable-def/NPM_PACKAGE_MANIFEST.json
+integration/ivy-i18n/NPM_PACKAGE_MANIFEST.json
+integration/ng_elements/NPM_PACKAGE_MANIFEST.json
+integration/ng_elements_schematics/NPM_PACKAGE_MANIFEST.json
+integration/ng_update/NPM_PACKAGE_MANIFEST.json
+integration/ng_update_migrations/NPM_PACKAGE_MANIFEST.json
+integration/ngcc/NPM_PACKAGE_MANIFEST.json
+integration/platform-server/NPM_PACKAGE_MANIFEST.json
+integration/service-worker-schema/NPM_PACKAGE_MANIFEST.json
+integration/side-effects/NPM_PACKAGE_MANIFEST.json
+integration/terser/NPM_PACKAGE_MANIFEST.json
+integration/typings_test_ts36/NPM_PACKAGE_MANIFEST.json
+integration/typings_test_ts37/NPM_PACKAGE_MANIFEST.json
@@ -71,6 +71,26 @@ test --test_output=errors

 # Bazel flags for CircleCI are in /.circleci/bazel.linux.rc and /.circleci/bazel.windows.rc

+##################################
+# Settings for integration tests #
+##################################
+
+# Trick bazel into treating BUILD files under integration/bazel as being regular files
+# This lets us glob() up all the files inside this integration test to make them inputs to tests
+# (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
+build --deleted_packages=integration/bazel,integration/bazel/src,integration/bazel/src/hello-world,integration/bazel/test,integration/bazel/tools,integration/bazel/test/e2e
+query --deleted_packages=integration/bazel,integration/bazel/src,integration/bazel/src/hello-world,integration/bazel/test,integration/bazel/tools,integration/bazel/test/e2e
+
+################################
+# Temporary Settings for Ivy   #
+################################
+# To determine if the compiler used should be Ivy instead of ViewEngine, one can use `--config=ivy`
+# on any bazel target. This is a temporary flag until codebase is permanently switched to Ivy.
+build --define=angular_ivy_enabled=False
+
+build:view-engine --define=angular_ivy_enabled=False
+build:ivy --define=angular_ivy_enabled=True
+
 ##################################
 # Remote Build Execution support #
 # Turn on these settings with    #
@@ -123,16 +143,6 @@ test:saucelabs --flaky_test_attempts=1
 # --ng_perf will ask the Ivy compiler to produce performance results for each build.
 build --flag_alias=ng_perf=//packages/compiler-cli:ng_perf

-#####################################################################
-# Folders to ignore for integration tests (nested Bazel workspaces) #
-#####################################################################
-
-# The nested Bazel integration test workspace should not be analysed as part of
-# Skyframe, but should also not be ignored in order to be able to glob for its files.
-# TODO: Simplify this once https://github.com/bazelbuild/bazel/issues/12034 is fixed
-build --deleted_packages=integration/bazel_workspace_tests/bazel_ngtsc_plugin,integration/bazel_workspace_tests/bazel_ngtsc_plugin/src,integration/bazel_workspace_tests/bazel_ngtsc_plugin/src/hello-world,integration/bazel_workspace_tests/bazel_ngtsc_plugin/test,integration/bazel_workspace_tests/bazel_ngtsc_plugin/test/e2e,integration/bazel_workspace_tests/bazel_ngtsc_plugin/tools,integration/bazel_workspace_tests/bazel_ngtsc_plugin/tools/angular
-query --deleted_packages=integration/bazel_workspace_tests/bazel_ngtsc_plugin,integration/bazel_workspace_tests/bazel_ngtsc_plugin/src,integration/bazel_workspace_tests/bazel_ngtsc_plugin/src/hello-world,integration/bazel_workspace_tests/bazel_ngtsc_plugin/test,integration/bazel_workspace_tests/bazel_ngtsc_plugin/test/e2e,integration/bazel_workspace_tests/bazel_ngtsc_plugin/tools,integration/bazel_workspace_tests/bazel_ngtsc_plugin/tools/angular
-
 ####################################################
 # User bazel configuration
 # NOTE: This needs to be the *last* entry in the config.
@@ -1 +1 @@
-4.2.2
+4.0.0
@@ -24,22 +24,23 @@ version: 2.1
 # **NOTE 2 **: If you change the cache key prefix, also sync the cache_key_fallback to match.
 # **NOTE 3 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
 # See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
-var_3: &cache_key v6-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
+var_3: &cache_key v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
 # We invalidate the cache if the Bazel version changes because otherwise the `bazelisk` cache
 # folder will contain all previously used versions and ultimately cause the cache restoring to
 # be slower due to its growing size.
-var_4: &cache_key_fallback v6-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
+var_4: &cache_key_fallback v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}

 # Windows needs its own cache key because binaries in node_modules are different.
-var_3_win: &cache_key_win v6-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
-var_4_win: &cache_key_win_fallback v6-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
+var_3_win: &cache_key_win v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
+var_4_win: &cache_key_win_fallback v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}

 # Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
 # cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
-var_5: &components_repo_unit_tests_cache_key v1-angular-components-{{ checksum "month.txt" }}-d1cd928714c2d6e3de75f9469ce58b06aad6353c
+var_5: &components_repo_unit_tests_cache_key v1-angular-components-{{ checksum "month.txt" }}-d090617912da8e70aa336aa5b4d804b1b535402e
 var_6: &components_repo_unit_tests_cache_key_fallback v1-angular-components-{{ checksum "month.txt" }}

-# Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages`.
+# Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
+# `build-ivy-npm-packages`.
 # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
 # https://circleci.com/blog/deep-diving-into-circleci-workspaces/
 var_7: &workspace_location ~/
@@ -86,17 +87,7 @@ executors:
        type: string
        default: medium
    docker:
-      - image: cimg/node:16.10.0
-    resource_class: << parameters.resource_class >>
-    working_directory: ~/ng
-
-  test-browser-executor:
-    parameters:
-      resource_class:
-        type: string
-        default: medium
-    docker:
-      - image: cimg/node:16.10.0-browsers
+      - image: circleci/node:14.16.1@sha256:951e12268fe692615bfd155c327bd910e10c99db98404badd03879f984c32b31
    resource_class: << parameters.resource_class >>
    working_directory: ~/ng

@@ -128,6 +119,22 @@ commands:
      - attach_workspace:
          at: *workspace_location

+  # Install shared libs used by Chrome that is either provisioned by
+  # rules_webtesting or by puppeteer.
+  install_chrome_libs:
+    description: Install shared Chrome libs
+    steps:
+      - run:
+          name: Install shared Chrome libs
+          command: |
+            sudo apt-get update
+            # Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)
+            # and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)
+            # which are dependencies of chrome & needed for karma & protractor headless chrome tests.
+            # This is a very small install which takes around 7s in comparing to using the full
+            # circleci/node:x.x.x-browsers image.
+            sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1
+
  # Install java runtime which is required by some integration tests such as
  # //integration:hello_world__closure_test, //integration:i18n_test and
  # //integration:ng_elements_test to run the closure compiler
@@ -206,10 +213,6 @@ commands:
          keys:
            - *cache_key_win
            - *cache_key_win_fallback
-      # Install @bazel/bazelisk globally and use that for the first run.
-      # Workaround for https://github.com/bazelbuild/rules_nodejs/issues/894
-      # NB: the issue was for @bazel/bazel but the same problem applies to @bazel/bazelisk
-      - run: yarn global add @bazel/bazelisk@$env:BAZELISK_VERSION
      # On Windows `~/` is not resolved when using as a CLI value. `../` results in the same path.
      - run: yarn install --frozen-lockfile --non-interactive --cache-folder ../.cache/yarn

@@ -288,11 +291,10 @@ jobs:
      - run: yarn -s ng-dev pullapprove verify
      - run: yarn -s ng-dev ngbot verify
      - run: yarn -s ng-dev commit-message validate-range $CI_GIT_BASE_REVISION $CI_GIT_REVISION
-      - run: yarn -s check-tooling-setup

  test:
    executor:
-      name: test-browser-executor
+      name: default-executor
      # Now that large integration tests are running locally in parallel (they can't run on RBE yet
      # as they require network access for yarn install), this test is running out of memory
      # consistently with the xlarge machine.
@@ -301,13 +303,28 @@ jobs:
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
      - install_java
      - run:
-          # We need to explicitly specify the --symlink_prefix option because otherwise we would
-          # not be able to easily find the output bin directory when uploading artifacts for size
-          # measurements.
-          command: yarn test --symlink_prefix=dist/ -- //...
+          command: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
          no_output_timeout: 20m
+
+  # Temporary job to test what will happen when we flip the Ivy flag to true
+  test_ivy_aot:
+    executor:
+      name: default-executor
+      resource_class: xlarge
+    steps:
+      - custom_attach_workspace
+      - init_environment
+      - install_chrome_libs
+      # We need to explicitly specify the --symlink_prefix option because otherwise we would
+      # not be able to easily find the output bin directory when uploading artifacts for size
+      # measurements.
+      - run:
+          command: yarn test-ivy-aot //... --symlink_prefix=dist/
+          no_output_timeout: 20m
+
        # Publish bundle artifacts which will be used to calculate the size change. **Note**: Make
        # sure that the size plugin from the Angular robot fetches the artifacts from this CircleCI
        # job (see .github/angular-robot.yml). Additionally any artifacts need to be stored with the
@@ -328,7 +345,7 @@ jobs:
          destination: core/todo/bundle.br

  # NOTE: This is currently limited to master builds only. See the `monitoring` configuration.
-  saucelabs:
+  saucelabs_view_engine:
    executor:
      name: default-executor
      # In order to avoid the bottleneck of having a slow host machine, we acquire a better
@@ -340,22 +357,47 @@ jobs:
      - init_environment
      - init_saucelabs_environment
      - run:
-          name: Run Bazel tests on Saucelabs
+          name: Run Bazel tests on Saucelabs with ViewEngine
          # See /tools/saucelabs/README.md for more info
          command: |
            yarn bazel run //tools/saucelabs:sauce_service_setup
-            TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "fixme-saucelabs", ...)')
+            TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "ivy-only", ...) except attr("tags", "fixme-saucelabs-ve", ...)')
            yarn bazel test --config=saucelabs ${TESTS}
            yarn bazel run //tools/saucelabs:sauce_service_stop
          no_output_timeout: 40m
      - notify_webhook_on_fail:
          webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL

-  test_aio:
-    executor: test-browser-executor
+  # NOTE: This is currently limited to master builds only. See the `monitoring` configuration.
+  saucelabs_ivy:
+    executor:
+      name: default-executor
+      # In order to avoid the bottleneck of having a slow host machine, we acquire a better
+      # container for this job. This is necessary because we launch a lot of browsers concurrently
+      # and therefore the tunnel and Karma need to process a lot of file requests and tests.
+      resource_class: xlarge
    steps:
      - custom_attach_workspace
      - init_environment
+      - init_saucelabs_environment
+      - run:
+          name: Run Bazel tests on Saucelabs with Ivy
+          # See /tools/saucelabs/README.md for more info
+          command: |
+            yarn bazel run //tools/saucelabs:sauce_service_setup
+            TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "no-ivy-aot", ...) except attr("tags", "fixme-saucelabs-ivy", ...)')
+            yarn bazel test --config=saucelabs --config=ivy ${TESTS}
+            yarn bazel run //tools/saucelabs:sauce_service_stop
+          no_output_timeout: 40m
+      - notify_webhook_on_fail:
+          webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
+
+  test_aio:
+    executor: default-executor
+    steps:
+      - custom_attach_workspace
+      - init_environment
+      - install_chrome_libs
        # Build aio
      - run: yarn --cwd aio build --progress=false
        # Lint the code
@@ -374,19 +416,21 @@ jobs:
      - run: yarn --cwd aio redirects-test

  deploy_aio:
-    executor: test-browser-executor
+    executor: default-executor
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
        # Deploy angular.io to production (if necessary)
      - run: setPublicVar_CI_STABLE_BRANCH
      - run: yarn --cwd aio deploy-production

  test_aio_local:
-    executor: test-browser-executor
+    executor: default-executor
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
        # Build aio (with local Angular packages)
      - run: yarn --cwd aio build-local-ci
        # Run unit tests
@@ -397,6 +441,9 @@ jobs:
      - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
        # Check the bundle sizes.
      - run: yarn --cwd aio payload-size aio-local
+        # Run tests with RxJS v7.
+      - run: yarn --cwd aio add rxjs@7.1.0
+      - run: yarn --cwd aio test --progress=false --watch=false

  test_aio_tools:
    executor: default-executor
@@ -412,18 +459,23 @@ jobs:

  test_docs_examples:
    executor:
-      name: test-browser-executor
+      name: default-executor
      resource_class: xlarge
    parallelism: 5
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
        # Install aio
      - run: yarn --cwd aio install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
        # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
        # Since the parallelism is set to "5", there will be five parallel CircleCI containers.
        # with either "0", "1", etc as node index. This can be passed to the "--shard" argument.
      - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+        # Run tests with RxJS v7.
+        # (Exclude some examples that are not yet compatible with v7.)
+      - run: yarn --cwd aio/tools/examples/shared add rxjs@7.1.0 && yarn --cwd aio boilerplate:add
+      - run: yarn --cwd aio example-e2e --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL} --exclude=practical-observable-usage --exclude=upgrade-module --exclude=upgrade-phonecat

  # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
  aio_preview:
@@ -436,17 +488,18 @@ jobs:
      - run: ./aio/scripts/build-artifacts.sh $AIO_SNAPSHOT_ARTIFACT_PATH $CI_PULL_REQUEST $CI_COMMIT
      - store_artifacts:
          path: *aio_preview_artifact_path
-          # The `destination` needs to be kept in sync with the value of
+          # The `destination` needs to be kept in synch with the value of
          # `AIO_ARTIFACT_PATH` in `aio/aio-builds-setup/Dockerfile`
          destination: aio/dist/aio-snapshot.tgz
      - run: node ./aio/scripts/create-preview $CIRCLE_BUILD_NUM

  # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
  test_aio_preview:
-    executor: test-browser-executor
+    executor: default-executor
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
      - run: yarn --cwd aio install --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
      - run:
          name: Wait for preview and run tests
@@ -458,6 +511,8 @@ jobs:
  # the bazel packages more than once. Even though we have a remote cache, these jobs will
  # typically run in parallel so up-to-date outputs will not be available at the time the build
  # starts.
+
+  # Build the view engine npm packages. No new jobs should depend on this.
  build-npm-packages:
    executor:
      name: default-executor
@@ -483,6 +538,24 @@ jobs:
            - ~/bazel_repository_cache
            - ~/.cache/bazelisk

+  # Build the ivy npm packages.
+  build-ivy-npm-packages:
+    executor:
+      name: default-executor
+      resource_class: xlarge
+    steps:
+      - custom_attach_workspace
+      - init_environment
+      - run: node scripts/build/build-ivy-npm-packages.js
+
+      # Save the npm packages from //packages/... for other workflow jobs to read
+      - persist_to_workspace:
+          root: *workspace_location
+          paths:
+            - ng/dist/packages-dist-ivy-aot
+            - ng/dist/angular-in-memory-web-api-dist-ivy-aot
+            - ng/dist/zone.js-dist-ivy-aot
+
  # This job creates compressed tarballs (`.tgz` files) for all Angular packages and stores them as
  # build artifacts. This makes it easy to try out changes from a PR build for testing purposes.
  # More info CircleCI build artifacts: https://circleci.com/docs/2.0/artifacts
@@ -552,10 +625,11 @@ jobs:
          command: yarn node aio/scripts/test-external-urls.js

  aio_monitoring_stable:
-    executor: test-browser-executor
+    executor: default-executor
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
      - run: setPublicVar_CI_STABLE_BRANCH
      - run:
          name: Check out `aio/` and yarn from the stable branch
@@ -574,10 +648,11 @@ jobs:
          webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL

  aio_monitoring_next:
-    executor: test-browser-executor
+    executor: default-executor
    steps:
      - custom_attach_workspace
      - init_environment
+      - install_chrome_libs
      - run:
          name: Run tests against https://next.angular.io/
          command: ./aio/scripts/test-production.sh https://next.angular.io/ $CI_AIO_MIN_PWA_SCORE
@@ -614,9 +689,9 @@ jobs:
                //packages/common/locales

            # Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
-            mkdir -p dist/legacy-test-out/core/test/reflection/
+            mkdir -p dist/all/@angular/core/test/reflection/
            cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
-              dist/legacy-test-out/core/test/reflection/es5_downleveled_inheritance_fixture.js
+              dist/all/@angular/core/test/reflection/es5_downleveled_inheritance_fixture.js
            # Locale files are needed for i18n tests running within Saucelabs. These are added
            # directly as sources so that the TypeScript compilation of `/packages/tsconfig.json`
            # can succeed. Note that the base locale and currencies files are checked-in, so
@@ -624,10 +699,11 @@ jobs:
            mkdir -p packages/common/locales/extra
            cp dist/bin/packages/common/locales/*.ts packages/common/locales
            cp dist/bin/packages/common/locales/extra/*.ts packages/common/locales/extra
-      # Build ZoneJS so that it can be loaded globally in the Karma tests.
+      # add module umd tsc compile option so the test can work
+      # properly in the legacy browsers
+      - run: yarn tsc -p packages/tsconfig-legacy-saucelabs.json --module UMD
+      - run: yarn tsc -p modules --module UMD
      - run: yarn bazel build //packages/zone.js:npm_package
-      # Build the bundle for all tests to run within Saucelabs
-      - run: node tools/legacy-saucelabs/build-saucelabs-test-bundle.mjs
      - run:
          # Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
          name: Waiting for Saucelabs tunnel to connect
@@ -635,7 +711,8 @@ jobs:
      - run:
          name: Running tests on Saucelabs.
          command: |
-            KARMA_WEB_TEST_MODE=SL_REQUIRED yarn karma start ./karma-js.conf.js --single-run
+            browsers=$(node -e 'console.log(require("./browser-providers.conf").sauceAliases.CI_REQUIRED.join(","))')
+            yarn karma start ./karma-js.conf.js --single-run --browsers=${browsers}
      - run:
          name: Stop Saucelabs tunnel service
          command: ./tools/saucelabs/sauce-service.sh stop
@@ -721,13 +798,31 @@ jobs:
      - setup_win
      - run:
          name: Build all windows CI targets
-          command: bazel build //packages/compiler-cli/...
+          command: yarn bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
          no_output_timeout: 15m
      - run:
          name: Test all windows CI targets
-          command: bazel test --test_tag_filters="-browser:chromium-local" //packages/compiler-cli/...
+          command: yarn bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
          no_output_timeout: 15m

+  test_ivy_aot_win:
+    executor: windows-executor
+    steps:
+      - setup_win
+      - run:
+          name: Build all windows CI targets
+          command: yarn bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
+          no_output_timeout: 15m
+      - run:
+          name: Test all windows CI targets
+          command: yarn bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
+          no_output_timeout: 15m
+      # Save dependencies to use on subsequent runs.
+      - save_cache:
+          key: *cache_key_win
+          paths:
+            - ~/.cache/yarn
+
 workflows:
  version: 2
  default_workflow:
@@ -742,9 +837,15 @@ workflows:
      - test:
          requires:
            - setup
+      - test_ivy_aot:
+          requires:
+            - setup
      - build-npm-packages:
          requires:
            - setup
+      - build-ivy-npm-packages:
+          requires:
+            - setup
      - legacy-unit-tests-saucelabs:
          requires:
            - setup
@@ -779,12 +880,14 @@ workflows:
          requires:
            # Only publish if tests and integration tests pass
            - test
+            - test_ivy_aot
            # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
            - test_aio_local
            - test_docs_examples
            # Get the artifacts to publish from the build-packages-dist job
            # since the publishing script expects the legacy outputs layout.
            - build-npm-packages
+            - build-ivy-npm-packages
            - legacy-unit-tests-saucelabs
      - components-repo-unit-tests:
          requires:
@@ -795,6 +898,9 @@ workflows:
      - test_win:
          requires:
            - setup
+      - test_ivy_aot_win:
+          requires:
+            - setup

  monitoring:
    jobs:
@@ -808,7 +914,16 @@ workflows:
      - aio_monitoring_next:
          requires:
            - setup
-      - saucelabs:
+      - saucelabs_ivy:
+          # Testing saucelabs via Bazel currently taking longer than the legacy saucelabs job as it
+          # each karma_web_test target is provisioning and tearing down browsers which is adding
+          # a lot of overhead. Running once daily on master only to avoid wasting resources and
+          # slowing down CI for PRs.
+          # TODO: Run this job on all branches (including PRs) once karma_web_test targets can
+          # share provisioned browsers and we can remove the legacy saucelabs job.
+          requires:
+            - setup
+      - saucelabs_view_engine:
          # Testing saucelabs via Bazel currently taking longer than the legacy saucelabs job as it
          # each karma_web_test target is provisioning and tearing down browsers which is adding
          # a lot of overhead. Running once daily on master only to avoid wasting resources and
@@ -74,7 +74,7 @@ setPublicVar COMPONENTS_REPO_TMP_DIR "/tmp/angular-components-repo"
 setPublicVar COMPONENTS_REPO_URL "https://github.com/angular/components.git"
 setPublicVar COMPONENTS_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
-setPublicVar COMPONENTS_REPO_COMMIT "d1cd928714c2d6e3de75f9469ce58b06aad6353c"
+setPublicVar COMPONENTS_REPO_COMMIT "d090617912da8e70aa336aa5b4d804b1b535402e"


 ####################################################################################################
@@ -41,8 +41,8 @@ copy .circleci\bazel.windows.rc ${Env:USERPROFILE}\.bazelrc
 ####################################################################################################
 # Install specific version of node.
 ####################################################################################################
-nvm install 16.10.0
-nvm use 16.10.0
+nvm install 14.16.1
+nvm use 14.16.1

 # These Bazel prereqs aren't needed because the CircleCI image already includes them.
 # choco install yarn --version 1.16.0 --no-progress
@@ -1,7 +1,7 @@
 # Image metadata and config.
 # Ideally, the Node.js version should match what we use on CI.
 # See `executors > default-executor` in `.circleci/config.yml`.
-FROM cimg/node:14-browsers
+FROM circleci/node:14-browsers


 LABEL name="Angular dev environment" \
@@ -12,7 +12,6 @@ body:
        - common
        - compiler-cli
        - compiler
-        - core
        - elements
        - forms
        - language-service
@@ -59,7 +58,7 @@ body:
  - type: textarea
    id: environment
    attributes:
-      label: Please provide the environment you discovered this bug in (run `ng version`)
+      label: Please provide the environment you discovered this bug in
      render: true
      placeholder: |
        Angular CLI: 12.0.5
@@ -12,7 +12,6 @@ body:
        - common
        - compiler-cli
        - compiler
-        - core
        - elements
        - forms
        - language-service
@@ -0,0 +1,6 @@
+---
+name: Security Issue Disclosure
+about: Report a security issue in Angular Framework, Material, or CLI
+---
+
+Please read https://angular.io/guide/security#report-issues on how to disclose security related issues.
@@ -0,0 +1,11 @@
+---
+name: "Support Request"
+about: Questions and requests for support
+---
+
+Please do not file questions or support requests on the GitHub issues tracker.
+
+You can get your questions answered using other communication channels. Please see:
+https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
+
+Thank you!
@@ -0,0 +1,8 @@
+---
+name: "Angular CLI"
+about: Issues and feature requests for Angular CLI
+---
+
+Please file any Angular CLI issues at: https://github.com/angular/angular-cli/issues/new
+
+For the time being, we keep Angular CLI issues in a separate repository.
@@ -0,0 +1,8 @@
+---
+name: "Angular Components"
+about: Issues and feature requests for Angular Components
+---
+
+Please file any Angular Components issues at: https://github.com/angular/components/issues/new
+
+For the time being, we keep Angular Components issues in a separate repository.
@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Security issue disclosure
-    url: https://angular.io/guide/security#report-issues
-    about: Report a security issue in Angular Framework, CDK, Material, or CLI
-  - name: Angular CLI
-    url: https://github.com/angular/angular/issues/new/choose
-    about: Issues and feature requests for Angular CLI
-  - name: Angular Material and Components Development Kit (CDK)
-    url: https://github.com/angular/components/issues/new/choose
-    about: Issues and feature requests for Angular Material
-  - name: Support Request
-    url: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
-    about: Questions and requests for support
@@ -4,7 +4,7 @@
 size:
  disabled: false
  maxSizeIncrease: 2000
-  circleCiStatusName: 'ci/circleci: test'
+  circleCiStatusName: 'ci/circleci: test_ivy_aot'

 # options for the merge plugin
 merge:
@@ -43,8 +43,10 @@ merge:
      - 'packages/*'
      - 'packages/bazel/*'
      - 'packages/bazel/src/api-extractor/**'
+      - 'packages/bazel/src/builders/**'
      - 'packages/bazel/src/ng_package/**'
-      - 'packages/bazel/src/ng_module/**'
+      - 'packages/bazel/src/protractor/**'
+      - 'packages/bazel/src/schematics/**'
      - 'packages/compiler-cli/src/ngcc/**'
      - 'packages/compiler-cli/linker/**'
      - 'packages/compiler-cli/ngcc/**'
@@ -64,7 +66,6 @@ merge:
      - '**/package.json'
      - '**/third_party/**'
      - '**/tsconfig-build.json'
-      - '**/tsconfig-tsec.json'
      - '**/tsconfig.json'
      - '**/rollup.config.js'
      - '**/BUILD.bazel'
@@ -100,6 +101,7 @@ merge:
    # list of labels that a PR needs to have, checked with a regexp (e.g. "target:" will work for the label "target: master")
    requiredLabels:
      - 'target: *'
+      - 'cla: yes'

    # list of labels that a PR shouldn't have, checked after the required labels with a regexp
    forbiddenLabels:
@@ -107,12 +109,14 @@ merge:
      - 'action: cleanup'
      - 'action: review'
      - 'state: blocked'
+      - 'cla: no'

    # list of PR statuses that need to be successful
    requiredStatuses:
      - 'ci/circleci: build'
      - 'ci/circleci: lint'
      - 'ci/angular: size'
+      - 'cla/google'
      - 'google3'
      - 'pullapprove'

@@ -5,10 +5,10 @@ on:
    types: [opened, synchronize, reopened]

 jobs:
-  labels:
+  breaking-changes-label:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - uses: angular/dev-infra/github-actions/commit-message-based-labels@2c23378f310c42b482d246886ed2aab1550dc650
+      - uses: angular/dev-infra/github-actions/breaking-changes-label@861dc90572784e714aeaa9dfb20ceebeb57cdb07
        with:
          angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
@@ -10,6 +10,6 @@ jobs:
    if: github.repository == 'angular/angular'
    runs-on: ubuntu-latest
    steps:
-      - uses: angular/dev-infra/github-actions/feature-request@2c23378f310c42b482d246886ed2aab1550dc650
+      - uses: angular/dev-infra/github-actions/feature-request@f83903fe1ac848407ef81465f66588e5accb6537
        with:
          angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
@@ -10,6 +10,6 @@ jobs:
    if: github.repository == 'angular/angular'
    runs-on: ubuntu-latest
    steps:
-      - uses: angular/dev-infra/github-actions/lock-closed@2c23378f310c42b482d246886ed2aab1550dc650
+      - uses: angular/dev-infra/github-actions/lock-closed@7679cff885633cd33bf5ac7922a5304e8971a5a6
        with:
          lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}
@@ -1,49 +0,0 @@
-name: OpenSSF Scorecard
-on:
-  branch_protection_rule:
-  schedule:
-    - cron: '0 0 * * 0'
-  push:
-    branches: [master]
-  workflow_dispatch:
-
-# Declare default permissions as read only.
-permissions: read-all
-
-jobs:
-  analysis:
-    name: Scorecards analysis
-    runs-on: ubuntu-latest
-    permissions:
-      # Needed to upload the results to code-scanning dashboard.
-      security-events: write
-      actions: read
-      contents: read
-
-    steps:
-      - name: 'Checkout code'
-        uses: actions/checkout@230611dbd0eb52da1e1f4f7bc8bb0c3a339fc8b7
-        with:
-          persist-credentials: false
-
-      - name: 'Run analysis'
-        uses: ossf/scorecard-action@c1aec4ac820532bab364f02a81873c555a0ba3a1
-        with:
-          results_file: results.sarif
-          results_format: sarif
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_results: true
-
-      # Upload the results as artifacts.
-      - name: 'Upload artifact'
-        uses: actions/upload-artifact@2244c8200304ec9588bf9399eac622d9fadc28c4
-        with:
-          name: SARIF file
-          path: results.sarif
-          retention-days: 5
-
-      # Upload the results to GitHub's code scanning dashboard.
-      - name: 'Upload to code-scanning'
-        uses: github/codeql-action/upload-sarif@c4e058a6a3762b8dda8abb12af5bd60534201bf5
-        with:
-          sarif_file: results.sarif
@@ -2,14 +2,14 @@ import {caretaker} from './caretaker';
 import {commitMessage} from './commit-message';
 import {format} from './format';
 import {github} from './github';
-import {pullRequest} from './pullRequest';
+import {merge} from './merge';
 import {release} from './release';

 module.exports = {
  commitMessage,
  format,
  github,
-  pullRequest,
+  merge,
  caretaker,
  release,
 };
@@ -0,0 +1,33 @@
+import {DevInfraMergeConfig} from '@angular/dev-infra-private/ng-dev/pr/merge/config';
+import {getDefaultTargetLabelConfiguration} from '@angular/dev-infra-private/ng-dev/pr/merge/defaults';
+import {github} from './github';
+import {release} from './release';
+
+/**
+ * Configuration for the merge tool in `ng-dev`. This sets up the labels which
+ * are respected by the merge script (e.g. the target labels).
+ */
+export const merge: DevInfraMergeConfig['merge'] = async api => {
+  return {
+    githubApiMerge: false,
+    claSignedLabel: 'cla: yes',
+    mergeReadyLabel: /^action: merge(-assistance)?/,
+    caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
+    commitMessageFixupLabel: 'commit message fixup',
+    breakingChangeLabel: 'flag: breaking change',
+    // We can pick any of the NPM packages as we are in a monorepo where all packages are
+    // published together with the same version and branching.
+    labels: await getDefaultTargetLabelConfiguration(api, github, release),
+    requiredBaseCommits: {
+      // PRs that target either `master` or the patch branch, need to be rebased
+      // on top of the latest commit message validation fix.
+      // These SHAs are the commits that update the required license text in the header.
+      'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
+      '10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
+    },
+    // `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
+    // the `bazel` package is not considered part of the public API so that features
+    // can land in patch branches.
+    targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
+  };
+};
@@ -1,23 +0,0 @@
-import {PullRequestConfig} from '@angular/dev-infra-private/ng-dev/pr/config';
-
-/**
- * Configuration for the merge tool in `ng-dev`. This sets up the labels which
- * are respected by the merge script (e.g. the target labels).
- */
-export const pullRequest: PullRequestConfig = {
-  githubApiMerge: false,
-  mergeReadyLabel: /^action: merge(-assistance)?/,
-  caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
-  commitMessageFixupLabel: 'commit message fixup',
-  requiredBaseCommits: {
-    // PRs that target either `master` or the patch branch, need to be rebased
-    // on top of the latest commit message validation fix.
-    // These SHAs are the commits that update the required license text in the header.
-    'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
-    '10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
-  },
-  // `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
-  // the `bazel` package is not considered part of the public API so that features
-  // can land in patch branches.
-  targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
-};
@@ -4,39 +4,32 @@ import {join} from 'path';
 /** Configuration for the `ng-dev release` command. */
 export const release: ReleaseConfig = {
  publishRegistry: 'https://wombat-dressing-room.appspot.com',
-  representativeNpmPackage: '@angular/core',
  npmPackages: [
-    {name: '@angular/animations'},
-    {name: '@angular/bazel'},
-    {name: '@angular/common'},
-    {name: '@angular/compiler'},
-    {name: '@angular/compiler-cli'},
-    {name: '@angular/core'},
-    {name: '@angular/elements'},
-    {name: '@angular/forms'},
-    {name: '@angular/language-service'},
-    {name: '@angular/localize'},
-    {name: '@angular/platform-browser'},
-    {name: '@angular/platform-browser-dynamic'},
-    {name: '@angular/platform-server'},
-    {name: '@angular/router'},
-    {name: '@angular/service-worker'},
-    {name: '@angular/upgrade'},
+    '@angular/animations',
+    '@angular/bazel',
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/compiler-cli',
+    '@angular/core',
+    '@angular/elements',
+    '@angular/forms',
+    '@angular/language-service',
+    '@angular/localize',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/platform-server',
+    '@angular/router',
+    '@angular/service-worker',
+    '@angular/upgrade',
  ],
-  buildPackages: async () => {
+  buildPackages: async (stampForRelease: boolean) => {
    // The buildTargetPackages function is loaded at runtime as the loading the script causes an
    // invocation of bazel.
    const {buildTargetPackages} = require(join(__dirname, '../scripts/build/package-builder'));
-    return buildTargetPackages('dist/release-output', false, 'Release', /* isRelease */ true);
+    return buildTargetPackages('dist/release-output', false, 'Release', stampForRelease);
  },
  releaseNotes: {
-    hiddenScopes: [
-      'aio',
-      'dev-infra',
-      'docs-infra',
-      'zone.js',
-      'devtools',
-    ],
+    hiddenScopes: ['aio', 'dev-infra', 'docs-infra', 'zone.js'],
  },
  releasePrLabels: ['comp: build & ci', 'action: merge', 'PullApprove: disable'],
 };
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "target": "es2015",
-    "module": "commonjs",
-    "noEmit": true,
-    "skipLibCheck": true,
-    "types": []
-  },
-}
@@ -1 +1 @@
-16.10.0
+14.16.1
@@ -46,6 +46,7 @@
 #  Used for approving minor changes, large-scale refactorings, and in emergency situations.
 #
 # alxhub
+# IgorMinar
 # jelbourn
 # josephperrott
 #
@@ -56,17 +57,11 @@
 #
 # aikidave
 # gkalpak
-# josmar-crwdstffng
-# ileil
+# petebacondarwin
 # TeriGlover
-# TMDavisGoogle

 version: 3

-availability:
-  users_unavailable:
-    - pkozlowski-opensource # OOO as of 2020-09-28
-
 # Meta field that goes unused by PullApprove to allow for defining aliases to be
 # used throughout the config.
 meta:
@@ -180,21 +175,26 @@ groups:
        - AndrewKushnir # Andrew Kushnir
        - andrewseguin # Andrew Seguin
        - atscott # Andrew Scott
+        - ayazhafiz # Ayaz Hafiz
        - clydin # Charles Lyding
        - crisbeto # Kristiyan Kostadinov
        - devversion # Paul Gschwendtner
        - dgp1130 # Doug Parker
-        - dylhunn # Dylan Hunn
        - filipesilva # Filipe Silva
        - gkalpak # Georgios Kalpakas
+        - gregmagolan # Greg Magolan
+        - IgorMinar # Igor Minar
+        - jbogarthyde # Judy Bogart
        - jelbourn # Jeremy Elbourn
        - jessicajaniuk # Jessica Janiuk
        - JiaLiPassion # Jia Li
        - JoostK # Joost Koehoorn
        - josephperrott # Joey Perrott
-        - MarkTechson # Mark Thompson (Techson)
+        - kyliau # Keen Yee Liau
+        - manughub # Manu Murthy
        - mgechev # Minko Gechev
        - mmalerba # Miles Malerba
+        - petebacondarwin # Pete Bacon Darwin
        - pkozlowski-opensource # Pawel Kozlowski
        - Splaktar # Michael Prentice
        - twerske # Emma Twersky
@@ -222,10 +222,9 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - crisbeto
+        - IgorMinar
        - jelbourn
-        - jessicajaniuk

  # =========================================================
  #  Framework: Compiler
@@ -239,7 +238,6 @@ groups:
        contains_any_globs(files.exclude('packages/compiler-cli/ngcc/**'), [
          'packages/compiler/**',
          'packages/examples/compiler/**',
-          'aio/content/examples/angular-compiler-options/**',
          'packages/compiler-cli/**',
          'aio/content/guide/angular-compiler-options.md',
          'aio/content/guide/aot-compiler.md',
@@ -248,8 +246,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - AndrewKushnir
+        - alxhub
        - atscott
        - JoostK

@@ -267,6 +265,7 @@ groups:
        - alxhub
        - gkalpak
        - JoostK
+        - petebacondarwin

  # =========================================================
  #  Framework: Migrations
@@ -282,7 +281,6 @@ groups:
        - alxhub
        - crisbeto
        - devversion
-        - dylhunn

  # =========================================================
  #  Framework: Core
@@ -321,7 +319,6 @@ groups:
          'aio/content/guide/component-overview.md',
          'aio/content/examples/component-overview/**',
          'aio/content/guide/component-styles.md',
-          'aio/content/guide/developer-guide-overview.md',
          'aio/content/guide/view-encapsulation.md',
          'aio/content/examples/component-styles/**',
          'aio/content/examples/content-projection/**',
@@ -411,7 +408,6 @@ groups:
          'aio/content/guide/style-precedence.md',
          'aio/content/images/guide/structural-directives/**',
          'aio/content/guide/template-statements.md',
-          'aio/content/guide/understanding-angular-overview.md',
          'aio/content/guide/user-input.md',
          'aio/content/examples/user-input/**',
          'aio/content/images/guide/user-input/**',
@@ -425,9 +421,8 @@ groups:
        - alxhub
        - AndrewKushnir
        - atscott
-        - dylhunn
        - jessicajaniuk
-        - pkozlowski-opensource
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  # =========================================================
  #  Framework: Common
@@ -447,9 +442,8 @@ groups:
        - alxhub
        - AndrewKushnir
        - atscott
-        - dylhunn
        - jessicajaniuk
-        - pkozlowski-opensource
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  # =========================================================
  #  Framework: Http
@@ -470,11 +464,8 @@ groups:
    reviewers:
      users:
        - alxhub
-        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource
+        - IgorMinar
+        - petebacondarwin

  # =========================================================
  #  Framework: Elements
@@ -493,14 +484,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
-        - AndrewKushnir
        - andrewseguin
-        - atscott
-        - dylhunn
        - gkalpak
-        - jessicajaniuk
-        - pkozlowski-opensource

  # =========================================================
  #  Framework: Forms
@@ -533,7 +518,6 @@ groups:
    reviewers:
      users:
        - AndrewKushnir
-        - dylhunn

  # =========================================================
  #  Framework: i18n
@@ -559,26 +543,13 @@ groups:
          'packages/compiler/src/render3/view/i18n/**',
          'packages/compiler-cli/src/extract_i18n.ts',
          'packages/localize/**',
-          'aio/content/guide/i18n-overview.md',
-          'aio/content/guide/i18n-common-overview.md',
-          'aio/content/guide/i18n-common-add-package.md',
-          'aio/content/guide/i18n-common-locale-id.md',
-          'aio/content/guide/i18n-common-format-data-locale.md',
-          'aio/content/guide/i18n-common-prepare.md',
-          'aio/content/guide/i18n-common-translation-files.md',
-          'aio/content/guide/i18n-common-merge.md',
-          'aio/content/guide/i18n-common-deploy.md',
-          'aio/content/guide/i18n-example.md',
-          'aio/content/guide/i18n-optional-overview.md',
-          'aio/content/guide/i18n-optional-manual-runtime-locale.md',
-          'aio/content/guide/i18n-optional-import-global-variants.md',
-          'aio/content/guide/i18n-optional-manage-marked-text.md',
+          'aio/content/guide/i18n.md',
          'aio/content/examples/i18n/**'
          ])
    reviewers:
      users:
        - AndrewKushnir
-        - dgp1130
+        - petebacondarwin

  # =========================================================
  #  Framework: Platform Server
@@ -599,11 +570,7 @@ groups:
      users:
        - alan-agius4
        - alxhub
-        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource
+        - kyliau

  # =========================================================
  #  Framework: Router
@@ -630,7 +597,6 @@ groups:
          ])
    reviewers:
      users:
-        - AndrewKushnir
        - atscott

  # =========================================================
@@ -659,6 +625,7 @@ groups:
      users:
        - alxhub
        - gkalpak
+        - IgorMinar

  # =========================================================
  #  Framework: Upgrade
@@ -687,9 +654,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - gkalpak
-        - jessicajaniuk
+        - petebacondarwin

  # =========================================================
  #  Framework: Testing
@@ -716,12 +682,9 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource
+        - IgorMinar
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  # =========================================================
  #  Framework: Benchmarks
@@ -736,12 +699,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
-        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource
+        - IgorMinar
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  # =========================================================
  #  Framework: Playground
@@ -756,12 +715,9 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
-        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource
+        - IgorMinar
+        - jelbourn
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  # =========================================================
  #  Framework: Security
@@ -777,19 +733,15 @@ groups:
          'packages/core/test/linker/security_integration_spec.ts',
          'packages/compiler/src/schema/**',
          'packages/platform-browser/src/security/**',
-          'packages/tsconfig-tsec-base.json',
-          'packages/tsec-exemption.json',
-          'tools/tsec.bzl',
          'aio/content/guide/security.md',
          'aio/content/examples/security/**',
-          'aio/content/images/guide/security/**',
+          'aio/content/images/guide/security/**'
          ])
    reviewers:
      users:
-        - alxhub
+        - IgorMinar
        - jelbourn
-        - josephperrott
-        - pkozlowski-opensource
+        # OOO as of 2020-09-28 - pkozlowski-opensource
    reviews:
      request: -1 # request reviews from everyone
      required: 2 # require at least 2 approvals
@@ -809,8 +761,9 @@ groups:
          ])
    reviewers:
      users:
-        - devversion
+        - IgorMinar
        - josephperrott
+        - kyliau

  # =========================================================
  #  Language Service
@@ -828,8 +781,9 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
+        - kyliau
        - atscott
+        - zarend

  # =========================================================
  #  zone.js
@@ -861,13 +815,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
-        - AndrewKushnir
-        - atscott
+        - IgorMinar
        - crisbeto
-        - dylhunn
-        - jessicajaniuk
-        - pkozlowski-opensource

  # =========================================================
  #  Benchpress
@@ -899,13 +848,8 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
-        - AndrewKushnir
-        - atscott
-        - dylhunn
-        - jessicajaniuk
+        - IgorMinar
        - josephperrott
-        - pkozlowski-opensource

  # =========================================================
  #  Docs: Contributors
@@ -922,7 +866,6 @@ groups:
          ])
    reviewers:
      users:
-        - MarkTechson
        - mgechev
        - twerske

@@ -957,8 +900,8 @@ groups:
    reviewers:
      users:
        - aikidave
-        - AndrewKushnir
-        - jessicajaniuk
+        - IgorMinar
+        - jelbourn

  # =========================================================
  #  Docs: Marketing
@@ -980,9 +923,8 @@ groups:
    reviewers:
      users:
        - aikidave
-        - MarkTechson
+        - IgorMinar
        - mgechev
-        - twerske

  # =========================================================
  #  Docs: Observables
@@ -1008,8 +950,6 @@ groups:
    reviewers:
      users:
        - alxhub
-        - atscott
-        - dylhunn

  # =========================================================
  #  Docs: Packaging, Tooling, Releasing
@@ -1029,7 +969,6 @@ groups:
          'aio/content/guide/updating.md',
          'aio/content/guide/deprecations.md',
          'aio/content/guide/migration-legacy-message-id.md',
-          'aio/content/examples/deprecation-guide/**',
          'aio/content/guide/migration-renderer.md',
          'aio/content/guide/migration-undecorated-classes.md',
          'aio/content/guide/migration-dynamic-flag.md',
@@ -1037,13 +976,13 @@ groups:
          'aio/content/guide/migration-localize.md',
          'aio/content/guide/migration-module-with-providers.md',
          'aio/content/guide/static-query-migration.md',
-          'aio/content/guide/update-to-latest-version.md',
+          'aio/content/guide/updating-to-version-12.md',
          'aio/content/guide/ivy-compatibility.md',
          'aio/content/guide/ivy-compatibility-examples.md'
          ])
    reviewers:
      users:
-        - alxhub
+        - IgorMinar
        - jelbourn

  # =========================================================
@@ -1061,7 +1000,6 @@ groups:
          ])
    reviewers:
      users:
-        - MarkTechson
        - mgechev
        - twerske

@@ -1077,14 +1015,14 @@ groups:
      - *can-be-global-docs-approved
      - >
        contains_any_globs(files, [
-          'packages/compiler-cli/private/tooling.ts',
-          'packages/localize/tools/index.ts'
+          'packages/compiler-cli/src/tooling.ts'
        ])
    reviewers:
      users:
        - alan-agius4
        - clydin
-        - dgp1130
+        - kyliau
+        - IgorMinar
    reviews:
      request: -1 # request reviews from everyone
      required: 2 # require at least 2 approvals
@@ -1122,7 +1060,7 @@ groups:
      users:
        - alan-agius4
        - clydin
-        - dgp1130
+        - IgorMinar
        - mgechev

  # =========================================================
@@ -1135,16 +1073,14 @@ groups:
      - *can-be-global-docs-approved
      - >
        contains_any_globs(files, [
-          'aio/content/examples/angular-linker-plugin/webpack.config.mjs',
          'aio/content/guide/creating-libraries.md',
          'aio/content/guide/libraries.md',
-          'aio/content/guide/using-libraries.md',
-          'aio/content/guide/angular-package-format.md'
+          'aio/content/guide/using-libraries.md'
          ])
    reviewers:
      users:
        - alan-agius4
-        - alxhub
+        - IgorMinar
        - mgechev

  # =========================================================
@@ -1166,7 +1102,7 @@ groups:
    reviewers:
      users:
        - alan-agius4
-        - dylhunn
+        - IgorMinar
        - mgechev

  # =========================================================
@@ -1192,17 +1128,15 @@ groups:
          'aio/content/guide/docs-style-guide.md',
          'aio/content/examples/docs-style-guide/**',
          'aio/content/images/guide/docs-style-guide/**',
-          'aio/content/guide/localized-documentation.md',
-          'aio/content/guide/localizing-angular.md',
          'aio/content/guide/reviewing-content.md',
          'aio/content/guide/updating-content-github-ui.md',
          'aio/content/guide/updating-search-keywords.md',
          ])
    reviewers:
      users:
-        - alxhub
        - gkalpak
-        - josephperrott
+        - IgorMinar
+        - petebacondarwin

  # =========================================================
  #  Dev-infra
@@ -1224,7 +1158,6 @@ groups:
          'docs/*.md',
          'docs/images/**',
          'goldens/*',
-          'goldens/public-api/manage.js',
          'modules/*',
          'packages/*',
          'packages/examples/test-utils/**',
@@ -1236,8 +1169,8 @@ groups:
          'tools/circular_dependency_test/**',
          'tools/contributing-stats/**',
          'tools/gulp-tasks/**',
-          'tools/legacy-saucelabs/**',
          'tools/npm/**',
+          'tools/npm_integration_test/**',
          'tools/rxjs/**',
          'tools/saucelabs/**',
          'tools/size-tracking/**',
@@ -1253,7 +1186,9 @@ groups:
    reviewers:
      users:
        - devversion
+        - filipesilva
        - gkalpak
+        - IgorMinar
        - josephperrott

  # =========================================================
@@ -1266,12 +1201,10 @@ groups:
      - *no-groups-above-this-rejected
      - *can-be-global-approved
      - >
-        contains_any_globs(files.exclude("goldens/public-api/manage.js"), [
+        contains_any_globs(files, [
          'goldens/public-api/**',
          'docs/NAMING.md',
-          'aio/content/guide/angular-package-format.md',
          'aio/content/errors/*.md',
-          'aio/content/extended-diagnostics/*.md',
          'aio/content/guide/glossary.md',
          'aio/content/guide/styleguide.md',
          'aio/content/examples/errors/**',
@@ -1281,12 +1214,14 @@ groups:
    reviewers:
      users:
        - AndrewKushnir
+        - IgorMinar
        - alxhub
        - atscott
-        - dylhunn
        - jelbourn
+        - petebacondarwin
        - jessicajaniuk
-        - pkozlowski-opensource
+        - zarend
+        # OOO as of 2020-09-28 - pkozlowski-opensource
    reviews:
      request: 4 # Request reviews from four people
      required: 3 # Require that three people approve
@@ -1307,13 +1242,15 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - AndrewKushnir
+        - IgorMinar
+        - alxhub
        - atscott
-        - dylhunn
        - jelbourn
+        - petebacondarwin
        - jessicajaniuk
-        - pkozlowski-opensource
+        - zarend
+        # OOO as of 2020-09-28 - pkozlowski-opensource
    reviews:
      request: 4 # Request reviews from four people
      required: 2 # Require that two people approve
@@ -1334,13 +1271,15 @@ groups:
        ])
    reviewers:
      users:
-        - alxhub
        - AndrewKushnir
+        - IgorMinar
+        - alxhub
        - atscott
-        - dylhunn
        - jelbourn
+        - petebacondarwin
        - jessicajaniuk
-        - pkozlowski-opensource
+        - zarend
+        # OOO as of 2020-09-28 - pkozlowski-opensource

  ####################################################################################
  #  Special Cases
@@ -1359,9 +1298,9 @@ groups:
          ])
    reviewers:
      users:
-        - alxhub
        - AndrewKushnir
-        - andrewseguin
-        - dgp1130
+        - IgorMinar
+        - alxhub
+        - atscott
        - jelbourn
        - josephperrott
@@ -6,15 +6,15 @@ This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/d

 To use the recommended configurations follow the steps below:

- install the recommended extensions in `.vscode/extensions.json`
+- install the recommneded extensions in `.vscode/extensions.json`
 - copy (or link) `.vscode/recommended-settings.json` to `.vscode/settings.json`
 - copy (or link) `.vscode/recommended-launch.json` to `.vscode/launch.json`
 - copy (or link) `.vscode/recommended-tasks.json` to `.vscode/tasks.json`
 - restart the editor

-If you already have your custom workspace settings, you should instead manually merge the file contents.
+If you already have your custom workspace settings you should instead manually merge the file contents.

-This isn't an automatic process, so you will need to repeat it when settings are updated.
+This isn't an automatic process so you will need to repeat it when settings are updated.

 To see the recommended extensions select "Extensions: Show Recommended Extensions" in the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).

@@ -22,4 +22,4 @@ To see the recommended extensions select "Extensions: Show Recommended Extension

 If you wish to add extra configuration items please keep in mind any modifications you make here will be used by many users.

-Try to keep these settings/configurations to things that help facilitate the development process and avoid altering the user workflow whenever possible.
+Try to keep these settings/configuations to things that help facilitate the development process and avoid altering the user workflow whenever possible.
@@ -39,6 +39,7 @@
      "program": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test/acceptance",
        "--config=debug"
      ],
@@ -56,6 +57,7 @@
      "program": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test/render3",
        "--config=debug"
      ],
@@ -73,6 +75,7 @@
      "program": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test",
        "--config=debug"
      ],
@@ -9,6 +9,7 @@
      "command": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test",
        "packages/core/test/acceptance",
        "packages/core/test/render3",
@@ -41,6 +42,7 @@
      "command": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test/acceptance",
      ],
      "group": "test",
@@ -69,6 +71,7 @@
      "command": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test",
      ],
      "group": "test",
@@ -97,6 +100,7 @@
      "command": "${workspaceFolder}/node_modules/.bin/bazelisk",
      "args": [
        "test",
+        "--config=ivy",
        "packages/core/test/render3",
      ],
      "group": "test",
@@ -2,4 +2,4 @@
 # yarn lockfile v1


-yarn-path ".yarn/releases/yarn-1.22.17.cjs"
+yarn-path ".yarn/releases/yarn-1.22.10.cjs"
@@ -24,7 +24,7 @@ filegroup(
        "//packages/zone.js/bundles:zone-testing.umd.js",
        "//packages/zone.js/bundles:task-tracking.umd.js",
        "//:test-events.js",
-        "//:third_party/shims_for_internal_tests.js",
+        "//:third_party/shims_for_IE.js",
        # Including systemjs because it defines `__eval`, which produces correct stack traces.
        "@npm//:node_modules/systemjs/dist/system.src.js",
        "@npm//:node_modules/reflect-metadata/Reflect.js",
@@ -58,9 +58,9 @@ If you would like to *implement* a new feature, please consider the size of the

 ### <a name="submit-issue"></a> Submitting an Issue

-Before you submit an issue, please search the issue tracker. An issue for your problem might already exist and the discussion might inform you of workarounds readily available.
+Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.

-We want to fix all the issues as soon as possible, but before fixing a bug, we need to reproduce and confirm it.
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it.
 In order to reproduce bugs, we require that you provide a minimal reproduction.
 Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions.

@@ -235,6 +235,8 @@ When the body is present it must be at least 20 characters long and must conform

 The `footer` is optional. The [Commit Message Footer](#commit-footer) format describes what the footer is used for and the structure it must have.

+Any line of the commit message cannot be longer than 100 characters.
+

 #### <a name="commit-header"></a>Commit Message Header

@@ -259,7 +261,7 @@ The `<type>` and `<summary>` fields are mandatory, the `(<scope>)` field is opti
 Must be one of the following:

 * **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-* **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
 * **docs**: Documentation only changes
 * **feat**: A new feature
 * **fix**: A bug fix
@@ -331,8 +333,7 @@ You can include a comparison of the previous behavior with the new behavior in o

 #### <a name="commit-footer"></a>Commit Message Footer

-The footer can contain information about breaking changes and deprecations and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to.
-For example:
+The footer can contain information about breaking changes and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to.

 ```
 BREAKING CHANGE: <breaking change summary>
@@ -343,21 +344,8 @@ BREAKING CHANGE: <breaking change summary>
 Fixes #<issue number>
 ```

-or
-
-```
-DEPRECATED: <what is deprecated>
-<BLANK LINE>
-<deprecation description + recommended update path>
-<BLANK LINE>
-<BLANK LINE>
-Closes #<pr number>
-```
-
 Breaking Change section should start with the phrase "BREAKING CHANGE: " followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions.

-Similarly, a Deprecation section should start with "DEPRECATED: " followed by a short description of what is deprecated, a blank line, and a detailed description of the deprecation that also mentions the recommended update path.
-

 ### Revert commits

@@ -1,6 +1,6 @@
 The MIT License

-Copyright (c) 2010-2022 Google LLC. https://angular.io/license
+Copyright (c) 2010-2021 Google LLC. https://angular.io/license

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -112,7 +112,7 @@ Read through our [contributing guidelines][contributing] to learn about our subm

 ### Want to Help?

-Want to report a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
+Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.

 ### Code of Conduct

@@ -156,4 +156,4 @@ Join the conversation and help the community.
 [gitter]: https://gitter.im/angular/angular
 [stackoverflow]: https://stackoverflow.com/questions/tagged/angular
 [youtube]: https://youtube.com/angular
-[meetup]: https://www.meetup.com/find/?keywords=angular
+[meetup]: https://www.meetup.com/find/?keywords=angular"
@@ -8,19 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
    name = "build_bazel_rules_nodejs",
-    sha256 = "ddb78717b802f8dd5d4c01c340ecdc007c8ced5c1df7db421d0df3d642ea0580",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.6.0/rules_nodejs-4.6.0.tar.gz"],
-)
-
-# The PKG rules are needed to build tar packages for integration tests. The builtin
-# rule in `@bazel_tools` is not Windows compatible and outdated.
-http_archive(
-    name = "rules_pkg",
-    sha256 = "62eeb544ff1ef41d786e329e1536c1d541bb9bcad27ae984d57f18f314018e66",
-    urls = [
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_pkg/releases/download/0.6.0/rules_pkg-0.6.0.tar.gz",
-        "https://github.com/bazelbuild/rules_pkg/releases/download/0.6.0/rules_pkg-0.6.0.tar.gz",
-    ],
+    sha256 = "4681ca88d512d57196d064d1441549080d8d17d119174a1229d1717a16a4a489",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0-beta.1/rules_nodejs-4.0.0-beta.1.tar.gz"],
 )

 # Check the rules_nodejs version and download npm dependencies
@@ -32,17 +21,14 @@ check_rules_nodejs_version(minimum_version_string = "2.2.0")

 # Setup the Node.js toolchain
 node_repositories(
-    node_version = "16.10.0",
+    node_version = "14.16.1",
    package_json = ["//:package.json"],
 )

-load("//integration:npm_package_archives.bzl", "npm_package_archives")
+load("//integration:angular_integration_test.bzl", "npm_package_archives")

 yarn_install(
    name = "npm",
-    # Note that we add the postinstall script here so that the dependencies are re-installed
-    # when the postinstall patches are modified.
-    data = ["//tools:postinstall-patches.js"],
    manual_build_file_contents = npm_package_archives(),
    package_json = "//:package.json",
    yarn_lock = "//:yarn.lock",
@@ -62,19 +48,17 @@ load("@npm//@angular/dev-infra-private/bazel/browsers:browser_repositories.bzl",

 browser_repositories()

-load("@build_bazel_rules_nodejs//toolchains/esbuild:esbuild_repositories.bzl", "esbuild_repositories")
-
-esbuild_repositories()
-
-load("@rules_pkg//:deps.bzl", "rules_pkg_dependencies")
-
-rules_pkg_dependencies()
-
 load("//packages/common/locales/generate-locales-tool:cldr-data.bzl", "cldr_data_repository")

 cldr_data_repository(
    name = "cldr_data",
+    # Since we use the Github archives for CLDR 37, we need to specify a path
+    # to the available locales. This wouldn't be needed with CLDR 39 as that
+    # comes with an official JSON archive not containing a version suffix.
+    available_locales_path = "cldr-core-37.0.0/availableLocales.json",
    urls = {
-        "https://github.com/unicode-org/cldr-json/releases/download/39.0.0/cldr-39.0.0-json-full.zip": "a631764b6bb7967fab8cc351aff3ffa3f430a23646899976dd9d65801446def6",
+        "https://github.com/unicode-cldr/cldr-core/archive/37.0.0.zip": "32b5c49c3874aa342b90412c207b42e7aefb2435295891fb714c34ce58b3c706",
+        "https://github.com/unicode-cldr/cldr-dates-full/archive/37.0.0.zip": "e1c410dd8ad7d75df4a5393efaf5d28f0d56c0fa126c5d66e171a3f21a988a1e",
+        "https://github.com/unicode-cldr/cldr-numbers-full/archive/37.0.0.zip": "a921b90cf7f436e63fbdd55880f96e39a203acd9e174b0ceafa20a02c242a12e",
    },
 )
@@ -2,15 +2,11 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries

-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
+# Googlebot uses an older version of Chrome
+# For additional information see: https://developers.google.com/search/docs/guides/rendering

-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
+> 0.5%
+last 2 major versions
 Firefox ESR
+not dead
+IE 11
@@ -37,7 +37,6 @@
        ],
        "dot-notation": "error",
        "indent": "off",
-        "max-len": ["error", 120],
        "@typescript-eslint/member-delimiter-style": ["error", {
          "singleline": {
            "delimiter": "comma",
@@ -59,8 +58,7 @@
        "@typescript-eslint/no-shadow": ["error"],
        "no-tabs": "error",
        "no-underscore-dangle": "off",
-        "no-unused-expressions": "off",
-        "@typescript-eslint/no-unused-expressions": ["error"],
+        "no-unused-expressions": "error",
        "no-use-before-define": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "quotes": "off",
@@ -6,9 +6,6 @@
 /src/generated
 /tmp

-# Cache folder for the Angular CLI.
-.angular/cache
-
 # dependencies
 /node_modules

@@ -1,6 +1,6 @@
 # Angular documentation project (https://angular.io)

-Everything in this folder is part of the documentation project. This includes:
+Everything in this folder is part of the documentation project. This includes

 * the web site for displaying the documentation
 * the dgeni configuration for converting source files to rendered files that can be viewed in the web site.
@@ -1,6 +1,5 @@
 // Imports
 import fetch from 'node-fetch';
-
 import {assertNotMissingOrEmpty} from './utils';

 // Constants
@@ -23,8 +22,8 @@ export interface BuildInfo {
  username: string;
  build_num: number;
  has_artifacts: boolean;
-  outcome: string;       // e.g. 'success'
-  vcs_revision: string;  // HEAD SHA
+  outcome: string; // e.g. 'success'
+  vcs_revision: string; // HEAD SHA
  // there are other fields but they are not used in this code
 }

@@ -32,19 +31,19 @@ export interface BuildInfo {
 * A Helper that can interact with the CircleCI API.
 */
 export class CircleCiApi {
+
  private tokenParam = `circle-token=${this.circleCiToken}`;

  /**
   * Construct a helper that can interact with the CircleCI REST API.
-   * @param githubOrg The Github organisation whose repos we want to access in CircleCI (e.g.
-   *     angular).
+   * @param githubOrg The Github organisation whose repos we want to access in CircleCI (e.g. angular).
   * @param githubRepo The Github repo whose builds we want to access in CircleCI (e.g. angular).
   * @param circleCiToken The CircleCI API access token (secret).
   */
  constructor(
-      private githubOrg: string,
-      private githubRepo: string,
-      private circleCiToken: string,
+    private githubOrg: string,
+    private githubRepo: string,
+    private circleCiToken: string,
  ) {
    assertNotMissingOrEmpty('githubOrg', githubOrg);
    assertNotMissingOrEmpty('githubRepo', githubRepo);
@@ -65,7 +64,7 @@ export class CircleCiApi {
      }
      return response.json();
    } catch (error) {
-      throw new Error(`CircleCI build info request failed (${(error as Error).message})`);
+        throw new Error(`CircleCI build info request failed (${error.message})`);
    }
  }

@@ -85,7 +84,7 @@ export class CircleCiApi {
      }
      return artifact.url;
    } catch (error) {
-      throw new Error(`CircleCI artifact URL request failed (${(error as Error).message})`);
+      throw new Error(`CircleCI artifact URL request failed (${error.message})`);
    }
  }
 }
@@ -1,5 +1,4 @@
 import {basename, resolve as resolvePath} from 'path';
-
 import {SHORT_SHA_LEN} from './constants';

 /**
@@ -18,8 +17,7 @@ export function computeShortSha(sha: string) {
 * @param artifactPath The path to the artifact on CircleCI.
 * @returns The fully resolved location for the specified downloaded artifact.
 */
-export function computeArtifactDownloadPath(
-    downloadsDir: string, pr: number, sha: string, artifactPath: string) {
+export function computeArtifactDownloadPath(downloadsDir: string, pr: number, sha: string, artifactPath: string) {
  return resolvePath(downloadsDir, `${pr}-${computeShortSha(sha)}-${basename(artifactPath)}`);
 }

@@ -50,7 +48,7 @@ export function assert(value: boolean, message: string) {
 * @param name The name of the parameter.
 * @param value The value of the parameter.
 */
-export const assertNotMissingOrEmpty = (name: string, value: string|null|undefined) => {
+export const assertNotMissingOrEmpty = (name: string, value: string | null | undefined) => {
  assert(!!value, `Missing or empty required parameter '${name}'!`);
 };

@@ -66,9 +64,9 @@ export const getEnvVar = (name: string, isOptional = false): string => {

  if (!isOptional && !value) {
    try {
-      throw new Error(`ERROR: Missing required environment variable '${name}'!`);
+     throw new Error(`ERROR: Missing required environment variable '${name}'!`);
    } catch (error) {
-      console.error((error as Error).stack);
+      console.error(error.stack);
      process.exit(1);
    }
  }
@@ -78,8 +76,7 @@ export const getEnvVar = (name: string, isOptional = false): string => {

 /**
 * A basic logger implementation.
- * Delegates to `console`, but prepends each message with the current date and specified scope (i.e
- * caller).
+ * Delegates to `console`, but prepends each message with the current date and specified scope (i.e caller).
 */
 export class Logger {
  private padding = ' '.repeat(20 - this.scope.length);
@@ -90,20 +87,12 @@ export class Logger {
   */
  constructor(private scope: string) {}

-  public error(...args: any[]) {
-    this.callMethod('error', args);
-  }
-  public info(...args: any[]) {
-    this.callMethod('info', args);
-  }
-  public log(...args: any[]) {
-    this.callMethod('log', args);
-  }
-  public warn(...args: any[]) {
-    this.callMethod('warn', args);
-  }
+  public error(...args: any[]) { this.callMethod('error', args); }
+  public info(...args: any[]) { this.callMethod('info', args); }
+  public log(...args: any[]) { this.callMethod('log', args); }
+  public warn(...args: any[]) { this.callMethod('warn', args); }

-  private callMethod(method: 'error'|'info'|'log'|'warn', args: any[]) {
+  private callMethod(method: 'error' | 'info' | 'log' | 'warn', args: any[]) {
    console[method](`[${new Date()}]`, `${this.scope}:${this.padding}`, ...args);
  }
 }
@@ -3,10 +3,8 @@ import fetch from 'node-fetch';
 import {dirname} from 'path';
 import {mkdir} from 'shelljs';
 import {promisify} from 'util';
-
 import {CircleCiApi} from '../common/circle-ci-api';
 import {assert, assertNotMissingOrEmpty, computeArtifactDownloadPath, Logger} from '../common/utils';
-
 import {PreviewServerError} from './preview-error';

 export interface GithubInfo {
@@ -22,11 +20,8 @@ export interface GithubInfo {
 */
 export class BuildRetriever {
  private logger = new Logger('BuildRetriever');
-  constructor(
-      private api: CircleCiApi, private downloadSizeLimit: number, private downloadDir: string) {
-    assert(
-        downloadSizeLimit > 0,
-        'Invalid parameter "downloadSizeLimit" should be a number greater than 0.');
+  constructor(private api: CircleCiApi, private downloadSizeLimit: number, private downloadDir: string) {
+    assert(downloadSizeLimit > 0, 'Invalid parameter "downloadSizeLimit" should be a number greater than 0.');
    assertNotMissingOrEmpty('downloadDir', downloadDir);
  }

@@ -55,29 +50,25 @@ export class BuildRetriever {
   * @param artifactPath the path on CircleCI where the artifact was stored.
   * @returns A promise to the file path where the downloaded file was stored.
   */
-  public async downloadBuildArtifact(
-      buildNum: number, pr: number, sha: string, artifactPath: string): Promise<string> {
+  public async downloadBuildArtifact(buildNum: number, pr: number, sha: string, artifactPath: string): Promise<string> {
    try {
      const outPath = computeArtifactDownloadPath(this.downloadDir, pr, sha, artifactPath);
-      const downloadExists =
-          await new Promise(resolve => fs.exists(outPath, exists => resolve(exists)));
+      const downloadExists = await new Promise(resolve => fs.exists(outPath, exists => resolve(exists)));
      if (!downloadExists) {
        const url = await this.api.getBuildArtifactUrl(buildNum, artifactPath);
        const response = await fetch(url, {size: this.downloadSizeLimit});
        if (response.status !== 200) {
-          throw new PreviewServerError(
-              response.status, `Error ${response.status} - ${response.statusText}`);
+          throw new PreviewServerError(response.status, `Error ${response.status} - ${response.statusText}`);
        }
        const buffer = await response.buffer();
        mkdir('-p', dirname(outPath));
        await promisify(fs.writeFile)(outPath, buffer);
      }
      return outPath;
-    } catch (error: any) {
+    } catch (error) {
      this.logger.warn(error);
      const status = (error.type === 'max-size') ? 413 : 500;
-      throw new PreviewServerError(
-          status, `CircleCI artifact download failed (${error.message || error})`);
+      throw new PreviewServerError(status, `CircleCI artifact download failed (${error.message || error})`);
    }
  }
 }
@@ -30,10 +30,10 @@
    "jasmine": "^3.6.1",
    "nock": "^13.0.4",
    "node-fetch": "^2.6.1",
-    "shelljs": "^0.8.5",
+    "shelljs": "^0.8.4",
    "source-map-support": "^0.5.19",
    "tar-stream": "^2.1.3",
-    "tslib": "^2.3.0"
+    "tslib": "^2.2.0"
  },
  "devDependencies": {
    "@types/body-parser": "^1.19.0",
@@ -49,6 +49,6 @@
    "supertest": "^4.0.2",
    "tslint": "^6.1.3",
    "tslint-jasmine-noSkipOrFocus": "^1.0.9",
-    "typescript": "~4.5.2"
+    "typescript": "~4.3.4"
  }
 }
@@ -1,5 +1,4 @@
 import * as express from 'express';
-
 import {PreviewServerError} from '../../lib/preview-server/preview-error';
 import {respondWithError, throwRequestError} from '../../lib/preview-server/utils';

@@ -38,12 +37,11 @@ describe('preview-server/utils', () => {
          originalUrl: 'some.domain.com/path',
        } as express.Request;
        throwRequestError(505, 'ERROR MESSAGE', request);
-      } catch (error: any) {
+      } catch (error) {
        caught = true;
        expect(error).toBeInstanceOf(PreviewServerError);
        expect(error.status).toEqual(505);
-        expect(error.message)
-            .toEqual(`ERROR MESSAGE in request: POST some.domain.com/path "The request body"`);
+        expect(error.message).toEqual(`ERROR MESSAGE in request: POST some.domain.com/path "The request body"`);
      }
      expect(caught).toEqual(true);
    });
@@ -1,36 +1,39 @@
 {
  "compilerOptions": {
    /* Basic Options */
-    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
-    "module": "commonjs", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "target": "es5",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+    "module": "commonjs",                        /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "es2015",
      "es2016.array.include"
-    ], /* Specify library files to be included in the compilation:  */
+    ],                                        /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                          /* Allow javascript files to be compiled. */
    // "checkJs": true,                          /* Report errors in .js files. */
    // "jsx": "preserve",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                      /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                        /* Generates corresponding '.map' file. */
    // "outFile": "./",                          /* Concatenate and emit output to single file. */
-    "outDir": "dist", /* Redirect output structure to the directory. */
+    "outDir": "dist",                         /* Redirect output structure to the directory. */
    // "rootDir": "./",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                   /* Do not emit comments to output. */
    // "noEmit": true,                           /* Do not emit outputs. */
-    "importHelpers": true, /* Import emit helpers from 'tslib'. */
+    "importHelpers": true,                    /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,               /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
    /* Strict Type-Checking Options */
-    "strict": true, /* Enable all strict type-checking options. */
+    "strict": true,                              /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                 /* Enable strict null checks. */
    // "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                     /* Parse in strict mode and emit "use strict" for each source file. */
+
    /* Additional Checks */
-    "noUnusedLocals": true, /* Report errors on unused locals. */
-    "noUnusedParameters": true, /* Report errors on unused parameters. */
-    "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+    "noUnusedLocals": true,                   /* Report errors on unused locals. */
+    "noUnusedParameters": true,               /* Report errors on unused parameters. */
+    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
+
    /* Module Resolution Options */
    // "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
@@ -38,26 +41,29 @@
    // "rootDirs": [],                           /* List of root folders whose combined content represents the structure of the project at runtime. */
    "typeRoots": [
      "node_modules/@types"
-    ], /* List of folders to include type definitions from. */
+    ],                                        /* List of folders to include type definitions from. */
    // "types": [],                              /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    // "preserveSymlinks": true,                 /* Do not resolve the real path of symlinks. */
+
    /* Source Map Options */
    // "sourceRoot": "./",                       /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                          /* Specify the location where debugger should locate map files instead of generated locations. */
-    "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
+    "inlineSourceMap": true,                  /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                    /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
    /* Experimental Options */
    // "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,            /* Enables experimental support for emitting type metadata for decorators. */
+
    /* Other */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
-    "newLine": "LF", /* Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix). */
-    "pretty": true, /* Stylize errors and messages using color and context. */
-    "skipLibCheck": true /* Skip type checking of all declaration files (*.d.ts). */
+    "newLine": "LF",                          /* Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix). */
+    "pretty": true,                           /* Stylize errors and messages using color and context. */
+    "skipLibCheck": true                      /* Skip type checking of all declaration files (*.d.ts). */
  },
  "include": [
    "lib/**/*",
    "test/**/*"
  ]
-}
+}
@@ -2209,10 +2209,10 @@ shell-quote@^1.6.1:
    array-reduce "~0.0.0"
    jsonify "~0.0.0"

-shelljs@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
-  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+shelljs@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
+  integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==
  dependencies:
    glob "^7.0.0"
    interpret "^1.0.0"
@@ -2505,10 +2505,10 @@ tslib@^1.8.1:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"

-tslib@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+tslib@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==

 tslint-jasmine-noSkipOrFocus@^1.0.9:
  version "1.0.9"
@@ -2563,10 +2563,10 @@ typedarray-to-buffer@^3.1.5:
  dependencies:
    is-typedarray "^1.0.0"

-typescript@~4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
-  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
+typescript@~4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
+  integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==

 undefsafe@^2.0.2:
  version "2.0.2"
@@ -6,4 +6,4 @@ TODO (gkalpak): Add docs. Mention:
  Relevant files: `aio/aio-builds-setup/scripts/test.sh`
 - Deploying from CI.
  Relevant files: `.circleci/config.yml`, `scripts/ci/deploy.sh`, `aio/scripts/build-artifacts.sh`,
-  `aio/scripts/deploy-to-firebase/index.mjs`
+  `aio/scripts/deploy-to-firebase.js`
@@ -138,11 +138,6 @@
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "headers": {
-              "Content-Security-Policy": "require-trusted-types-for 'script'; trusted-types angular angular#bundler angular#unsafe-bypass aio#analytics google#safe"
-            }
-          },
          "configurations": {
            "next": {
              "browserTarget": "site:build:next"
@@ -1,75 +0,0 @@
-
-# Persistent disk cache
-Angular CLI saves a number of cachable operations on disk by default.
-
-When you re-run the same build, the build system restores the state of the previous build and re-uses previously performed operations, which decreases the time taken to build and test your applications and libraries.
-
-To amend the default cache settings, add the `cli.cache` object to your [Workspace Configuration](guide/workspace-config).
-The object goes under `cli.cache` at the top level of the file, outside the `projects` sections.
-
-```json
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "cache": {
-      ...
-    }
-  },
-  "projects": {}
-}
-```
-
-For more information, see [cache options](guide/workspace-config#cache-options).
-
-### Enabling and disabling the cache
-Caching is enabled by default. To disable caching run the following command:
-
-```bash
-ng config cli.cache.enabled false
-```
-
-To re-enable caching, set `cli.cache.enabled` to `true`.
-
-### Cache environments
-By default, disk cache is only enabled for local environments.
-
-To enable caching for all environments, run the following command:
-
-```bash
-ng config cli.cache.environment all
-```
-
-For more information, see `environment` in [cache options](guide/workspace-config#cache-options).
-
-<div class="alert is-helpful">
-
-The Angular CLI checks for the presence and value of the `CI` environment variable to determine in which environment it is running.
-
-</div>
-
-### Cache path
-
-By default, `.angular/cache` is used as a base directory to store cache results. To change this path, run the following command:
-
-```bash
-ng config cli.cache.path ".cache/ng"
-```
-
-### Clearing the cache
-
-To clear the cache, run one of the following commands.
-
-To clear the cache on Unix-based operating systems:
-
-```bash
-rm -rf .angular/cache
-```
-
-To clear the cache on Windows:
-
-```bash
-rmdir /s /q .angular\cache
-```
-
-For more information, see [rm command](https://man7.org/linux/man-pages/man1/rm.1.html) and [rmdir command](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/rmdir).
@@ -66,9 +66,10 @@ A single workspace configuration file, `angular.json`, is created at the top lev
 This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.

 The [ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly.
-Note that option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands must be dash-case.
+Note that option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands can use either camelCase or dash-case.

 * See more about [Workspace Configuration](guide/workspace-config).
+* See the [complete schema](https://github.com/angular/angular-cli/wiki/angular-workspace) for `angular.json`.

 ## CLI command-language syntax

@@ -27,7 +27,7 @@ ng config --global cli.analyticsSharing.tracking UA-123456-12
 To turn off this feature, run the following command:

 <code-example language="sh">
-ng config --global cli.analyticsSharing undefined
+ng config --global --remove cli.analyticsSharing
 </code-example>

 ## Per user tracking
@@ -36,11 +36,11 @@ You can add a custom user ID to the global configuration, in order to identify u
 If that user enables CLI analytics for their own project, your analytics display tracks and labels their individual usage.

 <code-example language="sh">
-ng config --global cli.analyticsSharing.uuid SOME_USER_NAME
+ng config --global cli.analyticsSharing.user SOME_USER_NAME
 </code-example>

 To generate a new random user ID, run the following command:

 <code-example language="sh">
-ng config --global cli.analyticsSharing.uuid ""
+ng config --global cli.analyticsSharing.user ""
 </code-example>
@@ -1,96 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "*.js",
-    "styleguide/**/*.avoid.ts"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {
-        "@angular-eslint/template/accessibility-alt-text": "error",
-        "@angular-eslint/template/accessibility-elements-content": "error",
-        "@angular-eslint/template/accessibility-label-has-associated-control": "error",
-        "@angular-eslint/template/accessibility-table-scope": "error",
-        "@angular-eslint/template/accessibility-valid-aria": "error",
-        "@angular-eslint/template/click-events-have-key-events": "error",
-        "@angular-eslint/template/eqeqeq": "off",
-        "@angular-eslint/template/mouse-events-have-key-events": "error",
-        "@angular-eslint/template/no-autofocus": "error",
-        "@angular-eslint/template/no-distracting-elements": "error",
-        "@angular-eslint/template/no-positive-tabindex": "error"
-      }
-    },
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "parserOptions": {
-        "createDefaultProgram": false,
-        "project": "content/examples/tsconfig.eslint.json"
-      },
-      "rules": {
-        "@typescript-eslint/ban-types": "error",
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "", // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense).
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": ["app", "toh"],
-            "style": "camelCase"
-          }
-        ],
-        "dot-notation": "off",
-        "@typescript-eslint/dot-notation": ["error", {"allowIndexSignaturePropertyAccess": true}],
-        "indent": "off",
-        "max-len": ["error", {"code": 120, "ignoreUrls": true}],
-        "@typescript-eslint/member-delimiter-style": ["error", {
-          "singleline": {
-            "delimiter": "comma",
-            "requireLast": false
-          }
-        }],
-        "@typescript-eslint/member-ordering": "off",
-        "@typescript-eslint/naming-convention": "off",
-        "no-console": ["error", {"allow": ["log", "warn", "error"]}],
-        "no-empty-function": "off",
-        "@typescript-eslint/no-non-null-assertion": "off", // TODO: Fix the code violating this rule and enable it.
-        "no-restricted-syntax": [
-          "error",
-          {
-            "selector": "CallExpression[callee.name=/^(fdescribe|fit)$/]",
-            "message": "Don't keep jasmine focus methods."
-          }
-        ],
-        "no-shadow": "off",
-        "@typescript-eslint/no-shadow": "error",
-        "no-tabs": "error",
-        "no-underscore-dangle": "off",
-        "no-unused-expressions": "off",
-        "@typescript-eslint/no-unused-expressions": "error",
-        "no-use-before-define": "off",
-        "prefer-arrow/prefer-arrow-functions": "off",
-        "quotes": "off",
-        "@typescript-eslint/quotes": ["off", "single", {"avoidEscape": true}], // TODO: Fix the code violating this rule and enable it.
-        "semi": "error"
-      }
-    }
-  ]
-}
@@ -28,6 +28,7 @@
 **/tsconfig.json
 **/tsconfig.app.json
 **/tsconfig.spec.json
+**/tslint.json
 **/karma-test-shim.js
 **/browser-test-shim.js
 **/node_modules
@@ -55,7 +56,6 @@ dist/
 !systemjs.config.*.js
 !karma-test-shim.*.js
 !copy-dist-files.js
-!i18n/angular.json

 # AngularJS files
 !**/*.ajs.js
@@ -98,10 +98,3 @@ upgrade-phonecat-3-final/rollup-config.js

 # schematics
 !schematics-for-libraries/projects/my-lib/package.json
-
-#angular-compiler-options
-!angular-compiler-options/tsconfig.json
-!angular-compiler-options/tsconfig.app.json
-
-# deprecated-example
-!deprecation-guide/angular.package.json
@@ -1,4 +1,4 @@
-/* eslint-disable @angular-eslint/no-host-metadata-property */
+// tslint:disable: no-host-metadata-property
 // #docregion progressbar-component
 import { Component, Input } from '@angular/core';

@@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core';
 */
@Component({
  selector: 'app-example-progressbar',
-  template: '<div class="bar" [style.width.%]="value"></div>',
+  template: `<div class="bar" [style.width.%]="value"></div>`,
  styleUrls: ['./progress-bar.component.css'],
  host: {
    // Sets the role for this component to "progressbar"
@@ -38,11 +38,11 @@
 <p></p>
 <div>
  <!-- #docregion event-binding -->
-  <button type="button" (click)="toggleImage()">
+  <button (click)="toggleImage()">
  <!-- #enddocregion event-binding -->
  Image Toggle #1</button>
  <!-- #docregion event-binding -->
-  <button type="button" (click)="toggleImage($event)">
+  <button (click)="toggleImage($event)">
  <!-- #enddocregion event-binding -->
  Image Toggle #2</button>
  <p>Image toggle event type was {{eventType}}</p>
@@ -51,7 +51,7 @@
 <p></p>
 <div *ngIf="showImage">
  <!-- #docregion src -->
-  <img [src]="movie.imageurl" [alt]="movie.title">
+  <img [src]="movie.imageurl">
  <!-- #enddocregion src -->
 </div>

@@ -39,7 +39,7 @@
    <thead>
      <tr>
        <th>
-          <button type="button" (click)="toggleImage()">
+          <button (click)="toggleImage()">
            {{showImage ? "Hide" : "Show"}} Poster
          </button>
        </th>
@@ -61,7 +61,6 @@
                [style.height.px]="50"
                [style.margin.px]="2"
                [src]="movie.imageurl"
-                [alt]="movie.title"
                [title]="movie.title">
        </td>
        <td>{{movie.title}}</td>
@@ -1,20 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  // Add your e2e tests here
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
@@ -1,19 +0,0 @@
-{
-    "projectType": "cli",
-    "overrideBoilerplate": [
-      "tsconfig.json",
-      "tsconfig.app.json"
-    ],
-    "tests": [
-      {
-        "cmd": "yarn",
-        "args": [
-          "e2e",
-          "--protractor-config=e2e/protractor-puppeteer.conf.js",
-          "--no-webdriver-update",
-          "--port={PORT}"
-        ]
-      }
-    ]
-  }
-  
@@ -1 +0,0 @@
-<h1>Replace the src folder in this {{title}} with yours.</h1>
@@ -1,20 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  // Add your unit tests here
-});
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
-  title = 'example';
-}
@@ -1,16 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Ponyracer</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>
@@ -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.error(err));
@@ -1,18 +0,0 @@
-{
-  "description": "Angular Compiler Options",
-  "files": [
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1,2].*",
-    "!doc-files/**/*",
-    "!tsconfig.json",
-    "!tsconfig.app.json"
-  ],
-  "tags": [
-    [
-      "angular",
-      "compiler",
-      "options"
-    ]
-  ]
-}
@@ -1,45 +0,0 @@
-// #docplaster ...
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-// #docregion angular-compiler-options-app
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-      "outDir": "./out-tsc/app",
-      // #enddocregion angular-compiler-options-app
-      "types": []
-    },
-    "files": [
-      "src/main.ts",
-      "src/polyfills.ts"
-    ],
-    "include": [
-      "src/**/*.d.ts"
-    ],
-    "exclude": [
-      "src/test.ts",
-      "src/**/*.spec.ts",
-      "src/**/*-specs.ts",
-      "src/**/*.avoid.ts",
-      "src/**/*.0.ts",
-      "src/**/*.1.ts",
-      "src/**/*.1b.ts",
-      "src/**/*.2.ts",
-      "src/**/*.3.ts",
-      "src/**/*.4.ts",
-      "src/**/*.5.ts",
-      "src/**/*.6.ts",
-      "src/**/*.7.ts",
-      "src/**/testing"
-    ],
-    // #docregion angular-compiler-options-app
-    "angularCompilerOptions": {
-      "strictTemplates": true,
-      "preserveWhitespaces": true,
-      // #enddocregion angular-compiler-options-app
-      "sourceMap": true,
-      "declaration": false
-      // #docregion angular-compiler-options-app
-    },
-  }
-  // #enddocregion angular-compiler-options-app
-  
@@ -1,39 +0,0 @@
-// #docplaster ...
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-// #docregion angular-compiler-options
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    // #enddocregion angular-compiler-options
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2017",
-    "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ]
-    // #docregion angular-compiler-options
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    // #enddocregion angular-compiler-options
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-    // #docregion angular-compiler-options
-  }
-}
-// #enddocregion angular-compiler-options
@@ -1,26 +0,0 @@
-// #docplaster ...
-// #docregion webpack-config
-import linkerPlugin from '@angular/compiler-cli/linker/babel';
-
-export default {
-  // #enddocregion webpack-config
-  // #docregion webpack-config
-  module: {
-    rules: [
-      {
-        test: /\.m?js$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            plugins: [linkerPlugin],
-            compact: false,
-            cacheDirectory: true,
-          }
-        }
-      }
-    ]
-  }
-  // #enddocregion webpack-config
-  // #docregion webpack-config
-}
-// #enddocregion webpack-config
@@ -8,7 +8,6 @@ import * as auto from './auto.po';
 import * as filterStagger from './filter-stagger.po';
 import * as heroGroups from './hero-groups';
 import { getLinkById, sleepFor } from './util';
-import { getComponentSection, getToggleButton } from './querying.po';

 describe('Animation Tests', () => {
  const openCloseHref = getLinkById('open-close');
@@ -18,7 +17,6 @@ describe('Animation Tests', () => {
  const autoHref = getLinkById('auto');
  const filterHref = getLinkById('heroes');
  const heroGroupsHref = getLinkById('hero-groups');
-  const queryingHref = getLinkById('querying');

  beforeAll(() => browser.get(''));

@@ -169,7 +167,7 @@ describe('Animation Tests', () => {
  describe('Auto Calculation Component', () => {
    beforeAll(async () => {
      await autoHref.click();
-      await sleepFor(300);
+      await sleepFor(0);
    });

    it('should attach a shrinkOut trigger to the list of items', async () => {
@@ -207,8 +205,8 @@ describe('Animation Tests', () => {
      const heroesList = filterStagger.getHeroesList();
      const total = await heroesList.count();

-      const input = filterStagger.getInput();
-      await input.sendKeys('Mag');
+      const formInput = filterStagger.getFormInput();
+      await formInput.sendKeys('Mag');

      await browser.wait(async () => await heroesList.count() === 2, 2000);

@@ -220,7 +218,7 @@ describe('Animation Tests', () => {
  describe('Hero Groups Component', () => {
    beforeAll(async () => {
      await heroGroupsHref.click();
-      await sleepFor(400);
+      await sleepFor(300);
    });

    it('should attach a flyInOut trigger to the list of items', async () => {
@@ -244,49 +242,4 @@ describe('Animation Tests', () => {
      await browser.wait(async () => await heroesList.count() < total, 2000);
    });
  });
-
-  describe('Querying Component', () => {
-    const queryingAnimationDuration = 2500;
-
-    beforeAll(async () => {
-      await queryingHref.click();
-      await sleepFor(queryingAnimationDuration);
-    });
-
-    it('should toggle the section', async () => {
-      const toggleButton = getToggleButton();
-      const section = getComponentSection();
-
-      expect(await section.isPresent()).toBe(true);
-
-      // toggling off
-      await toggleButton.click();
-      await sleepFor(queryingAnimationDuration);
-      expect(await section.isPresent()).toBe(false);
-
-      // toggling on
-      await toggleButton.click();
-      await sleepFor(queryingAnimationDuration);
-      expect(await section.isPresent()).toBe(true);
-      await sleepFor(queryingAnimationDuration);
-    });
-
-    it(`should disable the button for the animation's duration`, async () => {
-      const toggleButton = getToggleButton();
-      expect(await toggleButton.isEnabled()).toBe(true);
-
-      // toggling off
-      await toggleButton.click();
-      expect(await toggleButton.isEnabled()).toBe(false);
-      await sleepFor(queryingAnimationDuration);
-      expect(await toggleButton.isEnabled()).toBe(true);
-
-      // toggling on
-      await toggleButton.click();
-      expect(await toggleButton.isEnabled()).toBe(false);
-      await sleepFor(queryingAnimationDuration);
-      expect(await toggleButton.isEnabled()).toBe(true);
-    });
-
-  });
 });
@@ -14,7 +14,7 @@ export function getHeroesList() {
  return getComponentContainer().all(by.css('li'));
 }

-export function getInput() {
-  const input = () => by.css('input');
-  return locate(getPage(), input());
+export function getFormInput() {
+  const formInput = () => by.css('form > input');
+  return locate(getPage(), formInput());
 }
@@ -1,16 +0,0 @@
-import { by } from 'protractor';
-import { locate } from './util';
-
-export function getComponent() {
-  return by.css('app-querying');
-}
-
-export function getToggleButton() {
-  const toggleButton = () => by.className('toggle');
-  return locate(getComponent(), toggleButton());
-}
-
-export function getComponentSection() {
-  const findSection = () => by.css('section');
-  return locate(getComponent(), findSection());
-}
@@ -5,9 +5,9 @@ import { Locator, ElementFinder, browser, by, element } from 'protractor';
 * locate(finder1, finder2) => element(finder1).element(finder2).element(finderN);
 */
 export function locate(locator: Locator, ...locators: Locator[]) {
-  return locators.reduce(
-      (current: ElementFinder, next: Locator) => current.element(next),
-      element(locator)) as ElementFinder;
+  return locators.reduce((current: ElementFinder, next: Locator) => {
+    return current.element(next);
+  }, element(locator)) as ElementFinder;
 }

 export async function sleepFor(time = 1000) {
@@ -3,7 +3,7 @@ import {
  transition, animate, style, query
 } from '@angular/animations';

-export const transitionAnimation = animation([
+export const transAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
@@ -39,11 +39,11 @@ export const slideInAnimation =
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
-        ]),
-        query('@*', animateChild())
+        ])
      ]),
+      query(':enter', animateChild()),
    ]),
-    transition('* <=> *', [
+    transition('* <=> FilterPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
@@ -59,13 +59,13 @@ export const slideInAnimation =
      query(':leave', animateChild()),
      group([
        query(':leave', [
-          animate('200ms ease-out', style({ left: '100%', opacity: 0 }))
+          animate('200ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
-        ]),
-        query('@*', animateChild())
+        ])
      ]),
+      query(':enter', animateChild()),
    ])
    // #enddocregion query
  ]);
@@ -1,15 +1,3 @@
 nav a {
  padding: .7rem;
 }
-
-h1 {
-  margin-bottom: .3rem;
-}
-
-form {
-  margin-bottom: 2rem;
-}
-
-nav {
-  padding-bottom: 3rem;
-}
@@ -17,7 +17,7 @@
  <a id="heroes" routerLink="/heroes" routerLinkActive="active">Filter/Stagger</a>
  <a id="hero-groups" routerLink="/hero-groups" routerLinkActive="active">Hero Groups</a>
  <a id="insert-remove" routerLink="/insert-remove" routerLinkActive="active">Insert/Remove</a>
-  <a id="querying" routerLink="/querying" routerLinkActive="active">Querying</a>
+
 </nav>

 <!-- #docregion route-animations-outlet -->
@@ -23,9 +23,7 @@ import { slideInAnimation } from './animations';
 // #enddocregion decorator
    slideInAnimation
 // #docregion decorator
-// #enddocregion toggle-app-animations, define
    // animation triggers go here
-// #docregion toggle-app-animations, define
  ]
 })
 // #enddocregion decorator, define
@@ -36,7 +34,7 @@ export class AppComponent {

 // #docregion prepare-router-outlet
  prepareRoute(outlet: RouterOutlet) {
-    return outlet?.activatedRouteData?.['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }

 // #enddocregion prepare-router-outlet
@@ -20,7 +20,6 @@ import { HeroListAutoComponent } from './hero-list-auto.component';
 import { HomeComponent } from './home.component';
 import { AboutComponent } from './about.component';
 import { InsertRemoveComponent } from './insert-remove.component';
-import { QueryingComponent } from './querying.component';


@NgModule({
@@ -29,61 +28,17 @@ import { QueryingComponent } from './querying.component';
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
-      {
-        path: 'open-close',
-        component: OpenClosePageComponent,
-        data: { animation: 'openClosePage' }
-      },
-      {
-        path: 'status',
-        component: StatusSliderPageComponent,
-        data: { animation: 'statusPage' }
-      },
-      {
-        path: 'toggle',
-        component: ToggleAnimationsPageComponent,
-        data: { animation: 'togglePage' }
-      },
-      {
-        path: 'heroes',
-        component: HeroListPageComponent,
-        data: { animation: 'filterPage' }
-      },
-      {
-        path: 'hero-groups',
-        component: HeroListGroupPageComponent,
-        data: { animation: 'heroGroupPage' }
-      },
-      {
-        path: 'enter-leave',
-        component: HeroListEnterLeavePageComponent,
-        data: { animation: 'enterLeavePage' }
-      },
-      {
-        path: 'auto',
-        component: HeroListAutoCalcPageComponent,
-        data: { animation: 'autoPage' }
-      },
-      {
-        path: 'insert-remove',
-        component: InsertRemoveComponent,
-        data: { animation: 'insertRemovePage' }
-      },
-      {
-        path: 'querying',
-        component: QueryingComponent,
-        data: { animation: 'queryingPage' }
-      },
-      {
-        path: 'home',
-        component: HomeComponent,
-        data: { animation: 'HomePage' }
-      },
-      {
-        path: 'about',
-        component: AboutComponent,
-        data: { animation: 'AboutPage' }
-      },
+      { path: 'open-close', component: OpenClosePageComponent },
+      { path: 'status', component: StatusSliderPageComponent },
+      { path: 'toggle', component: ToggleAnimationsPageComponent },
+      { path: 'heroes', component: HeroListPageComponent, data: {animation: 'FilterPage'} },
+      { path: 'hero-groups', component: HeroListGroupPageComponent },
+      { path: 'enter-leave', component: HeroListEnterLeavePageComponent },
+      { path: 'auto', component: HeroListAutoCalcPageComponent },
+      { path: 'insert-remove', component: InsertRemoveComponent},
+      { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },
+      { path: 'about', component: AboutComponent, data: {animation: 'AboutPage'} },
+
    ])
  ],
  // #enddocregion route-animation-data
@@ -104,7 +59,6 @@ import { QueryingComponent } from './querying.component';
    HeroListAutoComponent,
    HomeComponent,
    InsertRemoveComponent,
-    QueryingComponent,
    AboutComponent
  ],
  bootstrap: [AppComponent]
@@ -1,9 +1,9 @@
 <ul class="heroes">
  <li *ngFor="let hero of heroes"
-      [@shrinkOut]="'in'">
-      <button class="inner" type="button" (click)="removeHero(hero.id)">
+      [@shrinkOut]="'in'" (click)="removeHero(hero.id)">
+      <div class="inner">
        <span class="badge">{{ hero.id }}</span>
-        <span class="name">{{ hero.name }}</span>
-      </button>
+        <span>{{ hero.name }}</span>
+      </div>
  </li>
-</ul>
+</ul>
@@ -19,11 +19,11 @@ import { Hero } from './hero';
  template: `
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
-          [@flyInOut]="'in'">
-          <button class="inner" type="button" (click)="removeHero(hero.id)">
+          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
+          <div class="inner">
            <span class="badge">{{ hero.id }}</span>
-            <span class="name">{{ hero.name }}</span>
-          </button>
+            <span>{{ hero.name }}</span>
+          </div>
      </li>
    </ul>
  `,
@@ -19,11 +19,12 @@ import { Hero } from './hero';
  selector: 'app-hero-list-groups',
  template: `
    <ul class="heroes">
-      <li *ngFor="let hero of heroes" [@flyInOut]="'in'">
-          <button class="inner" type="button" (click)="removeHero(hero.id)">
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
+          <div class="inner">
            <span class="badge">{{ hero.id }}</span>
-            <span class="name">{{ hero.name }}</span>
-          </button>
+            <span>{{ hero.name }}</span>
+          </div>
      </li>
    </ul>
  `,
@@ -32,22 +33,22 @@ import { Hero } from './hero';
  animations: [
    trigger('flyInOut', [
      state('in', style({
-        width: '*',
+        width: 120,
        transform: 'translateX(0)', opacity: 1
      })),
-      transition(':enter', [
+      transition('void => *', [
        style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
        group([
          animate('0.3s 0.1s ease', style({
            transform: 'translateX(0)',
-            width: '*'
+            width: 120
          })),
          animate('0.3s ease', style({
            opacity: 1
          }))
        ])
      ]),
-      transition(':leave', [
+      transition('* => void', [
        group([
          animate('0.3s ease', style({
            transform: 'translateX(50px)',
@@ -1,56 +1,25 @@
 .heroes {
-  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
-  width: 15em;
 }

 .heroes li {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
+  overflow:hidden;
+  margin: .5em 0;
 }

-.heroes .inner {
-  flex: 1;
-  background-color: #EEE;
-  margin: .5em;
-  padding: 0;
-  border-radius: 4px;
-  display: flex;
-  align-items: stretch;
-}
-
-.heroes button.inner {
+.heroes li > .inner {
  cursor: pointer;
-  font-size: inherit;
+  background-color: #EEE;
+  padding: .3rem 0;
+  height: 1.6rem;
+  border-radius: 4px;
 }

-.heroes button.inner:hover {
-  color: #2c3a41;
-  background-color: #e6e6e6;
-  left: .1em;
-}
-
-.heroes button.inner:active {
-  background-color: #525252;
-  color: #fafafa;
-}
-
-.heroes button.inner.selected {
-  background-color: black;
-  color: white;
-}
-
-.heroes button.inner.selected:hover {
-  background-color: #505050;
-  color: white;
-}
-
-.heroes button.inner.selected:active {
-  background-color: black;
-  color: white;
+.heroes li:hover > .inner {
+  color: black;
+  background-color: #DDD;
+  transform: translateX(.1em);
 }

 .heroes .badge {
@@ -58,17 +27,17 @@
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #405061;
-  line-height: 1em;
+  background-color: #3d5157;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  min-width: 16px;
+  text-align: right;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
 }

-.heroes .name {
-  min-width: max-content;
-  padding: 0.5rem 0;
-}
-
 label {
  display: block;
  padding-bottom: .5rem;
@@ -1,18 +1,23 @@
 <!-- #docplaster -->
 <h2>Filter/Stagger</h2>

-<!-- #docregion filter-animations -->
-<label for="search">Search heroes: </label>
-<input type="text" id="search" #criteria
-       (input)="updateCriteria(criteria.value)"
-       placeholder="Search heroes">
+<form>
+  <label for="search">Search heroes: </label>
+  <input type="text"
+         id="search"
+         #criteria (input)="updateCriteria(criteria.value)"
+         placeholder="Search heroes">
+</form>

-<ul class="heroes" [@filterAnimation]="heroesTotal">
+<!-- #docregion filter-animations -->
+<ul class="heroes" [@filterAnimation]="heroTotal">
+<!-- #enddocregion filter-animations -->
  <li *ngFor="let hero of heroes" class="hero">
    <div class="inner">
      <span class="badge">{{ hero.id }}</span>
-      <span class="name">{{ hero.name }}</span>
+      <span>{{ hero.name }}</span>
    </div>
  </li>
+<!-- #docregion filter-animations -->
 </ul>
 <!-- #enddocregion filter-animations -->
@@ -1,3 +1,4 @@
+// tslint:disable: variable-name
 // #docplaster
 // #docregion
 import { Component, HostBinding, OnInit } from '@angular/core';
@@ -16,11 +17,10 @@ import { Hero } from './hero';
 // #enddocregion filter-animations
    trigger('pageAnimations', [
      transition(':enter', [
-        query('.hero', [
+        query('.hero, form', [
          style({opacity: 0, transform: 'translateY(-100px)'}),
-          stagger(30, [
-            animate('500ms cubic-bezier(0.35, 0, 0.25, 1)',
-            style({ opacity: 1, transform: 'none' }))
+          stagger(-30, [
+            animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 1, transform: 'none' }))
          ])
        ])
      ])
@@ -32,7 +32,7 @@ import { Hero } from './hero';
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(':enter', [
-          style({ opacity: 0, width: 0 }),
+          style({ opacity: 0, width: '0px' }),
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 1, width: '*' })),
          ]),
@@ -41,12 +41,13 @@ import { Hero } from './hero';
      transition(':decrement', [
        query(':leave', [
          stagger(50, [
-            animate('300ms ease-out', style({ opacity: 0, width: 0 })),
+            animate('300ms ease-out', style({ opacity: 0, width: '0px' })),
          ]),
        ])
      ]),
    ]),
 // #enddocregion  increment
+// #docregion page-animations
  ]
 })
 export class HeroListPageComponent implements OnInit {
@@ -55,8 +56,8 @@ export class HeroListPageComponent implements OnInit {
  public animatePage = true;

 // #docregion filter-animations
-  heroesTotal = -1;
-
+  heroTotal = -1;
+// #enddocregion filter-animations
  get heroes() { return this._heroes; }
  private _heroes: Hero[] = [];

@@ -70,11 +71,12 @@ export class HeroListPageComponent implements OnInit {
    this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase()));
    const newTotal = this.heroes.length;

-    if (this.heroesTotal !== newTotal) {
-      this.heroesTotal = newTotal;
+    if (this.heroTotal !== newTotal) {
+      this.heroTotal = newTotal;
    } else if (!criteria) {
-      this.heroesTotal = -1;
+      this.heroTotal = -1;
    }
  }
+// #docregion filter-animations
 }
 // #enddocregion filter-animations
@@ -3,7 +3,7 @@
 <h2>Insert/Remove</h2>

 <nav>
-  <button type="button" (click)="toggle()">Toggle Insert/Remove</button>
+  <button (click)="toggle()">Toggle Insert/Remove</button>
 </nav>

 <!-- #docregion insert-remove-->
@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <!-- #docregion trigger -->
 <nav>
-  <button type="button" (click)="toggle()">Toggle Open/Close</button>
+  <button (click)="toggle()">Toggle Open/Close</button>
 </nav>

 <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
@@ -1,6 +1,6 @@
 <!-- #docplaster -->
 <nav>
-  <button type="button" (click)="toggle()">Toggle Boolean/Close</button>
+  <button (click)="toggle()">Toggle Boolean/Close</button>
 </nav>

 <!-- #docregion trigger-boolean -->
@@ -1,6 +1,6 @@
 <!-- #docplaster -->
 <nav>
-  <button type="button" (click)="toggle()">Toggle Open/Close</button>
+  <button (click)="toggle()">Toggle Open/Close</button>
 </nav>

 <!-- #docregion callbacks -->
@@ -2,14 +2,14 @@
 // #docregion reusable
 import { Component } from '@angular/core';
 import { transition, trigger, useAnimation } from '@angular/animations';
-import { transitionAnimation } from './animations';
+import { transAnimation } from './animations';

@Component({
  selector: 'app-open-close-reusable',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
-        useAnimation(transitionAnimation, {
+        useAnimation(transAnimation, {
          params: {
            height: 0,
            opacity: 1,
@@ -1,6 +1,6 @@
 <nav>
-  <button type="button" (click)="toggleAnimations()">Toggle Animations</button>
-  <button type="button" (click)="toggle()">Toggle Open/Closed</button>
+  <button (click)="toggleAnimations()">Toggle Animations</button>
+  <button (click)="toggle()">Toggle Open/Closed</button>
 </nav>
 <!-- #docregion toggle-animation -->
 <div [@.disabled]="isDisabled">
@@ -22,7 +22,7 @@ import { trigger, transition, state, animate, style } from '@angular/animations'
      state('closed', style({
        width: '100px',
        opacity: 0.8,
-        backgroundColor: 'blue'
+        backgroundColor: '#c6ecff'
      })),
      transition('* => *', [
        animate('1s')
@@ -1,4 +1,4 @@
-<button type="button" (click)="toggle()">Toggle Open/Close</button>
+<button (click)="toggle()">Toggle Open/Close</button>

 <div [@openClose]="isOpen ? 'open' : 'closed'"
  (@openClose.start)="onAnimationEvent($event)"
@@ -21,7 +21,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
      state('closed', style({
        height: '100px',
        opacity: 0.8,
-        backgroundColor: 'blue'
+        backgroundColor: '#c6ecff'
      })),
 // #enddocregion state2, trigger-wildcard1
 // #docregion transition1
@@ -78,7 +78,7 @@ export class OpenCloseComponent {

 // #enddocregion component
 // #docregion events1, events
-  onAnimationEvent(event: AnimationEvent) {
+  onAnimationEvent( event: AnimationEvent ) {
 // #enddocregion events1, events
    if (!this.logging) {
      return;
@@ -87,16 +87,16 @@ export class OpenCloseComponent {
    // openClose is trigger name in this example
    console.warn(`Animation Trigger: ${event.triggerName}`);

-    // phaseName is "start" or "done"
+    // phaseName is start or done
    console.warn(`Phase: ${event.phaseName}`);

-    // in our example, totalTime is 1000 (number of milliseconds in a second)
+    // in our example, totalTime is 1000 or 1 second
    console.warn(`Total time: ${event.totalTime}`);

-    // in our example, fromState is either "open" or "closed"
+    // in our example, fromState is either open or closed
    console.warn(`From: ${event.fromState}`);

-    // in our example, toState either "open" or "closed"
+    // in our example, toState either open or closed
    console.warn(`To: ${event.toState}`);

    // the HTML element itself, the button in this case
@@ -1,31 +0,0 @@
-section {
-  border: 1px solid black;
-  overflow: hidden;
-}
-
-section > * {
-  margin: 1rem;
-}
-
-.hero {
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  color: black;
-  background-color: #DDD;
-}
-
-.hero .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.5rem;
-  background-color: #3d5157;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-  align-self: stretch;
-}
-
-.hero .name {
-  height: min-content;
-}
@@ -1,80 +0,0 @@
-import {
-  Component,
-} from '@angular/core';
-import {
-  trigger,
-  style,
-  animate,
-  transition,
-  group,
-  query,
-  animateChild,
-  keyframes
-} from '@angular/animations';
-
-import { HEROES } from './mock-heroes';
-
-@Component({
-  selector: 'app-querying',
-  template: `
-    <nav>
-      <button class="toggle" (click)="show = !show" [disabled]="toggleDisabled">Toggle View</button>
-    </nav>
-    <section *ngIf="show" @query (@query.start)="toggleDisabled = true" (@query.done)="toggleDisabled = false">
-      <p>I am a simple child element</p>
-      <p *ngIf="show">I am a child element that enters and leaves with its parent</p>
-      <p @animateMe>I am a child element with an animation trigger</p>
-      <div class="hero">
-        <span class="badge">{{ hero.id }}</span>
-        <span class="name">{{ hero.name }} <small>(heroes are always animated!)</small></span>
-    </div>
-    </section>
-  `,
-  styleUrls: ['./querying.component.css'],
-  animations: [
-    trigger('query', [
-      transition(':enter', [
-        style({ height: 0 }),
-        group([
-          animate(500, style({ height: '*' })),
-          query(':enter', [
-            style({ opacity: 0, transform: 'scale(0)'}),
-            animate(2000, style({ opacity: 1, transform: 'scale(1)' }))
-          ]),
-          query('.hero', [
-            style({ transform: 'translateX(-100%)'}),
-            animate('.7s 500ms ease-in', style({ transform: 'translateX(0)' }))
-          ]),
-        ]),
-        query('@animateMe', animateChild()),
-      ]),
-      transition(':leave', [
-        style({ height: '*' }),
-        query('@animateMe', animateChild()),
-        group([
-          animate('500ms 500ms', style({ height: '0', padding: '0' })),
-          query(':leave', [
-            style({ opacity: 1, transform: 'scale(1)'}),
-            animate('1s', style({ opacity: 0, transform: 'scale(0)' }))
-          ]),
-          query('.hero', [
-            style({ transform: 'translateX(0)'}),
-            animate('.7s ease-out', style({ transform: 'translateX(-100%)' }))
-          ]),
-        ]),
-      ]),
-    ]),
-    trigger('animateMe', [
-      transition('* <=> *', animate('500ms cubic-bezier(.68,-0.73,.26,1.65)', keyframes([
-        style({ backgroundColor: "transparent", color: '*', offset: 0 }),
-        style({ backgroundColor: "blue", color: 'white', offset: 0.2 }),
-        style({ backgroundColor: "transparent", color: '*', offset: 1 })
-      ])))
-    ]),
-  ]
-})
-export class QueryingComponent {
-  toggleDisabled = false;
-  show = true;
-  hero = HEROES[0];
-}
@@ -1,5 +1,5 @@
 <nav>
-  <button type="button" (click)="toggle()">Toggle Status</button>
+  <button (click)="toggle()">Toggle Status</button>
 </nav>

 <div [@slideStatus]="status" class="box">
@@ -1,8 +1,7 @@
 <!--#docregion binding  -->
+<li>{{hero.name}}</li>
 <app-hero-detail [hero]="selectedHero"></app-hero-detail>
-<button type="button" (click)="selectHero(hero)">
-  {{hero.name}}
-</button>
+<li (click)="selectHero(hero)"></li>
 <!--#enddocregion binding -->

 <!--#docregion structural  -->
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .2.2
 .0.0
@@ -1 +1 @@
 .10.0
 .16.1
				`@@ -1 +0,0 @@`
				`<h1>Replace the src folder in this {{title}} with yours.</h1>`