release: cut the v9.0.2 release

This reverts commit b970028057.

This is a feature commit and was improperly merged to the patch branch.

.circleci/config.yml

@@ -29,7 +29,7 @@ var_4_win: &cache_key_win_fallback v5-angular-win-node-12-
 
 # 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 v5-angular-components-97a7e2babbccd3dc58e7b3364004e45ed5bd9968
+var_5: &components_repo_unit_tests_cache_key v5-angular-components-2ec7254f88c4865e0de251f74c27e64c9d00d40a
 var_6: &components_repo_unit_tests_cache_key_fallback v5-angular-components-
 
 # Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
@@ -65,8 +65,8 @@ var_10: &only_on_master
 #             (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)
 # **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
 # **NOTE 3**: If you change the version of the `*-browsers` docker image, make sure the
-#             `CI_CHROMEDRIVER_VERSION_ARG` env var (in `.circleci/env.sh`) points to a ChromeDriver
-#             version that is compatible with the Chrome version in the image.
+#             `--versions.chrome` arg in `integration/bazel-schematics/test.sh` specifies a
+#             ChromeDriver version that is compatible with the Chrome version in the image.
 executors:
   default-executor:
     parameters:
@@ -120,25 +120,32 @@ commands:
       - attach_workspace:
           at: *workspace_location
 
-  # Overwrite the yarn installed in the docker container with our own version.
-  overwrite_yarn:
-    description: Overwrite yarn with our own version
+  # 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: Overwrite yarn
+          name: Install shared Chrome libs
           command: |
-            localYarnPath=`node ./.circleci/get-vendored-yarn-path.js`
-            sudo chmod a+x $localYarnPath
-            sudo ln -fs $localYarnPath /usr/local/bin/yarn
-      - run: node --version
-      - run: yarn --version
+            sudo apt-get update
+            # Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)
+            # and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)
+            # which are dependendies of chrome & needed for karma & protractor headless chrome tests.
+            # 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
 
   # Initializes the CI environment by setting up common environment variables.
   init_environment:
-    description: Initializing environment (setting up variables, overwriting Yarn)
+    description: Initializing environment (setting up variables)
     steps:
-      - run: ./.circleci/env.sh
-      - overwrite_yarn
+      - run:
+          name: Set up environment
+          environment:
+              CIRCLE_GIT_BASE_REVISION: << pipeline.git.base_revision >>
+              CIRCLE_GIT_REVISION: << pipeline.git.revision >>
+          command: ./.circleci/env.sh
       - run:
           # Configure git as the CircleCI `checkout` command does.
           # This is needed because we only checkout on the setup job.
@@ -150,6 +157,27 @@ commands:
             git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
             git config --global gc.auto 0 || true
 
+  init_saucelabs_environment:
+    description: Sets up a domain that resolves to the local host.
+    steps:
+      - run:
+          name: Preparing environment for running tests on Saucelabs.
+          command: |
+            # For SauceLabs jobs, we set up a domain which resolves to the machine which launched
+            # the tunnel. We do this because devices are sometimes not able to properly resolve
+            # `localhost` or `127.0.0.1` through the SauceLabs tunnel. Using a domain that does not
+            # resolve to anything on SauceLabs VMs ensures that such requests are always resolved
+            # through the tunnel, and resolve to the actual tunnel host machine (i.e. the CircleCI VM).
+            # More context can be found in: https://github.com/angular/angular/pull/35171.
+            setPublicVar SAUCE_LOCALHOST_ALIAS_DOMAIN "angular-ci.local"
+            setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - run:
+          # Sets up a local domain in the machine's host file that resolves to the local
+          # host. This domain is helpful in Saucelabs tests where devices are not able to
+          # properly resolve `localhost` or `127.0.0.1` through the sauce-connect tunnel.
+          name: Setting up alias domain for local host.
+          command: echo "127.0.0.1 $SAUCE_LOCALHOST_ALIAS_DOMAIN" | sudo tee -a /etc/hosts
+
   # Normally this would be an individual job instead of a command.
   # But startup and setup time for each invidual windows job are high enough to discourage
   # many small jobs, so instead we use a command for setup unless the gain becomes significant.
@@ -160,10 +188,6 @@ commands:
       - custom_attach_workspace
       # Install Bazel pre-requisites that aren't in the preconfigured CircleCI Windows VM.
       - run: ./.circleci/windows-env.ps1
-      - run:
-          # Overwrite the yarn installed in the docker container with our own version.
-          name: Overwrite yarn with our own version
-          command: ./.circleci/windows-yarn-setup.ps1
       - run: node --version
       - run: yarn --version
       - restore_cache:
@@ -252,6 +276,7 @@ jobs:
               (echo -e "\n.bzl files have lint errors. Please run ''yarn bazel:lint-fix''"; exit 1)'
 
       - run: yarn gulp lint
+      - run: node tools/pullapprove/verify.js
 
   test:
     executor:
@@ -313,9 +338,7 @@ jobs:
     steps:
       - custom_attach_workspace
       - init_environment
-      - run:
-          name: Preparing environment for running tests on Saucelabs.
-          command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - init_saucelabs_environment
       - run:
           name: Run Bazel tests on Saucelabs
           # See /tools/saucelabs/README.md for more info
@@ -337,9 +360,7 @@ jobs:
     steps:
       - custom_attach_workspace
       - init_environment
-      - run:
-          name: Preparing environment for running tests on Saucelabs.
-          command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - init_saucelabs_environment
       - run:
           name: Run Bazel tests on Saucelabs
           # See /tools/saucelabs/README.md for more info
@@ -350,11 +371,11 @@ jobs:
           no_output_timeout: 20m
 
   test_aio:
-    # Needed because the AIO tests and the PWA score test depend on Chrome being available.
-    executor: browsers-executor
+    executor: default-executor
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
         # Compile dependencies to ivy
         # Running `ngcc` here (instead of implicitly via `ng build`) allows us to take advantage of
         # the parallel, async mode speed-up (~20-25s on CI).
@@ -377,11 +398,11 @@ jobs:
       - run: yarn --cwd aio redirects-test
 
   deploy_aio:
-    # Needed because before deploying the deploy-production script runs the PWA score tests.
-    executor: browsers-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
@@ -391,11 +412,11 @@ jobs:
       viewengine:
         type: boolean
         default: false
-    # Needed because the AIO tests and the PWA score test depend on Chrome being available.
-    executor: browsers-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<<# parameters.viewengine >>-with-viewengine<</ parameters.viewengine >>-ci
         # Run unit tests
@@ -425,13 +446,13 @@ jobs:
         type: boolean
         default: false
     executor:
-      # Needed because the example e2e tests depend on Chrome.
-      name: browsers-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
       - when:
@@ -466,11 +487,11 @@ jobs:
 
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   test_aio_preview:
-    # Needed because the test-preview script runs e2e tests and the PWA score test with Chrome.
-    executor: browsers-executor
+    executor: default-executor
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
       - run:
           name: Wait for preview and run tests
@@ -533,7 +554,8 @@ jobs:
   # See comments inside the integration/run_tests.sh script.
   integration_test:
     executor:
-      # Needed because the integration tests expect Chrome to be installed (e.g cli-hello-world)
+      # Needed because the integration/bazel-schematics test expects Chrome to be installed
+      # TODO(gregmagolan): remove the dependency on local chrome from that test
       name: browsers-executor
       # Note: we run Bazel in one of the integration tests, and it can consume >2G
       # of memory. Together with the system under test, this can exhaust the RAM
@@ -609,22 +631,19 @@ jobs:
       - run: ./scripts/ci/publish-build-artifacts.sh
 
   aio_monitoring_stable:
-    # This job needs Chrome to be globally installed because the tests run with Protractor
-    # which does not load the browser through the Bazel webtesting rules.
-    executor: browsers-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
           command: |
             git fetch origin $CI_STABLE_BRANCH
             git checkout --force origin/$CI_STABLE_BRANCH -- aio/ .yarn/ .yarnrc
-        # Overwrite yarn again to use the version from the checked out branch.
-      - overwrite_yarn
-        # Ignore yarn's engines check, because we checked out `aio/package.json` from the stable
-        # branch and there could be a node version skew, which is acceptable in this monitoring job.
+      # Ignore yarn's engines check, because we checked out `aio/package.json` from the stable
+      # branch and there could be a node version skew, which is acceptable in this monitoring job.
       - run: yarn config set ignore-engines true
       - run:
           name: Run tests against https://angular.io/
@@ -635,12 +654,11 @@ jobs:
           webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
 
   aio_monitoring_next:
-    # This job needs Chrome to be globally installed because the tests run with Protractor
-    # which does not load the browser through the Bazel webtesting rules.
-    executor: browsers-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
@@ -659,11 +677,7 @@ jobs:
     steps:
       - custom_attach_workspace
       - init_environment
-      - run:
-          name: Preparing environment for running tests on Saucelabs.
-          command: |
-            setPublicVar KARMA_JS_BROWSERS $(node -e 'console.log(require("./browser-providers.conf").sauceAliases.CI_REQUIRED.join(","))')
-            setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - init_saucelabs_environment
       - run:
           name: Starting Saucelabs tunnel service
           command: ./tools/saucelabs/sauce-service.sh run
@@ -675,7 +689,11 @@ jobs:
           # Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
           name: Waiting for Saucelabs tunnel to connect
           command: ./tools/saucelabs/sauce-service.sh ready-wait
-      - run: yarn karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
+      - run:
+          name: Running tests on Saucelabs.
+          command: |
+            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

.circleci/env.sh

@@ -19,19 +19,10 @@ setPublicVar CI_AIO_MIN_PWA_SCORE "95";
 # This is the branch being built; e.g. `pull/12345` for PR builds.
 setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
 setPublicVar CI_BUILD_URL "$CIRCLE_BUILD_URL";
-# ChromeDriver version compatible with the Chrome version included in the docker image used in
-# `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
-# This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
-# `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
-setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 79.0.3945.130";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
 # `CI_COMMIT_RANGE` is only used on push builds (a.k.a. non-PR, non-scheduled builds and rerun
 # workflows of such builds).
-# NOTE: With [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) enabled,
-#       `CIRCLE_COMPARE_URL` is no longer available and the commit range cannot be reliably
-#       detected. Fall back to only considering the last commit (which is accurate in the majority
-#       of cases for push builds).
-setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || echo "$CIRCLE_SHA1~1...$CIRCLE_SHA1"`";
+setPublicVar CI_COMMIT_RANGE "$CIRCLE_GIT_BASE_REVISION..$CIRCLE_GIT_REVISION";
 setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
 setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
@@ -65,6 +56,7 @@ setPublicVar SAUCE_TUNNEL_IDENTIFIER "angular-framework-${CIRCLE_BUILD_NUM}-${CI
 # acquire CircleCI instances for too long if sauceconnect failed, we need a connect timeout.
 setPublicVar SAUCE_READY_FILE_TIMEOUT 120
 
+
 ####################################################################################################
 # Define environment variables for the `angular/components` repo unit tests job.
 ####################################################################################################
@@ -76,7 +68,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 "97a7e2babbccd3dc58e7b3364004e45ed5bd9968"
+setPublicVar COMPONENTS_REPO_COMMIT "2ec7254f88c4865e0de251f74c27e64c9d00d40a"
 
 
 ####################################################################################################

.circleci/get-commit-range.js

@@ -1,166 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * **Usage:**
- * ```
- * node get-commit-range <build-number> [<compare-url> [<circle-token>]]
- * ```
- *
- * Returns the commit range, either extracting it from `compare-url` (if defined), which is of the
- * format of the `CIRCLE_COMPARE_URL` environment variable, or by retrieving the equivalent of
- * `CIRCLE_COMPARE_URL` for jobs that are part of a rerun workflow and extracting it from there.
- *
- * > !!! WARNING !!!
- * > !!
- * > !! When [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) is enabled, the
- * > !! `CIRCLE_COMPARE_URL` environment variable is not available at all and this script does not
- * > !! work.
- * > !!!!!!!!!!!!!!!
- *
- * **Context:**
- * CircleCI sets the `CIRCLE_COMPARE_URL` environment variable (from which we can extract the commit
- * range) on push builds (a.k.a. non-PR, non-scheduled builds). Yet, when a workflow is rerun
- * (either from the beginning or from failed jobs) - e.g. when a job flakes - CircleCI does not set
- * the `CIRCLE_COMPARE_URL`.
- *
- * **Implementation details:**
- * This script relies on the fact that all rerun workflows share the same CircleCI workspace and the
- * (undocumented) fact that the workspace ID happens to be the same as the workflow ID that first
- * created it.
- *
- * For example, for a job on push build workflows, the CircleCI API will return data that look like:
- * ```js
- * {
- *   compare: 'THE_COMPARE_URL_WE_ARE_LOOKING_FOR',
- *   //...
- *   previous: {
- *     // ...
- *     build_num: 12345,
- *   },
- *   //...
- *   workflows: {
- *     //...
- *     workflow_id: 'SOME_ID_A',
- *     workspace_id: 'SOME_ID_A',  // Same as `workflow_id`.
- *   }
- * }
- * ```
- *
- * If the workflow is rerun, the data for jobs on the new workflow will look like:
- * ```js
- * {
- *   compare: null,  // ¯\_(ツ)_/¯
- *   //...
- *   previous: {
- *     // ...
- *     build_num: 23456,
- *   },
- *   //...
- *   workflows: {
- *     //...
- *     workflow_id: 'SOME_ID_B',
- *     workspace_id: 'SOME_ID_A',  // Different from current `workflow_id`.
- *                                 // Same as original `workflow_id`. \o/
- *   }
- * }
- * ```
- *
- * This script uses the `previous.build_num` (which points to the previous build number on the same
- * branch) to traverse the jobs backwards, until it finds a job from the original workflow. Such a
- * job (if found) should also contain the compare URL.
- *
- * **NOTE 1:**
- * This is only useful on workflows which are created by rerunning a workflow for which
- * `CIRCLE_COMPARE_URL` was defined.
- *
- * **NOTE 2:**
- * The `circleToken` will be used for CircleCI API requests if provided, but it is not needed for
- * accessing the read-only endpoints that we need (as long as the current project is FOSS and the
- * corresponding setting is turned on in "Advanced Settings" in the project dashboard).
- *
- * ---
- * Inspired by https://circleci.com/orbs/registry/orb/iynere/compare-url
- * (source code: https://github.com/iynere/compare-url-orb).
- *
- * We are not using the `compare-url` orb for the following reasons:
- * 1. (By looking at the code) it would only work if the rerun workflow is the latest workflow on
- *    the branch (which is not guaranteed to be true).
- * 2. It is less efficient (e.g. makes unnecessary CircleCI API requests for builds on different
- *    branches, installs extra dependencies, persists files to the workspace (as a means of passing
- *    the result to the calling job), etc.).
- * 3. It is slightly more complicated to setup and consume than our own script.
- * 4. Its implementation is more complicated than needed for our usecase (e.g. handles different git
- *    providers, handles newly created branches, etc.).
- */
-
-// Imports
-const {get: httpsGet} = require('https');
-
-// Constants
-const API_URL_BASE = 'https://circleci.com/api/v1.1/project/github/angular/angular';
-const COMPARE_URL_RE = /^.*\/([0-9a-f]+\.\.\.[0-9a-f]+)$/i;
-
-// Run
-_main(process.argv.slice(2));
-
-// Helpers
-async function _main([buildNumber, compareUrl = '', circleToken = '']) {
-  try {
-    if (!buildNumber || isNaN(buildNumber)) {
-      throw new Error(
-          'Missing or invalid arguments.\n' +
-          'Expected: buildNumber (number), compareUrl? (string), circleToken? (string)');
-    }
-
-    if (!compareUrl) {
-      compareUrl = await getCompareUrl(buildNumber, circleToken);
-    }
-
-    const commitRangeMatch = COMPARE_URL_RE.exec(compareUrl)
-    const commitRange = commitRangeMatch ? commitRangeMatch[1] : '';
-
-    console.log(commitRange);
-  } catch (err) {
-    console.error(err);
-    process.exit(1);
-  }
-}
-
-function getBuildInfo(buildNumber, circleToken) {
-  console.error(`BUILD ${buildNumber}`);
-  const url = `${API_URL_BASE}/${buildNumber}?circle-token=${circleToken}`;
-  return getJson(url);
-}
-
-async function getCompareUrl(buildNumber, circleToken) {
-  let info = await getBuildInfo(buildNumber, circleToken);
-  const targetWorkflowId = info.workflows.workspace_id;
-
-  while (info.workflows.workflow_id !== targetWorkflowId) {
-    info = await getBuildInfo(info.previous.build_num, circleToken);
-  }
-
-  return info.compare || '';
-}
-
-function getJson(url) {
-  return new Promise((resolve, reject) => {
-    const opts = {headers: {Accept: 'application/json'}};
-    const onResponse = res => {
-      const statusCode = res.statusCode || -1;
-      const isSuccess = (200 <= statusCode) && (statusCode < 400);
-      let responseText = '';
-
-      res.
-        on('error', reject).
-        on('data', d => responseText += d).
-        on('end', () => isSuccess ?
-          resolve(JSON.parse(responseText)) :
-          reject(`Error getting '${url}' (status ${statusCode}):\n${responseText}`));
-    };
-
-    httpsGet(url, opts, onResponse).
-      on('error', reject).
-      end();
-  });
-}

.circleci/get-vendored-yarn-path.js

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-'use strict';
-
-/**
- * **Usage:**
- * ```
- * node get-vendored-yarn-path
- * ```
- *
- * Returns the path to the vendored `yarn.js` script, so that it can be used for setting up yarn
- * aliases/symlinks and use the local, vendored yarn script instead of a globally installed one.
- *
- * **Context:**
- * We keep a version of yarn in the repo, at `third_party/github.com/yarnpkg/`. All CI jobs should
- * use that version for consistency (and easier updates). The path to the actual `yarn.js` script,
- * however, changes depending on the version (e.g. `third_party/github.com/yarnpkg/v1.21.1/...`).
- *
- * This script infers the correct path, so that we don't have to update the path in several places,
- * when we update the version of yarn in `third_party/github.com/yarnpkg/`.
- */
-
-const {readdirSync} = require('fs');
-const {normalize} = require('path');
-
-const yarnDownloadDir = `${__dirname}/../third_party/github.com/yarnpkg/yarn/releases/download`;
-const yarnVersionSubdirs = readdirSync(yarnDownloadDir);
-
-// Based on our current process, there should be exactly one sub-directory inside
-// `vendoredYarnDownloadDir` at all times. Throw, if that is not the case.
-if (yarnVersionSubdirs.length !== 1) {
-  throw new Error(
-      `Expected exactly 1 yarn version in '${yarnDownloadDir}', but found ` +
-      `${yarnVersionSubdirs.length}: ${yarnVersionSubdirs.join(', ')}`);
-}
-
-console.log(normalize(`${yarnDownloadDir}/${yarnVersionSubdirs[0]}/bin/yarn.js`));

.circleci/windows-yarn-setup.ps1

@@ -1,14 +0,0 @@
-# Use our local, vendored yarn in the global `yarn` command.
-$globalYarnDir = "$HOME\AppData\Roaming\yarn"
-$localYarnPath = & ${Env:ProgramFiles}\nodejs\node.exe ".\.circleci\get-vendored-yarn-path.js"
-
-# Create a directory to put the yarn PowerShell script.
-New-Item -Path "$globalYarnDir" -ItemType "directory" >$null
-
-# Create the yarn PowerShell script (using the inferred path to the local yarn script).
-Get-Content -Path ".\.circleci\windows-yarn.ps1.template" |
-  %{$_ -replace "{{ LOCAL_YARN_PATH_PLACEHOLDER }}", "$localYarnPath"} |
-  Add-Content -Path "$globalYarnDir\yarn.ps1"
-
-# Add the directory containing the yarn PowerShell script to `PATH`.
-Add-Content -Path $profile -Value ('$Env:path = "{0};" + $Env:path' -f $globalYarnDir)

.circleci/windows-yarn.ps1.template

@@ -1,15 +0,0 @@
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  & "$basedir/node$exe"  "{{ LOCAL_YARN_PATH_PLACEHOLDER }}" $args
-  $ret=$LASTEXITCODE
-} else {
-  & "node$exe"  "{{ LOCAL_YARN_PATH_PLACEHOLDER }}" $args
-  $ret=$LASTEXITCODE
-}
-exit $ret

.pullapprove.yml

@@ -67,7 +67,7 @@
 #  petebacondarwin - Pete Bacon Darwin
 #  pkozlowski-opensource - Pawel Kozlowski
 #  robwormald - Rob Wormald
-#  stephenfluin - Stephen Fluin
+#  StephenFluin - Stephen Fluin
 
 
 ####################################################################################
@@ -108,6 +108,9 @@ pullapprove_conditions:
   - condition: "'PR state: WIP' not in labels"
     unmet_status: pending
     explanation: "Waiting to send reviews as PR is WIP"
+  - condition: "not draft"
+    unmet_status: pending
+    explanation: "Waiting to send reviews as PR is in draft"
 
 
 groups:
@@ -535,6 +538,42 @@ groups:
         - ~framework-global-approvers-for-docs-only-changes
 
 
+  # =========================================================
+  #  Framework: Benchmarks
+  # =========================================================
+  fw-benchmarks:
+    conditions:
+      - >
+        contains_any_globs(files, [
+          'modules/benchmarks_external/**',
+          'modules/benchmarks/**'
+          ])
+    reviewers:
+      users:
+        - IgorMinar
+        - kara
+        - pkozlowski-opensource
+      teams:
+        - ~framework-global-approvers
+
+
+  # =========================================================
+  #  Framework: Playground
+  # =========================================================
+  fw-playground:
+    conditions:
+      - >
+        contains_any_globs(files, [
+          'modules/playground/**'
+          ])
+    reviewers:
+      users:
+        - IgorMinar
+        - kara
+      teams:
+        - ~framework-global-approvers
+
+
   # =========================================================
   #  Framework: Security
   # =========================================================
@@ -558,7 +597,6 @@ groups:
         - ~framework-global-approvers
         - ~framework-global-approvers-for-docs-only-changes
 
-
   # =========================================================
   #  Bazel
   # =========================================================
@@ -679,7 +717,7 @@ groups:
       users:
         - aikidave
         - IgorMinar
-        - stephenfluin
+        - StephenFluin
       teams:
         - ~framework-global-approvers
         - ~framework-global-approvers-for-docs-only-changes
@@ -702,7 +740,7 @@ groups:
     reviewers:
       users:
         - IgorMinar
-        - stephenfluin
+        - StephenFluin
       teams:
         - ~framework-global-approvers
         - ~framework-global-approvers-for-docs-only-changes
@@ -718,6 +756,7 @@ groups:
           'aio/content/guide/observables.md',
           'aio/content/examples/observables/**',
           'aio/content/guide/comparing-observables.md',
+          'aio/content/examples/comparing-observables/**',
           'aio/content/guide/observables-in-angular.md',
           'aio/content/examples/observables-in-angular/**',
           'aio/content/guide/practical-observable-usage.md',
@@ -740,6 +779,8 @@ groups:
     conditions:
       - >
         contains_any_globs(files, [
+          'docs/PUBLIC_API.md',
+          'docs/RELEASE_SCHEDULE.md',
           'aio/content/guide/npm-packages.md',
           'aio/content/guide/browser-support.md',
           'aio/content/guide/releases.md',
@@ -885,9 +926,23 @@ groups:
           '.vscode/**',
           '.yarn/**',
           'docs/BAZEL.md',
+          'docs/CARETAKER.md',
+          'docs/COMMITTER.md',
+          'docs/DEBUG.md',
+          'docs/DEBUG_COMPONENTS_REPO_IVY.md',
+          'docs/DEVELOPER.md',
+          'docs/GITHUB_PROCESS.md',
+          'docs/PR_REVIEW.md',
+          'docs/SAVED_REPLIES.md',
+          'docs/TOOLS.md',
+          'docs/TRIAGE_AND_LABELS.md',
+          'modules/e2e_util/e2e_util.ts',
+          'modules/e2e_util/perf_util.ts',
+          'modules/*',
           'packages/*',
           'packages/examples/test-utils/**',
           'packages/private/**',
+          'packages/examples/*',
           'scripts/**',
           'third_party/**',
           'tools/brotli-cli/**',
@@ -900,6 +955,7 @@ groups:
           'tools/npm/**',
           'tools/public_api_guard/BUILD.bazel',
           'tools/public_api_guard/public_api_guard.bzl',
+          'tools/pullapprove/**',
           'tools/rxjs/**',
           'tools/saucelabs/**',
           'tools/size-tracking/**',
@@ -908,6 +964,7 @@ groups:
           'tools/testing/**',
           'tools/ts-api-guardian/**',
           'tools/tslint/**',
+          'tools/utils/**',
           'tools/validate-commit-message/**',
           'tools/yarn/**',
           'tools/*',
@@ -925,26 +982,6 @@ groups:
         - ~framework-global-approvers
 
 
-  # =========================================================
-  #  Material CI
-  # =========================================================
-  material-ci:
-    conditions:
-      - >
-        contains_any_globs(files, [
-          'tools/components-repo-ci/**'
-          ])
-    reviewers:
-      users:
-        - alxhub
-        - AndrewKushnir
-        - kara
-        - mhevery
-        - pkozlowski-opensource
-      teams:
-        - ~framework-global-approvers
-
-
   # =========================================================
   #  Public API
   # =========================================================
@@ -953,6 +990,7 @@ groups:
       - >
         contains_any_globs(files, [
           'tools/public_api_guard/**',
+          'docs/NAMING.md',
           'aio/content/guide/glossary.md',
           'aio/content/guide/styleguide.md',
           'aio/content/examples/styleguide/**',

WORKSPACE

@@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "c97bf38546c220fa250ff2cc052c1a9eac977c662c1fc23eda797b0ce8e70a43",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.1.0/rules_nodejs-1.1.0.tar.gz"],
+    sha256 = "b6670f9f43faa66e3009488bbd909bc7bc46a5a9661a33f6bc578068d1837f37",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.3.0/rules_nodejs-1.3.0.tar.gz"],
 )
 
 # Check the bazel version and download npm dependencies
@@ -18,6 +18,7 @@ load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "check_rule
 # Bazel version must be at least the following version because:
 #   - 0.26.0 managed_directories feature added which is required for nodejs rules 0.30.0
 #   - 0.27.0 has a fix for managed_directories after `rm -rf node_modules`
+#   - 2.1.0 feature added to honor .bazelignore in external repositories
 check_bazel_version(
     message = """
 You no longer need to install Bazel on your machine.
@@ -26,10 +27,10 @@ Try running `yarn bazel` instead.
     (If you did run that, check that you've got a fresh `yarn install`)
 
 """,
-    minimum_bazel_version = "1.1.0",
+    minimum_bazel_version = "2.1.0",
 )
 
-check_rules_nodejs_version(minimum_version_string = "1.0.0")
+check_rules_nodejs_version(minimum_version_string = "1.3.0")
 
 # Setup the Node.js toolchain
 node_repositories(
@@ -40,9 +41,6 @@ node_repositories(
     },
     node_version = "12.14.1",
     package_json = ["//:package.json"],
-    # Label needs to explicitly specify the current workspace name because otherwise Bazel does
-    # not provide all needed data (like "workspace_root") to the repository context.
-    vendored_yarn = "@angular//:third_party/github.com/yarnpkg/yarn/releases/download/v1.21.1",
 )
 
 yarn_install(

aio/angular.json

@@ -5,7 +5,8 @@
     "packageManager": "yarn",
     "warnings": {
       "typescriptMismatch": false
-    }
+    },
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -192,4 +193,4 @@
     }
   },
   "defaultProject": "site"
-}
+}

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

@@ -89,14 +89,14 @@ describe('Animation Tests', () => {
       sleepFor(2000);
     });
 
-    it('should be inactive with an orange background', async () => {
+    it('should be inactive with a blue background', async () => {
       const toggleButton = statusSlider.getToggleButton();
       const container = statusSlider.getComponentContainer();
       let text = await container.getText();
 
       if (text === 'Active') {
         await toggleButton.click();
-        await browser.wait(async () => await container.getCssValue('backgroundColor') === inactiveColor, 2000);
+        await browser.wait(async () => await container.getCssValue('backgroundColor') === inactiveColor, 3000);
       }
 
       text = await container.getText();
@@ -106,14 +106,14 @@ describe('Animation Tests', () => {
       expect(bgColor).toBe(inactiveColor);
     });
 
-    it('should be active with a blue background', async () => {
+    it('should be active with an orange background', async () => {
       const toggleButton = statusSlider.getToggleButton();
       const container = statusSlider.getComponentContainer();
       let text = await container.getText();
 
       if (text === 'Inactive') {
         await toggleButton.click();
-        await browser.wait(async () => await container.getCssValue('backgroundColor') === activeColor, 2000);
+        await browser.wait(async () => await container.getCssValue('backgroundColor') === activeColor, 3000);
       }
 
       text = await container.getText();

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

@@ -12,10 +12,12 @@ Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (cl
   <a id="auto" routerLink="/auto" routerLinkActive="active">Auto Calculation</a>
   <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>
+
 </nav>
 
 <!-- #docregion route-animations-outlet -->
 <div [@routeAnimations]="prepareRoute(outlet)" >
   <router-outlet #outlet="outlet"></router-outlet>
 </div>
-<!-- #enddocregion route-animations-outlet -->
+<!-- #enddocregion route-animations-outlet -->

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

@@ -35,6 +35,7 @@ import { InsertRemoveComponent } from './insert-remove.component';
       { 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'} },
 

aio/content/examples/animations/src/app/insert-remove.component.html

@@ -1,4 +1,7 @@
 <!-- #docplaster -->
+
+<h2>Insert/Remove</h2>
+
 <nav>
   <button (click)="toggle()">Toggle Insert/Remove</button>
 </nav>

aio/content/examples/animations/src/app/insert-remove.component.ts

@@ -9,10 +9,10 @@ import { trigger, transition, animate, style } from '@angular/animations';
     trigger('myInsertRemoveTrigger', [
       transition(':enter', [
         style({ opacity: 0 }),
-        animate('5s', style({ opacity: 1 })),
+        animate('100ms', style({ opacity: 1 })),
       ]),
       transition(':leave', [
-        animate('5s', style({ opacity: 0 }))
+        animate('100ms', style({ opacity: 0 }))
       ])
     ]),
 // #enddocregion enter-leave-trigger

aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts

@@ -25,23 +25,12 @@ describe('Attribute binding example', function () {
   });
 
   it('should display a blue div with a red border', function () {
-    expect(element.all(by.css('div')).get(4).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
+    expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
   });
 
-  it('should display a div with replaced classes', function () {
-    expect(element.all(by.css('div')).get(5).getAttribute('class')).toEqual('new-class');
-  });
-
-  it('should display four buttons', function() {
-    let redButton = element.all(by.css('button')).get(1);
-    let saveButton = element.all(by.css('button')).get(2);
-    let bigButton = element.all(by.css('button')).get(3);
-    let smallButton = element.all(by.css('button')).get(4);
-
-    expect(redButton.getCssValue('color')).toEqual('rgba(255, 0, 0, 1)');
-    expect(saveButton.getCssValue('background-color')).toEqual('rgba(0, 255, 255, 1)');
-    expect(bigButton.getText()).toBe('Big');
-    expect(smallButton.getText()).toBe('Small');
+  it('should display a div with many classes', function () {
+    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
+    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
   });
 
 });

aio/content/examples/attribute-binding/src/app/app.component.html

@@ -27,39 +27,41 @@
 
 <hr />
 
-<h2>Class binding</h2>
+<h2>Styling precedence</h2>
 
-<!-- #docregion is-special -->
-<h3>toggle the "special" class on/off with a property:</h3>
-<div [class.special]="isSpecial">The class binding is special.</div>
+<!-- #docregion basic-specificity -->
+<h3>Basic specificity</h3>
 
-<h3>binding to class.special overrides the class attribute:</h3>
-<div class="special" [class.special]="!isSpecial">This one is not so special.</div>
+<!-- The `class.special` binding will override any value for the `special` class in `classExpr`.  -->
+<div [class.special]="isSpecial" [class]="classExpr">Some text.</div>
 
-<h3>Using the bind- syntax:</h3>
-<div bind-class.special="isSpecial">This class binding is special too.</div>
-<!-- #enddocregion is-special -->
+<!-- The `style.color` binding will override any value for the `color` property in `styleExpr`.  -->
+<div [style.color]="color" [style]="styleExpr">Some text.</div>
+<!-- #enddocregion basic-specificity -->
 
-<!-- #docregion add-class -->
-<h3>Add a class:</h3>
-<div class="item clearance special" [class.item-clearance]="itemClearance">Add another class</div>
-<!-- #enddocregion add-class -->
+<!-- #docregion source-specificity -->
+<h3>Source specificity</h3>
 
-<!-- #docregion class-override -->
-<h3>Overwrite all existing classes with a new class:</h3>
-<div class="item clearance special" [attr.class]="resetClasses">Reset all classes at once</div>
-<!-- #enddocregion class-override -->
+<!-- The `class.special` template binding will override any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
+<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding>Some text.</comp-with-host-binding>
 
-<hr />
+<!-- The `style.color` template binding will override any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
+<comp-with-host-binding [style.color]="color" dirWithStyleBinding>Some text.</comp-with-host-binding>
+<!-- #enddocregion source-specificity -->
 
-<h2>Style binding</h2>
+<!-- #docregion dynamic-priority -->
+<h3>Dynamic vs static</h3>
+
+<!-- If `classExpr` has a value for the `special` class, this value will override the `class="special"` below -->
+<div class="special" [class]="classExpr">Some text.</div>
+
+<!-- If `styleExpr` has a value for the `color` property, this value will override the `style="color: blue"` below -->
+<div style="color: blue" [style]="styleExpr">Some text.</div>
+
+<!-- #enddocregion dynamic-priority -->
+
+<!-- #docregion style-delegation -->
+<comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
+<!-- #enddocregion style-delegation -->
 
-<!-- #docregion style-binding-->
-<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
-<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
-<!-- #enddocregion style-binding -->
 
-<!-- #docregion style-binding-condition-->
-<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
-<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
-<!-- #enddocregion style-binding-condition-->

aio/content/examples/attribute-binding/src/app/app.component.ts

@@ -8,8 +8,8 @@ import { Component } from '@angular/core';
 export class AppComponent {
   actionName = 'Go for it';
   isSpecial = true;
-  itemClearance = true;
-  resetClasses = 'new-class';
   canSave = true;
-
+  classExpr = 'special clearance';
+  styleExpr = 'color: red';
+  color = 'blue';
 }

aio/content/examples/attribute-binding/src/app/app.module.ts

@@ -3,11 +3,13 @@ import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
+import { CompWithHostBindingComponent } from './comp-with-host-binding.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CompWithHostBindingComponent
   ],
   imports: [
     BrowserModule

aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'comp-with-host-binding',
+  template: 'I am a component!',
+  host: {
+    '[class.special]': 'isSpecial',
+    '[style.color]': 'color',
+    '[style.width]': 'width'
+  }
+})
+export class CompWithHostBindingComponent {
+  isSpecial = false;
+  color = 'green';
+  width = '200px';
+}

aio/content/examples/component-interaction/example-config.json

@@ -4,9 +4,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}

aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts

@@ -23,7 +23,7 @@ export class HeroContactComponent {
 
       @Host()     // limit search for logger; hides the application-wide logger
       @Optional() // ok if the logger doesn't exist
-      private loggerService: LoggerService
+      private loggerService?: LoggerService
   // #enddocregion ctor-params
   ) {
     if (loggerService) {

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -52,7 +52,7 @@ const templateC = `
 export class CarolComponent {
   name = 'Carol';
   // #docregion carol-ctor
-  constructor( @Optional() public parent: Parent ) { }
+  constructor( @Optional() public parent?: Parent ) { }
   // #enddocregion carol-ctor
 }
 // #enddocregion carol-class
@@ -64,7 +64,7 @@ export class CarolComponent {
 })
 export class ChrisComponent {
   name = 'Chris';
-  constructor( @Optional() public parent: Parent ) { }
+  constructor( @Optional() public parent?: Parent ) { }
 }
 
 //////  Craig ///////////
@@ -81,7 +81,7 @@ export class ChrisComponent {
   </div>`
 })
 export class CraigComponent {
-  constructor( @Optional() public alex: Base ) { }
+  constructor( @Optional() public alex?: Base ) { }
 }
 // #enddocregion craig
 
@@ -105,7 +105,7 @@ const templateB = `
 export class BarryComponent implements Parent {
   name = 'Barry';
 // #docregion barry-ctor
-  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+  constructor( @SkipSelf() @Optional() public parent?: Parent ) { }
 // #enddocregion barry-ctor
 }
 // #enddocregion barry
@@ -117,7 +117,7 @@ export class BarryComponent implements Parent {
 })
 export class BobComponent implements Parent {
   name = 'Bob';
-  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+  constructor( @SkipSelf() @Optional() public parent?: Parent ) { }
 }
 
 @Component({
@@ -129,7 +129,7 @@ export class BobComponent implements Parent {
 })
 export class BethComponent implements Parent {
   name = 'Beth';
-  constructor( @SkipSelf() @Optional() public parent: Parent ) { }
+  constructor( @SkipSelf() @Optional() public parent?: Parent ) { }
 }
 
 ///////// A - Grandparent //////
@@ -200,7 +200,7 @@ export class AliceComponent implements Parent
   </div>`
 })
 export class CathyComponent {
-  constructor( @Optional() public alex: AlexComponent ) { }
+  constructor( @Optional() public alex?: AlexComponent ) { }
 }
 // #enddocregion cathy
 

aio/content/examples/dependency-injection/example-config.json

@@ -4,9 +4,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -247,7 +247,7 @@ let some_message = 'Hello from the injected logger';
 export class Provider10Component implements OnInit {
   log: string;
   // #docregion provider-10-ctor
-  constructor(@Optional() private logger: Logger) {
+  constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
       this.logger.log(some_message);
     }

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

@@ -39,10 +39,10 @@ export class CartComponent implements OnInit {
   // #enddocregion props-services
   onSubmit(customerData) {
     // Process checkout data here
-    console.warn('Your order has been submitted', customerData);
-
     this.items = this.cartService.clearCart();
     this.checkoutForm.reset();
+
+    console.warn('Your order has been submitted', customerData);
   }
 // #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
 }

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

@@ -39,8 +39,8 @@ export class ProductDetailsComponent implements OnInit {
 // #enddocregion props-methods, get-product
 // #docregion add-to-cart
   addToCart(product) {
-    window.alert('Your product has been added to the cart!');
     this.cartService.addToCart(product);
+    window.alert('Your product has been added to the cart!');
   }
 // #docregion props-methods, get-product, inject-cart-service
 }

aio/content/examples/i18n/example-config.json

@@ -5,9 +5,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}

aio/content/examples/ngmodules/src/app/greeting/greeting.module.ts

@@ -14,7 +14,7 @@ import { UserServiceConfig } from './user.service';
 })
 export class GreetingModule {
   // #docregion ctor
-  constructor (@Optional() @SkipSelf() parentModule: GreetingModule) {
+  constructor (@Optional() @SkipSelf() parentModule?: GreetingModule) {
     if (parentModule) {
       throw new Error(
         'GreetingModule is already loaded. Import it in the AppModule only');

aio/content/examples/ngmodules/src/app/greeting/user.service.ts

@@ -15,7 +15,7 @@ export class UserService {
   private _userName = 'Sherlock Holmes';
 
   // #docregion ctor
-  constructor(@Optional() config: UserServiceConfig) {
+  constructor(@Optional() config?: UserServiceConfig) {
     if (config) { this._userName = config.userName; }
   }
   // #enddocregion ctor

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

@@ -24,7 +24,7 @@ export class ChildComponent {
   // inspector is in the content.
 
 
-  // constructor( public flower: FlowerService, @Optional() @Host()  public animal: AnimalService) { }
+  // constructor( public flower: FlowerService, @Optional() @Host()  public animal?: AnimalService) { }
 
 // Comment out the above constructor and alternately
 // uncomment the two following constructors to see the
@@ -32,11 +32,11 @@ export class ChildComponent {
 
 // constructor(
 //     @Host() public animal : AnimalService,
-//     @Host() @Optional() public flower : FlowerService) { }
+//     @Host() @Optional() public flower ?: FlowerService) { }
 
 // constructor(
 //     @SkipSelf() @Host() public animal : AnimalService,
-//     @SkipSelf() @Host() @Optional() public flower : FlowerService) { }
+//     @SkipSelf() @Host() @Optional() public flower ?: FlowerService) { }
 
 // #docregion provide-animal-service
 }

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

@@ -11,7 +11,7 @@ import { FlowerService } from '../flower.service';
 })
 export class HostComponent {
   // use @Host() in the constructor when injecting the service
-  constructor(@Host() @Optional() public flower: FlowerService) { }
+  constructor(@Host() @Optional() public flower?: FlowerService) { }
 
 }
 // #enddocregion host-component

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

@@ -9,7 +9,7 @@ import { OptionalService } from '../optional.service';
 
 // #docregion optional-component
 export class OptionalComponent {
-  constructor(@Optional() public optional: OptionalService) {}
+  constructor(@Optional() public optional?: OptionalService) {}
 }
 // #enddocregion optional-component
 

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

@@ -8,7 +8,7 @@ import { LeafService } from '../leaf.service';
   styleUrls: ['./self-no-data.component.css']
 })
 export class SelfNoDataComponent {
-  constructor(@Self() @Optional() public leaf: LeafService) { }
+  constructor(@Self() @Optional() public leaf?: LeafService) { }
 }
 
 // #enddocregion self-no-data-component

aio/content/examples/service-worker-getting-started/example-config.json

@@ -1,7 +1,7 @@
 {
   "projectType": "service-worker",
   "e2e": [
-    {"cmd": "yarn", "args": ["e2e", "--no-webdriver-update", "--port={PORT}"]},
+    {"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
     {"cmd": "yarn", "args": ["build", "--prod"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},

aio/content/examples/styleguide/src/04-12/app/core/core.module.ts

@@ -15,7 +15,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
   providers: [LoggerService]
 })
 export class CoreModule {
-  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
+  constructor( @Optional() @SkipSelf() parentModule?: CoreModule) {
     throwIfAlreadyLoaded(parentModule, 'CoreModule');
   }
 }

aio/content/examples/testing/src/app/demo/demo.ts

@@ -248,7 +248,7 @@ export class TestViewProvidersComponent {
 export class ExternalTemplateComponent implements OnInit {
   serviceValue: string;
 
-  constructor(@Optional() private service: ValueService) {  }
+  constructor(@Optional() private service?: ValueService) {  }
 
   ngOnInit() {
     if (this.service) { this.serviceValue = this.service.getValue(); }

aio/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts

@@ -5,9 +5,9 @@ import { Observable } from 'rxjs';
 class DummyHeroesComponent {
 
   heroes: Observable<Hero[]>;
-
+  // #docregion ctor
   constructor(private heroService: HeroService) {}
-
+  // #enddocregion ctor
   // #docregion getHeroes
   getHeroes(): void {
     // #docregion get-heroes

aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts

@@ -5,8 +5,8 @@ import { Component, OnInit } from '@angular/core';
 import { Hero } from '../hero';
 // #docregion hero-service-import
 import { HeroService } from '../hero.service';
-import { MessageService } from '../message.service';
 // #enddocregion hero-service-import
+import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-heroes',

aio/content/examples/universal/src/app/hero.service.ts

@@ -21,7 +21,7 @@ export class HeroService {
   constructor(
     private http: HttpClient,
     private messageService: MessageService,
-    @Optional() @Inject(APP_BASE_HREF) origin: string) {
+    @Optional() @Inject(APP_BASE_HREF) origin?: string) {
       this.heroesUrl = `${origin}${this.heroesUrl}`;
     }
   // #enddocregion ctor

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

@@ -1,6 +1,6 @@
 # Angular compiler options
 
-When you use [AoT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
+When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
 
 The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
 
@@ -21,7 +21,7 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
 {@a tsconfig-extends}
 ## Configuration inheritance with extends
 
-Like the TypeScript compiler, The Angular AoT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file, `tsconfig.json`.
+Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file, `tsconfig.json`.
 The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
 
 A TypeScript configuration can inherit settings from another file using the `extends` property.
@@ -48,7 +48,7 @@ For more information, see the [TypeScript Handbook](https://www.typescriptlang.o
 
 ## Template options
 
-The following options are available for configuring the AoT template compiler.
+The following options are available for configuring the AOT template compiler.
 
 ### `allowEmptyCodegenFiles`
 

aio/content/guide/aot-compiler.md

@@ -6,7 +6,7 @@ The Angular [ahead-of-time (AOT) compiler](guide/glossary#aot) converts your Ang
 
 This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
 
-<div class="alert is-helpful"
+<div class="alert is-helpful">
 
   <a href="https://www.youtube.com/watch?v=kW9cJsvcsGo">Watch compiler author Tobias Bosch explain the Angular compiler</a> at AngularConnect 2016.
 
@@ -570,7 +570,7 @@ In the template type-checking phase, the Angular template compiler uses the Type
 Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
 (see [Angular Compiler Options](guide/angular-compiler-options)).
 
-<div class="alert is-helpful>
+<div class="alert is-helpful">
 
 In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect.
 

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

@@ -518,7 +518,7 @@ const raw = String.raw`A tagged template ${expression} string`;
 [`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
 is a _tag function_ native to JavaScript ES2015.
 
-The AoT compiler does not support tagged template expressions; avoid them in metadata expressions.
+The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
 
 <hr>
 

aio/content/guide/architecture-next-steps.md

@@ -1,55 +1,88 @@
 # Next steps: tools and techniques
 
-After you understand the basic Angular building blocks, you can begin to learn more
-about the features and tools that are available to help you develop and deliver Angular applications.
-Here are some key features.
+After you understand the basic Angular building blocks, you can learn more
+about the features and tools that can help you develop and deliver Angular applications.
+
+* Work through the [Tour of Heroes](tutorial/index) tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application.
+
+* Check out the [Glossary](guide/glossary) to understand Angular-specific terms and usage.
+
+* Use the documentation to learn about key features in more depth, according to your stage of development and areas of interest.
+
+## Application architecture
+
+* The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
+
+* The [Routing and navigation](guide/router) guide provides in-depth information on how to construct applications that allow a user to navigate to different [views](guide/glossary#view) within your single-page app.
+
+* The [Dependency injection](guide/dependency-injection) guide provides in-depth information on how to construct an application such that each component class can acquire the services and objects it needs to perform its function.
 
 ## Responsive programming
 
+The **Components and Templates** guide provides guidance and details of the [template syntax](guide/template-syntax) that you use to display your component data when and where you want it within a view, and to collect input from users that you can respond to.
+
+Additional pages and sections describe some basic programming techniques for Angular apps.
+
 * [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces.
 
 * [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results.
 
-## Client-server interaction
+* [Angular elements](guide/elements): How to package components as *custom elements* using Web Components, a web standard for defining new HTML elements in a framework-agnostic way.
 
-* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
-
-* [Server-side Rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
-
-* [Service Workers](guide/service-worker-intro): Use a service worker to reduce dependency on the network
-significantly improving the user experience.
-
-## Domain-specific libraries
+* [Forms](guide/forms-overview): Support complex data entry scenarios with HTML-based input validation.
 
 * [Animations](guide/animations): Use Angular's animation library to animate component behavior
 without deep knowledge of animation techniques or CSS.
 
-* [Forms](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking.
+## Client-server interaction
+
+Angular provides a framework for single-page apps, where most of the logic and data resides on the client.
+Most apps still need to access a server using the `HttpClient` to access and save data.
+For some platforms and applications, you might also want to use the PWA (Progressive Web App) model to improve the user experience.
+
+* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
+
+* [Server-side rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers.
+
+* [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience.
+
+* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread.
 
 ## Support for the development cycle
 
+The **Development Workflow** section describes the tools and processes you use to compile, test, and  and deploy Angular applications.
+
+* [CLI Command Reference](cli): The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+
 * [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.
 
 * [Testing platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework.
 
-* [Internationalization](guide/i18n):  Make your app available in multiple languages with Angular's internationalization (i18n) tools.
+* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
 
 * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks.
 
-## Setup, build, and deployment configuration
+* [Internationalization](guide/i18n): Make your app available in multiple languages with Angular's internationalization (i18n) tools.
 
-* [CLI Command Reference](cli): The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+* [Accessibility](guide/accessibility): Make your app accessible to all users.
 
-* [Workspace and File Structure](guide/file-structure): Understand the structure of Angular workspace and project folders. 
 
-* [npm Packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
+## File structure, configuration, and dependencies
+
+* [Workspace and file structure](guide/file-structure): Understand the structure of Angular workspace and project folders.
+
+* [Building and serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
+
+* [npm packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
 
 * [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
 
 * [Browser support](guide/browser-support): Make your apps compatible across a wide range of browsers.
 
-* [Building and Serving](guide/build): Learn to define different build and proxy server configurations for your project, such as development, staging, and production.
+## Extending Angular
 
-* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
+* [Angular libraries](guide/libraries): Learn about using and creating re-usable libraries.
 
+* [Schematics](guide/schematics): Learn about customizing and extending the CLI's generation capabilities.
 
+* [CLI builders](guide/cli-builder): Learn about customizing and extending the CLI's ability to apply tools to perform complex tasks, such as building and testing applications.

aio/content/guide/architecture.md

@@ -1,11 +1,13 @@
-# Architecture overview
+# Introduction to Angular concepts
 
-Angular is a platform and framework for building client applications in HTML and TypeScript.
-Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
+Angular is a platform and framework for building single-page client applications in HTML and TypeScript.
+Angular is written in TypeScript.
+It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
 
-The basic building blocks of an Angular application are *NgModules*, which provide a compilation context for *components*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
+The architecture of an Angular application relies on certain fundamental concepts.
+The basic building blocks are *NgModules*, which provide a compilation context for *components*. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*.
 
-* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. 
+* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
 
 * Components use *services*, which provide specific functionality not directly related to views. Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient.
 
@@ -17,6 +19,12 @@ Both components and services are simply classes, with *decorators* that mark the
 
 An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.
 
+<div class="alert is-helpful>
+
+  See the [Angular Glossary](guide/glossary) for basic definitions of important Angular terms and usage.
+
+</div>
+
 ## Modules
 
 Angular *NgModules* differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
@@ -58,7 +66,7 @@ There are two types of data binding:
 
 Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, are also reflected in your program data.
 
-Your templates can use *pipes* to improve the user experience by transforming values for display. 
+Your templates can use *pipes* to improve the user experience by transforming values for display.
 For example, use pipes to display dates and currency values that are appropriate for a user's locale.
 Angular provides predefined pipes for common transformations, and you can also define your own pipes.
 

aio/content/guide/creating-libraries.md

@@ -48,7 +48,7 @@ You can build, test, and lint the project with CLI commands:
 </code-example>
 
 Notice that the configured builder for the project is different from the default builder for app projects.
-This builder, among other things, ensures that the library is always built with the [AoT compiler](guide/aot-compiler), without the need to specify the `--prod` flag.
+This builder, among other things, ensures that the library is always built with the [AOT compiler](guide/aot-compiler), without the need to specify the `--prod` flag.
 
 To make library code reusable you must define a public API for it. This "user layer" defines what is available to consumers of your library. A user of your library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path.
 
@@ -119,6 +119,7 @@ npm publish
 
 If you've never published a package in npm before, you must create a user account. Read more in [Publishing npm Packages](https://docs.npmjs.com/getting-started/publishing-npm-packages).
 
+
 ## Linked libraries
 
 While working on a published library, you can use [npm link](https://docs.npmjs.com/cli/link) to avoid reinstalling the library on every build.
@@ -156,6 +157,7 @@ List all the peer dependencies that your library uses in the workspace TypeScrip
 
 This mapping ensures that your library always loads the local copies of the modules it needs.
 
+
 ## Using your own library in apps
 
 You don't have to publish your library to the npm package manager in order to use it in your own apps, but you do have to build it first.
@@ -213,3 +215,14 @@ For this reason, an app that depends on a library should only use TypeScript pat
 TypeScript path mappings should *not* point to the library source `.ts` files.
 
 </div>
+
+{@a lib-assets}
+
+### Managing library assets with ng-packagr
+
+Starting with version 9.x of the [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/master/README.md) tool, you can configure the tool to automatically copy assets into your library package as part of the build process.
+You can use this feature when your library needs to publish optional theming files, Sass mixins, or documentation (like a changelog).
+
+* Learn how to [copy assets into your library as part of the build](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md).
+
+* Learn more about how to use the tool to [embed assets in CSS](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md).

aio/content/guide/glossary.md

@@ -593,7 +593,7 @@ Compare to [NgModule](#ngmodule).
 
 ## ngcc
 
-Angular compatability compiler.
+Angular compatibility compiler.
 If you build your app using [Ivy](#ivy), but it depends on libraries have not been compiled with Ivy, the CLI uses `ngcc` to automatically update the dependent libraries to use Ivy.
 
 

aio/content/guide/hierarchical-dependency-injection.md

@@ -320,7 +320,7 @@ Use `@SkipSelf()` with `@Optional()` to prevent an error if the value is `null`.
 
 ``` ts
 class Person {
-  constructor(@Optional() @SkipSelf() parent: Person) {}
+  constructor(@Optional() @SkipSelf() parent?: Person) {}
 }
 ```
 

aio/content/guide/ivy-compatibility.md

@@ -17,6 +17,23 @@ If you're still seeing the errors, they are not specific to Ivy. In this case, y
 
 If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.json` and review the list of expected changes below.
 
+{@a payload-size-debugging}
+### Payload size debugging
+
+If you notice that the size of your application's main bundle has increased with Ivy, you may want to check the following:
+
+1. Verify that the components and `NgModules` that you want to be lazy loaded are only imported in lazy modules.
+Anything that you import outside lazy modules can end up in the main bundle.
+See more details in the original issue [here](https://github.com/angular/angular-cli/issues/16146#issuecomment-557559287).
+
+1. Check that imported libraries have been marked side-effect-free.
+If your app imports from shared libraries that are meant to be free from side effects, add "sideEffects": false to their `package.json`.
+This will ensure that the libraries will be properly tree-shaken if they are imported but not directly referenced.
+See more details in the original issue [here](https://github.com/angular/angular-cli/issues/16799#issuecomment-580912090).
+
+1. Projects not using Angular CLI will see a significant size regression unless they update their minifier settings and set compile-time constants `ngDevMode`, `ngI18nClosureMode` and `ngJitMode` to `false` (for Terser, please set these to `false` via [`global_defs` config option](https://terser.org/docs/api-reference.html#conditional-compilation)).
+Please note that these constants are not meant to be used by 3rd party library or application code as they are not part of our public api surface and might change in the future.
+
 
 {@a common-changes}
 ### Changes you may see
@@ -27,6 +44,8 @@ If the errors are gone, switch back to Ivy by removing the changes to the `tscon
 
 * Unbound inputs for directives (e.g. name in `<my-comp name="">`) are now set upon creation of the view, before change detection runs (previously, all inputs were set during change detection).
 
+* Static attributes set directly in the HTML of a template will override any conflicting host attributes set by directives or components (previously, static host attributes set by directives / components would override static template attributes if conflicting).
+
 {@a less-common-changes}
 ### Less common changes
 
@@ -62,4 +81,10 @@ If the errors are gone, switch back to Ivy by removing the changes to the `tscon
 
 * `DebugElement.classes` returns `undefined` for classes that were added and then subsequently removed (previously, classes added and later removed would have a value of `false`).
 
-* If selecting the native `<option>` element in a `<select>` where the `<option>`s are created via `*ngFor`, use the `[selected]` property of an `<option>` instead of binding to the `[value]` property of the `<select>` element (previously, you could bind to either.) [details](guide/ivy-compatibility-examples#select-value-binding)
+* If selecting the native `<option>` element in a `<select>` where the `<option>`s are created via `*ngFor`, use the `[selected]` property of an `<option>` instead of binding to the `[value]` property of the `<select>` element (previously, you could bind to either.) [details](guide/ivy-compatibility-examples#select-value-binding)
+
+* Embedded views (such as ones created by `*ngFor`) are now inserted in front of anchor DOM comment node (e.g. `<!--ng-for-of-->`) rather than behind it as was the case previously.
+In most cases this does not have any impact on rendered DOM.
+In some cases (such as animations delaying the removal of an embedded view) any new embedded views will be inserted after the embedded view being animated away.
+This difference only last while the animation is active, and might alter the visual appearance of the animation.
+Once the animation is finished the resulting rendered DOM is identical to that rendered with View Engine.

aio/content/guide/releases.md

@@ -54,17 +54,13 @@ See [Keeping Up-to-Date](guide/updating "Updating your projects") for more infor
 {@a previews}
 ### Preview releases
 
-We let you preview what's coming by providing Beta releases and Release Candidates (`rc`) for each major and minor release:
+We let you preview what's coming by providing "Next" and Release Candidates (`rc`) pre-releases for each major and minor release:
 
-<!--
-* **Next:** The release that is under active development. The next release is indicated by a release tag appended with the  `next` identifier, such as  `8.1.0-next.0`. For the next version of the documentation, see [next.angular.io](https://next.angular.io).
--->
+* **Next:** The release that is under active development and testing. The next release is indicated by a release tag appended with the  `-next` identifier, such as  `8.1.0-next.0`.
 
-* **Beta:** A release that is under active development and testing. A Beta release is indicated by a release tag appended with the  `beta` identifier, such as  `8.0.0-beta.0`.
+* **Release candidate:** A release that is feature complete and in final testing. A release candidate is indicated by a release tag appended with the `-rc` identifier, such as version `8.1.0-rc.0`.
 
-* **Release candidate:** A release that is feature complete and in final testing. A release candidate is indicated by a release tag appended with the `rc` identifier, such as version `8.1.0-rc`.
-
-The next version of the documentation is available at [next.angular.io](https://next.angular.io). This includes any documentation for Beta or Release Candidate features and APIs.
+The latest `next` or `rc` pre-release version of the documentation is available at [next.angular.io](https://next.angular.io).
 
 
 {@a frequency}
@@ -72,36 +68,21 @@ The next version of the documentation is available at [next.angular.io](https://
 
 We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Angular.
 
+<div class="alert is-helpful">
+
+Disclaimer: Dates are offered as general guidance and will be adjusted by us when necessary to ensure delivery of a high-quality platform.
+
+</div>
+
 In general, you can expect the following release cycle:
 
 * A major release every 6 months
 
 * 1-3 minor releases for each major release
 
-* A patch release almost every week
-
-This cadence of releases gives you access to new features as soon as they are ready, while maintaining the stability and reliability of the platform for production users.
-
-
-
-{@a schedule}
-## Release schedule
-
-<div class="alert is-helpful">
-
-Disclaimer: The dates are offered as general guidance and may be adjusted by us when necessary to ensure delivery of a high-quality platform.
-
-</div>
-
-The following table contains our current target release dates for the next two major versions of Angular:
-
- Date                   | Stable Release | Compatibility
- ---------------------- | -------------- | -------------
- October/November 2019  | 9.0.0          | ^8.0.0
- May 2020               | 10.0.0         | ^9.0.0
-
- Compatibility note: The primary goal of the backward compatibility promise is to ensure that changes in the core framework and tooling don't break the existing ecosystem of components and applications and don't put undue upgrade/migration burden on Angular application and component authors.
+* A patch release and pre-release (`next` or `rc`) build almost every week
 
+This cadence of releases gives eager developers access to new features as soon as they are fully developed and pass through our code review and integration testing processes, while maintaining the stability and reliability of the platform for production users that prefer to receive features after they have been validated by Google and other developers that use the pre-release builds.
 
 
 
@@ -142,7 +123,7 @@ To help ensure that you have sufficient time and a clear path to update, this is
 * **Announcement:** We announce deprecated APIs and features in the [change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log"). Deprecated APIs appear in the [documentation](api?status=deprecated) with ~~strikethrough.~~ When we announce a deprecation, we also announce a recommended update path. For convenience,  [Deprecations](guide/deprecations) contains a summary of deprecated APIs and features.
 
 
-* **Deprecation period:** When an API or a feature is deprecated, it will still be present in the [next two major releases](#schedule). After that, deprecated APIs and features will be candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature will happen only in major release. Until a deprecated API or feature is removed, it will be maintained according to the LTS support policy, meaning that only critical and security issues will be fixed.
+* **Deprecation period:** When an API or a feature is deprecated, it will still be present in the next two major releases. After that, deprecated APIs and features will be candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature will happen only in major release. Until a deprecated API or feature is removed, it will be maintained according to the LTS support policy, meaning that only critical and security issues will be fixed.
 
 
 * **npm dependencies:** We only make npm dependency updates that require changes to your apps in a major release.

aio/content/guide/route-animations.md

@@ -67,7 +67,7 @@ The `<router-outlet>` container has an attribute directive that contains data ab
 
 <code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="prepare-router-outlet" language="typescript"></code-example>
 
-Here, the `prepareRoute()` method takes the value of the output directive (established through `#outlet="outlet"`) and returns a string value representing the state of the animation based on the custom data of the current active route. You can use this data to control which transition to execute for each route.
+Here, the `prepareRoute()` method takes the value of the outlet directive (established through `#outlet="outlet"`) and returns a string value representing the state of the animation based on the custom data of the current active route. You can use this data to control which transition to execute for each route.
 
 ## Animation definition
 
@@ -107,7 +107,7 @@ Use the `query()` method to find and animate elements within the current host co
 
 Let's assume that we are routing from the *Home => About*.
 
-<code-example path="animations/src/app/animations.ts" header="src/app/animations.ts" region="query" language="typescript"></code-example>
+<code-example path="animations/src/app/animations.ts" header="src/app/animations.ts (Continuation from above)" region="query" language="typescript"></code-example>
 
 The animation code does the following after styling the views:
 

aio/content/guide/structural-directives.md

@@ -297,7 +297,7 @@ describes additional `NgFor` directive properties and context properties.
 
 These microsyntax mechanisms are also available to you when you write your own structural directives.
 For example, microsyntax in Angular allows you to write `<div *ngFor="let item of items">{{item}}</div>`
-instead of `<ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template>`.
+instead of `<ng-template ngFor let-item [ngForOf]="items"><div>{{item}}</div></ng-template>`.
 The following sections provide detailed information on constraints, grammar,
 and translation of microsyntax.
 

aio/content/guide/template-syntax.md

@@ -731,11 +731,11 @@ As you can see here, the `parentItem` in `AppComponent` is a string, which the `
 The previous simple example showed passing in a string. To pass in an object,
 the syntax and thinking are the same.
 
-In this scenario, `ListItemComponent` is nested within `AppComponent` and the `item` property expects an object.
+In this scenario, `ListItemComponent` is nested within `AppComponent` and the `items` property expects an array of objects.
 
 <code-example path="property-binding/src/app/app.component.html" region="pass-object" header="src/app/app.component.html"></code-example>
 
-The `item` property is declared in the `ListItemComponent` with a type of `Item` and decorated with `@Input()`:
+The `items` property is declared in the `ListItemComponent` with a type of `Item` and decorated with `@Input()`:
 
 <code-example path="property-binding/src/app/list-item/list-item.component.ts" region="item-input" header="src/app/list-item.component.ts"></code-example>
 
@@ -748,7 +748,7 @@ specify a different item in `app.component.ts` so that the new item will render:
 
 <code-example path="property-binding/src/app/app.component.ts" region="pass-object" header="src/app.component.ts"></code-example>
 
-You just have to make sure, in this case, that you're supplying an object because that's the type of `item` and is what the nested component, `ListItemComponent`, expects.
+You just have to make sure, in this case, that you're supplying an array of objects because that's the type of `items` and is what the nested component, `ListItemComponent`, expects.
 
 In this example, `AppComponent` specifies a different `item` object
 (`currentItem`) and passes it to the nested `ListItemComponent`. `ListItemComponent` was able to use `currentItem` because it matches what an `Item` object is according to `item.ts`. The `item.ts` file is where
@@ -892,58 +892,97 @@ Instead, you'd use property binding and write it like this:
 
 ### Class binding
 
-Add and remove CSS class names from an element's `class` attribute with
-a **class binding**.
-
-Here's how to set the attribute without binding in plain HTML:
+Here's how to set the `class` attribute without a binding in plain HTML:
 
 ```html
 <!-- standard class attribute setting -->
-<div class="item clearance special">Item clearance special</div>
+<div class="foo bar">Some text</div>
 ```
 
-Class binding syntax resembles property binding, but instead of an element property between brackets, start with the prefix `class`,
-optionally followed by a dot (`.`) and the name of a CSS class: `[class.class-name]`.
+You can also add and remove CSS class names from an element's `class` attribute with a **class binding**.
 
-You can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
+To create a single class binding, start with the prefix `class` followed by a dot (`.`) and the name of the CSS class (for example, `[class.foo]="hasFoo"`). 
+Angular adds the class when the bound expression is truthy, and it removes the class when the expression is falsy (with the exception of `undefined`, see [styling delegation](#styling-delegation)).
+
+To create a binding to multiple classes, use a generic `[class]` binding without the dot (for example, `[class]="classExpr"`).
+The expression can be a space-delimited string of class names, or you can format it as an object with class names as the keys and truthy/falsy expressions as the values. 
+With object format, Angular will add a class only if its associated value is truthy. 
+
+It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated.
+Updating the property without changing object identity will have no effect.
+
+If there are multiple bindings to the same class name, conflicts are resolved using [styling precedence](#styling-precedence).
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table width="100%">
+  <col width="15%">
+  </col>
+  <col width="20%">
+  </col>
+  <col width="35%">
+  </col>
+  <col width="30%">
+  </col>
+  <tr>
+    <th>
+      Binding Type
+    </th>
+    <th>
+      Syntax
+    </th>
+    <th>
+      Input Type
+    </th>
+    <th>
+      Example Input Values
+    </th>
+  </tr>
+  <tr>
+    <td>Single class binding</td>
+    <td><code>[class.foo]="hasFoo"</code></td>
+    <td><code>boolean | undefined | null</code></td>
+    <td><code>true</code>, <code>false</code></td>
+  </tr>
+  <tr>
+    <td rowspan=3>Multi-class binding</td>
+    <td rowspan=3><code>[class]="classExpr"</code></td>
+    <td><code>string</code></td>
+    <td><code>"my-class-1 my-class-2 my-class-3"</code></td>
+  </tr>
+  <tr>
+    <td><code>{[key: string]: boolean | undefined | null}</code></td>
+    <td><code>{foo: true, bar: false}</code></td>
+  </tr>
+  <tr>
+    <td><code>Array</code><<code>string</code>></td>
+    <td><code>['foo', 'bar']</code></td>
+  </tr>
+</table>
 
 
- <code-example path="attribute-binding/src/app/app.component.html" region="class-override" header="src/app/app.component.html"></code-example>
-
-You can also add a class to an element without overwriting the classes already on the element:
-
- <code-example path="attribute-binding/src/app/app.component.html" region="add-class" header="src/app/app.component.html"></code-example>
-
-Finally, you can bind to a specific class name.
-Angular adds the class when the template expression evaluates to truthy.
-It removes the class when the expression is falsy.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="is-special" header="src/app/app.component.html"></code-example>
-
-While this technique is suitable for toggling a single class name,
-consider the [`NgClass`](guide/template-syntax#ngClass) directive when
-managing multiple class names at the same time.
+The [NgClass](#ngclass) directive can be used as an alternative to direct `[class]` bindings. 
+However, using the above class binding syntax without `NgClass` is preferred because due to improvements in class binding in Angular, `NgClass` no longer provides significant value, and might eventually be removed in the future.
 
 
 <hr/>
 
 ### Style binding
 
-You can set inline styles with a **style binding**.
+Here's how to set the `style` attribute without a binding in plain HTML:
 
-Style binding syntax resembles property binding.
-Instead of an element property between brackets, start with the prefix `style`,
-followed by a dot (`.`) and the name of a CSS style property: `[style.style-property]`.
+```html
+<!-- standard style attribute setting -->
+<div style="color: blue">Some text</div>
+```
 
-<code-example path="attribute-binding/src/app/app.component.html" region="style-binding" header="src/app/app.component.html"></code-example>
+You can also set styles dynamically with a **style binding**.
 
-Some style binding styles have a unit extension.
-The following example conditionally sets the font size in  “em” and “%” units.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="style-binding-condition" header="src/app/app.component.html"></code-example>
-
-This technique is suitable for setting a single style, but consider
-the [`NgStyle`](guide/template-syntax#ngStyle) directive when setting several inline styles at the same time.
+To create a single style binding, start with the prefix `style` followed by a dot (`.`) and the name of the CSS style property (for example, `[style.width]="width"`). 
+The property will be set to the value of the bound expression, which is normally a string.
+Optionally, you can add a unit extension like `em` or `%`, which requires a number type.
 
 <div class="alert is-helpful">
 
@@ -953,8 +992,140 @@ Note that a _style property_ name can be written in either
 
 </div>
 
+If there are multiple styles you'd like to toggle, you can bind to the `[style]` property directly without the dot (for example, `[style]="styleExpr"`).
+The expression attached to the `[style]` binding is most often a string list of styles like `"width: 100px; height: 100px;"`. 
+
+You can also format the expression as an object with style names as the keys and style values as the values, like `{width: '100px', height: '100px'}`. 
+It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated.
+Updating the property without changing object identity will have no effect.
+
+If there are multiple bindings to the same style property, conflicts are resolved using [styling precedence rules](#styling-precedence).
+
+<style>
+  td, th {vertical-align: top}
+</style>
+
+<table width="100%">
+  <col width="15%">
+  </col>
+  <col width="20%">
+  </col>
+  <col width="35%">
+  </col>
+  <col width="30%">
+  </col>
+  <tr>
+    <th>
+      Binding Type
+    </th>
+    <th>
+      Syntax
+    </th>
+    <th>
+      Input Type
+    </th>
+    <th>
+      Example Input Values
+    </th>
+  </tr>
+  <tr>
+    <td>Single style binding</td>
+    <td><code>[style.width]="width"</code></td>
+    <td><code>string | undefined | null</code></td>
+    <td><code>"100px"</code></td>
+  </tr>
+  <tr>
+  <tr>
+    <td>Single style binding with units</td>
+    <td><code>[style.width.px]="width"</code></td>
+    <td><code>number | undefined | null</code></td>
+    <td><code>100</code></td>
+  </tr>
+    <tr>
+    <td rowspan=3>Multi-style binding</td>
+    <td rowspan=3><code>[style]="styleExpr"</code></td>
+    <td><code>string</code></td>
+    <td><code>"width: 100px; height: 100px"</code></td>
+  </tr>
+  <tr>
+    <td><code>{[key: string]: string | undefined | null}</code></td>
+    <td><code>{width: '100px', height: '100px'}</code></td>
+  </tr>
+  <tr>
+    <td><code>Array</code><<code>string</code>></td>
+    <td><code>['width', '100px']</code></td>
+  </tr>
+</table>
+
+The [NgStyle](#ngstyle) directive can be used as an alternative to direct `[style]` bindings. 
+However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
+
+
 <hr/>
 
+{@a styling-precedence}
+### Styling Precedence
+
+A single HTML element can have its CSS class list and style values bound to a multiple sources (for example, host bindings from multiple directives).
+
+When there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element.
+
+<div class="alert is-helpful">
+<h4>Styling precedence (highest to lowest)</h4>
+
+1. Template bindings
+    1. Property binding (for example, `<div [class.foo]="hasFoo">` or `<div [style.color]="color">`)
+    1. Map binding (for example, `<div [class]="classExpr">` or `<div [style]="styleExpr">`)
+    1. Static value (for example, `<div class="foo">` or `<div style="color: blue">`) 
+1. Directive host bindings
+    1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)
+    1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)
+    1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)    
+1. Component host bindings
+    1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)
+    1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)
+    1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)    
+
+</div>
+
+The more specific a class or style binding is, the higher its precedence.
+
+A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="basic-specificity" header="src/app/app.component.html"></code-example>
+
+Specificity rules also apply when it comes to bindings that originate from different sources. 
+It's possible for an element to have bindings in the template where it's declared, from host bindings on matched directives, and from host bindings on matched components.
+
+Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.
+
+Directive host bindings are considered less specific because directives can be used in multiple locations, so they have a lower precedence than template bindings.
+
+Directives often augment component behavior, so host bindings from components have the lowest precedence. 
+
+<code-example path="attribute-binding/src/app/app.component.html" region="source-specificity" header="src/app/app.component.html"></code-example>
+
+In addition, bindings take precedence over static attributes. 
+
+In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="dynamic-priority" header="src/app/app.component.html"></code-example>
+
+{@a styling-delegation}
+### Delegating to styles with lower precedence
+
+It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values.
+Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style.
+
+For example, consider the following template: 
+
+<code-example path="attribute-binding/src/app/app.component.html" region="style-delegation" header="src/app/app.component.html"></code-example>
+
+Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding.
+In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding.
+However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.
+
+
 {@a event-binding}
 
 ## Event binding `(event)`

aio/content/guide/testing.md

@@ -620,8 +620,8 @@ It also generates an initial test file for the component, `banner-external.compo
 
 <div class="alert is-helpful">
 
-Because `compileComponents` is asynchronous, it uses 
-the [`async`](api/core/testing/async) utility 
+Because `compileComponents` is asynchronous, it uses
+the [`async`](api/core/testing/async) utility
 function imported from `@angular/core/testing`.
 
 Please refer to the [async](#async) section for more details.
@@ -1261,19 +1261,19 @@ XHR calls within a test are rare, but if you need to call XHR, see [`async()`](#
 
 #### The _tick()_ function
 
-You do have to call `tick()` to advance the (virtual) clock.
+You do have to call [tick()](api/core/testing/tick) to advance the (virtual) clock.
 
-Calling `tick()` simulates the passage of time until all pending asynchronous activities finish.
+Calling [tick()](api/core/testing/tick) simulates the passage of time until all pending asynchronous activities finish.
 In this case, it waits for the error handler's `setTimeout()`.
 
-The `tick()` function accepts milliseconds as a parameter (defaults to 0 if not provided). The parameter represents how much the virtual clock advances. For example, if you have a `setTimeout(fn, 100)` in a `fakeAsync()` test, you need to use tick(100) to trigger the fn callback.
+The [tick()](api/core/testing/tick) function accepts milliseconds as a parameter (defaults to 0 if not provided). The parameter represents how much the virtual clock advances. For example, if you have a `setTimeout(fn, 100)` in a `fakeAsync()` test, you need to use tick(100) to trigger the fn callback.
 
 <code-example
   path="testing/src/app/demo/async-helper.spec.ts"
   region="fake-async-test-tick">
 </code-example>
 
-The `tick()` function is one of the Angular testing utilities that you import with `TestBed`.
+The [tick()](api/core/testing/tick) function is one of the Angular testing utilities that you import with `TestBed`.
 It's a companion to `fakeAsync()` and you can only call it within a `fakeAsync()` body.
 
 #### Comparing dates inside fakeAsync()
@@ -1422,7 +1422,7 @@ in the real world.
 Notice that the quote element displays the placeholder value (`'...'`) after `ngOnInit()`.
 The first quote hasn't arrived yet.
 
-To flush the first quote from the observable, you call `tick()`.
+To flush the first quote from the observable, you call [tick()](api/core/testing/tick).
 Then call `detectChanges()` to tell Angular to update the screen.
 
 Then you can assert that the quote element displays the expected text.
@@ -1468,7 +1468,7 @@ When using an `intervalTimer()` such as `setInterval()` in `async()`, remember t
 #### _whenStable_
 
 The test must wait for the `getQuote()` observable to emit the next quote.
-Instead of calling `tick()`, it calls `fixture.whenStable()`.
+Instead of calling [tick()](api/core/testing/tick), it calls `fixture.whenStable()`.
 
 The `fixture.whenStable()` returns a promise that resolves when the JavaScript engine's
 task queue becomes empty.
@@ -1577,7 +1577,7 @@ you tell the `TestScheduler` to _flush_ its queue of prepared tasks like this.
   path="testing/src/app/twain/twain.component.marbles.spec.ts"
   region="test-scheduler-flush"></code-example>
 
-This step serves a purpose analogous to `tick()` and `whenStable()` in the
+This step serves a purpose analogous to [tick()](api/core/testing/tick) and `whenStable()` in the
 earlier `fakeAsync()` and `async()` examples.
 The balance of the test is the same as those examples.
 
@@ -1589,7 +1589,7 @@ Here's the marble testing version of the `getQuote()` error test.
   path="testing/src/app/twain/twain.component.marbles.spec.ts"
   region="error-test"></code-example>
 
-It's still an async test, calling `fakeAsync()` and `tick()`, because the component itself
+It's still an async test, calling `fakeAsync()` and [tick()](api/core/testing/tick), because the component itself
 calls `setTimeout()` when processing errors.
 
 Look at the marble observable definition.
@@ -3582,13 +3582,13 @@ The Angular `By` class has three static methods for common predicates:
 
 <hr>
 
-{@a faq}
+{@a useful-tips}
 
-## Frequently Asked Questions
+## Useful tips
 
 {@a q-spec-file-location}
 
-#### Why put spec file next to the file it tests?
+#### Place your spec file next to the file it tests
 
 It's a good idea to put unit test spec files in the same folder
 as the application source code files that they test:
@@ -3599,11 +3599,9 @@ as the application source code files that they test:
 - When you move the source (inevitable), you remember to move the test.
 - When you rename the source file (inevitable), you remember to rename the test file.
 
-<hr>
-
 {@a q-specs-in-test-folder}
 
-#### When would I put specs in a test folder?
+#### Place your spec files in a test folder
 
 Application integration specs can test the interactions of multiple parts
 spread across folders and modules.
@@ -3615,15 +3613,17 @@ It's often better to create an appropriate folder for them in the `tests` direct
 Of course specs that test the test helpers belong in the `test` folder,
 next to their corresponding helper files.
 
-{@a q-e2e}
+{@a q-kiss}
 
-#### Why not rely on E2E tests of DOM integration?
+#### Keep it simple
 
-The component DOM tests described in this guide often require extensive setup and
-advanced techniques whereas the [unit tests](#component-class-testing)
-are comparatively simple.
+[Component class testing](#component-class-testing) should be kept very clean and simple.
+It should test only a single unit. On a first glance, you should be able to understand 
+what the test is testing. If it's doing more, then it doesn't belong here.
 
-#### Why not defer DOM integration tests to end-to-end (E2E) testing?
+{@a q-end-to-end}
+
+#### Use E2E (end-to-end) to test more than a single unit
 
 E2E tests are great for high-level validation of the entire system.
 But they can't give you the comprehensive test coverage that you'd expect from unit tests.

aio/content/guide/transition-and-triggers.md

@@ -2,7 +2,8 @@
 
 You learned the basics of Angular animations in the [introduction](guide/animations) page.
 
-In this guide, we go into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view. The chapter also explores multiple animation triggers, animation callbacks and sequence-based animation using keyframes.
+This guide goes into greater depth on special transition states such as `*` (wildcard) and `void`, and show how these special states are used for elements entering and leaving a view.
+This chapter also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
 
 ## Predefined states and wildcard matching
 
@@ -18,7 +19,8 @@ For example, a transition of `open => *` applies when the element's state change
   <img src="generated/images/guide/animations/wildcard-state-500.png" alt="wildcard state expressions">
 </div>
 
-Here's another code sample using the wildcard state together with our previous example using the `open` and `closed` states. Instead of defining each state-to-state transition pair, we're now saying that any transition to `closed` takes 1 second, and any transition to `open` takes 0.5 seconds.
+The following is another code sample using the wildcard state together with the previous example using the `open` and `closed` states.
+Instead of defining each state-to-state transition pair, any transition to `closed` takes 1 second, and any transition to `open` takes 0.5 seconds.
 
 This allows us to add new states without having to include separate transitions for each one.
 
@@ -30,7 +32,9 @@ Use a double arrow syntax to specify state-to-state transitions in both directio
 
 ### Using wildcard state with multiple transition states
 
-In our two-state button example, the wildcard isn't that useful because there are only two possible states, `open` and `closed`. Wildcard states are better when an element in one particular state has multiple potential states that it can change to. If our button can change from `open` to either `closed` or something like `inProgress`, using a wildcard state could reduce the amount of coding needed.
+In the two-state button example, the wildcard isn't that useful because there are only two possible states, `open` and `closed`.
+Wildcard states are better when an element in one particular state has multiple potential states that it can change to.
+If the button can change from `open` to either `closed` or something like `inProgress`, using a wildcard state could reduce the amount of coding needed.
 
 <div class="lightbox">
   <img src="generated/images/guide/animations/wildcard-3-states.png" alt="wildcard state with 3 states">
@@ -73,18 +77,18 @@ This section shows how to animate elements entering or leaving a page.
 
 <div class="alert is-helpful">
 
-**Note:** For our purposes, an element entering or leaving a view is equivalent to being inserted or removed from the DOM.
+**Note:** For this example, an element entering or leaving a view is equivalent to being inserted or removed from the DOM.
 
 </div>
 
-Now we'll add a new behavior:
+Now add a new behavior:
 
 * When you add a hero to the list of heroes, it appears to fly onto the page from the left.
 * When you remove a hero from the list, it appears to fly out to the right.
 
 <code-example path="animations/src/app/hero-list-enter-leave.component.ts" header="src/app/hero-list-enter-leave.component.ts" region="animationdef" language="typescript"></code-example>
 
-In the above code, we applied the `void` state when the HTML element isn't attached to a view.
+In the above code, you applied the `void` state when the HTML element isn't attached to a view.
 
 
 {@a enter-leave-view}
@@ -105,7 +109,7 @@ So, use the aliases `:enter` and `:leave` to target HTML elements that are inser
 
 The `:enter` transition runs when any `*ngIf` or `*ngFor` views are placed on the page, and `:leave` runs when those views are removed from the page.
 
-In this example, we have a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code.
+This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code.
 
 <code-example path="animations/src/app/insert-remove.component.html" header="src/app/insert-remove.component.html" region="insert-remove" language="typescript">
 </code-example>
@@ -169,11 +173,13 @@ The code sample below shows how to use this feature.
 
 When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off.
 
-When an element within an HTML template has animations disabled using the `@.disabled` host binding, animations are disabled on all inner elements as well. You can't selectively disable multiple animations on a single element.
+When an element within an HTML template has animations disabled using the `@.disabled` host binding, animations are disabled on all inner elements as well.
+You can't selectively disable multiple animations on a single element.
 
 However, selective child animations can still be run on a disabled parent in one of the following ways:
 
-* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template. Those elements can still animate.
+* A parent animation can use the [`query()`](https://angular.io/api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
+Those elements can still animate.
 
 * A subanimation can be queried by a parent and then later animated with the `animateChild()` function.
 
@@ -190,22 +196,27 @@ To disable all animations for an Angular app, place the `@.disabled` host bindin
 
 ## Animation callbacks
 
-The animation `trigger()` function emits *callbacks* when it starts and when it finishes. In the example below we have a component that contains an `openClose` trigger.
+The animation `trigger()` function emits *callbacks* when it starts and when it finishes. The example below features a component that contains an `openClose` trigger.
 
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="events1" language="typescript"></code-example>
 
-In the HTML template, the animation event is passed back via `$event`, as `@trigger.start` and `@trigger.done`, where `trigger` is the name of the trigger being used. In our example, the trigger `openClose` appears as follows.
+In the HTML template, the animation event is passed back via `$event`, as `@trigger.start` and `@trigger.done`, where `trigger` is the name of the trigger being used.
+In this example, the trigger `openClose` appears as follows.
 
 <code-example path="animations/src/app/open-close.component.3.html" header="src/app/open-close.component.html" region="callbacks">
 </code-example>
 
-A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup. For example, you could set up the **InProgress** button to have its own looping animation where it pulsates or does some other visual motion while the backend system operation finishes.
+A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup.
+For example, you could set up the **InProgress** button to have its own looping animation where it pulsates or does some other visual motion while the backend system operation finishes.
 
-Then, another animation can be called when the current animation finishes. For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed.
+Then, another animation can be called when the current animation finishes.
+For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed.
 
-An animation can influence an end user to *perceive* the operation as faster, even when it isn't. Thus, a simple animation can be a cost-effective way to keep users happy, rather than seeking to improve the speed of a server call and having to compensate for circumstances beyond your control, such as an unreliable network connection.
+An animation can influence an end user to *perceive* the operation as faster, even when it isn't.
+Thus, a simple animation can be a cost-effective way to keep users happy, rather than seeking to improve the speed of a server call and having to compensate for circumstances beyond your control, such as an unreliable network connection.
 
-Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console. The following code snippet creates console log output for our original example, a button with the two states of `open` and `closed`.
+Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console.
+The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`.
 
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="events" language="typescript"></code-example>
 
@@ -213,9 +224,10 @@ Callbacks can serve as a debugging tool, for example in conjunction with `consol
 
 ## Keyframes
 
-In the previous section, we saw a simple two-state transition. Now we'll create an animation with multiple steps run in sequence using *keyframes*.
+The previous section features a simple two-state transition. Now create an animation with multiple steps run in sequence using *keyframes*.
 
-Angular's `keyframe()` function is similar to keyframes in CSS. Keyframes allow several style changes within a single timing segment. For example, our button, instead of fading, could change color several times over a single 2-second timespan.
+Angular's `keyframe()` function is similar to keyframes in CSS. Keyframes allow several style changes within a single timing segment.
+For example, the button, instead of fading, could change color several times over a single 2-second timespan.
 
 <div class="lightbox">
   <img src="generated/images/guide/animations/keyframes-500.png" alt="keyframes">
@@ -227,9 +239,13 @@ The code for this color change might look like this.
 
 ### Offset
 
-Keyframes include an *offset* that defines the point in the animation where each style change occurs. Offsets are relative measures from zero to one, marking the beginning and end of the animation, respectively and should be applied to each of the keyframe's steps if used at least once.
+Keyframes include an *offset* that defines the point in the animation where each style change occurs.
+Offsets are relative measures from zero to one, marking the beginning and end of the animation, respectively and should be applied to each of the keyframe's steps if used at least once.
 
-Defining offsets for keyframes is optional. If you omit them, evenly spaced offsets are automatically assigned. For example, three keyframes without predefined offsets receive offsets of 0, 0.5, and 1. Specifying an offset of 0.8 for the middle transition in the above example might look like this.
+Defining offsets for keyframes is optional.
+If you omit them, evenly spaced offsets are automatically assigned.
+For example, three keyframes without predefined offsets receive offsets of 0, 0.5, and 1.
+Specifying an offset of 0.8 for the middle transition in the above example might look like this.
 
 <div class="lightbox">
   <img src="generated/images/guide/animations/keyframes-offset-500.png" alt="keyframes with offset">
@@ -248,9 +264,9 @@ Use keyframes to create a pulse effect in your animations by defining styles at
 
 Here's an example of using keyframes to create a pulse effect:
 
-* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
+* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second.
 
-* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe
+* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe.
 
 <div class="lightbox">
   <img src="generated/images/guide/animations/keyframes-pulsation.png" alt="keyframes with irregular pulsation">
@@ -262,7 +278,8 @@ The code snippet for this animation might look like this.
 
 ### Animatable properties and units
 
-Angular's animation support builds on top of web animations, so you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page.
+Angular's animation support builds on top of web animations, so you can animate any property that the browser considers animatable.
+This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page.
 
 For positional properties with a numeric value, define a unit by providing the value as a string, in quotes, with the appropriate suffix:
 
@@ -270,15 +287,19 @@ For positional properties with a numeric value, define a unit by providing the v
 * Relative font size: `'3em'`
 * Percentage: `'100%'`
 
-If you don't provide a unit when specifying dimension, Angular assumes a default unit of pixels, or px. Expressing 50 pixels as `50` is the same as saying `'50px'`.
+If you don't provide a unit when specifying dimension, Angular assumes a default unit of pixels, or px.
+Expressing 50 pixels as `50` is the same as saying `'50px'`.
 
 ### Automatic property calculation with wildcards
 
-Sometimes you don't know the value of a dimensional style property until runtime. For example, elements often have widths and heights that depend on their content and the screen size. These properties are often challenging to animate using CSS.
+Sometimes you don't know the value of a dimensional style property until runtime.
+For example, elements often have widths and heights that depend on their content and the screen size.
+These properties are often challenging to animate using CSS.
 
 In these cases, you can use a special wildcard `*` property value under `style()`, so that the value of that particular style property is computed at runtime and then plugged into the animation.
 
-In this example, we have a trigger called `shrinkOut`, used when an HTML element leaves the page. The animation takes whatever height the element has before it leaves, and animates from that height to zero.
+The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page.
+The animation takes whatever height the element has before it leaves, and animates from that height to zero.
 
 <code-example path="animations/src/app/hero-list-auto.component.ts" header="src/app/hero-list-auto.component.ts" region="auto-calc" language="typescript"></code-example>
 

aio/content/guide/universal.md

@@ -26,7 +26,7 @@ The CLI schematic `@nguniversal/express-engine` performs the required steps, as
 The [Tour of Heroes tutorial](tutorial) is the foundation for this walkthrough.
 
 In this example, the Angular CLI compiles and bundles the Universal version of the app with the
-[Ahead-of-Time (AoT) compiler](guide/aot-compiler).
+[Ahead-of-Time (AOT) compiler](guide/aot-compiler).
 A Node Express web server compiles HTML pages with Universal based on client requests.
 
 To create the server-side app module, `app.server.module.ts`, run the following CLI command.
@@ -214,7 +214,7 @@ import {REQUEST} from '@nguniversal/express-engine/tokens';
 @Injectable()
 export class UniversalInterceptor implements HttpInterceptor {
 
-  constructor(@Optional() @Inject(REQUEST) protected request: Request) {}
+  constructor(@Optional() @Inject(REQUEST) protected request?: Request) {}
 
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     let serverReq: HttpRequest<any> = req;

aio/content/guide/updating-to-version-9.md

@@ -1,6 +1,6 @@
 # Updating to Angular version 9
 
-This guide contains everything you need to know about updating to the next Angular version.
+This guide contains information related to updating to version 9 of Angular.
 
 ## Updating CLI Apps
 
@@ -25,7 +25,7 @@ If you're curious about the specific migrations being run by the CLI, see the [a
 Users who only built with JIT before may see new type errors.
 See our [template type-checking guide](guide/template-typecheck) for more information and debugging tips.
 
-- Typescript 3.4 and 3.5 are no longer supported. Please update to Typescript 3.6.
+- Typescript 3.4 and 3.5 are no longer supported. Please update to Typescript 3.7.
 
 - `tslib` is now listed as a peer dependency rather than a direct dependency. If you are not using the CLI, you must manually install `tslib`, using `yarn add tslib` or `npm install tslib --save`.
 

aio/content/guide/updating.md

@@ -68,5 +68,3 @@ For simple updates, the CLI command [`ng update`](cli/update) is all you need. W
 * Update command reference: [Angular CLI `ng update` command reference](cli/update)
 
 * Versioning, release, support, and deprecation practices: [Angular versioning and releases](guide/releases "Angular versioning and releases")
-
-* Release schedule: [Angular versioning and releases](guide/releases#schedule "Angular versioning and releases")

aio/content/guide/upgrade.md

@@ -1162,11 +1162,19 @@ Begin by installing TypeScript to the project.
 </code-example>
 
 Install type definitions for the existing libraries that
-you're using but that don't come with prepackaged types: AngularJS and the
+you're using but that don't come with prepackaged types: AngularJS, AngularJS Material, and the
 Jasmine unit test framework.
 
+For the PhoneCat app, we can install the necessary type definitions by running the following command:
+
 <code-example format="">
-  npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
+  npm install @types/jasmine @types/angular @types/angular-animate @types/angular-aria @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev
+</code-example>
+
+If you are using AngularJS Material, you can install the type definitions via:
+
+<code-example format="">
+  npm install @types/angular-material --save-dev
 </code-example>
 
 You should also configure the TypeScript compiler with a `tsconfig.json` in the project directory

aio/content/marketing/docs.md

@@ -1,16 +1,16 @@
 <h1 class="no-toc">Introduction to the Angular Docs</h1>
 
+Angular is an app-design framework and development platform for creating efficient and sophisticated single-page apps.
 
-
-These Angular docs help you learn and use the Angular platform and framework, from your first app to optimizing complex enterprise apps. 
-Tutorials and guides include downloadable example to accelerate your projects. 
+These Angular docs help you learn and use the Angular framework and development platform, from your first app to optimizing complex single-page apps for enterprises.
+Tutorials and guides include downloadable examples to accelerate your projects.
 
 
 <div class="card-container">
   <a href="start" class="docs-card" title="Angular Getting Started">
       <section>Learn</section>
-      <p>Create your first Angular app, without any setup</p>
-      <p class="card-footer">Getting Started</p> 
+      <p>Play with and extend a small ready-made Angular app, without any setup</p>
+      <p class="card-footer">Getting Started</p>
   </a>
   <a href="guide/setup-local" class="docs-card"
     title="Angular Local Environment Setup">
@@ -18,10 +18,10 @@ Tutorials and guides include downloadable example to accelerate your projects.
       <p>Set up your local environment with the Angular CLI</p>
       <p class="card-footer">Local Setup</p>
   </a>
-  <a href="guide/architecture" class="docs-card" title="Angular Architecture">
+  <a href="guide/architecture" class="docs-card" title="Angular App Architecture">
       <section>Explore</section>
-      <p>Learn more about Angular apps and framework features</p>
-      <p class="card-footer">Architecture</p>
+      <p>Learn about the fundamental design concepts and architecture of Angular apps</p>
+      <p class="card-footer">Introduction to Angular concepts</p>
   </a>
 </div>
 
@@ -29,13 +29,13 @@ Tutorials and guides include downloadable example to accelerate your projects.
 ## Assumptions
 
 
-These docs assume that you are already familiar with [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Learn HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Learn CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), 
-and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). 
-The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). 
+These docs assume that you are already familiar with [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Learn HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Learn CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"),
+and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules").
+The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript").
 Most Angular code can be written with just the latest JavaScript, using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
 
 
-## Feedback 
+## Feedback
 
 <h4>You can sit with us!</h4>
 
@@ -45,8 +45,7 @@ Contribute to Angular docs by creating
 [pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests")
 on the Angular Github repository.
 See [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide")
-for information about submission guidelines.  
+for information about submission guidelines.
 
 Our community values respectful, supportive communication.
 Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct").
-

aio/content/marketing/resources.json

@@ -483,10 +483,10 @@
             "url": "https://angular.carbondesignsystem.com/"
           },
           "jigsaw": {
-            "desc": "Jigsaw provides a set of web components based on Angular. It is supporting the development of all applications of Big Data Product of ZTE (http://www.zte.com.cn).",
+            "desc": "Jigsaw provides a set of web components based on Angular. It is supporting the development of all applications of Big Data Product of ZTE (https://www.zte.com.cn).",
             "rev": true,
             "title": "Awade Jigsaw (Chinese)",
-            "url": "http://rdk.zte.com.cn/components"
+            "url": "https://jigsaw-zte.gitee.io"
           }
         }
       }

aio/content/navigation.json

@@ -97,6 +97,37 @@
       "title": "Fundamentals",
       "tooltip": "The fundamentals of Angular",
       "children": [
+        {
+          "title": "Angular Concepts",
+          "tooltip": "Introduction to basic concepts for Angular applications.",
+          "children": [
+            {
+              "url": "guide/architecture",
+              "title": "Intro to Basic Concepts",
+              "tooltip": "Basic building blocks of Angular applications."
+            },
+            {
+              "url": "guide/architecture-modules",
+              "title": "Intro to Modules",
+              "tooltip": "About NgModules."
+            },
+            {
+              "url": "guide/architecture-components",
+              "title": "Intro to Components",
+              "tooltip": "About Components, Templates, and Views."
+            },
+            {
+              "url": "guide/architecture-services",
+              "title": "Intro to Services and DI",
+              "tooltip": "About services and dependency injection."
+            },
+            {
+              "url": "guide/architecture-next-steps",
+              "title": "Next Steps",
+              "tooltip": "Beyond the basics."
+            }
+          ]
+        },
         {
           "title": "Tour of Heroes App",
           "tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.",
@@ -104,17 +135,17 @@
           {
             "url": "tutorial",
             "title": "Introduction",
-            "tooltip": "Introduction to the Tour of Heroes tutorial"
+            "tooltip": "Introduction to the Tour of Heroes app and tutorial"
           },
           {
             "url": "tutorial/toh-pt0",
-            "title": "The Application Shell",
+            "title": "Create a Project",
             "tooltip": "Creating the application shell"
           },
           {
             "url": "tutorial/toh-pt1",
             "title": "1. The Hero Editor",
-            "tooltip": "Part 1: Build a simple hero editor"
+            "tooltip": "Part 1: Build a simple editor"
           },
           {
             "url": "tutorial/toh-pt2",
@@ -143,37 +174,6 @@
           }
           ]
         },
-        {
-          "title": "Architecture",
-          "tooltip": "The basic building blocks of Angular applications.",
-          "children": [
-            {
-              "url": "guide/architecture",
-              "title": "Architecture Overview",
-              "tooltip": "Basic building blocks of Angular applications."
-            },
-            {
-              "url": "guide/architecture-modules",
-              "title": "Intro to Modules",
-              "tooltip": "About NgModules."
-            },
-            {
-              "url": "guide/architecture-components",
-              "title": "Intro to Components",
-              "tooltip": "About Components, Templates, and Views."
-            },
-            {
-              "url": "guide/architecture-services",
-              "title": "Intro to Services and DI",
-              "tooltip": "About services and dependency injection."
-            },
-            {
-              "url": "guide/architecture-next-steps",
-              "title": "Next Steps",
-              "tooltip": "Beyond the basics."
-            }
-          ]
-        },
         {
           "title": "Components & Templates",
           "tooltip": "Building dynamic views with data binding",
@@ -297,11 +297,6 @@
             }
           ]
         },
-        {
-          "url": "guide/bootstrapping",
-          "title": "Bootstrapping",
-          "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
-        },
         {
           "title": "NgModules",
           "tooltip": "NgModules.",
@@ -316,6 +311,11 @@
               "title": "JS Modules vs NgModules",
               "tooltip": "Differentiate between JavaScript modules and NgModules."
             },
+            {
+              "url": "guide/bootstrapping",
+              "title": "App Root NgModule",
+              "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
+            },
             {
               "url": "guide/frequent-ngmodules",
               "title": "Frequently Used NgModules",
@@ -594,23 +594,23 @@
           "hidden": true
         },
         {
-          "title": "AoT Compiler",
+          "title": "AOT Compiler",
           "tooltip": "Understanding ahead-of-time compilation.",
           "children": [
             {
               "url": "guide/aot-compiler",
               "title": "Ahead-of-Time Compilation",
-              "tooltip": "Learn why and how to use the Ahead-of-Time (AoT) compiler."
+              "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
             },
             {
               "url": "guide/angular-compiler-options",
               "title": "Angular Compiler Options",
-              "tooltip": "Configuring AoT compilation."
+              "tooltip": "Configuring AOT compilation."
            },
            {
               "url": "guide/aot-metadata-errors",
-              "title": "AoT Metadata Errors",
-              "tooltip": "Troubleshooting AoT compilation."
+              "title": "AOT Metadata Errors",
+              "tooltip": "Troubleshooting AOT compilation."
            },
            {
             "url": "guide/template-typecheck",
@@ -872,6 +872,10 @@
     }
   ],
   "docVersions": [
+    {
+      "title": "v8",
+      "url": "https://v8.angular.io/"
+    },
     {
       "title": "v7",
       "url": "https://v7.angular.io/"

aio/content/start/data.md

@@ -33,8 +33,6 @@ Later, the [Forms](start/forms "Getting Started: Forms") part of
 this tutorial guides you through accessing this cart service
 from the page where the user checks out.
 
-Later, the [Forms](start/forms "Getting Started: Forms") part of this tutorial guides you through accessing this cart service from the page where the user checks out.
-
 </div>
 
 {@a generate-cart-service}
@@ -236,7 +234,7 @@ This section shows you how to use the HTTP client to retrieve shipping prices fr
 
 ### Predefined shipping data
 
-The app StackBlitz generates for this guide comes with predefined shipping data in `assets/shipping.json`.
+The application that StackBlitz generates for this guide comes with predefined shipping data in `assets/shipping.json`.
 Use this data to add shipping prices for items in the cart.
 
 <code-example header="src/assets/shipping.json" path="getting-started/src/assets/shipping.json">
@@ -316,7 +314,7 @@ Now that your app can retrieve shipping data, create a shipping component and  t
 
     There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies. The URL has the pattern: `https://getting-started.stackblitz.io/shipping` where the `getting-started.stackblitz.io` part may be different for your StackBlitz project.
 
-1. Modify the shipping component so it uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
+1. Modify the shipping component so that it uses the cart service to retrieve shipping data via HTTP from the `shipping.json` file.
 
     1. Import the cart service.
 

aio/content/start/deployment.md

@@ -66,13 +66,13 @@ One of the easiest ways to get your site live is to host it using Firebase.
 
 1. Sign up for a firebase account on [Firebase](https://firebase.google.com/ "Firebase web site").
 1. Create a new project, giving it any name you like.
-1. Install the `firebase-tools` CLI that will handle your deployment using `npm install -g firebase-tools`.
+1. Add the `@angular/fire` schematics that will handle your deployment using `ng add @angular/fire`.
 1. Connect your CLI to your Firebase account and initialize the connection to your project using `firebase login` and `firebase init`.
 1. Follow the prompts to select the `Firebase` project you are creating for hosting.
-  - Select the `Hosting` option on the first prompt.
-  - Select the project you previously created on Firebase.
-  - Select `dist/my-project-name` as the public directory.
-1. Deploy your application with `firebase deploy`, because the command `firebase init` has created a `firebase.json` file that tells Firebase how to serve your app.
+    - Select the `Hosting` option on the first prompt.
+    - Select the project you previously created on Firebase.
+    - Select `dist/my-project-name` as the public directory.
+1. Deploy your application with `ng deploy`.
 1. Once deployed, visit https://your-firebase-project-name.firebaseapp.com to see it live!
 
 ### Hosting an Angular app anywhere else

aio/content/start/forms.md

@@ -40,7 +40,7 @@ of the constructor.
 
 1. For the checkout process, users need to submit their name and address. When they submit their order, the form should reset and the cart should clear.
 
-    1. In `cart.component.ts`, define an `onSubmit()` method to process the form. Use the `CartService` `clearCart()` method to empty the cart items and reset the form after it is submission. In a real-world app, this method would also submit the data to an external server. The entire cart component class is as follows:
+    1. In `cart.component.ts`, define an `onSubmit()` method to process the form. Use the `CartService` `clearCart()` method to empty the cart items and reset the form after its submission. In a real-world app, this method would also submit the data to an external server. The entire cart component class is as follows:
 
     <code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.ts">
     </code-example>

aio/content/start/index.md

@@ -92,7 +92,7 @@ To help you get going, the following steps use predefined product data from the
 
       <div class="alert is-helpful">
 
-      `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an asterisk, `*`, is a structural directive.
+      `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Directives with an asterisk, `*`, are structural directives.
 
       </div>
 

aio/content/tutorial/toh-pt4.md

@@ -1,4 +1,4 @@
-# Create services
+# Add services
 
 The Tour of Heroes `HeroesComponent` is currently getting and displaying fake data.
 
@@ -122,7 +122,7 @@ Replace the definition of the `heroes` property with a simple declaration.
 
 Add a private `heroService` parameter of type `HeroService` to the constructor.
 
-<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="ctor">
+<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" header="src/app/heroes/heroes.component.ts" region="ctor">
 </code-example>
 
 The parameter simultaneously defines a private `heroService` property and identifies it as a `HeroService` injection site.

aio/content/tutorial/toh-pt5.md

@@ -1,4 +1,4 @@
-# Add in-app navigation (routing)
+# Add in-app navigation with routing
 
 There are new requirements for the Tour of Heroes app:
 

aio/karma.conf.js

@@ -1,5 +1,6 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
+process.env.CHROME_BIN = require('puppeteer').executablePath();
 
 module.exports = function (config) {
   config.set({
@@ -30,7 +31,14 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        // See /integration/README.md#browser-tests for more info on these args
+        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+      },
+    },
+    browsers: ['ChromeHeadlessNoSandbox'],
     browserNoActivityTimeout: 60000,
     singleRun: false,
     restartOnFileChange: true,

aio/package.json

@@ -72,7 +72,7 @@
     "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz",
     "generate-zips": "node ./tools/example-zipper/generateZips",
     "build-404-page": "node scripts/build-404-page",
-    "update-webdriver": "webdriver-manager update --standalone false --gecko false $CI_CHROMEDRIVER_VERSION_ARG",
+    "update-webdriver": "node ../scripts/webdriver-manager-update.js",
     "~~audit-web-app": "node scripts/audit-web-app",
     "~~check-env": "node scripts/check-environment",
     "~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
@@ -87,28 +87,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "9.0.0-rc.11",
-    "@angular/cdk": "9.0.0-rc.8",
-    "@angular/common": "9.0.0-rc.11",
-    "@angular/compiler": "9.0.0-rc.11",
-    "@angular/core": "9.0.0-rc.11",
-    "@angular/elements": "9.0.0-rc.11",
-    "@angular/forms": "9.0.0-rc.11",
-    "@angular/material": "9.0.0-rc.8",
-    "@angular/platform-browser": "9.0.0-rc.11",
-    "@angular/platform-browser-dynamic": "9.0.0-rc.11",
-    "@angular/router": "9.0.0-rc.11",
-    "@angular/service-worker": "9.0.0-rc.11",
-    "@webcomponents/custom-elements": "^1.2.0",
+    "@angular/animations": "9.0.0",
+    "@angular/cdk": "^9.0.0",
+    "@angular/common": "9.0.0",
+    "@angular/compiler": "9.0.0",
+    "@angular/core": "9.0.0",
+    "@angular/elements": "9.0.0",
+    "@angular/forms": "9.0.0",
+    "@angular/material": "^9.0.0",
+    "@angular/platform-browser": "9.0.0",
+    "@angular/platform-browser-dynamic": "9.0.0",
+    "@angular/router": "9.0.0",
+    "@angular/service-worker": "9.0.0",
+    "@webcomponents/custom-elements": "1.2.1",
     "rxjs": "^6.5.3",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.900.0-rc.11",
-    "@angular/cli": "9.0.0-rc.11",
-    "@angular/compiler-cli": "9.0.0-rc.11",
-    "@angular/language-service": "9.0.0-rc.11",
+    "@angular-devkit/build-angular": "0.900.1",
+    "@angular/cli": "9.0.1",
+    "@angular/compiler-cli": "9.0.0",
+    "@angular/language-service": "9.0.0",
     "@types/jasmine": "^3.4.2",
     "@types/jasminewd2": "^2.0.8",
     "@types/lunr": "^2.3.2",
@@ -118,13 +118,12 @@
     "archiver": "^1.3.0",
     "canonical-path": "1.0.0",
     "chalk": "^2.1.0",
-    "chrome-launcher": "^0.10.7",
     "cjson": "^0.5.0",
     "codelyzer": "^5.1.2",
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.11",
-    "dgeni-packages": "^0.27.5",
+    "dgeni-packages": "^0.28.3",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
@@ -155,6 +154,7 @@
     "lunr": "^2.1.0",
     "npm-run-all": "^4.1.5",
     "protractor": "^5.4.2",
+    "puppeteer": "2.1.1",
     "rehype": "^6.0.0",
     "rehype-slug": "^2.0.0",
     "remark": "^9.0.0",

aio/scripts/_payload-limits.json

@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 455897,
+        "main-es2015": 449223,
         "polyfills-es2015": 52195
       }
     }
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 448928,
+        "main-es2015": 450017,
         "polyfills-es2015": 52195
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 426513,
+        "main-es2015": 426533,
         "polyfills-es2015": 52195
       }
     }

aio/scripts/audit-web-app.js

@@ -27,14 +27,13 @@
  */
 
 // Imports
-const chromeLauncher = require('chrome-launcher');
 const lighthouse = require('lighthouse');
 const printer = require('lighthouse/lighthouse-cli/printer');
 const logger = require('lighthouse-logger');
+const puppeteer = require('puppeteer');
 
 // Constants
 const AUDIT_CATEGORIES = ['accessibility', 'best-practices', 'performance', 'pwa', 'seo'];
-const CHROME_LAUNCH_OPTS = {chromeFlags: ['--headless']};
 const LIGHTHOUSE_FLAGS = {logLevel: process.env.CI ? 'error' : 'info'};  // Be less verbose on CI.
 const SKIPPED_HTTPS_AUDITS = ['redirects-http', 'uses-http2'];
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer';
@@ -84,13 +83,13 @@ function formatScore(score) {
 }
 
 async function launchChromeAndRunLighthouse(url, flags, config) {
-  const chrome = await chromeLauncher.launch(CHROME_LAUNCH_OPTS);
-  flags.port = chrome.port;
+  const browser = await puppeteer.launch();
+  flags.port = (new URL(browser.wsEndpoint())).port;
 
   try {
     return await lighthouse(url, flags, config);
   } finally {
-    await chrome.kill();
+    await browser.close();
   }
 }
 

aio/src/app/app.component.spec.ts

@@ -1,35 +1,32 @@
-import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
-import { inject, ComponentFixture, TestBed, fakeAsync, flushMicrotasks, tick } from '@angular/core/testing';
-import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, flushMicrotasks, inject, TestBed, tick } from '@angular/core/testing';
 import { MatProgressBar } from '@angular/material/progress-bar';
 import { MatSidenav } from '@angular/material/sidenav';
-import { By } from '@angular/platform-browser';
-
-import { Subject, of, timer } from 'rxjs';
-import { first, mapTo } from 'rxjs/operators';
-
-import { AppComponent } from './app.component';
-import { AppModule } from './app.module';
-import { CurrentNodes } from 'app/navigation/navigation.model';
+import { By, Title } from '@angular/platform-browser';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
 import { DocumentService } from 'app/documents/document.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { CurrentNodes } from 'app/navigation/navigation.model';
+import { NavigationNode, NavigationService } from 'app/navigation/navigation.service';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchService } from 'app/search/search.service';
 import { Deployment } from 'app/shared/deployment.service';
-import { ElementsLoader } from 'app/custom-elements/elements-loader';
 import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
+import { ScrollService } from 'app/shared/scroll.service';
+import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
+import { SelectComponent } from 'app/shared/select/select.component';
+import { TocItem, TocService } from 'app/shared/toc.service';
+import { of, Subject, timer } from 'rxjs';
+import { first, mapTo } from 'rxjs/operators';
 import { MockLocationService } from 'testing/location.service';
 import { MockLogger } from 'testing/logger.service';
 import { MockSearchService } from 'testing/search.service';
-import { NavigationNode, NavigationService } from 'app/navigation/navigation.service';
-import { ScrollService } from 'app/shared/scroll.service';
-import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
-import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
-import { SearchService } from 'app/search/search.service';
-import { SelectComponent } from 'app/shared/select/select.component';
-import { TocItem, TocService } from 'app/shared/toc.service';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
 const sideBySideBreakPoint = 992;
 const hideToCBreakPoint = 800;
@@ -405,10 +402,12 @@ describe('AppComponent', () => {
       // Older docs versions have an href
       it('should navigate when change to a version with a url', async () => {
         await setupSelectorForTesting();
+        locationService.urlSubject.next('new-page?id=1#section-1');
         const versionWithUrlIndex = component.docVersions.findIndex(v => !!v.url);
         const versionWithUrl = component.docVersions[versionWithUrlIndex];
+        const versionWithUrlAndPage = `${versionWithUrl.url}new-page?id=1#section-1`;
         selectElement.triggerEventHandler('change', { option: versionWithUrl, index: versionWithUrlIndex});
-        expect(locationService.go).toHaveBeenCalledWith(versionWithUrl.url);
+        expect(locationService.go).toHaveBeenCalledWith(versionWithUrlAndPage);
       });
 
       it('should not navigate when change to a version without a url', async () => {

aio/src/app/app.component.ts

@@ -1,18 +1,15 @@
-import { Component, ElementRef, HostBinding, HostListener, OnInit,
-         QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
-
-import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
-import { DocumentService, DocumentContents } from 'app/documents/document.service';
+import { DocumentContents, DocumentService } from 'app/documents/document.service';
+import { NotificationComponent } from 'app/layout/notification/notification.component';
+import { CurrentNodes, NavigationNode, NavigationService, VersionInfo } from 'app/navigation/navigation.service';
+import { SearchResults } from 'app/search/interfaces';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { SearchService } from 'app/search/search.service';
 import { Deployment } from 'app/shared/deployment.service';
 import { LocationService } from 'app/shared/location.service';
-import { NotificationComponent } from 'app/layout/notification/notification.component';
 import { ScrollService } from 'app/shared/scroll.service';
-import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
-import { SearchResults } from 'app/search/interfaces';
-import { SearchService } from 'app/search/search.service';
 import { TocService } from 'app/shared/toc.service';
-
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 
@@ -77,6 +74,8 @@ export class AppComponent implements OnInit {
 
   versionInfo: VersionInfo;
 
+  private currentUrl: string;
+
   get isOpened() { return this.isSideBySide && this.isSideNavDoc; }
   get mode() { return this.isSideBySide ? 'side' : 'over'; }
 
@@ -148,27 +147,27 @@ export class AppComponent implements OnInit {
       this.navigationService.versionInfo,
       this.navigationService.navigationViews.pipe(map(views => views['docVersions'])),
     ]).subscribe(([versionInfo, versions]) => {
-        // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
-        const computedVersions: NavigationNode[] = [
-          { title: 'next', url: 'https://next.angular.io' },
-          { title: 'stable', url: 'https://angular.io' },
-        ];
-        if (this.deployment.mode === 'archive') {
-          computedVersions.push({ title: `v${versionInfo.major}` });
-        }
-        this.docVersions = [...computedVersions, ...versions];
+      // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
+      const computedVersions: NavigationNode[] = [
+        { title: 'next', url: 'https://next.angular.io' },
+        { title: 'stable', url: 'https://angular.io' },
+      ];
+      if (this.deployment.mode === 'archive') {
+        computedVersions.push({ title: `v${versionInfo.major}` });
+      }
+      this.docVersions = [...computedVersions, ...versions];
 
-        // Find the current version - eithers title matches the current deployment mode
-        // or its title matches the major version of the current version info
-        this.currentDocVersion = this.docVersions.find(version =>
-          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`)!;
-        this.currentDocVersion.title += ` (v${versionInfo.raw})`;
-      });
+      // Find the current version - eithers title matches the current deployment mode
+      // or its title matches the major version of the current version info
+      this.currentDocVersion = this.docVersions.find(version =>
+        version.title === this.deployment.mode || version.title === `v${versionInfo.major}`)!;
+      this.currentDocVersion.title += ` (v${versionInfo.raw})`;
+    });
 
     this.navigationService.navigationViews.subscribe(views => {
-      this.footerNodes  = views['Footer']  || [];
+      this.footerNodes = views['Footer'] || [];
       this.sideNavNodes = views['SideNav'] || [];
-      this.topMenuNodes = views['TopBar']  || [];
+      this.topMenuNodes = views['TopBar'] || [];
       this.topMenuNarrowNodes = views['TopBarNarrow'] || this.topMenuNodes;
     });
 
@@ -188,6 +187,8 @@ export class AppComponent implements OnInit {
       this.navigationService.currentNodes,   // ...needed to determine `sidenav` state
     ]).pipe(first())
       .subscribe(() => this.updateShell());
+
+    this.locationService.currentUrl.subscribe(url => this.currentUrl = url);
   }
 
   onDocReady() {
@@ -231,7 +232,7 @@ export class AppComponent implements OnInit {
   onDocVersionChange(versionIndex: number) {
     const version = this.docVersions[versionIndex];
     if (version.url) {
-      this.locationService.go(version.url);
+      this.locationService.go(`${version.url}${this.currentUrl}`);
     }
   }
 
@@ -263,7 +264,7 @@ export class AppComponent implements OnInit {
     }
 
     // Deal with anchor clicks; climb DOM tree until anchor found (or null)
-    let target: HTMLElement|null = eventTarget;
+    let target: HTMLElement | null = eventTarget;
     while (target && !(target instanceof HTMLAnchorElement)) {
       target = target.parentElement;
     }
@@ -406,7 +407,7 @@ export class AppComponent implements OnInit {
     if (key === '/' || keyCode === 191) {
       this.focusSearchBox();
     }
-    if (key === 'Escape' || keyCode === 27 ) {
+    if (key === 'Escape' || keyCode === 27) {
       // escape key
       if (this.showSearchResults) {
         this.hideSearchResults();

aio/src/app/custom-elements/api/api-list.component.ts

@@ -57,6 +57,7 @@ export class ApiListComponent implements OnInit {
 
   statuses: Option[] = [
     { value: 'all', title: 'All' },
+    { value: 'stable', title: 'Stable'},
     { value: 'deprecated', title: 'Deprecated' },
     { value: 'security-risk', title: 'Security Risk' }
   ];

aio/src/app/custom-elements/resource/resource-list.component.html

@@ -1,28 +1,28 @@
 <div class="resources-container">
-    <div class="l-flex--column">
-      <div class="showcase" *ngFor="let category of categories">
-        <header class="c-resource-header">
-          <a class="h-anchor-offset" id="{{category.id}}"></a>
-          <h2>{{category.title}}</h2>
-        </header>
+  <div class="flex-center group-buttons">
+    <a *ngFor="let category of categories"
+      [class.selected]="category.id == selectedCategory.id"
+      class="button mat-button filter-button"
+      (click)="selectCategory(category.id)"
+      (keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
+  </div>
+  <div class="l-flex--column align-items-center">
+    <div class="shadow-1 showcase">
+      <div *ngFor="let subCategory of selectedCategory?.subCategories">
+        <a class="h-anchor-offset" id="{{subCategory.id}}"></a>
+        <h3 class="subcategory-title">{{subCategory.title}}</h3>
 
-        <div class="shadow-1">
-          <div *ngFor="let subCategory of category.subCategories">
-            <a class="h-anchor-offset" id="{{subCategory.id}}"></a>
-            <h3 class="subcategory-title">{{subCategory.title}}</h3>
-
-            <div *ngFor="let resource of subCategory.resources">
-              <div class="c-resource" *ngIf="resource.rev">
-                <a class="l-flex--column resource-row-link" target="_blank" [href]="resource.url">
-                  <div>
-                    <h4>{{resource.title}}</h4>
-                    <p class="resource-description">{{resource.desc || 'No Description'}}</p>
-                  </div>
-                </a>
+        <div *ngFor="let resource of subCategory.resources">
+          <div class="c-resource" *ngIf="resource.rev">
+            <a class="l-flex--column resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
+              <div>
+                <h4>{{resource.title}}</h4>
+                <p class="resource-description">{{resource.desc || 'No Description'}}</p>
               </div>
-            </div>
+            </a>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </div>

aio/src/app/custom-elements/resource/resource-list.component.spec.ts

@@ -1,78 +1,115 @@
 import { ReflectiveInjector } from '@angular/core';
-import { PlatformLocation } from '@angular/common';
 
 import { of } from 'rxjs';
 
 import { ResourceListComponent } from './resource-list.component';
 import { ResourceService } from './resource.service';
-
+import { LocationService } from 'app/shared/location.service';
 import { Category } from './resource.model';
 
 // Testing the component class behaviors, independent of its template
 // Let e2e tests verify how it displays.
 describe('ResourceListComponent', () => {
 
+  let component: ResourceListComponent;
   let injector: ReflectiveInjector;
-  let location: TestPlatformLocation;
+  let resourceService: TestResourceService;
+  let locationService: TestLocationService;
+  let categories: Category[];
 
   beforeEach(() => {
     injector = ReflectiveInjector.resolveAndCreate([
       ResourceListComponent,
-      {provide: PlatformLocation, useClass: TestPlatformLocation },
-      {provide: ResourceService, useClass: TestResourceService }
+      {provide: ResourceService, useClass: TestResourceService },
+      {provide: LocationService, useClass: TestLocationService }
     ]);
 
-    location = injector.get(PlatformLocation);
+    locationService = injector.get(LocationService);
+    resourceService = injector.get(ResourceService);
+    categories = resourceService.testCategories;
   });
 
-  it('should set the location w/o leading slashes', () => {
-    location.pathname = '////resources';
-    const component = getComponent();
-    expect(component.location).toBe('resources');
+  it('should select the first category when no query string', () => {
+    component = getComponent();
+    expect(component.selectedCategory).toBe(categories[0]);
   });
 
-  it('href(id) should return the expected href', () => {
-    location.pathname = '////resources';
-    const component = getComponent();
-    expect(component.href({id: 'foo'})).toBe('resources#foo');
+  it('should select the first category when query string w/o "category" property', () => {
+    locationService.searchResult = { foo: 'development' };
+    component = getComponent();
+    expect(component.selectedCategory).toBe(categories[0]);
   });
 
-  it('should set scroll position to zero when no target element', () => {
-    const component = getComponent();
-    component.onScroll(undefined);
-    expect(component.scrollPos).toBe(0);
+  it('should select the first category when query category not found', () => {
+    locationService.searchResult = { category: 'foo' };
+    component = getComponent();
+    expect(component.selectedCategory).toBe(categories[0]);
   });
 
-  it('should set scroll position to element.scrollTop when that is defined', () => {
-    const component = getComponent();
-    component.onScroll({scrollTop: 42});
-    expect(component.scrollPos).toBe(42);
+  it('should select the education category when query category is "education"', () => {
+    locationService.searchResult = { category: 'education' };
+    component = getComponent();
+    expect(component.selectedCategory).toBe(categories[1]);
   });
 
-  it('should set scroll position to element.body.scrollTop when that is defined', () => {
-    const component = getComponent();
-    component.onScroll({body: {scrollTop: 42}});
-    expect(component.scrollPos).toBe(42);
+  it('should select the education category when query category is "EDUCATION" (case insensitive)', () => {
+    locationService.searchResult = { category: 'EDUCATION' };
+    component = getComponent();
+    expect(component.selectedCategory).toBe(categories[1]);
   });
 
-  it('should set scroll position to 0 when no target.body.scrollTop defined', () => {
-    const component = getComponent();
-    component.onScroll({body: {}});
-    expect(component.scrollPos).toBe(0);
+  it('should set the query to the "education" category when user selects "education"', () => {
+    component = getComponent();
+    component.selectCategory('education');
+    expect(locationService.searchResult['category']).toBe('education');
+  });
+
+  it('should set the query to the first category when user selects unknown name', () => {
+    component = getComponent();
+    component.selectCategory('education'); // a legit group that isn't the first
+
+    component.selectCategory('foo'); // not a legit group name
+    expect(locationService.searchResult['category']).toBe('development');
   });
 
   //// Test Helpers ////
-  function  getComponent(): ResourceListComponent { return injector.get(ResourceListComponent); }
-
-  class TestPlatformLocation {
-    pathname = 'resources';
+  function  getComponent(): ResourceListComponent {
+    const comp = injector.get(ResourceListComponent);
+    comp.ngOnInit();
+    return comp;
   }
 
   class TestResourceService {
-    categories = of(getTestData);
+    testCategories = getTestData();
+    categories = of(this.testCategories);
+  }
+
+  interface SearchResult { [index: string]: string; }
+
+  class TestLocationService {
+    searchResult: SearchResult = {};
+    search = jasmine.createSpy('search').and.callFake(() => this.searchResult);
+    setSearch = jasmine.createSpy('setSearch')
+      .and.callFake((_label: string, result: SearchResult) => {
+        this.searchResult = result;
+      });
   }
 
   function getTestData(): Category[] {
-    return []; // Not interested in the data in these tests
+    return [
+      // Not interested in the sub-categories data in these tests
+      {
+        id: 'development',
+        title: 'Development',
+        order: 0,
+        subCategories: []
+      },
+      {
+        id: 'education',
+        title: 'Education',
+        order: 1,
+        subCategories: []
+      },
+    ];
   }
 });

aio/src/app/custom-elements/resource/resource-list.component.ts

@@ -1,8 +1,8 @@
-import { Component, HostListener, OnInit } from '@angular/core';
-import { PlatformLocation } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 
 import { Category } from './resource.model';
 import { ResourceService } from './resource.service';
+import { LocationService } from 'app/shared/location.service';
 
 /* tslint:disable:template-accessibility-elements-content */
 @Component({
@@ -12,27 +12,27 @@ import { ResourceService } from './resource.service';
 export class ResourceListComponent implements OnInit {
 
   categories: Category[];
-  location: string;
-  scrollPos = 0;
+  selectedCategory: Category;
 
   constructor(
-    location: PlatformLocation,
-    private resourceService: ResourceService) {
-    this.location = location.pathname.replace(/^\/+/, '');
-  }
-
-  href(cat: {id: string}) {
-    return this.location + '#' + cat.id;
+    private resourceService: ResourceService,
+    private locationService: LocationService) {
   }
 
   ngOnInit() {
+    const category =  this.locationService.search()['category'] || '';
     // Not using async pipe because cats appear twice in template
     // No need to unsubscribe because categories observable completes.
-    this.resourceService.categories.subscribe(cats => this.categories = cats);
+    this.resourceService.categories.subscribe(cats => {
+      this.categories = cats;
+      this.selectCategory(category);
+    });
   }
 
-  @HostListener('window:scroll', ['$event.target'])
-  onScroll(target: any) {
-    this.scrollPos = target ? target.scrollTop || target.body.scrollTop ||  0 : 0;
+  selectCategory(id: string) {
+    id = id.toLowerCase();
+    this.selectedCategory =
+      this.categories.find(category => category.id.toLowerCase() === id) || this.categories[0];
+    this.locationService.setSearch('', {category: this.selectedCategory.id});
   }
 }

aio/src/index.html

@@ -20,9 +20,9 @@
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png">
 
   <!-- NOTE: These need to be kept in sync with `ngsw-config.json`. -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
   <!-- -->
 
   <link rel="manifest" href="pwa-manifest.json">

aio/src/styles/1-layouts/_footer.scss

@@ -40,7 +40,7 @@ footer {
     @include font-size(16);
     text-transform: uppercase;
     font-weight: 400;
-    margin: 0 0 16px;
+    margin: 8px 0 12px;
     color: $white;
   }
   p {
@@ -69,7 +69,7 @@ footer {
 
       li {
         list-style-type: none;
-        padding: 0px;
+        padding: 4px 0;
         text-align: left;
       }
     }

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -97,7 +97,6 @@ section#intro {
 
   .hero-logo {
     display: flex;
-    width: 400px;
 
     @media (max-width: 780px) {
       justify-content: center;

aio/src/styles/2-modules/_resources.scss

@@ -169,6 +169,10 @@ aio-resource-list {
     flex-direction: column;
   }
 
+  .align-items-center{
+    align-items: center;
+  }
+
   .c-resource-header {
     margin-bottom: 16px;
   }

aio/src/styles/2-modules/_search-results.scss

@@ -6,7 +6,8 @@ aio-search-results {
     flex-direction: row;
     justify-content: space-around;
     overflow: auto;
-    padding: 68px 32px 0;
+    padding: 0px 32px;
+    border-top: 68px solid transparent;
     width: auto;
     max-height: 95vh;
     position: fixed;

aio/src/styles/2-modules/_table.scss

@@ -113,3 +113,9 @@ table {
     }
   }
 }
+
+.events-container {
+  tr > td, tr > th {
+    width: 33%;
+  }
+}

aio/tests/deployment/e2e/protractor.conf.js

@@ -14,6 +14,11 @@ exports.config = {
   suite: 'full',
   capabilities: {
     browserName: 'chrome',
+    chromeOptions: {
+      binary: require('puppeteer').executablePath(),
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
   },
   directConnect: true,
   framework: 'jasmine',

aio/tests/e2e/protractor.conf.js

@@ -14,6 +14,11 @@ exports.config = {
   ],
   capabilities: {
     browserName: 'chrome',
+    chromeOptions: {
+      binary: require('puppeteer').executablePath(),
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',

aio/tools/example-zipper/exampleZipper.js

@@ -112,7 +112,8 @@ class ExampleZipper {
       '!**/npm-debug.log',
       '!**/example-config.json',
       '!**/wallaby.js',
-      // AoT related files
+      '!e2e/protractor-puppeteer.conf.js',
+      // AOT related files
       '!**/aot/**/*.*',
       '!**/*-aot.*'
     ];

aio/tools/examples/example-boilerplate.js

@@ -15,8 +15,9 @@ const BOILERPLATE_PATHS = {
     'src/environments/environment.prod.ts', 'src/environments/environment.ts',
     'src/assets/.gitkeep', 'browserslist', 'src/favicon.ico', 'karma.conf.js',
     'src/polyfills.ts', 'src/test.ts', 'tsconfig.app.json', 'tsconfig.spec.json',
-    'tslint.json', 'e2e/src/app.po.ts', 'e2e/protractor.conf.js', 'e2e/tsconfig.json',
-    '.editorconfig', 'angular.json', 'package.json', 'tsconfig.json', 'tslint.json'
+    'tslint.json', 'e2e/src/app.po.ts', 'e2e/protractor-puppeteer.conf.js',
+    'e2e/protractor.conf.js', 'e2e/tsconfig.json', '.editorconfig', 'angular.json', 'package.json',
+    'tsconfig.json', 'tslint.json'
   ],
   systemjs: [
     'src/systemjs-angular-loader.js', 'src/systemjs.config.js', 'src/tsconfig.json',

aio/tools/examples/example-boilerplate.spec.js

@@ -10,7 +10,7 @@ describe('example-boilerplate tool', () => {
     const sharedDir = path.resolve(__dirname, 'shared');
     const sharedNodeModulesDir = path.resolve(sharedDir, 'node_modules');
     const BPFiles = {
-      cli: 19,
+      cli: 20,
       i18n: 2,
       universal: 2,
       systemjs: 7,

aio/tools/examples/run-example-e2e.js

@@ -262,7 +262,13 @@ function runE2eTestsCLI(appDir, outputFile, bufferOutput, port) {
   const config = loadExampleConfig(appDir);
   const commands = config.e2e || [{
     cmd: 'yarn',
-    args: ['e2e', '--prod', '--no-webdriver-update', `--port=${port || DEFAULT_CLI_EXAMPLE_PORT}`]
+    args: [
+      'e2e',
+      '--prod',
+      '--protractor-config=e2e/protractor-puppeteer.conf.js',
+      '--no-webdriver-update',
+      '--port={PORT}',
+    ],
   }];
   let bufferedOutput = `\n\n============== AIO example output for: ${appDir}\n\n`;
 

aio/tools/examples/shared/boilerplate/cli/e2e/protractor-puppeteer.conf.js

@@ -0,0 +1,19 @@
+// @ts-check
+// A protractor config to use to run the tests using the Chrome version provided by `puppeteer`.
+// This is useful to ensure deterministic runs on CI and locally. This file is ignored when creating
+// StackBlitz examples and ZIP archives for each example.
+
+const {config} = require('./protractor.conf.js');
+
+exports.config = {
+  ...config,
+  capabilities: {
+    ...config.capabilities,
+    chromeOptions: {
+      ...config.capabilities.chromeOptions,
+      binary: require('puppeteer').executablePath(),
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
+  },
+};

aio/tools/examples/shared/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "http-server": "http-server",
     "protractor": "protractor",
-    "webdriver:update": "webdriver-manager update --standalone false --gecko false $CI_CHROMEDRIVER_VERSION_ARG",
+    "webdriver:update": "node ../../../../scripts/webdriver-manager-update.js",
     "preinstall": "node ../../../../tools/yarn/check-yarn.js",
     "postinstall": "yarn webdriver:update"
   },
@@ -74,6 +74,7 @@
     "lite-server": "^2.2.2",
     "lodash": "^4.16.2",
     "protractor": "^5.4.2",
+    "puppeteer": "2.1.1",
     "rimraf": "^2.5.4",
     "rollup": "^1.1.0",
     "rollup-plugin-commonjs": "^9.2.1",

aio/tools/examples/shared/protractor.config.js

@@ -20,7 +20,12 @@ exports.config = {
 
   // Capabilities to be passed to the webdriver instance.
   capabilities: {
-    'browserName': 'chrome',
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: require('puppeteer').executablePath(),
+      // See /integration/README.md#browser-tests for more info on these args
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
   },
 
   // Framework to use. Jasmine is recommended.

aio/tools/examples/shared/yarn.lock

@@ -450,6 +450,11 @@
   dependencies:
     "@types/sizzle" "*"
 
+"@types/mime-types@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/mime-types/-/mime-types-2.1.0.tgz#9ca52cda363f699c69466c2a6ccdaad913ea7a73"
+  integrity sha1-nKUs2jY/aZxpRmwqbM2q2RPqenM=
+
 "@types/mime@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
@@ -729,6 +734,11 @@ agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
   dependencies:
     es6-promisify "^5.0.0"
 
+agent-base@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
+  integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
+
 agentkeepalive@^3.4.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-3.5.2.tgz#a113924dd3fa24a0bc3b78108c450c2abee00f67"
@@ -1942,6 +1952,16 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+concat-stream@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 concat-stream@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
@@ -2239,6 +2259,13 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
+debug@4, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -2246,13 +2273,6 @@ debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -2943,6 +2963,16 @@ extglob@^2.0.2, extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-zip@^1.6.6:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
+  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
+  dependencies:
+    concat-stream "1.6.2"
+    debug "2.6.9"
+    mkdirp "0.5.1"
+    yauzl "2.4.1"
+
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -2972,6 +3002,13 @@ faye-websocket@~0.11.1:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fd-slicer@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
+  dependencies:
+    pend "~1.2.0"
+
 figgy-pudding@^3.1.0, figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -3735,6 +3772,14 @@ https-proxy-agent@^2.2.1:
     agent-base "^4.1.0"
     debug "^3.1.0"
 
+https-proxy-agent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
+  integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
+  dependencies:
+    agent-base "5"
+    debug "4"
+
 humanize-ms@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
@@ -4887,6 +4932,11 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
+mime-db@1.43.0:
+  version "1.43.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
+  integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
+
 "mime-db@>= 1.40.0 < 2":
   version "1.40.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
@@ -4906,6 +4956,13 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16,
   dependencies:
     mime-db "~1.30.0"
 
+mime-types@^2.1.25:
+  version "2.1.26"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
+  integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
+  dependencies:
+    mime-db "1.43.0"
+
 mime-types@~2.1.18, mime-types@~2.1.19:
   version "2.1.20"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.20.tgz#930cb719d571e903738520f8470911548ca2cc19"
@@ -4933,6 +4990,11 @@ mime@^1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^2.0.3:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
+  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
+
 mime@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
@@ -5039,7 +5101,7 @@ mkdirp@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
 
-mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -5804,6 +5866,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
@@ -5939,6 +6006,11 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+progress@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -6000,6 +6072,11 @@ proxy-addr@~2.0.4:
     forwarded "~0.1.2"
     ipaddr.js "1.9.0"
 
+proxy-from-env@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
+  integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=
+
 prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
@@ -6056,6 +6133,22 @@ punycode@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.0.tgz#5f863edc89b96db09074bad7947bf09056ca4e7d"
 
+puppeteer@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-2.1.1.tgz#ccde47c2a688f131883b50f2d697bd25189da27e"
+  integrity sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==
+  dependencies:
+    "@types/mime-types" "^2.1.0"
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^4.0.0"
+    mime "^2.0.3"
+    mime-types "^2.1.25"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
 q@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
@@ -8303,6 +8396,13 @@ ws@1.1.1:
     options ">=0.0.5"
     ultron "1.0.x"
 
+ws@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
+
 ws@~3.3.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
@@ -8481,6 +8581,13 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
+yauzl@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
+  dependencies:
+    fd-slicer "~1.0.1"
+
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"

browser-providers.conf.js

@@ -27,18 +27,14 @@ var CIconfiguration = {
   'IE10': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
   'IE11': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
   'Edge': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
-  'Android4.4': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
-  'Android5': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
-  'Android6': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
   'Android7': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
-  'Safari7': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
-  'Safari8': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
-  'Safari9': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
-  'Safari10': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
-  'iOS7': {unitTest: {target: 'BS', required: true}, e2e: {target: null, required: true}},
-  'iOS8': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
-  'iOS9': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}},
+  'Android8': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Android9': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Android10': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
+  'Safari12': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'Safari13': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
   'iOS10': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'iOS11': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
   'WindowsPhone': {unitTest: {target: 'BS', required: false}, e2e: {target: null, required: true}}
 };
 
@@ -98,6 +94,27 @@ var customLaunchers = {
     version: '7.1',
     device: 'Android GoogleAPI Emulator'
   },
+  'SL_ANDROID8': {
+    base: 'SauceLabs',
+    browserName: 'Chrome',
+    platform: 'Android',
+    version: '8.0',
+    device: 'Android GoogleAPI Emulator'
+  },
+  'SL_ANDROID9': {
+    base: 'SauceLabs',
+    browserName: 'Chrome',
+    platform: 'Android',
+    version: '9.0',
+    device: 'Android GoogleAPI Emulator'
+  },
+  'SL_ANDROID10': {
+    base: 'SauceLabs',
+    browserName: 'Chrome',
+    platform: 'Android',
+    version: '10.0',
+    device: 'Android GoogleAPI Emulator'
+  },
 
   'BS_CHROME': {base: 'BrowserStack', browser: 'chrome', os: 'OS X', os_version: 'Yosemite'},
   'BS_FIREFOX': {base: 'BrowserStack', browser: 'firefox', os: 'Windows', os_version: '10'},

docs/PR_REVIEW.md

@@ -41,7 +41,7 @@ cef93a51b (pr/24623_top) ci: scripts to review PRs locally
 637805a0c (pr/24623_base) docs: update `lowercase` pipe example in "AngularJS to Angular" guide (#24588)
 ```
 
-Knowing `pr/24623_top` and `pr/24623_base` makes it convenient to refer to different SHAs in PR when rebasing or reseting.
+Knowing `pr/24623_top` and `pr/24623_base` makes it convenient to refer to different SHAs in PR when rebasing or resetting.
 
 ### 2. Review PR
 

integration/README.md

@@ -64,3 +64,37 @@ $ ./integration/run_tests.sh
 
 The test runner will first re-build any stale npm packages, then `cd` into each subdirectory to
 execute the test.
+
+## Browser tests
+
+For integration tests we use the puppeteer provisioned version of Chrome. For both Karma and Protractor tests we set a number of browser testing flags. To avoid duplication, they will be listed and explained here and the code will reference this file for more information.
+
+### No Sandbox: --no-sandbox
+
+The sandbox needs to be disabled with the `--no-sandbox` flag for both Karma and Protractor tests, because it causes Chrome to crash on some environments.
+
+See: http://chromedriver.chromium.org/help/chrome-doesn-t-start
+See: https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#chrome-headless-fails-due-to-sandbox-issues
+
+### Headless: --headless
+
+So that browsers are not popping up and tearing down when running these tests we run Chrome in headless mode. The `--headless` flag puts Chrome in headless mode and a number of other flags are recommended in this mode as well:
+
+* `--headless`
+* `--disable-gpu`
+* `--disable-dev-shm-usage`
+* `--hide-scrollbars`
+* `--mute-audio`
+
+These come from the flags that puppeteer passes to chrome when it launches it in headless mode: https://github.com/puppeteer/puppeteer/blob/18f2ecdffdfc70e891750b570bfe8bea5b5ca8c2/lib/Launcher.js#L91
+
+And from the flags that the Karma `ChromeHeadless` browser passes to Chrome: https://github.com/karma-runner/karma-chrome-launcher/blob/5f70a76de87ecbb57f3f3cb556aa6a2a1a4f643f/index.js#L171
+
+#### Disable shared memory space: --disable-dev-shm-usage
+
+The `--disable-dev-shm-usage` flag disables the usage of `/dev/shm` because it causes Chrome to crash on some environments.
+
+On CircleCI, the puppeteer provisioned Chrome crashes with `CI we get Root cause: org.openqa.selenium.WebDriverException: unknown error: DevToolsActivePort file doesn't exist which resolves` without this flag.
+
+See: https://github.com/puppeteer/puppeteer/blob/v1.0.0/docs/troubleshooting.md#tips
+See: https://stackoverflow.com/questions/50642308/webdriverexception-unknown-error-devtoolsactiveport-file-doesnt-exist-while-t

integration/_payload-limits.json

@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 141000,
+        "main-es2015": 141569,
         "polyfills-es2015": 36657
       }
     }
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 16312,
+        "main-es2015": 16514,
         "polyfills-es2015": 36657
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 147082,
+        "main-es2015": 147647,
         "polyfills-es2015": 36657
       }
     }
@@ -30,7 +30,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 136250,
+        "main-es2015": 136777,
         "polyfills-es2015": 37334
       }
     }
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 246583,
+        "main-es2015": 247198,
         "polyfills-es2015": 36657,
         "5-es2015": 751
       }
@@ -49,7 +49,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 225584,
+        "main-es2015": 226144,
         "polyfills-es2015": 36657,
         "5-es2015": 779
       }
@@ -64,4 +64,4 @@
       }
     }
   }
-}
+}

integration/bazel-schematics/test.sh

@@ -53,7 +53,9 @@ function testNonBazel() {
   yarn --cwd node_modules/@angular/cli version --new-version 0.0.0 --no-git-tag-version
   # re-add build-angular
   yarn add --dev file:../../../node_modules/@angular-devkit/build-angular
-  yarn webdriver-manager update --gecko=false --standalone=false ${CI_CHROMEDRIVER_VERSION_ARG:---versions.chrome 2.45}
+  # TODO: Find a way to use the Chrome version provided by `puppeteer` as the rest of the
+  #       integration projects. See https://github.com/angular/angular/pull/35049 for details.
+  yarn webdriver-manager update --gecko=false --standalone=false --versions.chrome=79.0.3945.130;
   ng build --progress=false
   ng test --progress=false --watch=false
   ng e2e --configuration=production --webdriver-update=false