feat(compiler-cli): expose ngtsc as a TscPlugin

This lets us run ngtsc under the tsc_wrapped custom compiler (Used in Bazel)
It also allows others to simply wire ngtsc into an existing typescript compilation binary

.bazelignore

@@ -2,4 +2,3 @@ node_modules
 dist
 aio/node_modules
 aio/tools/examples/shared/node_modules
-integration/bazel

.bazelrc

@@ -22,14 +22,8 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
 # Filesystem interactions     #
 ###############################
 
-# Create symlinks in the project:
-# - dist/bin for outputs
-# - dist/testlogs, dist/genfiles
-# - bazel-out
-# NB: bazel-out should be excluded from the editor configuration.
-# The checked-in /.vscode/settings.json does this for VSCode.
-# Other editors may require manual config to ignore this directory.
-# In the past, we say a problem where VSCode traversed a massive tree, opening file handles and
+# Don't create symlinks like bazel-out in the project.
+# These cause VSCode to traverse a massive tree, opening file handles and
 # eventually a surprising failure with auto-discovery of the C++ toolchain in
 # MacOS High Sierra.
 # See https://github.com/bazelbuild/bazel/issues/4603
@@ -42,16 +36,6 @@ build --watchfs
 run --nolegacy_external_runfiles
 test --nolegacy_external_runfiles
 
-# Turn on --incompatible_strict_action_env which was on by default
-# in Bazel 0.21.0 but turned off again in 0.22.0. Follow
-# https://github.com/bazelbuild/bazel/issues/7026 for more details.
-# This flag is needed to so that the bazel cache is not invalidated
-# when running bazel via `yarn bazel`.
-# See https://github.com/angular/angular/issues/27514.
-build --incompatible_strict_action_env
-run --incompatible_strict_action_env
-test --incompatible_strict_action_env
-
 ###############################
 # Release support             #
 # Turn on these settings with #
@@ -59,7 +43,9 @@ test --incompatible_strict_action_env
 ###############################
 
 # Releases should always be stamped with version control info
-build:release --workspace_status_command=./tools/bazel_stamp_vars.sh
+# This command assumes node on the path and is a workaround for
+# https://github.com/bazelbuild/bazel/issues/4802
+build:release --workspace_status_command="node ./tools/bazel_stamp_vars.js"
 
 ###############################
 # Output                      #

.buildkite/provision-windows-buildkite.ps1

@@ -5,9 +5,9 @@
 
 # VM creation:
 # In Google Cloud Platform, create a Compute Engine instance.
-# We recommend machine type n1-highcpu-16 (16 vCPUs, 14.4 GB memory).
-# Use a windows boot disk with container support such as
-# "Windows Server version 1803 Datacenter Core for Containers".
+# We recommend machine type n1-standard-16 (16 vCPUs, 60 GB memory).
+# Use a recent windows boot disk with container support such as
+# "Windows Server version 1803 Datacenter Core for Containers", and add a 128GB disk.
 # Give it a name, then click "Create".
 
 # VM setup:
@@ -54,6 +54,8 @@ Write-Host "Installing Git for Windows."
 Invoke-WebRequest -Uri https://github.com/git-for-windows/git/releases/download/v2.19.1.windows.1/Git-2.19.1-64-bit.exe -OutFile git.exe
 .\git.exe /VERYSILENT /NORESTART /NOCANCEL /SP- /CLOSEAPPLICATIONS /RESTARTAPPLICATIONS /COMPONENTS="icons,ext\reg\shellhere,assoc,assoc_sh" /DIR="C:\git"
 Add-Path "C:\git\bin"
+# Sleep for 15s while git is installed. Trying to remove the git.exe before it finishes install causes an error.
+Start-Sleep -s 15
 Remove-Item git.exe
 
 # Download NSSM (https://nssm.cc/) to run the BuildKite agent as a service.

.circleci/bazel.rc

@@ -2,10 +2,6 @@
 # We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
 # See documentation in /docs/BAZEL.md
 
-# Save downloaded repositories in a location that can be cached by CircleCI. This helps us
-# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
-build --repository_cache=/home/circleci/bazel_repository_cache
-
 # Don't be spammy in the logs
 # TODO(gmagolan): Hide progress again once build performance improves
 # Presently, CircleCI can timeout during bazel test ... with the following

.circleci/config.yml

@@ -11,22 +11,10 @@
 # needed for jobs that run tests without Bazel. Bazel runs tests with browsers that will be
 # fetched by the Webtesting rules. Therefore for jobs that run tests with Bazel, we don't need a
 # docker image with browsers pre-installed.
-# **NOTE 1**: 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.
-# **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
+# **NOTE**: If you change the version of the docker images, also change the `cache_key` suffix.
 var_1: &default_docker_image circleci/node:10.12
 var_2: &browsers_docker_image circleci/node:10.12-browsers
-# We don't want to include the current branch name in the cache key because that would prevent
-# PRs from being able to restore the cache since the branch names are always different for PRs.
-# The cache key should only consist of dynamic values that change whenever something in the
-# cache changes. For example:
-# 1) yarn lock file changes --> cached "node_modules" are different.
-# 2) bazel repository definitions change --> cached bazel repositories are different.
-# **NOTE 1 **: If you change the cache key prefix, also sync the restore_cache fallback to match.
-# **NOTE 2 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
-# See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
-var_3: &cache_key v2-angular-node-10.12-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}
+var_3: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-10.12
 
 # Define common ENV vars
 var_4: &define_env_vars
@@ -57,35 +45,13 @@ var_7: &post_checkout
 var_8: &yarn_install
   run:
     name: Running Yarn install
-    command: |
-      # Yarn's requests sometimes take more than 10mins to complete.
-      # Print something to stdout, to prevent CircleCI from failing due to not output.
-      while true; do sleep 60; echo "[`date`] Keeping alive..."; done &
-      KEEP_ALIVE_PID=$!
-      yarn install --frozen-lockfile --non-interactive
-      kill $KEEP_ALIVE_PID
+    command: yarn install --frozen-lockfile --non-interactive
 
 var_9: &setup_circleci_bazel_config
   run:
     name: Setting up CircleCI bazel configuration
     command: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
 
-# Sets up Yarn by downloading it and installing it globally. We don't use Yarn from the
-# docker image because this means that we can only use the Yarn version that comes with
-# a specific version of NodeJS. We want to be able to update Yarn without having to
-# update the docker image that comes with NodeJS.
-var_10: &download_yarn
-  run:
-    name: Downloading Yarn
-    command: curl -o- -L https://yarnpkg.com/install.sh | PROFILE=$BASH_ENV bash -s -- --version "$CI_YARN_VERSION"
-
-var_11: &restore_cache
-  restore_cache:
-    keys:
-      - *cache_key
-      # This fallback should be the cache_key without variables.
-      - v2-angular-node-10.12-
-
 version: 2
 jobs:
   lint:
@@ -93,9 +59,9 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
       - *yarn_install
 
       - run: 'yarn bazel:format -mode=check ||
@@ -112,11 +78,11 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
-      - *yarn_install
       - *setup_circleci_bazel_config
+      - *yarn_install
 
       # Setup remote execution and run RBE-compatible tests.
       - *setup_bazel_remote_execution
@@ -125,6 +91,12 @@ jobs:
       - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
       - run: yarn bazel test //... --build_tag_filters=-ivy-only,local --test_tag_filters=-ivy-only,local
 
+      - save_cache:
+          key: *cache_key
+          paths:
+            - "node_modules"
+            - "~/bazel_repository_cache"
+
   # Temporary job to test what will happen when we flip the Ivy flag to true
   test_ivy_aot:
     <<: *job_defaults
@@ -132,11 +104,11 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
-      - *yarn_install
       - *setup_circleci_bazel_config
+      - *yarn_install
       - *setup_bazel_remote_execution
 
         # We need to explicitly specify the --symlink_prefix option because otherwise we would
@@ -171,9 +143,9 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
         # Build aio
       - run: yarn --cwd aio build --progress=false
         # Lint the code
@@ -185,9 +157,9 @@ jobs:
         # (Run before unit and e2e tests, which destroy the `dist/` directory.)
       - run: yarn --cwd aio payload-size
         # Run unit tests
-      - run: yarn --cwd aio test --progress=false --watch=false
+      - run: yarn --cwd aio test --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e --configuration=ci
+      - run: yarn --cwd aio e2e
         # Run unit tests for Firebase redirects
       - run: yarn --cwd aio redirects-test
 
@@ -199,9 +171,9 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
         # Deploy angular.io to production (if necessary)
       - run: setPublicVar CI_STABLE_BRANCH "$(npm info @angular/core dist-tags.latest | sed -r 's/^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$/\1.x/')"
       - run: yarn --cwd aio deploy-production
@@ -214,44 +186,31 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - attach_workspace:
           at: dist
       - *define_env_vars
-      - *download_yarn
         # Build aio (with local Angular packages)
       - run: yarn --cwd aio build-local --progress=false
         # Run PWA-score tests
         # (Run before unit and e2e tests, which destroy the `dist/` directory.)
       - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
         # Run unit tests
-      - run: yarn --cwd aio test --progress=false --watch=false
+      - run: yarn --cwd aio test --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e --configuration=ci
-
-  test_aio_local_ivy:
-    <<: *job_defaults
-    steps:
-      - checkout:
-          <<: *post_checkout
-      - *restore_cache
-      - attach_workspace:
-          at: dist
-      - *define_env_vars
-      - *download_yarn
-        # Build aio with Ivy (using local Angular packages)
-      - run: yarn --cwd aio build-with-ivy --progress=false
+      - run: yarn --cwd aio e2e
 
   test_aio_tools:
     <<: *job_defaults
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - attach_workspace:
           at: dist
       - *define_env_vars
-      - *download_yarn
         # Install
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
       - run: yarn --cwd aio extract-cli-command-docs
@@ -268,11 +227,13 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - attach_workspace:
           at: dist
       - *define_env_vars
-      - *download_yarn
+        # Install root
+      - *yarn_install
         # Install aio
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
         # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
@@ -280,27 +241,6 @@ jobs:
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
       - run: yarn --cwd aio example-e2e --setup --local --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
-  test_docs_examples_ivy:
-    <<: *job_defaults
-    docker:
-      # Needed because the example e2e tests depend on Chrome.
-      - image: *browsers_docker_image
-    parallelism: 3
-    steps:
-      - checkout:
-          <<: *post_checkout
-      - *restore_cache
-      - attach_workspace:
-          at: dist
-      - *define_env_vars
-      - *download_yarn
-        # Install aio
-      - run: yarn --cwd aio install --frozen-lockfile --non-interactive
-        # Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
-        # Since the parallelism is set to "3", there will be three parallel CircleCI containers
-        # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --ivy --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
-
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:
     <<: *job_defaults
@@ -309,9 +249,10 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
+      - *yarn_install
       - run: ./aio/scripts/build-artifacts.sh $AIO_SNAPSHOT_ARTIFACT_PATH $CI_PULL_REQUEST $CI_COMMIT
       - store_artifacts:
           path: *aio_preview_artifact_path
@@ -329,34 +270,32 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
-      - run: yarn --cwd aio install --frozen-lockfile --non-interactive
+      - run: yarn install --cwd aio --frozen-lockfile --non-interactive
       - run:
           name: Wait for preview and run tests
           command: node aio/scripts/test-preview.js $CI_PULL_REQUEST $CI_COMMIT $CI_AIO_MIN_PWA_SCORE
 
-
-  # The `build-npm-packages` tasks exist for backwards-compatibility with old scripts and
-  # tests that rely on the pre-Bazel `dist/packages-dist` output structure (build.sh).
-  # Having multiple jobs that independently build in this manner duplicates some work; we build
-  # the bazel packages more than once. Even though we have a remote cache, these jobs will
-  # typically run in parallel so up-to-date outputs will not be available at the time the build
+  # This job exists only for backwards-compatibility with old scripts and tests
+  # that rely on the pre-Bazel dist/packages-dist layout.
+  # It duplicates some work with the job above: we build the bazel packages
+  # twice. Even though we have a remote cache, these jobs will typically run in
+  # parallel so up-to-date outputs will not be available at the time the build
   # starts.
-
-  # Build the view engine npm packages. No new jobs should depend on this.
-  build-npm-packages:
+  # No new jobs should depend on this one.
+  build-packages-dist:
     <<: *job_defaults
     resource_class: xlarge
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
-      - *yarn_install
       - *setup_circleci_bazel_config
+      - *yarn_install
       - *setup_bazel_remote_execution
 
       - run: scripts/build-packages-dist.sh
@@ -367,35 +306,6 @@ jobs:
           root: dist
           paths:
             - packages-dist
-
-      - save_cache:
-          key: *cache_key
-          paths:
-            - "node_modules"
-            - "~/bazel_repository_cache"
-
-
-  # Build the ivy npm packages.
-  build-ivy-npm-packages:
-    <<: *job_defaults
-    resource_class: xlarge
-    steps:
-      - checkout:
-          <<: *post_checkout
-      - *restore_cache
-      - *define_env_vars
-      - *download_yarn
-      - *yarn_install
-      - *setup_circleci_bazel_config
-      - *setup_bazel_remote_execution
-
-      - run: scripts/build-ivy-npm-packages.sh
-
-      # Save the npm packages from //packages/... for other workflow jobs to read
-      # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
-      - persist_to_workspace:
-          root: dist
-          paths:
             - packages-dist-ivy-aot
 
   # We run the integration tests outside of Bazel for now.
@@ -417,13 +327,11 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - attach_workspace:
           at: dist
       - *define_env_vars
-      - *download_yarn
-      # Some integration tests get their dependencies from the root `node_modules/`.
-      - *yarn_install
       # Runs the integration tests in parallel across multiple CircleCI container instances. The
       # amount of container nodes for this job is controlled by the "parallelism" option.
       - run: ./integration/run_tests.sh ${CIRCLE_NODE_INDEX} ${CIRCLE_NODE_TOTAL}
@@ -466,17 +374,15 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
       - run:
           name: Run tests against the deployed apps
           command: ./aio/scripts/test-production.sh $CI_AIO_MIN_PWA_SCORE
       - run:
           name: Notify caretaker about failure
-          # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
-          # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
-          command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
+          command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $CI_SECRET_SLACK_CARETAKER_WEBHOOK_URL'
           when: on_fail
 
   legacy-unit-tests-local:
@@ -486,11 +392,12 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
       - *yarn_install
       - run: yarn tsc -p packages
+      - run: yarn tsc -p packages/examples
       - run: yarn tsc -p modules
       - run: yarn karma start ./karma-js.conf.js --single-run --browsers=ChromeNoSandbox
 
@@ -503,9 +410,9 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
       - *yarn_install
       - run:
           name: Preparing environment for running tests on Saucelabs.
@@ -517,6 +424,7 @@ jobs:
           command: ./scripts/saucelabs/start-tunnel.sh
           background: true
       - run: yarn tsc -p packages
+      - run: yarn tsc -p packages/examples
       - run: yarn tsc -p modules
         # Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
         # too early without Saucelabs not being ready.
@@ -524,14 +432,40 @@ jobs:
       - run: yarn karma start ./karma-js.conf.js --single-run --browsers=${KARMA_JS_BROWSERS}
       - run: ./scripts/saucelabs/stop-tunnel.sh
 
+  legacy-e2e-tests:
+    <<: *job_defaults
+    docker:
+      - image: *browsers_docker_image
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *define_env_vars
+      - *setup_circleci_bazel_config
+      - *yarn_install
+      - *setup_bazel_remote_execution
+      - attach_workspace:
+          at: dist
+        # Build the e2e tests using the existing Bazel "packages-dist" output that has been
+        # attached to this job. This avoids multiple rebuilds across various CI jobs.
+      - run: ./scripts/build-e2e-tests.sh --use-existing-packages-dist
+      - run:
+          name: Starting servers for e2e tests
+          command: yarn gulp serve serve-examples
+          background: true
+      - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-e2e.conf.js --bundles=true
+      - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-examples-e2e.conf.js --bundles=true
+      - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-perf.conf.js --bundles=true --dryrun
+
   legacy-misc-tests:
     <<: *job_defaults
     steps:
       - checkout:
           <<: *post_checkout
-      - *restore_cache
+      - restore_cache:
+          key: *cache_key
       - *define_env_vars
-      - *download_yarn
       - *yarn_install
       - attach_workspace:
           at: dist
@@ -547,31 +481,28 @@ workflows:
       - lint
       - test
       - test_ivy_aot
-      - build-npm-packages
+      - build-packages-dist
       - test_aio
       - legacy-unit-tests-local
       - legacy-unit-tests-saucelabs
       - deploy_aio:
           requires:
             - test_aio
+      - legacy-e2e-tests:
+          requires:
+            - build-packages-dist
       - legacy-misc-tests:
           requires:
-            - build-npm-packages
+            - build-packages-dist
       - test_aio_local:
           requires:
-            - build-npm-packages
-      # - test_aio_local_ivy:
-      #     requires:
-      #       - build-npm-packages
+            - build-packages-dist
       - test_aio_tools:
           requires:
-            - build-npm-packages
+            - build-packages-dist
       - test_docs_examples:
           requires:
-            - build-npm-packages
-      # - test_docs_examples_ivy:
-      #     requires:
-      #       - build-npm-packages
+            - build-packages-dist
       - aio_preview:
           # Only run on PR builds. (There can be no previews for non-PR builds.)
           filters:
@@ -582,7 +513,7 @@ workflows:
             - aio_preview
       - integration_test:
           requires:
-            - build-npm-packages
+            - build-packages-dist
       - publish_snapshot:
           # Note: no filters on this job because we want it to run for all upstream branches
           # We'd really like to filter out pull requests here, but not yet available:
@@ -595,12 +526,11 @@ workflows:
             - integration_test
             # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
             - test_aio_local
-            # - test_aio_local_ivy
             - test_docs_examples
-            # - test_docs_examples_ivy
             # Get the artifacts to publish from the build-packages-dist job
             # since the publishing script expects the legacy outputs layout.
-            - build-npm-packages
+            - build-packages-dist
+            - legacy-e2e-tests
             - legacy-misc-tests
             - legacy-unit-tests-local
             - legacy-unit-tests-saucelabs

.circleci/env-helpers.inc.sh

@@ -15,7 +15,7 @@
 #
 # Usage: `setPublicVar <name> <value>`
 function setPublicVar() {
-  setSecretVar $1 "$2";
+  setSecretVar $1 $2;
   echo "$1=$2";
 }
 

.circleci/env.sh

@@ -18,11 +18,6 @@ setPublicVar PROJECT_ROOT "$(pwd)";
 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";
-# 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 2.45";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
 # `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
 # retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and
@@ -31,7 +26,6 @@ setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo
 setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
 setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
-setPublicVar CI_YARN_VERSION "1.13.0";
 
 
 ####################################################################################################
@@ -39,6 +33,8 @@ setPublicVar CI_YARN_VERSION "1.13.0";
 ####################################################################################################
 setSecretVar CI_SECRET_AIO_DEPLOY_FIREBASE_TOKEN "$AIO_DEPLOY_TOKEN";
 setSecretVar CI_SECRET_PAYLOAD_FIREBASE_TOKEN "$ANGULAR_PAYLOAD_TOKEN";
+# Defined in https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
+setSecretVar CI_SECRET_SLACK_CARETAKER_WEBHOOK_URL "$SLACK_CARETAKER_WEBHOOK_URL";
 
 
 ####################################################################################################

.github/CODEOWNERS

@@ -54,7 +54,6 @@
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
-#  mgechev - Minko Gechev
 #  mhevery - Misko Hevery
 #  ocombe - Olivier Combe
 #  petebacondarwin - Pete Bacon Darwin
@@ -114,7 +113,6 @@
 #   - alexeagle
 #   - kyliau
 #   - IgorMinar
-#   - mgechev
 
 
 # ===========================================================
@@ -124,7 +122,6 @@
 #   - alexeagle
 #   - filipesilva
 #   - hansl
-#   - mgechev
 
 
 # ===========================================================

.github/angular-robot.yml

@@ -58,6 +58,7 @@ merge:
       - "**/package.json"
       - "**/tsconfig-build.json"
       - "**/tsconfig.json"
+      - "**/rollup.config.js"
       - "**/BUILD.bazel"
       - "**/*.md"
       - "packages/**/integrationtest/**"
@@ -102,11 +103,6 @@ merge:
     requiredStatuses:
       - "ci/circleci: build"
       - "ci/circleci: lint"
-      - "ci/circleci: publish_snapshot"
-      - "ci/angular: size"
-      - "cla/google"
-      - "google3"
-
 
   # the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
   # {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option

.gitignore

@@ -1,7 +1,7 @@
 .DS_STORE
 
 /dist/
-/bazel-out/
+/bazel-*
 /integration/bazel/bazel-*
 e2e_test.*
 node_modules
@@ -13,9 +13,9 @@ pubspec.lock
 .c9
 .idea/
 .settings/
-.vscode/launch.json
 *.swo
 modules/.settings
+.vscode
 modules/.vscode
 
 # Don't check in secret files

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "files.watcherExclude": {
-    "**/.git/objects/**": true,
-    "**/.git/subtree-cache/**": true,
-    "**/node_modules/**": true,
-    "**/bazel-out/**": true,
-    "**/dist/**": true,
-  },
-  "search.exclude": {
-    "**/node_modules": true,
-    "**/bower_components": true,
-    "**/bazel-out": true,
-    "**/dist": true,
-  },
-}

CHANGELOG.md

@@ -1,63 +1,32 @@
-<a name="7.2.5"></a>
-## [7.2.5](https://github.com/angular/angular/compare/7.2.4...7.2.5) (2019-02-15)
+<a name="8.0.0-beta.0"></a>
+# [8.0.0-beta.0](https://github.com/angular/angular/compare/7.2.0...8.0.0-beta.0) (2019-01-16)
 
 
 ### Bug Fixes
 
-* **compiler-cli:** diagnostics should respect "newLine" compiler option ([#28550](https://github.com/angular/angular/issues/28550)) ([ce750e6](https://github.com/angular/angular/commit/ce750e6))
-* **router:** redirect to root url when returned as UrlTree from guard ([#28271](https://github.com/angular/angular/issues/28271)) ([1e58a21](https://github.com/angular/angular/commit/1e58a21)), closes [#27845](https://github.com/angular/angular/issues/27845)
-* **router:** set href when routerLink is used on an 'area' element ([#28441](https://github.com/angular/angular/issues/28441)) ([d491a20](https://github.com/angular/angular/commit/d491a20)), closes [#28401](https://github.com/angular/angular/issues/28401)
-
-
-
-<a name="7.2.4"></a>
-## [7.2.4](https://github.com/angular/angular/compare/7.2.3...7.2.4) (2019-02-06)
-
-
-### Bug Fixes
-
-* **bazel:** Bazel builder resolves with require.resolve() ([#28478](https://github.com/angular/angular/issues/28478)) ([d85d396](https://github.com/angular/angular/commit/d85d396))
-* **bazel:** fix integration test for bazel-schematics ([#28460](https://github.com/angular/angular/issues/28460)) ([449da8c](https://github.com/angular/angular/commit/449da8c))
-
-
-### Performance Improvements
-
-* pngcrush all pngs ([#28479](https://github.com/angular/angular/issues/28479)) ([1a25144](https://github.com/angular/angular/commit/1a25144)), closes [#18243](https://github.com/angular/angular/issues/18243)
-
-
-
-<a name="7.2.3"></a>
-## [7.2.3](https://github.com/angular/angular/compare/7.2.2...7.2.3) (2019-01-30)
-
-
-### Bug Fixes
-
-* **bazel:** add [@npm](https://github.com/npm)//tslib dep to e2e ts_library target in bazel-workspace schematic ([#28358](https://github.com/angular/angular/issues/28358)) ([8cee56e](https://github.com/angular/angular/commit/8cee56e))
-* **bazel:** Bazel-workspace schematics should run in ScopedTree ([#28349](https://github.com/angular/angular/issues/28349)) ([260ac20](https://github.com/angular/angular/commit/260ac20))
-* **bazel:** Builder should invoke local bazel/iblaze ([#28303](https://github.com/angular/angular/issues/28303)) ([12b8a6e](https://github.com/angular/angular/commit/12b8a6e))
-* **bazel:** ng-new should run yarn install ([#28381](https://github.com/angular/angular/issues/28381)) ([a9d46e4](https://github.com/angular/angular/commit/a9d46e4))
-
-
-### Performance Improvements
-
-* yarn version upgrade ([#28360](https://github.com/angular/angular/issues/28360)) ([cc1b2a5](https://github.com/angular/angular/commit/cc1b2a5))
-
-
-
-<a name="7.2.2"></a>
-## [7.2.2](https://github.com/angular/angular/compare/7.2.1...7.2.2) (2019-01-22)
-
-
-### Bug Fixes
-
-* **bazel:** Fix integration test after v8 bump ([#28194](https://github.com/angular/angular/issues/28194)) ([7b772e9](https://github.com/angular/angular/commit/7b772e9)), closes [#28142](https://github.com/angular/angular/issues/28142)
-* **router:** `skipLocationChange` with named outlets ([#28301](https://github.com/angular/angular/issues/28301)) ([32737a6](https://github.com/angular/angular/commit/32737a6)), closes [#27680](https://github.com/angular/angular/issues/27680) [#28200](https://github.com/angular/angular/issues/28200)
+* **bazel:** Add [@bazel](https://github.com/bazel)/bazel to dev deps ([#28032](https://github.com/angular/angular/issues/28032)) ([5a0deb8](https://github.com/angular/angular/commit/5a0deb8))
+* **bazel:** Add /bazel-out to .gitignore ([#27874](https://github.com/angular/angular/issues/27874)) ([b05baa5](https://github.com/angular/angular/commit/b05baa5))
+* **bazel:** Add ibazel to deps of Bazel project ([#28090](https://github.com/angular/angular/issues/28090)) ([605f450](https://github.com/angular/angular/commit/605f450))
+* **bazel:** Bazel schematics should add router package ([#28141](https://github.com/angular/angular/issues/28141)) ([06e5bf1](https://github.com/angular/angular/commit/06e5bf1))
+* **bazel:** flat module misses AMD module name on windows ([#27839](https://github.com/angular/angular/issues/27839)) ([935ce63](https://github.com/angular/angular/commit/935ce63))
+* **bazel:** incorrectly always uses ngc-wrapped from "npm" workspace ([#28137](https://github.com/angular/angular/issues/28137)) ([d12db4e](https://github.com/angular/angular/commit/d12db4e))
+* **bazel:** ng_package creates invalid typings reexport on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([4caf654](https://github.com/angular/angular/commit/4caf654))
+* **bazel:** packager not properly removing amd directives on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([8473d68](https://github.com/angular/angular/commit/8473d68))
+* **bazel:** protractor rule does not run spec files with underscore ([#28022](https://github.com/angular/angular/issues/28022)) ([65e72e9](https://github.com/angular/angular/commit/65e72e9))
+* **bazel:** protractor utils cannot start server on windows ([#27915](https://github.com/angular/angular/issues/27915)) ([9de9c8a](https://github.com/angular/angular/commit/9de9c8a))
+* **bazel:** replay compilation uses wrong compiler for building esm5 ([#28053](https://github.com/angular/angular/issues/28053)) ([cd04513](https://github.com/angular/angular/commit/cd04513))
+* **bazel:** ts_web_test_suite now properly includes init_browser_spec.js ([#27965](https://github.com/angular/angular/issues/27965)) ([ce51dfb](https://github.com/angular/angular/commit/ce51dfb))
+* **service-worker:** navigation urls backwards compatibility ([#27244](https://github.com/angular/angular/issues/27244)) ([d49d1e7](https://github.com/angular/angular/commit/d49d1e7))
 
 
 ### Features
 
-* **bazel:** Add support for SASS ([#28167](https://github.com/angular/angular/issues/28167)) ([a4d9192](https://github.com/angular/angular/commit/a4d9192))
-* **compiler-cli:** resolve generated Sass/Less files to .css inputs ([#28166](https://github.com/angular/angular/issues/28166)) ([4c00059](https://github.com/angular/angular/commit/4c00059))
+* **forms:** export NumberValueAccessor & RangeValueAccessor directives ([#27743](https://github.com/angular/angular/issues/27743)) ([ac15717](https://github.com/angular/angular/commit/ac15717))
+
+
+### Performance Improvements
+
+* **platform-server:** use shared `DomElementSchemaRegistry` instance ([#28150](https://github.com/angular/angular/issues/28150)) ([#28151](https://github.com/angular/angular/issues/28151)) ([ce3a746](https://github.com/angular/angular/commit/ce3a746))
 
 
 

WORKSPACE

@@ -1,6 +1,17 @@
 workspace(name = "angular")
 
 load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+load(
+    "//packages/bazel:package.bzl",
+    "rules_angular_dependencies",
+    "rules_angular_dev_dependencies",
+)
+
+http_archive(
+    name = "io_bazel_rules_go",
+    sha256 = "b7a62250a3a73277ade0ce306d22f122365b513f5402222403e507f2f997d421",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.16.3/rules_go-0.16.3.tar.gz",
+)
 
 # Uncomment for local bazel rules development
 #local_repository(
@@ -12,15 +23,25 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 #    path = "../rules_typescript",
 #)
 
-# Fetch rules_nodejs so we can install our npm dependencies
-http_archive(
-    name = "build_bazel_rules_nodejs",
-    sha256 = "1416d03823fed624b49a0abbd9979f7c63bbedfd37890ddecedd2fe25cccebc6",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.18.6/rules_nodejs-0.18.6.tar.gz"],
-)
+# Angular Bazel users will call this function
+rules_angular_dependencies()
 
-# Fetch the rxjs repository since we build rxjs from source
-# TODO(gregmagolan): use rxjs bundles in the bazel build
+# Install transitive deps of rules_nodejs
+load("@build_bazel_rules_nodejs//:package.bzl", "rules_nodejs_dependencies")
+
+rules_nodejs_dependencies()
+
+# These are the dependencies only for us
+rules_angular_dev_dependencies()
+
+# Install transitive deps of rules_typescript
+load("@build_bazel_rules_typescript//:package.bzl", "rules_typescript_dependencies")
+
+rules_typescript_dependencies()
+
+#
+# Point Bazel to WORKSPACEs that live in subdirectories
+#
 http_archive(
     name = "rxjs",
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
@@ -28,22 +49,21 @@ http_archive(
     url = "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz",
 )
 
-# Use a mock @npm repository while we are building angular from source
-# downstream. Angular will get its npm dependencies with in @ngdeps which
-# is setup in ng_setup_workspace().
-# TODO(gregmagolan): remove @ngdeps once angular is no longer build from source
-#   downstream and have build use @npm for npm dependencies
+# Point to the integration test workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
 local_repository(
-    name = "npm",
-    path = "tools/npm_workspace",
+    name = "bazel_integration_test",
+    path = "integration/bazel",
 )
 
-# Check the bazel version and download npm dependencies
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+#
+# Load and install our dependencies downloaded above.
+#
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 
 # Bazel version must be at least v0.21.0 because:
-#   - 0.21.0 Using --incompatible_strict_action_env flag fixes cache when running `yarn bazel`
-#            (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
+#   - 0.21.0 --experimental_strict_action_env flag turned on by default which fixes cache when
+#            running `yarn bazel` (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
 check_bazel_version("0.21.0", """
 You no longer need to install Bazel on your machine.
 Angular has a dependency on the @bazel/bazel package which supplies it.
@@ -52,7 +72,6 @@ Try running `yarn bazel` instead.
 
 """)
 
-# Setup the Node.js toolchain
 node_repositories(
     node_version = "10.9.0",
     package_json = ["//:package.json"],
@@ -60,48 +79,41 @@ node_repositories(
     yarn_version = "1.12.1",
 )
 
-# Setup the angular toolchain which installs npm dependencies into @ngdeps
-load("//tools:ng_setup_workspace.bzl", "ng_setup_workspace")
+local_repository(
+    name = "npm",
+    path = "tools/npm_workspace",
+)
 
-ng_setup_workspace()
+load("@io_bazel_rules_go//go:def.bzl", "go_register_toolchains", "go_rules_dependencies")
 
-# Install all bazel dependencies of the @ngdeps npm packages
-load("@ngdeps//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+go_rules_dependencies()
 
-install_bazel_dependencies()
+go_register_toolchains()
 
-# Load angular dependencies
-load("//packages/bazel:package.bzl", "rules_angular_dev_dependencies")
-
-rules_angular_dev_dependencies()
-
-# Load karma dependencies
-load("@build_bazel_rules_karma//:package.bzl", "rules_karma_dependencies")
-
-rules_karma_dependencies()
-
-# Setup the rules_webtesting toolchain
-load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
 
 web_test_repositories()
 
-# Temporary work-around for https://github.com/angular/angular/issues/28681
-# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
-load("@angular//:browser_repositories.bzl", "browser_repositories")
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
 
-browser_repositories()
-
-# Setup the rules_typescript tooolchain
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
 
-# Setup the rules_sass toolchain
+load("@angular//:index.bzl", "ng_setup_workspace")
+
+ng_setup_workspace()
+
+##################################
+# Skylark documentation generation
+
 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 
 sass_repositories()
 
-# Setup the skydoc toolchain
 load("@io_bazel_skydoc//skylark:skylark.bzl", "skydoc_repositories")
 
 skydoc_repositories()

aio/angular.json

@@ -104,9 +104,6 @@
             },
             "archive": {
               "browserTarget": "site:build:archive"
-            },
-            "ci": {
-              "progress": false
             }
           }
         },
@@ -169,11 +166,6 @@
           "options": {
             "protractorConfig": "tests/e2e/protractor.conf.js",
             "devServerTarget": "site:serve"
-          },
-          "configurations": {
-            "ci": {
-              "devServerTarget": "site:serve:ci"
-            }
           }
         },
         "lint": {

aio/content/examples/.gitignore

@@ -57,9 +57,7 @@ dist/
 
 # aot
 **/*.ngsummary.json
-upgrade-module/tsconfig-aot.json
 !rollup-config.js
-upgrade-module/rollup-config.js
 aot-compiler/**/*.d.ts
 aot-compiler/**/*.factory.d.ts
 upgrade-phonecat-2-hybrid/aot/**/*
@@ -86,9 +84,5 @@ upgrade-phonecat-2-hybrid/aot/**/*
 *stackblitz.no-link.html
 
 # ngUpgrade testing
-upgrade-phonecat-1-typescript/tsconfig-aot.json
-upgrade-phonecat-1-typescript/rollup-config.js
-upgrade-phonecat-3-final/tsconfig-aot.json
-upgrade-phonecat-3-final/rollup-config.js
 !upgrade-phonecat-*/**/karma.conf.js
 !upgrade-phonecat-*/**/karma-test-shim.js

aio/content/examples/ajs-quick-reference/src/app/app.component.ts

@@ -20,7 +20,7 @@ export class AppComponent {
   movies: IMovie[] = [];
   showImage = true;
   title = 'AngularJS to Angular Quick Ref Cookbook';
-  toggleImage(event?: UIEvent) {
+  toggleImage(event: UIEvent) {
     this.showImage = !this.showImage;
     this.eventType = (event && event.type) || 'not provided';
   }

aio/content/examples/ajs-quick-reference/src/app/date.pipe.ts

@@ -0,0 +1,14 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Injectable()
+// #docregion date-pipe
+@Pipe({name: 'date', pure: true})
+export class StringSafeDatePipe extends DatePipe implements PipeTransform {
+ transform(value: any, format: string): string {
+   value = typeof value === 'string' ?
+           Date.parse(value) : value;
+   return super.transform(value, format);
+ }
+}
+// #enddocregion date-pipe

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

@@ -19,7 +19,6 @@ import { HeroListAutoCalcPageComponent } from './hero-list-auto-page.component';
 import { HeroListAutoComponent } from './hero-list-auto.component';
 import { HomeComponent } from './home.component';
 import { AboutComponent } from './about.component';
-import { InsertRemoveComponent } from './insert-remove.component';
 
 
 @NgModule({
@@ -57,7 +56,6 @@ import { InsertRemoveComponent } from './insert-remove.component';
     HeroListAutoCalcPageComponent,
     HeroListAutoComponent,
     HomeComponent,
-    InsertRemoveComponent,
     AboutComponent
   ],
   bootstrap: [AppComponent]

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

@@ -1,11 +0,0 @@
-{
-  "e2e": [
-    {
-      "cmd": "yarn",
-      "args": [
-        "e2e",
-        "--no-webdriver-update"
-      ]
-    }
-  ]
-}

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

@@ -19,20 +19,20 @@ const DifferentParent = Parent;
 // #enddocregion provide-the-parent
 // The `parentType` defaults to `Parent` when omitting the second parameter.
 // #docregion provide-the-parent
-export function provideParent
+const provideParent =
 // #enddocregion provide-parent, provide-the-parent
 // #docregion provide-parent
-  (component: any, parentType?: any) {
+  (component: any, parentType?: any) => {
     return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
-  }
+  };
 // #enddocregion provide-parent
 
 // Simpler syntax version that always provides the component in the name of `Parent`.
-export function provideTheParent
+const provideTheParent =
 // #docregion provide-the-parent
-  (component: any) {
+  (component: any) => {
     return { provide: Parent, useExisting: forwardRef(() => component) };
-  }
+  };
 // #enddocregion provide-the-parent
 
 

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

@@ -1,11 +0,0 @@
-{
-  "e2e": [
-    {
-      "cmd": "yarn",
-      "args": [
-        "e2e",
-        "--no-webdriver-update"
-      ]
-    }
-  ]
-}

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

@@ -28,7 +28,10 @@ let checkLogForMessage = (message: string) => {
   expect(page.logList.getText()).toContain(message);
 };
 
-describe('Http Tests', function() {
+// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet
+//          and we don't have the backwards compatibility package yet.
+//          Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6
+xdescribe('Http Tests', function() {
   beforeEach(() => {
     browser.get('');
   });

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

@@ -1,12 +1,3 @@
 {
-  "projectType": "i18n",
-  "e2e": [
-    {
-      "cmd": "yarn",
-      "args": [
-        "e2e",
-        "--no-webdriver-update"
-      ]
-    }
-  ]
-}
+  "projectType": "i18n"
+}

aio/content/examples/ngmodule-faq/src/app/app.module.3.ts

@@ -13,8 +13,8 @@ import { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
-import { HighlightDirective } from './highlight.directive.1';
-import { TitleComponent }     from './title.component.1';
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
 /* Routing Module */

aio/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'awesome' })
+/** Precede the input string with the word "Awesome " */
+export class AwesomePipe implements PipeTransform {
+  transform(phrase: string) {
+    return phrase ? 'Awesome ' + phrase : '';
+  }
+}

aio/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts

@@ -0,0 +1,20 @@
+// #docplaster
+// Same directive name and selector as
+// HighlightDirective in parent AppModule
+// It selects for both input boxes and  'highlight' attr
+// and it highlights in blue instead of gold
+
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Highlight the host element or any InputElement in blue
+@Directive({ selector: '[highlight], input' })
+export class ContactHighlightDirective {
+  constructor(el: ElementRef) {
+    el.nativeElement.style.backgroundColor = 'powderblue';
+    // #enddocregion
+    console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
+    // #docregion
+  }
+}
+// #enddocregion

aio/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Same directive name and selector as
+// HighlightDirective in parent AppRootModule
+// It selects for both input boxes and  'highlight' attr
+// and it highlights in beige instead of yellow
+@Directive({ selector: '[highlight]' })
+export class HighlightDirective {
+    constructor(el: ElementRef) {
+       el.nativeElement.style.backgroundColor = 'beige';
+       console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
+    }
+}

aio/content/examples/ngmodule-faq/src/app/title.component.ts

@@ -8,7 +8,7 @@ import { UserService } from './user.service';
 
 @Component({
   selector: 'app-title',
-  templateUrl: './title.component.1.html'
+  templateUrl: './title.component.html'
 })
 export class TitleComponent {
   title = 'Angular Modules';

aio/content/examples/quickstart/bs-config.1.json

@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent { name = 'Angular'; }

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

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

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

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Angular Quickstart</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills -->
+    <!-- #docregion polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <!-- #enddocregion polyfills -->
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion my-app-->
+    <my-app>Loading AppComponent content here ...</my-app>
+    <!-- #enddocregion my-app-->
+  </body>
+
+</html>

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

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/quickstart/src/tsconfig.1.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}

aio/content/examples/quickstart/stackblitz.json

@@ -0,0 +1,11 @@
+{
+  "description": "QuickStart",
+  "files": [
+    "src/app/app.component.ts",
+    "src/app/app.module.ts",
+    "src/main.ts",
+    "src/index.html"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["quickstart"]
+}

aio/content/examples/router/src/app/crisis-list/crisis-list.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-crisis-list',
-  templateUrl: './crisis-list.component.1.html',
-  styleUrls: ['./crisis-list.component.1.css']
+  templateUrl: './crisis-list.component.html',
+  styleUrls: ['./crisis-list.component.css']
 })
 export class CrisisListComponent { }

aio/content/examples/router/src/app/hero-list/hero-list.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-hero-list',
-  templateUrl: './hero-list.component.1.html',
-  styleUrls: ['./hero-list.component.1.css']
+  templateUrl: './hero-list.component.html',
+  styleUrls: ['./hero-list.component.css']
 })
 export class HeroListComponent { }

aio/content/examples/setup/e2e-spec.ts

@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+  let expectedMsg = 'Hello Angular';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+});

aio/content/examples/styleguide/src/03-06/app/core/spinner/index.ts

@@ -1,2 +1,3 @@
 // #docregion
+export * from './spinner.component';
 export * from './spinner.service';

aio/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}

aio/content/examples/styleguide/src/03-06/app/core/toast/index.ts

@@ -1,2 +1,3 @@
 // #docregion
+export * from './toast.component';
 export * from './toast.service';

aio/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  selector: 'toh-toast',
+  template: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

aio/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from '../../core';
+
+@Component({
+  selector: 'toh-toast',
+  template: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}

aio/content/examples/styleguide/src/05-13/app/app.component.ts

@@ -4,7 +4,4 @@ import { Component } from '@angular/core';
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
-export class AppComponent {
-
-  doSomething() {}
-}
+export class AppComponent { }

aio/content/examples/styleguide/src/05-16/app/app.component.ts

@@ -4,7 +4,4 @@ import { Component } from '@angular/core';
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
-export class AppComponent {
-
-  onSavedTheDay(event$: any) { }
-}
+export class AppComponent { }

aio/content/examples/template-syntax/src/app/app.component.ts

@@ -66,7 +66,7 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   currentHero: Hero;
 
-  deleteHero(hero?: Hero) {
+  deleteHero(hero: Hero) {
     this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
   }
 
@@ -105,18 +105,18 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   get nullHero(): Hero { return null; }
 
-  onClickMe(event?: KeyboardEvent) {
+  onClickMe(event: KeyboardEvent) {
     let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
     this.alert('Click me.' + evtMsg);
   }
 
-  onSave(event?: KeyboardEvent) {
+  onSave(event: KeyboardEvent) {
     let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
     this.alert('Saved.' + evtMsg);
     if (event) { event.stopPropagation(); }
   }
 
-  onSubmit(data: any) {/* referenced but not used */}
+  onSubmit() {/* referenced but not used */}
 
   product = {
     name: 'frimfram',

aio/content/examples/toh-pt6/src/app/hero.service.ts

@@ -97,7 +97,7 @@ export class HeroService {
   /** POST: add a new hero to the server */
   addHero (hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
-      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
     );
   }

aio/content/guide/aot-compiler.md

@@ -1508,7 +1508,7 @@ done manually.
 
 When `true`, this option tells the compiler not to check the TypeScript version.
 The compiler will skip checking and will not error out when an unsupported version of TypeScript is used.
-Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behavior.
+Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behaviour.
 
 This option is `false` by default.
 

aio/content/guide/build.md

@@ -273,8 +273,8 @@ The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure c
 You may find it necessary to target specific browsers or exclude certain browser versions from your build.
 
 Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/browserslist/browserslist) to figure out which browsers to support with prefixing. 
-Browserlist looks for configuration options in a `browserslist` property of the package configuration file, or in a configuration file named `.browserslistrc`. 
-Autoprefixer looks for the `browserslist` configuration when it prefixes your CSS. 
+Browserlist looks for configuration options in a `browserlist` property of the package configuration file, or in a configuration file named `.browserslistrc`. 
+Autoprefixer looks for the Browserlist configuration when it prefixes your CSS. 
 
 * You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
 ```

aio/content/guide/dependency-injection-in-action.md

@@ -52,16 +52,16 @@ When all dependencies are in place, `AppComponent` displays the user information
 
 ## Limit service scope to a component subtree
 
-An Angular application has multiple injectors, arranged in a tree hierarchy that parallels the component tree.
-Each injector creates a singleton instance of a dependency.
+An Angular application has multiple injectors, arranged in a tree hierarchy that parallels the component tree. 
+Each injector creates a singleton instance of a dependency. 
 That same instance is injected wherever that injector provides that service.
 A particular service can be provided and created at any level of the injector hierarchy,
 which means that there can be multiple instances of a service if it is provided by multiple injectors.
 
-Dependencies provided by the root injector can be injected into *any* component *anywhere* in the application.
-In some cases, you might want to restrict service availability to a particular region of the application.
+Dependencies provided by the root injector can be injected into *any* component *anywhere* in the application. 
+In some cases, you might want to restrict service availability to a particular region of the application. 
 For instance, you might want to let users explicitly opt in to use a service,
-rather than letting the root injector provide it automatically.
+rather than letting the root injector provide it automatically. 
 
 You can limit the scope of an injected service to a *branch* of the application hierarchy
 by providing that service *at the sub-root component for that branch*.
@@ -146,34 +146,34 @@ and confirm that the three `HeroBioComponent` instances have their own cached he
 When a class requires a dependency, that dependency is added to the constructor as a parameter.
 When Angular needs to instantiate the class, it calls upon the DI framework to supply the dependency.
 By default, the DI framework searches for a provider in the injector hierarchy,
-starting at the component's local injector of the component, and if necessary bubbling up
+starting at the component's local injector of the component, and if necessary bubbling up 
 through the injector tree until it reaches the root injector.
 
-* The first injector configured with a provider supplies the dependency (a service instance or value) to the constructor.
+* The first injector configured with a provider supplies the dependency (a service instance or value) to the constructor.  
 
 * If no provider is found in the root injector, the DI framework returns null to the constructor.
 
 There are a number of options for modifying the default search behavior, using _parameter decorators_
-on the service-valued parameters of a class constructor.
+on the service-valued parameters of a class constructor. 
 
 {@a optional}
 
 ### Make a dependency `@Optional` and limit search with `@Host`
 
-Dependencies can be registered at any level in the component hierarchy.
-When a component requests a dependency, Angular starts with that component's injector
-and walks up the injector tree until it finds the first suitable provider.
+Dependencies can be registered at any level in the component hierarchy. 
+When a component requests a dependency, Angular starts with that component's injector 
+and walks up the injector tree until it finds the first suitable provider.  
 Angular throws an error if it can't find the dependency during that walk.
 
 In some cases, you need to limit the search or accommodate a missing dependency.
 You can modify Angular's search behavior with the `@Host` and `@Optional` qualifying
-decorators on a service-valued parameter of the component's constructor.
+decorators on a service-valued parameter of the component's constructor. 
 
 * The `@Optional` property decorator tells Angular to return null when it can't find the dependency.
 
-* The `@Host` property decorator stops the upward search at the *host component*.
-The host component is typically the component requesting the dependency.
-However, when this component is projected into a *parent* component,
+* The `@Host` property decorator stops the upward search at the *host component*. 
+The host component is typically the component requesting the dependency. 
+However, when this component is projected into a *parent* component, 
 that parent component becomes the host. The following example covers this second case.
 
 These decorators can be used individually or together, as shown in the example.
@@ -238,8 +238,8 @@ Here's `HeroBiosAndContactsComponent` in action.
 
 
 If you comment out the `@Host()` decorator, Angular walks up the injector ancestor tree
-until it finds the logger at the `AppComponent` level.
-The logger logic kicks in and the hero display updates
+until it finds the logger at the `AppComponent` level. 
+The logger logic kicks in and the hero display updates 
 with the "!!!" marker to indicate that the logger was found.
 
 <figure>
@@ -254,7 +254,7 @@ the app throws an exception when it cannot find the required logger at the host
 
 ### Supply a custom provider with `@Inject`
 
-Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs. The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`.
+Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs. The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`. 
 
 <code-example path="dependency-injection-in-action/src/app/storage.service.ts" header="src/app/storage.service.ts">
 
@@ -262,8 +262,6 @@ Using a custom provider allows you to provide a concrete implementation for impl
 
 The `factory` function returns the `localStorage` property that is attached to the browser window object. The `Inject` decorator is a constructor parameter used to specify a custom provider of a dependency. This custom provider can now be overridden during testing with a mock API of `localStorage` instead of interactive with real browser APIs.
 
-{@a skip}
-
 ### Modify the provider search with `@Self` and `@SkipSelf`
 
 Providers can also be scoped by injector through constructor parameter decorators. The following example overrides the `BROWSER_STORAGE` token in the `Component` class `providers` with the `sessionStorage` browser API. The same `BrowserStorageService` is injected twice in the constructor, decorated with `@Self` and `@SkipSelf` to define which injector handles the provider dependency.
@@ -293,7 +291,7 @@ The directive sets the background to a highlight color when the user mouses over
 DOM element to which the directive is applied.
 
 Angular sets the constructor's `el` parameter to the injected `ElementRef`.
-(An `ElementRef` is a wrapper around a DOM element,
+(An `ElementRef` is a wrapper around a DOM element, 
 whose `nativeElement` property exposes the DOM element for the directive to manipulate.)
 
 The sample code applies the directive's `myHighlight` attribute to two `<div>` tags,
@@ -334,7 +332,7 @@ Angular asks the injector for the service associated with `LoggerService`
 and assigns the returned value to the `logger` parameter.
 
 If the injector has already cached an instance of the service associated with the token,
-it provides that instance.
+it provides that instance. 
 If it doesn't, it needs to make one using the provider associated with the token.
 
 <div class="alert is-helpful">
@@ -348,7 +346,7 @@ If the search fails, the injector throws an error&mdash;unless the request was [
 
 A new injector has no providers.
 Angular initializes the injectors it creates with a set of preferred providers.
-You have to configure providers for your own app-specific dependencies.
+You have to configure providers for your own app-specific dependencies. 
 
 
 {@a defining-providers}
@@ -357,7 +355,7 @@ You have to configure providers for your own app-specific dependencies.
 ### Defining providers
 
 A dependency can't always be created by the default method of instantiating a class.
-You learned about some other methods in [Dependency Providers](guide/dependency-injection-providers).
+You learned about some other methods in [Dependency Providers](guide/dependency-injection-providers). 
 The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
 It's visually simple: a few properties and the logs produced by a logger.
 
@@ -366,7 +364,7 @@ It's visually simple: a few properties and the logs produced by a logger.
 </figure>
 
 The code behind it customizes how and where the DI framework provides dependencies.
-The use cases illustrate different ways to use the [*provide* object literal](guide/dependency-injection-providers#provide) to associate a definition object with a DI token.
+The use cases illustrate different ways to use the [*provide* object literal](guide/dependency-injection-providers#provide) to associate a definition object with a DI token. 
 
 <code-example path="dependency-injection-in-action/src/app/hero-of-the-month.component.ts" region="hero-of-the-month" header="hero-of-the-month.component.ts">
 
@@ -391,13 +389,13 @@ The `HeroOfTheMonthComponent` example has two value providers.
 </code-example>
 
 * The first provides an existing instance of the `Hero` class to use for the `Hero` token, rather than
-requiring the injector to create a new instance with `new` or use its own cached instance.
+requiring the injector to create a new instance with `new` or use its own cached instance. 
 Here, the token is the class itself.
 
 * The second specifies a literal string resource to use for the `TITLE` token.
 The `TITLE` provider token is *not* a class, but is instead a
 special kind of provider lookup key called an [injection token](guide/dependency-injection-in-action#injection-token), represented by
-an `InjectionToken` instance.
+an `InjectionToken` instance. 
 
 You can use an injection token for any kind of provider but it's particularly
 helpful when the dependency is a simple value like a string, a number, or a function.
@@ -416,12 +414,12 @@ Other types of providers can create their values *lazily*; that is, when they're
 {@a useclass}
 
 
-#### Class providers: `useClass`
+#### Class providers: `useClass` 
 
 The `useClass` provider key lets you create and return a new instance of the specified class.
 
 You can use this type of provider to substitute an *alternative implementation*
-for a common or default class.
+for a common or default class. 
 The alternative implementation could, for example, implement a different strategy,
 extend the default class, or emulate the behavior of the real class in a test case.
 
@@ -504,7 +502,7 @@ This is illustrated in the following image, which displays the logging date.
 
 {@a usefactory}
 
-#### Factory providers: `useFactory`
+#### Factory providers: `useFactory` 
 
 The `useFactory` provider key lets you create a dependency object by calling a factory function,
 as in the following example.
@@ -539,7 +537,7 @@ the passed-in state value and the injected services `Hero` and `HeroService`.
 The provider factory function (returned by `runnersUpFactory()`) returns the actual dependency object,
 the string of names.
 
-* The function takes a winning `Hero` and a `HeroService` as arguments.
+* The function takes a winning `Hero` and a `HeroService` as arguments. 
 Angular supplies these arguments from injected values identified by
 the two *tokens* in the `deps` array.
 
@@ -590,7 +588,7 @@ But they did neither.
 `MinimalLogger` is used only as a dependency injection token.
 
 When you use a class this way, it's called a *class interface*.
-
+  
 As mentioned in [DI Providers](guide/dependency-injection-providers#interface-not-valid-token),
 an interface is not a valid DI token because it is a TypeScript artifact that doesn't exist at run time.
 Use this abstract class interface to get the strong typing of an interface,
@@ -611,7 +609,7 @@ The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript for
 </code-example>
 
 Notice that it doesn't have any members. It never grows no matter how many members you add to the class,
-as long as those members are typed but not implemented.
+as long as those members are typed but not implemented. 
 
 Look again at the TypeScript `MinimalLogger` class to confirm that it has no implementation.
 
@@ -738,7 +736,7 @@ Break the circularity with `forwardRef`.
 </code-example>
 
 
-<!--- Waiting for good examples
+<!--- Waiting for good examples 
 
 {@a directive-level-providers}
 
@@ -746,15 +744,15 @@ Break the circularity with `forwardRef`.
 
 ## Element-level providers
 
-A component is a specialization of directive, and the `@Component()` decorator inherits the `providers` property from `@Directive`. The injector is at the element level, so a provider configured with any element-level injector is available to any component, directive, or pipe attached to the same element.
+A component is a specialization of directive, and the `@Component()` decorator inherits the `providers` property from `@Directive`. The injector is at the element level, so a provider configured with any element-level injector is available to any component, directive, or pipe attached to the same element. 
 
 Here's a live example that implements a custom form control, taking advantage of an injector that is shared by a component and a directive on the same element.
 
 https://stackblitz.com/edit/basic-form-control
 
-The component, `custom-control`, configures a provider for the DI token `NG_VALUE_ACCESSOR`.
+The component, `custom-control`, configures a provider for the DI token `NG_VALUE_ACCESSOR`. 
 In the template, the `FormControlName` directive is instantiated along with the custom component.
-It can inject the `NG_VALUE_ACCESSOR` dependency because they share the same injector.
+It can inject the `NG_VALUE_ACCESSOR` dependency because they share the same injector. 
 (Notice that this example also makes use of `forwardRef()` to resolve a circularity in the definitions.)
 
 ### Sharing a service among components
@@ -786,3 +784,4 @@ If you want to show only one of them, use the directive to make sure __??of what
 `<hero-overview heroCache></hero-overview>`
 
  --->
+

aio/content/guide/displaying-data.md

@@ -149,7 +149,7 @@ In either style, the template data bindings have the same access to the componen
 Although this example uses variable assignment to initialize the components, you could instead declare and initialize the properties using a constructor:
 
 
-<code-example path="displaying-data/src/app/app-ctor.component.1.ts" linenums="false" region="class">
+<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" region="class">
 
 </code-example>
 

aio/content/guide/file-structure.md

@@ -53,7 +53,7 @@ Workspace-wide `node_modules` dependencies are visible to this project.
 | `app/`                 | Contains the component files in which your app logic and data are defined. See details in [App source folder](#app-src) below. |
 | `assets/`              | Contains image files and other asset files to be copied as-is when you build your application. | 
 | `environments/`        | Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. |
-| `browserslist`          | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserslist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
+| `browserlist`          | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserlist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
 | `favicon.ico`          | An icon to use for this app in the bookmark bar. |
 | `index.html`           | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or` <link>` tags here manually. |
 | `main.ts`              | The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |

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

@@ -42,7 +42,7 @@ Learn more about dependency resolution through the injector hierarchy:
 
 *NgModule-level* providers can be specified with `@NgModule()` `providers` metadata option, or in the `@Injectable()` `providedIn` option (with some module other than the root `AppModule`).
 
-Use the `@NgModule()` `providers` option if a module is [lazy loaded](guide/lazy-loading-ngmodules). The module's own injector is configured with the provider when that module is loaded, and Angular can inject the corresponding services in any class it creates in that module. If you use the `@Injectable()` option `providedIn: MyLazyloadModule`, the provider could be shaken out at compile time, if it is not used anywhere else in the app. 
+Use the `@NgModule()` `provides` option if a module is [lazy loaded](guide/lazy-loading-ngmodules). The module's own injector is configured with the provider when that module is loaded, and Angular can inject the corresponding services in any class it creates in that module. If you use the `@Injectable()` option `providedIn: MyLazyloadModule`, the provider could be shaken out at compile time, if it is not used anywhere else in the app. 
 
 * Learn more about [tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers).
 

aio/content/guide/lifecycle-hooks.md

@@ -124,7 +124,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
 
       Respond after Angular checks the component's views and child views / the view that a directive is in.
 
-      Called after the `ngAfterViewInit()` and every subsequent `ngAfterContentChecked()`.
+      Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
 
     </td>
   </tr>

aio/content/guide/router.md

@@ -896,11 +896,11 @@ Replace the contents of each component with the sample HTML below.
 
 <code-tabs>
 
-  <code-pane header="src/app/crisis-list/crisis-list.component.html" path="router/src/app/crisis-list/crisis-list.component.1.html">
+  <code-pane header="src/app/crisis-list/crisis-list.component.html" path="router/src/app/crisis-list/crisis-list.component.html">
 
   </code-pane>
 
-  <code-pane header="src/app/hero-list/hero-list.component.html" path="router/src/app/hero-list/hero-list.component.1.html" region="template">
+  <code-pane header="src/app/hero-list/hero-list.component.html" path="router/src/app/hero-list/hero-list.component.html" region="template">
 
   </code-pane>
 
@@ -972,7 +972,7 @@ Be sure it is the _last_ route in the configuration.
 
 To test this feature, add a button with a `RouterLink` to the `HeroListComponent` template and set the link to `"/sidekicks"`.
 
-<code-example path="router/src/app/hero-list/hero-list.component.1.html" linenums="false" header="src/app/hero-list/hero-list.component.html (excerpt)">
+<code-example path="router/src/app/hero-list/hero-list.component.html" linenums="false" header="src/app/hero-list/hero-list.component.html (excerpt)">
 
 </code-example>
 
@@ -1239,11 +1239,11 @@ Here are the files discussed in this milestone.
 
   </code-pane>
 
-  <code-pane header="hero-list/hero-list.component.html" path="router/src/app/hero-list/hero-list.component.1.html">
+  <code-pane header="hero-list/hero-list.component.html" path="router/src/app/hero-list/hero-list.component.html">
 
   </code-pane>
 
-  <code-pane header="crisis-list/crisis-list.component.html" path="router/src/app/crisis-list/crisis-list.component.1.html">
+  <code-pane header="crisis-list/crisis-list.component.html" path="router/src/app/crisis-list/crisis-list.component.html">
 
   </code-pane>
 
@@ -2242,10 +2242,10 @@ This file does the following:
 
 You could also create more transitions for other routes. This trigger is sufficient for the current milestone.
 
-Back in the `AppComponent`, import the `RouterOutlet` token from the `@angular/router` package and the `slideInAnimation` from 
+Back in the `AppComponent`, import the `RouterOutlet` token from the `@angular/router` package and the `slideInDownAnimation` from 
 `'./animations.ts`.
 
-Add an `animations` array to the `@Component` metadata's that contains the `slideInAnimation`.
+Add an `animations` array to the `@Component` metadata's that contains the `slideInDownAnimation`.
 
 <code-example path="router/src/app/app.component.2.ts" linenums="false" header="src/app/app.component.ts (animations)" region="animation-imports">
 
@@ -3796,7 +3796,7 @@ The relevant *Crisis Center* code for this milestone follows.
 
   </code-pane>
 
-  <code-pane header="crisis-detail.component.ts" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts">
+  <code-pane header="crisis-detail.component.html" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.html">
 
   </code-pane>
 

aio/content/guide/service-worker-communications.md

@@ -50,9 +50,6 @@ script will never be registered with the browser.
 You can avoid that by waiting for the app to stabilize first, before starting to poll for updates
 (as shown in the example above).
 
-Note that this is true for any kind of polling done by your application.
-Check the {@link ApplicationRef#isStable isStable} documentation for more information. 
-
 </div>
 
 ### Forcing update activation

aio/content/guide/testing.md

@@ -2650,10 +2650,10 @@ It takes two arguments: the component type to override (`HeroDetailComponent`) a
 The [override metadata object](#metadata-override-object) is a generic defined as follows:
 
 <code-example format="." language="javascript">
-  type MetadataOverride&lt;T&gt; = {
-    add?: Partial&lt;T&gt;;
-    remove?: Partial&lt;T&gt;;
-    set?: Partial&lt;T&gt;;
+  type MetadataOverride<T> = {
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
   };
 </code-example>
 
@@ -3008,10 +3008,10 @@ appropriate to the method, that is, the parameter of an `@NgModule`,
 `@Component`, `@Directive`, or `@Pipe`.
 
 <code-example format="." language="javascript">
-  type MetadataOverride&lt;T&gt; = {
-    add?: Partial&lt;T&gt;;
-    remove?: Partial&lt;T&gt;;
-    set?: Partial&lt;T&gt;;
+  type MetadataOverride<T> = {
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
   };
 </code-example>
 

aio/content/guide/typescript-configuration.md

@@ -34,21 +34,7 @@ For details about `tsconfig.json`, see the official
 
 The [Setup](guide/setup) guide uses the following `tsconfig.json`:
 
-<code-example lang="json" header="tsconfig.json" linenums="false">
-  {
-    "compilerOptions": {
-      "target": "es5",
-      "module": "commonjs",
-      "moduleResolution": "node",
-      "sourceMap": true,
-      "emitDecoratorMetadata": true,
-      "experimentalDecorators": true,
-      "lib": [ "es2015", "dom" ],
-      "noImplicitAny": true,
-      "suppressImplicitAnyIndexErrors": true
-    }
-  }
-</code-example>
+<code-example path="quickstart/src/tsconfig.1.json" header="tsconfig.json" linenums="false"></code-example>
 
 This file contains options and flags that are essential for Angular applications.
 

aio/content/guide/using-libraries.md

@@ -17,6 +17,9 @@ For an example, see [Angular Material](https://material.angular.io/) docs.
 
 Library packages often include typings in `.d.ts` files; see examples in `node_modules/@angular/material`. If your library's package does not include typings and your IDE complains, you may need to install the library's associated `@types/<lib_name>` package.
 
+To configure a library that does not include typings in the same package, install the related `@types` package with npm.
+TypeScript looks for types in the `node_modules/@types` folder by default, so you don't have to add each type package individually.
+
 For example, suppose you have a library named `d3`:
 
 <code-example format="." language="bash">
@@ -24,8 +27,15 @@ npm install d3 --save
 npm install @types/d3 --save-dev
 </code-example>
 
-Types defined in a `@types/` package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library.
-TypeScript looks for types in the `node_modules/@types` folder by default, so you don't have to add each type package individually.
+Types defined in the library need to be added to the TypeScript configuration for the project that uses it.
+
+* Add the library to the "types" array in `src/tsconfig.app.json`.
+
+```
+"types":[
+  "d3"
+]
+```
 
 If a library doesn't have typings available at `@types/`, you can still use it by manually adding typings for it.
 To do this: