release: cut the v8.0.0-beta.3 release

PR Close #28553

.bazelignore

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

.bazelrc

@@ -22,12 +22,18 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
 # Filesystem interactions     #
 ###############################
 
-# Don't create symlinks like bazel-out in the project.
-# These cause VSCode to traverse a massive tree, opening file handles and
+# 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
 # eventually a surprising failure with auto-discovery of the C++ toolchain in
 # MacOS High Sierra.
 # See https://github.com/bazelbuild/bazel/issues/4603
-build --symlink_prefix=/
+build --symlink_prefix=dist/
 
 # Performance: avoid stat'ing input files
 build --watchfs
@@ -36,6 +42,16 @@ 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 #
@@ -43,7 +59,9 @@ test --nolegacy_external_runfiles
 ###############################
 
 # 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,6 +2,10 @@
 # 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,10 +11,19 @@
 # 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**: If you change the version of the docker images, also change the `cache_key` suffix.
+# **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.
 var_1: &default_docker_image circleci/node:10.12
 var_2: &browsers_docker_image circleci/node:10.12-browsers
-var_3: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-10.12
+# 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.
+var_3: &cache_key v2-angular-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-node-10.12
 
 # Define common ENV vars
 var_4: &define_env_vars
@@ -45,13 +54,30 @@ var_7: &post_checkout
 var_8: &yarn_install
   run:
     name: Running Yarn install
-    command: yarn install --frozen-lockfile --non-interactive
+    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
 
 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: |
+      echo "Attempting to install $CI_YARN_VERSION from https://yarnpkg.com" |
+      curl -o- -L https://yarnpkg.com/install.sh | PROFILE=$BASH_ENV bash -s -- --version "$CI_YARN_VERSION"
+
 version: 2
 jobs:
   lint:
@@ -62,6 +88,7 @@ jobs:
       - restore_cache:
           key: *cache_key
       - *define_env_vars
+      - *download_yarn
       - *yarn_install
 
       - run: 'yarn bazel:format -mode=check ||
@@ -82,6 +109,7 @@ jobs:
           key: *cache_key
       - *define_env_vars
       - *setup_circleci_bazel_config
+      - *download_yarn
       - *yarn_install
 
       # Setup remote execution and run RBE-compatible tests.
@@ -108,6 +136,7 @@ jobs:
           key: *cache_key
       - *define_env_vars
       - *setup_circleci_bazel_config
+      - *download_yarn
       - *yarn_install
       - *setup_bazel_remote_execution
 
@@ -146,6 +175,7 @@ jobs:
       - restore_cache:
           key: *cache_key
       - *define_env_vars
+      - *download_yarn
         # Build aio
       - run: yarn --cwd aio build --progress=false
         # Lint the code
@@ -157,9 +187,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 --watch=false
+      - run: yarn --cwd aio test --progress=false --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e
+      - run: yarn --cwd aio e2e --configuration=ci
         # Run unit tests for Firebase redirects
       - run: yarn --cwd aio redirects-test
 
@@ -174,6 +204,7 @@ jobs:
       - 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
@@ -191,15 +222,30 @@ jobs:
       - 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 --watch=false
+      - run: yarn --cwd aio test --progress=false --watch=false
         # Run e2e tests
-      - run: yarn --cwd aio e2e
+      - run: yarn --cwd aio e2e --configuration=ci
+
+  test_aio_local_ivy:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - 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
 
   test_aio_tools:
     <<: *job_defaults
@@ -211,6 +257,7 @@ jobs:
       - 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
@@ -218,11 +265,12 @@ jobs:
       - run: yarn --cwd aio tools-test
       - run: ./aio/aio-builds-setup/scripts/test.sh
 
-  test_docs_examples_0:
+  test_docs_examples:
     <<: *job_defaults
     docker:
       # Needed because the example e2e tests depend on Chrome.
       - image: *browsers_docker_image
+    parallelism: 3
     steps:
       - checkout:
           <<: *post_checkout
@@ -231,32 +279,15 @@ jobs:
       - 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
-      - run: yarn --cwd aio example-e2e --setup --local --shard=0/2
-
-  test_docs_examples_1:
-    <<: *job_defaults
-    docker:
-      # Needed because the example e2e tests depend on Chrome.
-      - image: *browsers_docker_image
-    steps:
-      - checkout:
-          <<: *post_checkout
-      - restore_cache:
-          key: *cache_key
-      - attach_workspace:
-          at: dist
-      - *define_env_vars
-        # Install root
-      - *yarn_install
-        # Install aio
-      - run: yarn --cwd aio install --frozen-lockfile --non-interactive
-        # Run examples tests
-      - run: yarn --cwd aio example-e2e --setup --local --shard=1/2
+        # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
+        # Since the parallelism is set to "3", there will be three parallel CircleCI containers
+        # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
+      - run: yarn --cwd aio example-e2e --setup --local --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:
@@ -269,6 +300,7 @@ jobs:
       - 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:
@@ -290,19 +322,22 @@ jobs:
       - restore_cache:
           key: *cache_key
       - *define_env_vars
+      - *download_yarn
       - 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
 
-  # 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
+
+  # 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
   # starts.
-  # No new jobs should depend on this one.
-  build-packages-dist:
+
+  # Build the view engine npm packages. No new jobs should depend on this.
+  build-npm-packages:
     <<: *job_defaults
     resource_class: xlarge
     steps:
@@ -311,8 +346,9 @@ jobs:
       - restore_cache:
           key: *cache_key
       - *define_env_vars
-      - *setup_circleci_bazel_config
+      - *download_yarn
       - *yarn_install
+      - *setup_circleci_bazel_config
       - *setup_bazel_remote_execution
 
       - run: scripts/build-packages-dist.sh
@@ -323,6 +359,30 @@ jobs:
           root: dist
           paths:
             - packages-dist
+
+
+  # Build the ivy npm packages.
+  build-ivy-npm-packages:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *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.
@@ -333,6 +393,7 @@ jobs:
   # See comments inside the integration/run_tests.sh script.
   integration_test:
     <<: *job_defaults
+    parallelism: 4
     docker:
       # Needed because the integration tests expect Chrome to be installed (e.g cli-hello-world)
       - image: *browsers_docker_image
@@ -348,7 +409,10 @@ jobs:
       - attach_workspace:
           at: dist
       - *define_env_vars
-      - run: ./integration/run_tests.sh
+      - *download_yarn
+      # 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}
 
   # This job updates the content of repos like github.com/angular/core-builds
   # for every green build on angular/angular.
@@ -390,6 +454,7 @@ jobs:
           <<: *post_checkout
       - restore_cache:
           key: *cache_key
+      - *download_yarn
       - *define_env_vars
       - run:
           name: Run tests against the deployed apps
@@ -399,6 +464,112 @@ jobs:
           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:
+    <<: *job_defaults
+    docker:
+      - image: *browsers_docker_image
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *define_env_vars
+      - *download_yarn
+      - *yarn_install
+      - run: yarn tsc -p packages
+      - run: yarn tsc -p modules
+      - run: yarn karma start ./karma-js.conf.js --single-run --browsers=ChromeNoSandbox
+
+  legacy-unit-tests-saucelabs:
+    <<: *job_defaults
+    # In order to avoid the bottleneck of having a slow host machine, we acquire a better
+    # container for this job. This is necessary because we launch a lot of browsers concurrently
+    # and therefore the tunnel and Karma need to process a lot of file requests and tests.
+    resource_class: xlarge
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *define_env_vars
+      - *download_yarn
+      - *yarn_install
+      - 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)
+      - run:
+          name: Starting Saucelabs tunnel
+          command: ./scripts/saucelabs/start-tunnel.sh
+          background: true
+      - run: yarn tsc -p packages
+      - 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.
+      - run: ./scripts/saucelabs/wait-for-tunnel.sh
+      - 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
+      - *download_yarn
+      - *yarn_install
+      - *setup_circleci_bazel_config
+      - *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
+          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-perf.conf.js --bundles=true --dryrun
+
+  legacy-misc-tests:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - *define_env_vars
+      - *download_yarn
+      - *yarn_install
+      - attach_workspace:
+          at: dist
+      - run: yarn gulp check-cycle
+      # TODO: disabled because the Bazel packages-dist does not seem to have map files for
+      # the ESM5/ES2015 output. See: https://github.com/angular/angular/issues/27966
+      # - run: yarn gulp source-map-test
+
+  # Job to run unit tests from angular/material2. Needs a browser since all
+  # component unit tests assume they're running in the browser environment.
+  material-unit-tests:
+    <<: *job_defaults
+    resource_class: xlarge
+    docker:
+      - image: *browsers_docker_image
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - *define_env_vars
+      - *download_yarn
+      - attach_workspace:
+          at: dist
+      - run: ./scripts/ci/run_angular_material_unit_tests.sh
+
 workflows:
   version: 2
   default_workflow:
@@ -406,23 +577,32 @@ workflows:
       - lint
       - test
       - test_ivy_aot
-      - build-packages-dist
+      - build-npm-packages
+      - build-ivy-npm-packages
       - test_aio
+      - legacy-unit-tests-local
+      - legacy-unit-tests-saucelabs
       - deploy_aio:
           requires:
             - test_aio
+      - legacy-e2e-tests:
+          requires:
+            - build-npm-packages
+      - legacy-misc-tests:
+          requires:
+            - build-npm-packages
       - test_aio_local:
           requires:
-            - build-packages-dist
+            - build-npm-packages
+      - test_aio_local_ivy:
+          requires:
+            - build-npm-packages
       - test_aio_tools:
           requires:
-            - build-packages-dist
-      - test_docs_examples_0:
+            - build-npm-packages
+      - test_docs_examples:
           requires:
-            - build-packages-dist
-      - test_docs_examples_1:
-          requires:
-            - build-packages-dist
+            - build-npm-packages
       - aio_preview:
           # Only run on PR builds. (There can be no previews for non-PR builds.)
           filters:
@@ -433,7 +613,7 @@ workflows:
             - aio_preview
       - integration_test:
           requires:
-            - build-packages-dist
+            - build-npm-packages
       - 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:
@@ -446,11 +626,20 @@ workflows:
             - integration_test
             # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
             - test_aio_local
-            - test_docs_examples_0
-            - test_docs_examples_1
-            # Get the artifacts to publish from the build-packages-dist job
+            - test_aio_local_ivy
+            - test_docs_examples
+            # Get the artifacts to publish from the build-npm-packages job
             # since the publishing script expects the legacy outputs layout.
-            - build-packages-dist
+            - build-npm-packages
+            - build-ivy-npm-packages
+            - legacy-e2e-tests
+            - legacy-misc-tests
+            - legacy-unit-tests-local
+            - legacy-unit-tests-saucelabs
+      - material-unit-tests:
+          requires:
+            - build-ivy-npm-packages
+
 
   aio_monitoring:
     jobs:
@@ -462,3 +651,9 @@ workflows:
             branches:
               only:
                 - master
+
+# TODO:
+# - don't build the g3 branch
+# - verify that we are bootstrapping with the right yarn version coming from the docker image
+# - check local chrome version pulled from docker image
+# - remove /tools/ngcontainer

.circleci/env-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

@@ -1,7 +1,10 @@
 #!/usr/bin/env bash
 
-# Load helpers and make them available everywhere (through `$BASH_ENV`).
+# Variables
 readonly envHelpersPath="`dirname $0`/env-helpers.inc.sh";
+readonly getCommitRangePath="`dirname $0`/get-commit-range.js";
+
+# Load helpers and make them available everywhere (through `$BASH_ENV`).
 source $envHelpersPath;
 echo "source $envHelpersPath;" >> $BASH_ENV;
 
@@ -9,14 +12,23 @@ echo "source $envHelpersPath;" >> $BASH_ENV;
 ####################################################################################################
 # Define PUBLIC environment variables for CircleCI.
 ####################################################################################################
+# See https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables for more info.
+####################################################################################################
 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";
+setPublicVar CI_YARN_VERSION "1.13.0"
+# 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,
-# i.e. on push builds (a.k.a. non-PR builds). That is fine, since we only need it in push builds.
-setPublicVar CI_COMMIT_RANGE "$(sed -r 's|^.*/([0-9a-f]+\.\.\.[0-9a-f]+)$|\1|i' <<< ${CIRCLE_COMPARE_URL:-})";
+# `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
+# retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and
+# rerun workflows of such builds). That is fine, since we only need it in push builds.
+setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || node $getCommitRangePath "$CIRCLE_BUILD_NUM" "$CIRCLE_COMPARE_URL"`";
 setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
 setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
@@ -31,5 +43,26 @@ setSecretVar CI_SECRET_PAYLOAD_FIREBASE_TOKEN "$ANGULAR_PAYLOAD_TOKEN";
 setSecretVar CI_SECRET_SLACK_CARETAKER_WEBHOOK_URL "$SLACK_CARETAKER_WEBHOOK_URL";
 
 
+####################################################################################################
+# Define SauceLabs environment variables for CircleCI.
+####################################################################################################
+# In order to have a meaningful SauceLabs badge on the repo page,
+# the angular2-ci account is used only when pushing commits to master;
+# in all other cases, the regular angular-ci account is used.
+if [ "${CI_PULL_REQUEST}" = "false" ] && [ "${CI_REPO_OWNER}" = "angular" ] && [ "${CI_BRANCH}" = "master" ]; then
+  setPublicVar SAUCE_USERNAME "angular2-ci";
+  setSecretVar SAUCE_ACCESS_KEY "693ebc16208a-0b5b-1614-8d66-a2662f4e";
+else
+  setPublicVar SAUCE_USERNAME "angular-ci";
+  setSecretVar SAUCE_ACCESS_KEY "9b988f434ff8-fbca-8aa4-4ae3-35442987";
+fi
+setPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock
+setPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock
+setPublicVar SAUCE_TUNNEL_IDENTIFIER "angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX}"
+# Amount of seconds we wait for sauceconnect to establish a tunnel instance. In order to not
+# acquire CircleCI instances for too long if sauceconnect failed, we need a connect timeout.
+setPublicVar SAUCE_READY_FILE_TIMEOUT 120
+
+
 # Source `$BASH_ENV` to make the variables available immediately.
 source $BASH_ENV;

.circleci/get-commit-range.js

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+
+/**
+ * **Usage:**
+ * ```
+ * node get-commit-range <build-number> [<compare-url> [<circle-token>]]
+ * ```
+ *
+ * Returns the value of the `CIRCLE_COMPARE_URL` environment variable (if defined) or, if this is
+ * not a PR build (i.e. `CIRCLE_PR_NUMBER` is not defined), retrieves the equivalent of
+ * `CIRCLE_COMPARE_URL` for jobs that are part of a rerun workflow.
+ *
+ * **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 workflow, 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();
+  });
+}

.github/CODEOWNERS

@@ -54,6 +54,7 @@
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
+#  mgechev - Minko Gechev
 #  mhevery - Misko Hevery
 #  ocombe - Olivier Combe
 #  petebacondarwin - Pete Bacon Darwin
@@ -93,6 +94,7 @@
 #  Used for approving minor documentation-only changes that don't require engineering review.
 #  (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
 #
+#   - brandonroberts
 #   - gkalpak
 #   - jenniferfell
 #   - petebacondarwin
@@ -112,6 +114,7 @@
 #   - alexeagle
 #   - kyliau
 #   - IgorMinar
+#   - mgechev
 
 
 # ===========================================================
@@ -121,6 +124,7 @@
 #   - alexeagle
 #   - filipesilva
 #   - hansl
+#   - mgechev
 
 
 # ===========================================================
@@ -258,6 +262,7 @@
 #  @angular/docs-infra
 # ===========================================================
 #
+#   - brandonroberts
 #   - gkalpak
 #   - IgorMinar
 #   - petebacondarwin
@@ -730,14 +735,6 @@ testing/**                                                      @angular/fw-test
 
 
 
-# ================================================
-#  Public API
-# ================================================
-
-/tools/public_api_guard/**                                      @angular/fw-public-api
-
-
-
 # ================================================
 #  Build & CI Owners
 # ================================================
@@ -752,6 +749,19 @@ testing/**                                                      @angular/fw-test
 /tools/**                                                       @angular/fw-dev-infra
 *.bzl                                                           @angular/fw-dev-infra
 
+# ================================================
+#  Material CI
+# ================================================
+
+/tools/material-ci/**                                           @angular/fw-core @angular/fw-dev-infra
+
+
+# ================================================
+#  Public API
+# ================================================
+
+/tools/public_api_guard/**                                      @angular/fw-public-api
+
 
 
 # ================================================

.github/angular-robot.yml

@@ -101,7 +101,6 @@ merge:
 
     # list of PR statuses that need to be successful
     requiredStatuses:
-      - "continuous-integration/travis-ci/pr"
       - "ci/circleci: build"
       - "ci/circleci: lint"
 

.gitignore

@@ -1,11 +1,10 @@
 .DS_STORE
 
 /dist/
-/bazel-*
+/bazel-out
 /integration/bazel/bazel-*
 e2e_test.*
 node_modules
-bower_components
 tools/gulp-tasks/cldr/cldr-data/
 
 # Include when developing application packages.
@@ -13,9 +12,9 @@ pubspec.lock
 .c9
 .idea/
 .settings/
+.vscode/launch.json
 *.swo
 modules/.settings
-.vscode
 modules/.vscode
 
 # Don't check in secret files

.travis.yml

@@ -1,66 +0,0 @@
-language: node_js
-sudo: false
-dist: trusty
-node_js:
-  - '10.9.0'
-
-addons:
-#  firefox: "38.0"
-  apt:
-    sources:
-      # needed to install g++ that is used by npms's native modules
-      - ubuntu-toolchain-r-test
-    packages:
-      # needed to install g++ that is used by npms's native modules
-      - g++-4.8
-
-branches:
-  except:
-    - g3
-
-cache:
-  yarn: true
-  directories:
-     - ./node_modules
-     - ./.chrome/chromium
-     - ./aio/node_modules
-
-env:
-  global:
-    # GITHUB_TOKEN_ANGULAR=<github token, a personal access token of the angular-builds account, account access in valentine>
-    # This is needed for the e2e Travis matrix task to publish packages to github for continuous packages delivery.
-    - secure: "aCdHveZuY8AT4Jr1JoJB4LxZsnGWRe/KseZh1YXYe5UtufFCtTVHvUcLn0j2aLBF0KpdyS+hWf0i4np9jthKu2xPKriefoPgCMpisYeC0MFkwbmv+XlgkUbgkgVZMGiVyX7DCYXVahxIoOUjVMEDCbNiHTIrfEuyq24U3ok2tHc="
-  matrix:
-    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
-    - CI_MODE=e2e
-    - CI_MODE=js
-    - CI_MODE=saucelabs_required
-    # deactivated, see #19768
-    # - CI_MODE=browserstack_required
-
-    # We disable these optional jobs because those acquire tunnel and browser instances which
-    # could lead to rate limit excess while those are failing most of the time and nobody pays
-    # attention anyway.
-    # - CI_MODE=saucelabs_optional
-    # - CI_MODE=browserstack_optional
-
-matrix:
-  fast_finish: true
-  allow_failures:
-    - env: "CI_MODE=saucelabs_optional"
-    - env: "CI_MODE=browserstack_optional"
-
-before_install:
-  # source the env.sh script so that the exported variables are available to other scripts later on
-  - source ./scripts/ci/env.sh print
-
-install:
-  - ./scripts/ci/install.sh
-
-script:
-  - ./scripts/ci/build.sh
-  - ./scripts/ci/test.sh
-  - ./scripts/ci/angular.sh
-  # all the scripts under this line will not quickly abort in case ${TRAVIS_TEST_RESULT} is 1 (job failure)
-  - ./scripts/ci/cleanup.sh
-  - ./scripts/ci/print-logs.sh

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.formatOnSave": true,
+  // Please install http://clang.llvm.org/docs/ClangFormat.html in VSCode to take advantage of clang-format
+  "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format",
+  "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,39 +1,228 @@
-<a name="7.2.0"></a>
-# [7.2.0](https://github.com/angular/angular/compare/7.2.0-rc.0...7.2.0) (2019-01-07)
+<a name="8.0.0-beta.3"></a>
+# [8.0.0-beta.3](https://github.com/angular/angular/compare/8.0.0-beta.2...8.0.0-beta.3) (2019-02-06)
 
 
 ### Bug Fixes
 
-* **bazel:** unable to launch protractor test on windows ([#27850](https://github.com/angular/angular/issues/27850)) ([1e6c9be](https://github.com/angular/angular/commit/1e6c9be))
+* **bazel:** Bazel builder resolves with require.resolve() ([#28478](https://github.com/angular/angular/issues/28478)) ([36902e2](https://github.com/angular/angular/commit/36902e2))
+* **bazel:** fix integration test for bazel-schematics ([#28460](https://github.com/angular/angular/issues/28460)) ([b1e099b](https://github.com/angular/angular/commit/b1e099b))
+* **compiler-cli:** base synthetic filepaths on input filepath ([#28453](https://github.com/angular/angular/issues/28453)) ([7219639](https://github.com/angular/angular/commit/7219639))
+* **compiler-cli:** diagnostics should respect "newLine" compiler option ([#28352](https://github.com/angular/angular/issues/28352)) ([4aa189d](https://github.com/angular/angular/commit/4aa189d))
+* **core:** remove createInjector() from public API ([#28509](https://github.com/angular/angular/issues/28509)) ([f2621db](https://github.com/angular/angular/commit/f2621db))
+
+
+### Performance Improvements
+
+* pngcrush all pngs ([#28479](https://github.com/angular/angular/issues/28479)) ([ec6e730](https://github.com/angular/angular/commit/ec6e730)), closes [#18243](https://github.com/angular/angular/issues/18243)
+
+
+
+<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="8.0.0-beta.2"></a>
+# [8.0.0-beta.2](https://github.com/angular/angular/compare/8.0.0-beta.1...8.0.0-beta.2) (2019-01-30)
+
+
+### Bug Fixes
+
+* **bazel:** also pass afterDeclarations transformers to emitWithTsickle ([#28342](https://github.com/angular/angular/issues/28342)) ([70e426b](https://github.com/angular/angular/commit/70e426b))
+* **forms:** don't override form group's dirty state when disabling controls ([#24591](https://github.com/angular/angular/issues/24591)) ([ef67282](https://github.com/angular/angular/commit/ef67282))
+
+
+### Features
+
+* **compiler-cli:** expose ngtsc as a TscPlugin ([#28435](https://github.com/angular/angular/issues/28435)) ([a227c52](https://github.com/angular/angular/commit/a227c52))
+
+
+### Performance Improvements
+
+* **core:** be more consistent about typeof checks ([#28400](https://github.com/angular/angular/issues/28400)) ([9af18c2](https://github.com/angular/angular/commit/9af18c2))
+
+
+
+<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="8.0.0-beta.1"></a>
+# [8.0.0-beta.1](https://github.com/angular/angular/compare/8.0.0-beta.0...8.0.0-beta.1) (2019-01-22)
+
+
+### Bug Fixes
+
+* **bazel:** increase node memory limit for ng_module rule to prevent OOM for big modules ([#28237](https://github.com/angular/angular/issues/28237)) ([73616ab](https://github.com/angular/angular/commit/73616ab))
+* **router:** `skipLocationChange` with named outlets ([#28300](https://github.com/angular/angular/issues/28300)) ([50df897](https://github.com/angular/angular/commit/50df897)), closes [#27680](https://github.com/angular/angular/issues/27680) [#28200](https://github.com/angular/angular/issues/28200)
+
+
+### Features
+
+* **bazel:** Add support for SASS ([#28167](https://github.com/angular/angular/issues/28167)) ([f59f18c](https://github.com/angular/angular/commit/f59f18c))
+* **compiler-cli:** resolve generated Sass/Less files to .css inputs ([#28166](https://github.com/angular/angular/issues/28166)) ([a58fd21](https://github.com/angular/angular/commit/a58fd21))
+* **forms:** add `markAllAsTouched()` to `AbstractControl` ([#26812](https://github.com/angular/angular/issues/26812)) ([45bf911](https://github.com/angular/angular/commit/45bf911)), closes [#19400](https://github.com/angular/angular/issues/19400)
+
+
+### Reverts
+
+* "ci: use image based cache for windows BuildKite ([#27990](https://github.com/angular/angular/issues/27990))" ([#28160](https://github.com/angular/angular/issues/28160)) ([7bdf3fe](https://github.com/angular/angular/commit/7bdf3fe))
+
+
+
+<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)
+
+
+### 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))
+
+
+
+<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
+
+* **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
+
+* **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))
+
+
+
+<a name="7.2.1"></a>
+## [7.2.1](https://github.com/angular/angular/compare/7.2.0...7.2.1) (2019-01-16)
+
+
+### Bug Fixes
+
+* **bazel:** Add [@bazel](https://github.com/bazel)/bazel to dev deps ([#28032](https://github.com/angular/angular/issues/28032)) ([21093b9](https://github.com/angular/angular/commit/21093b9))
+* **bazel:** Add /bazel-out to .gitignore ([#27874](https://github.com/angular/angular/issues/27874)) ([e4fc8ba](https://github.com/angular/angular/commit/e4fc8ba))
+* **bazel:** Add ibazel to deps of Bazel project ([#28090](https://github.com/angular/angular/issues/28090)) ([28d34b6](https://github.com/angular/angular/commit/28d34b6))
+* **bazel:** Bazel schematics should add router package ([#28141](https://github.com/angular/angular/issues/28141)) ([02a852a](https://github.com/angular/angular/commit/02a852a))
+* **bazel:** flat module misses AMD module name on windows ([#27839](https://github.com/angular/angular/issues/27839)) ([c3d8e28](https://github.com/angular/angular/commit/c3d8e28))
+* **bazel:** incorrectly always uses ngc-wrapped from "npm" workspace ([#28137](https://github.com/angular/angular/issues/28137)) ([ca3965a](https://github.com/angular/angular/commit/ca3965a))
+* **bazel:** ng_package creates invalid typings reexport on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([6b394f6](https://github.com/angular/angular/commit/6b394f6))
+* **bazel:** packager not properly removing amd directives on windows ([#27829](https://github.com/angular/angular/issues/27829)) ([fad4145](https://github.com/angular/angular/commit/fad4145))
+* **bazel:** protractor rule does not run spec files with underscore ([#28022](https://github.com/angular/angular/issues/28022)) ([f05c5f8](https://github.com/angular/angular/commit/f05c5f8))
+* **bazel:** protractor utils cannot start server on windows ([#27915](https://github.com/angular/angular/issues/27915)) ([0be8487](https://github.com/angular/angular/commit/0be8487))
+* **bazel:** replay compilation uses wrong compiler for building esm5 ([#28053](https://github.com/angular/angular/issues/28053)) ([fbbdaaa](https://github.com/angular/angular/commit/fbbdaaa))
+* **router:** ensure URL is updated after second redirect with UrlUpdateStrategy="eager" ([#27680](https://github.com/angular/angular/issues/27680)) ([6ae7aee](https://github.com/angular/angular/commit/6ae7aee)), closes [#27116](https://github.com/angular/angular/issues/27116)
+* **service-worker:** navigation urls backwards compatibility ([#27244](https://github.com/angular/angular/issues/27244)) ([585e871](https://github.com/angular/angular/commit/585e871))
+
+
+### Performance Improvements
+
+* **platform-server:** use shared `DomElementSchemaRegistry` instance ([#28150](https://github.com/angular/angular/issues/28150)) ([#28151](https://github.com/angular/angular/issues/28151)) ([6851581](https://github.com/angular/angular/commit/6851581))
+
+
+
+<a name="7.2.0"></a>
+# [7.2.0](https://github.com/angular/angular/compare/7.1.4...7.2.0) (2019-01-07)
+
+7.2.0 release also contains all the fixes released in 7.1.4.
+
+### Features
+
+* add support for typescript 3.2 ([#27536](https://github.com/angular/angular/issues/27536)) ([17e702b](https://github.com/angular/angular/commit/17e702b))
+* **bazel:** ng-new schematics with Bazel ([#27277](https://github.com/angular/angular/issues/27277)) ([06d4a0c](https://github.com/angular/angular/commit/06d4a0c))
 * **forms:** match getError and hasError to get method signature ([#20211](https://github.com/angular/angular/issues/20211)) ([1b0b36d](https://github.com/angular/angular/commit/1b0b36d))
-* **upgrade:** allow nesting components from different downgraded modules ([#27217](https://github.com/angular/angular/issues/27217)) ([bc0ee01](https://github.com/angular/angular/commit/bc0ee01))
-* **upgrade:** correctly handle nested downgraded components with `downgradeModule()` ([#27217](https://github.com/angular/angular/issues/27217)) ([326b464](https://github.com/angular/angular/commit/326b464)), closes [#22581](https://github.com/angular/angular/issues/22581) [#22869](https://github.com/angular/angular/issues/22869) [#27083](https://github.com/angular/angular/issues/27083)
-
-
-<a name="7.2.0-rc.0"></a>
-# [7.2.0-rc.0](https://github.com/angular/angular/compare/7.2.0-beta.2...7.2.0-rc.0) (2018-12-18)
+* **router:** add predicate function  mode for runGuardsAndResolvers ([#27682](https://github.com/angular/angular/issues/27682)) ([12c3176](https://github.com/angular/angular/commit/12c3176)), closes [#26861](https://github.com/angular/angular/issues/26861) [#18253](https://github.com/angular/angular/issues/18253) [#27464](https://github.com/angular/angular/issues/27464)
+* **router:** add a Navigation type available during navigation ([#27198](https://github.com/angular/angular/issues/27198)) ([d40af0c](https://github.com/angular/angular/commit/d40af0c))
+* **router:** add pathParamsOrQueryParamsChange mode for runGuardsAndResolvers ([#27464](https://github.com/angular/angular/issues/27464)) ([d70a7f3](https://github.com/angular/angular/commit/d70a7f3)), closes [#26861](https://github.com/angular/angular/issues/26861) [#18253](https://github.com/angular/angular/issues/18253)
+* **router:** allow passing `state` to routerLink directives ([#27198](https://github.com/angular/angular/issues/27198)) ([73f6ed9](https://github.com/angular/angular/commit/73f6ed9)), closes [#24617](https://github.com/angular/angular/issues/24617)
+* **router:** allow passing state to `NavigationExtras` ([#27198](https://github.com/angular/angular/issues/27198)) ([67f4a5d](https://github.com/angular/angular/commit/67f4a5d))
+* **router:** restore whole object when navigating back to a page managed by Angular router ([#27198](https://github.com/angular/angular/issues/27198)) ([2684249](https://github.com/angular/angular/commit/2684249))
 
 
 ### Bug Fixes
 
 * **animations:** do not truncate decimals for delay ([#24455](https://github.com/angular/angular/issues/24455)) ([f1c9d6a](https://github.com/angular/angular/commit/f1c9d6a))
 * **animations:** mark actual descendant node as disabled ([#26180](https://github.com/angular/angular/issues/26180)) ([df123e0](https://github.com/angular/angular/commit/df123e0))
+* **bazel:** unable to launch protractor test on windows ([#27850](https://github.com/angular/angular/issues/27850)) ([1e6c9be](https://github.com/angular/angular/commit/1e6c9be))
 * **bazel:** devserver entry_module should have underscore name ([#27719](https://github.com/angular/angular/issues/27719)) ([f57916c](https://github.com/angular/angular/commit/f57916c))
 * **bazel:** emit full node stack traces when Angular compilation crashes ([#27678](https://github.com/angular/angular/issues/27678)) ([522919a](https://github.com/angular/angular/commit/522919a))
 * **bazel:** fix major/minor semver check between [@angular](https://github.com/angular)/bazel npm packager version and angular bazel repo version ([#27635](https://github.com/angular/angular/issues/27635)) ([1cc08b4](https://github.com/angular/angular/commit/1cc08b4))
 * **bazel:** Load http_archive and rules_nodejs dependencies ([#27609](https://github.com/angular/angular/issues/27609)) ([8313ffc](https://github.com/angular/angular/commit/8313ffc))
 * **bazel:** ng_package writes unrelevant definitions to bazel out ([#27519](https://github.com/angular/angular/issues/27519)) ([44dfa60](https://github.com/angular/angular/commit/44dfa60)), closes [/github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts#L105-L124](https://github.com//github.com/angular/angular/blob/4f9374951d67c75f67a31c110bd61ab72563db7d/packages/bazel/src/ng_package/packager.ts/issues/L105-L124)
 * **bazel:** Set module_name and enable ng test ([#27715](https://github.com/angular/angular/issues/27715)) ([85866de](https://github.com/angular/angular/commit/85866de))
+* **bazel:** fix TS errors in the `schematics/bazel-workspace` files ([#27600](https://github.com/angular/angular/issues/27600)) ([3290fc3](https://github.com/angular/angular/commit/3290fc3))
+* **bazel:** Read latest versions from latest-versions.ts & use semver check ([#27526](https://github.com/angular/angular/issues/27526)) ([30a3b49](https://github.com/angular/angular/commit/30a3b49))
+* **bazel:** tsickle dependency not working with typescript 3.1.x ([#27402](https://github.com/angular/angular/issues/27402)) ([f034114](https://github.com/angular/angular/commit/f034114))
+* **bazel:** do not throw error when writing tsickle externs ([#27200](https://github.com/angular/angular/issues/27200)) ([20a2bae](https://github.com/angular/angular/commit/20a2bae))
+* **bazel:** do not throw if ts compile action does not create esm5 outputs ([#27401](https://github.com/angular/angular/issues/27401)) ([c61a8b7](https://github.com/angular/angular/commit/c61a8b7))
+* **bazel:** ng_package cannot be run multiple times without clean ([#27200](https://github.com/angular/angular/issues/27200)) ([4f93749](https://github.com/angular/angular/commit/4f93749))
+* **bazel:** ng_package not generating UMD bundles on windows ([#27200](https://github.com/angular/angular/issues/27200)) ([7d59880](https://github.com/angular/angular/commit/7d59880))
+* **bazel:** ng_package should correctly map to source maps in secondary entry-points ([#27313](https://github.com/angular/angular/issues/27313)) ([eb17502](https://github.com/angular/angular/commit/eb17502)), closes [#25510](https://github.com/angular/angular/issues/25510)
+* **bazel:** Respect existing angular installation ([#27495](https://github.com/angular/angular/issues/27495)) ([4da739a](https://github.com/angular/angular/commit/4da739a))
 * **common:** KeyValuePipe should return empty array for empty objects ([#27258](https://github.com/angular/angular/issues/27258)) ([b39efdd](https://github.com/angular/angular/commit/b39efdd))
+* **common:** expose request url in network error ([#27143](https://github.com/angular/angular/issues/27143)) ([1db53da](https://github.com/angular/angular/commit/1db53da)), closes [#27029](https://github.com/angular/angular/issues/27029)
 * **compiler-cli:** create LiteralLikeNode for String and Number literal ([#27536](https://github.com/angular/angular/issues/27536)) ([2c9b6c0](https://github.com/angular/angular/commit/2c9b6c0))
+* **compiler-cli:** flatModuleIndex files not generated on windows with multiple input files ([#27200](https://github.com/angular/angular/issues/27200)) ([d3c08e7](https://github.com/angular/angular/commit/d3c08e7))
+* **core:** export a value for InjectFlags ([#27279](https://github.com/angular/angular/issues/27279)) ([23b06af](https://github.com/angular/angular/commit/23b06af)), closes [#27251](https://github.com/angular/angular/issues/27251)
+* **core:** More precise return type for `InjectableDecorator` ([#27360](https://github.com/angular/angular/issues/27360)) ([4b9948c](https://github.com/angular/angular/commit/4b9948c)), closes [#26942](https://github.com/angular/angular/issues/26942)
+* **forms:** typed argument for FormBuilder group ([#26985](https://github.com/angular/angular/issues/26985)) ([b0c7561](https://github.com/angular/angular/commit/b0c7561))
+* **platform-server:** add [@angular](https://github.com/angular)/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([32c5be9](https://github.com/angular/angular/commit/32c5be9)), closes [#26154](https://github.com/angular/angular/issues/26154)
 * **router:** ensure URL is updated after second redirect with UrlUpdateStrategy="eager" ([#27523](https://github.com/angular/angular/issues/27523)) ([ad26cd6](https://github.com/angular/angular/commit/ad26cd6)), closes [#27116](https://github.com/angular/angular/issues/27116)
+* **router:** update URL after redirects when urlHandlingStrategy='eager' ([#27356](https://github.com/angular/angular/issues/27356)) ([11a8bd8](https://github.com/angular/angular/commit/11a8bd8)), closes [#27076](https://github.com/angular/angular/issues/27076)
+* **upgrade:** allow nesting components from different downgraded modules ([#27217](https://github.com/angular/angular/issues/27217)) ([bc0ee01](https://github.com/angular/angular/commit/bc0ee01))
+* **upgrade:** correctly handle nested downgraded components with `downgradeModule()` ([#27217](https://github.com/angular/angular/issues/27217)) ([326b464](https://github.com/angular/angular/commit/326b464)), closes [#22581](https://github.com/angular/angular/issues/22581) [#22869](https://github.com/angular/angular/issues/22869) [#27083](https://github.com/angular/angular/issues/27083)
 * **upgrade:** upgrade Directive facade should not return different instance from constructor ([#27660](https://github.com/angular/angular/issues/27660)) ([c986d3d](https://github.com/angular/angular/commit/c986d3d))
-
-
-### Features
-
-* add support for typescript 3.2 ([#27536](https://github.com/angular/angular/issues/27536)) ([17e702b](https://github.com/angular/angular/commit/17e702b))
-* **router:** add predicate function  mode for runGuardsAndResolvers ([#27682](https://github.com/angular/angular/issues/27682)) ([12c3176](https://github.com/angular/angular/commit/12c3176)), closes [#26861](https://github.com/angular/angular/issues/26861) [#18253](https://github.com/angular/angular/issues/18253) [#27464](https://github.com/angular/angular/issues/27464)
+* **upgrade:** don't rely upon the runtime to resolve forward refs ([#27132](https://github.com/angular/angular/issues/27132)) ([a4462c2](https://github.com/angular/angular/commit/a4462c2))
 
 
 
@@ -56,19 +245,6 @@
 
 
 
-<a name="7.2.0-beta.2"></a>
-# [7.2.0-beta.2](https://github.com/angular/angular/compare/7.2.0-beta.1...7.2.0-beta.2) (2018-12-11)
-
-
-### Bug Fixes
-
-* **bazel:** fix TS errors in the `schematics/bazel-workspace` files ([#27600](https://github.com/angular/angular/issues/27600)) ([3290fc3](https://github.com/angular/angular/commit/3290fc3))
-* **bazel:** Read latest versions from latest-versions.ts & use semver check ([#27526](https://github.com/angular/angular/issues/27526)) ([30a3b49](https://github.com/angular/angular/commit/30a3b49))
-* **bazel:** tsickle dependency not working with typescript 3.1.x ([#27402](https://github.com/angular/angular/issues/27402)) ([f034114](https://github.com/angular/angular/commit/f034114))
-* **forms:** typed argument for FormBuilder group ([#26985](https://github.com/angular/angular/issues/26985)) ([b0c7561](https://github.com/angular/angular/commit/b0c7561))
-
-
-
 <a name="7.1.3"></a>
 ## [7.1.3](https://github.com/angular/angular/compare/7.1.2...7.1.3) (2018-12-11)
 
@@ -95,47 +271,6 @@
 * **platform-server:** add [@angular](https://github.com/angular)/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([236ac06](https://github.com/angular/angular/commit/236ac06)), closes [#26154](https://github.com/angular/angular/issues/26154)
 
 
-<a name="7.2.0-beta.1"></a>
-# [7.2.0-beta.1](https://github.com/angular/angular/compare/7.1.0...7.2.0-beta.1) (2018-12-06)
-
-
-### Bug Fixes
-
-* **bazel:** do not throw error when writing tsickle externs ([#27200](https://github.com/angular/angular/issues/27200)) ([20a2bae](https://github.com/angular/angular/commit/20a2bae))
-* **bazel:** do not throw if ts compile action does not create esm5 outputs ([#27401](https://github.com/angular/angular/issues/27401)) ([c61a8b7](https://github.com/angular/angular/commit/c61a8b7))
-* **bazel:** ng_package cannot be run multiple times without clean ([#27200](https://github.com/angular/angular/issues/27200)) ([4f93749](https://github.com/angular/angular/commit/4f93749))
-* **bazel:** ng_package not generating UMD bundles on windows ([#27200](https://github.com/angular/angular/issues/27200)) ([7d59880](https://github.com/angular/angular/commit/7d59880))
-* **bazel:** ng_package should correctly map to source maps in secondary entry-points ([#27313](https://github.com/angular/angular/issues/27313)) ([eb17502](https://github.com/angular/angular/commit/eb17502)), closes [#25510](https://github.com/angular/angular/issues/25510)
-* **bazel:** Respect existing angular installation ([#27495](https://github.com/angular/angular/issues/27495)) ([4da739a](https://github.com/angular/angular/commit/4da739a))
-* **common:** expose request url in network error ([#27143](https://github.com/angular/angular/issues/27143)) ([1db53da](https://github.com/angular/angular/commit/1db53da)), closes [#27029](https://github.com/angular/angular/issues/27029)
-* **compiler-cli:** flatModuleIndex files not generated on windows with multiple input files ([#27200](https://github.com/angular/angular/issues/27200)) ([d3c08e7](https://github.com/angular/angular/commit/d3c08e7))
-* **core:** export a value for InjectFlags ([#27279](https://github.com/angular/angular/issues/27279)) ([23b06af](https://github.com/angular/angular/commit/23b06af)), closes [#27251](https://github.com/angular/angular/issues/27251)
-* **core:** More precise return type for `InjectableDecorator` ([#27360](https://github.com/angular/angular/issues/27360)) ([4b9948c](https://github.com/angular/angular/commit/4b9948c)), closes [#26942](https://github.com/angular/angular/issues/26942)
-* **forms:** apply unicode flag to pattern attribute when supported ([#20819](https://github.com/angular/angular/issues/20819)) ([3c34b8b](https://github.com/angular/angular/commit/3c34b8b))
-* **platform-server:** add [@angular](https://github.com/angular)/http to the list of peerDependencies ([#27307](https://github.com/angular/angular/issues/27307)) ([32c5be9](https://github.com/angular/angular/commit/32c5be9)), closes [#26154](https://github.com/angular/angular/issues/26154)
-* **router:** update URL after redirects when urlHandlingStrategy='eager' ([#27356](https://github.com/angular/angular/issues/27356)) ([11a8bd8](https://github.com/angular/angular/commit/11a8bd8)), closes [#27076](https://github.com/angular/angular/issues/27076)
-* **upgrade:** don't rely upon the runtime to resolve forward refs ([#27132](https://github.com/angular/angular/issues/27132)) ([a4462c2](https://github.com/angular/angular/commit/a4462c2))
-
-
-### Features
-
-* **bazel:** ng-new schematics with Bazel ([#27277](https://github.com/angular/angular/issues/27277)) ([06d4a0c](https://github.com/angular/angular/commit/06d4a0c))
-* **router:** add a Navigation type available during navigation ([#27198](https://github.com/angular/angular/issues/27198)) ([d40af0c](https://github.com/angular/angular/commit/d40af0c))
-* **router:** add pathParamsOrQueryParamsChange mode for runGuardsAndResolvers ([#27464](https://github.com/angular/angular/issues/27464)) ([d70a7f3](https://github.com/angular/angular/commit/d70a7f3)), closes [#26861](https://github.com/angular/angular/issues/26861) [#18253](https://github.com/angular/angular/issues/18253)
-* **router:** allow passing `state` to routerLink directives ([#27198](https://github.com/angular/angular/issues/27198)) ([73f6ed9](https://github.com/angular/angular/commit/73f6ed9)), closes [#24617](https://github.com/angular/angular/issues/24617)
-* **router:** allow passing state to `NavigationExtras` ([#27198](https://github.com/angular/angular/issues/27198)) ([67f4a5d](https://github.com/angular/angular/commit/67f4a5d))
-* **router:** restore whole  object when navigating back to a page managed by Angular router ([#27198](https://github.com/angular/angular/issues/27198)) ([2684249](https://github.com/angular/angular/commit/2684249))
-
-<a name="7.2.0-beta.0"></a>
-# [7.2.0-beta.0](https://github.com/angular/angular/compare/7.1.0...7.2.0-beta.0) (2018-11-28)
-
-
-### Bug Fixes
-
-* **common:** expose request url in network error ([#27143](https://github.com/angular/angular/issues/27143)) ([1db53da](https://github.com/angular/angular/commit/1db53da)), closes [#27029](https://github.com/angular/angular/issues/27029)
-* **upgrade:** don't rely upon the runtime to resolve forward refs ([#27132](https://github.com/angular/angular/issues/27132)) ([a4462c2](https://github.com/angular/angular/commit/a4462c2))
-
-
 
 <a name="7.1.1"></a>
 ## [7.1.1](https://github.com/angular/angular/compare/7.1.0...7.1.1) (2018-11-28)

CONTRIBUTING.md

@@ -191,7 +191,7 @@ If the commit reverts a previous commit, it should begin with `revert: `, follow
 Must be one of the following:
 
 * **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
 * **docs**: Documentation only changes
 * **feat**: A new feature
 * **fix**: A bug fix

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2014-2018 Google, Inc. http://angular.io
+Copyright (c) 2010-2019 Google LLC. http://angular.io/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,3 @@
-[![Build Status](https://travis-ci.org/angular/angular.svg?branch=master)](https://travis-ci.org/angular/angular)
 [![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/angular/tree/master)
 [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)](https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)
 [![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

WORKSPACE

@@ -1,17 +1,6 @@
 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(
@@ -23,25 +12,15 @@ http_archive(
 #    path = "../rules_typescript",
 #)
 
-# Angular Bazel users will call this function
-rules_angular_dependencies()
+# Fetch rules_nodejs so we can install our npm dependencies
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    strip_prefix = "rules_nodejs-0.16.8",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.16.8.zip"],
+)
 
-# 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
-#
+# Fetch the rxjs repository since we build rxjs from source
+# TODO(gregmagolan): use rxjs bundles in the bazel build
 http_archive(
     name = "rxjs",
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
@@ -49,21 +28,22 @@ http_archive(
     url = "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz",
 )
 
-# Point to the integration test workspace just so that Bazel doesn't descend into it
-# when expanding the //... pattern
+# 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
 local_repository(
-    name = "bazel_integration_test",
-    path = "integration/bazel",
+    name = "npm",
+    path = "tools/npm_workspace",
 )
 
-#
-# Load and install our dependencies downloaded above.
-#
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+# Check the bazel version and download npm dependencies
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
 
 # Bazel version must be at least v0.21.0 because:
-#   - 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)
+#   - 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)
 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.
@@ -72,6 +52,7 @@ Try running `yarn bazel` instead.
 
 """)
 
+# Setup the Node.js toolchain
 node_repositories(
     node_version = "10.9.0",
     package_json = ["//:package.json"],
@@ -79,17 +60,27 @@ node_repositories(
     yarn_version = "1.12.1",
 )
 
-local_repository(
-    name = "npm",
-    path = "tools/npm_workspace",
-)
+# Setup the angular toolchain which installs npm dependencies into @ngdeps
+load("//tools:ng_setup_workspace.bzl", "ng_setup_workspace")
 
-load("@io_bazel_rules_go//go:def.bzl", "go_register_toolchains", "go_rules_dependencies")
+ng_setup_workspace()
 
-go_rules_dependencies()
+# Install all bazel dependencies of the @ngdeps npm packages
+load("@ngdeps//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
 
-go_register_toolchains()
+install_bazel_dependencies()
 
+# 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", "browser_repositories", "web_test_repositories")
 
 web_test_repositories()
@@ -99,21 +90,17 @@ browser_repositories(
     firefox = True,
 )
 
+# Setup the rules_typescript tooolchain
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
 
-load("@angular//:index.bzl", "ng_setup_workspace")
-
-ng_setup_workspace()
-
-##################################
-# Skylark documentation generation
-
+# Setup the rules_sass toolchain
 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/aio-builds-setup/dockerbuild/Dockerfile

@@ -26,8 +26,8 @@ ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=test-org
 ARG      AIO_GITHUB_REPO=angular
 ARG TEST_AIO_GITHUB_REPO=test-repo
-ARG      AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=aio-contributors
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80

aio/angular.json

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

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

@@ -0,0 +1,71 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, protractor } from 'protractor';
+
+describe('Event binding example', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  let saveButton = element.all(by.css('button')).get(0);
+  let onSaveButton = element.all(by.css('button')).get(1);
+  let myClick = element.all(by.css('button')).get(2);
+  let deleteButton = element.all(by.css('button')).get(3);
+  let saveNoProp = element.all(by.css('button')).get(4);
+  let saveProp = element.all(by.css('button')).get(5);
+
+
+  it('should display Event Binding with Angular', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Event Binding');
+  });
+
+  it('should display 6 buttons', function() {
+    expect(saveButton.getText()).toBe('Save');
+    expect(onSaveButton.getText()).toBe('on-click Save');
+    expect(myClick.getText()).toBe('click with myClick');
+    expect(deleteButton.getText()).toBe('Delete');
+    expect(saveNoProp.getText()).toBe('Save, no propagation');
+    expect(saveProp.getText()).toBe('Save with propagation');
+  });
+
+  it('should support user input', function () {
+    let input = element(by.css('input'));
+    let bindingResult = element.all(by.css('h4')).get(1);
+    expect(bindingResult.getText()).toEqual('Result: teapot');
+    input.sendKeys('abc');
+    expect(bindingResult.getText()).toEqual('Result: teapotabc');
+  });
+
+  it('should hide the item img', async () => {
+    let deleteButton = element.all(by.css('button')).get(3);
+    await deleteButton.click();
+    browser.switchTo().alert().accept();
+    expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
+  });
+
+  it('should show two alerts', async () => {
+    let parentDiv = element.all(by.css('.parent-div'));
+    let childDiv = element.all(by.css('div > div')).get(1);
+    await parentDiv.click();
+    browser.switchTo().alert().accept();
+    expect(childDiv.getText()).toEqual('Click me too! (child)');
+    await childDiv.click();
+    expect(browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div');
+    browser.switchTo().alert().accept();
+  });
+
+  it('should show 1 alert from Save, no prop, button', async () => {
+    await saveNoProp.click();
+    expect(browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation');
+    browser.switchTo().alert().accept();
+  });
+
+  it('should show 2 alerts from Save w/prop button', async () => {
+    await saveProp.click();
+    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
+    browser.switchTo().alert().accept();
+    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
+    browser.switchTo().alert().accept();
+  });
+});

aio/content/examples/event-binding/src/app/app.component.css

@@ -0,0 +1,25 @@
+.group {
+  background-color: #dae8f9;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.parent-div {
+  background-color: #bdd1f7;
+  border: solid 1px rgb(25, 118, 210);
+  padding: 1rem;
+}
+
+.parent-div:hover {
+  background-color: #8fb4f9;
+}
+
+.child-div {
+  margin-top: 1rem;
+  background-color: #fff;
+  padding: 1rem;
+}
+
+.child-div:hover {
+  background-color: #eee;
+}

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

@@ -0,0 +1,53 @@
+<h1 id="event-binding">Event Binding</h1>
+
+<div class="group">
+  <h3>Target event</h3>
+  <!-- #docregion event-binding-1 -->
+  <button (click)="onSave($event)">Save</button>
+  <!-- #enddocregion event-binding-1 -->
+
+  <!-- #docregion event-binding-2 -->
+  <button on-click="onSave($event)">on-click Save</button>
+  <!-- #enddocregion event-binding-2 -->
+
+  <!-- #docregion custom-directive -->
+  <h4>myClick is an event on the custom ClickDirective:</h4>
+  <button (myClick)="clickMessage=$event" clickable>click with myClick</button>
+  {{clickMessage}}
+  <!-- #enddocregion custom-directive -->
+
+</div>
+
+<div class="group">
+  <h3>$event and event handling statements</h3>
+  <h4>Result: {{currentItem.name}}</h4>
+
+  <!-- #docregion event-binding-3-->
+  <input [value]="currentItem.name"
+         (input)="currentItem.name=$event.target.value" >
+  without NgModel
+  <!-- #enddocregion event-binding-3-->
+</div>
+
+<div class="group">
+  <h3>Binding to a nested component</h3>
+  <h4>Custom events with EventEmitter</h4>
+  <!-- #docregion event-binding-to-component -->
+  <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
+    <!-- #enddocregion event-binding-to-component -->
+
+
+  <h4>Click to see event target class:</h4>
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
+  <div class="child-div">Click me too! (child) </div>
+</div>
+
+<h3>Saves only once:</h3>
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<h3>Saves twice:</h3>
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save with propagation</button>
+</div>

aio/content/examples/event-binding/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'Featured product:'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Featured product:');
+  }));
+  it('should render title in a p tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
+  }));
+});

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

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { Item } from './item';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  currentItem = { name: 'teapot'} ;
+  clickMessage = '';
+
+  onSave(event: KeyboardEvent) {
+    const evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
+    alert('Saved.' + evtMsg);
+    if (event) { event.stopPropagation(); }
+  }
+
+  deleteItem(item: Item) {
+    alert(`Delete the ${item}.`);
+  }
+
+  onClickMe(event: KeyboardEvent) {
+    const evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
+    alert('Click me.' + evtMsg);
+  }
+
+}

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

@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+import { ItemDetailComponent } from './item-detail/item-detail.component';
+import { ClickDirective } from './click.directive';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ItemDetailComponent,
+    ClickDirective
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/event-binding/src/app/click.directive.ts

@@ -0,0 +1,18 @@
+/* tslint:disable use-output-property-decorator directive-class-suffix */
+import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
+
+@Directive({selector: '[myClick]'})
+export class ClickDirective {
+  @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
+
+  toggle = false;
+
+  constructor(el: ElementRef) {
+    el.nativeElement
+      .addEventListener('click', (event: Event) => {
+        this.toggle = !this.toggle;
+        this.clicks.emit(this.toggle ? 'Click!' : '');
+      });
+  }
+}
+

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.css

@@ -0,0 +1,11 @@
+.detail {
+  border: 1px solid rgb(25, 118, 210);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+img {
+  max-width: 100px;
+  display: block;
+  padding: 1rem 0;
+}

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html

@@ -0,0 +1,9 @@
+<div class="detail">
+  <p>This is the ItemDetailComponent</p>
+  <!-- #docregion line-through -->
+  <img src="{{itemImageUrl}}" [style.display]="displayNone">
+  <span [style.text-decoration]="lineThrough">{{ item.name }}
+  </span>
+  <button (click)="delete()">Delete</button>
+  <!-- #enddocregion line-through -->
+</div>

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemDetailComponent } from './item-detail.component';
+
+describe('ItemDetailComponent', () => {
+  let component: ItemDetailComponent;
+  let fixture: ComponentFixture<ItemDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts

@@ -0,0 +1,30 @@
+/* tslint:disable use-input-property-decorator use-output-property-decorator */
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { Item } from '../item';
+
+@Component({
+  selector: 'app-item-detail',
+  styleUrls: ['./item-detail.component.css'],
+  templateUrl: './item-detail.component.html'
+})
+export class ItemDetailComponent {
+
+  @Input() item;
+  itemImageUrl = 'assets/teapot.svg';
+  lineThrough = '';
+  displayNone = '';
+  @Input() prefix = '';
+
+  // #docregion deleteRequest
+  // This component makes a request but it can't actually delete a hero.
+  @Output() deleteRequest = new EventEmitter<Item>();
+
+  delete() {
+    this.deleteRequest.emit(this.item.name);
+    this.displayNone = this.displayNone ? '' : 'none';
+    this.lineThrough = this.lineThrough ? '' : 'line-through';
+  }
+  // #enddocregion deleteRequest
+
+}

aio/content/examples/event-binding/src/app/item.ts

@@ -0,0 +1,4 @@
+export class Item {
+  name: '';
+}
+

aio/content/examples/event-binding/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Demo</title>
+  <title>EventBinding</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

aio/content/examples/event-binding/src/main.ts

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

aio/content/examples/event-binding/stackblitz.json

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

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

@@ -0,0 +1,47 @@
+import { browser, element, by } from 'protractor';
+
+describe('Interpolation e2e tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display Interpolation and Template Expressions', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
+  });
+
+  it('should display Current customer: Maria', function () {
+    expect(element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
+  });
+
+  it('should display The sum of 1 + 1 is not 4.', function () {
+    expect(element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`);
+  });
+
+  it('should display Expression Context', function () {
+    expect(element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
+  });
+
+  it('should display a list of customers', function () {
+    expect(element.all(by.css('li')).get(0).getText()).toBe(`Maria`);
+  });
+
+  it('should display two pictures', function() {
+    let pottedPlant = element.all(by.css('img')).get(0);
+    let lamp = element.all(by.css('img')).get(1);
+
+    expect(pottedPlant.getAttribute('src')).toContain('pottedPlant');
+    expect(pottedPlant.isDisplayed()).toBe(true);
+
+    expect(lamp.getAttribute('src')).toContain('lamp');
+    expect(lamp.isDisplayed()).toBe(true);
+  });
+
+  it('should support user input', function () {
+    let input = element(by.css('input'));
+    let label = element(by.css('label'));
+    expect(label.getText()).toEqual('Type something:');
+    input.sendKeys('abc');
+    expect(label.getText()).toEqual('Type something: abc');
+  });
+});

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

@@ -0,0 +1,59 @@
+
+<div>
+  <h1>Interpolation and Template Expressions</h1>
+  <hr />
+
+  <div>
+    <h2>Interpolation</h2>
+    <!-- #docregion interpolation-example1 -->
+    <h3>Current customer: {{ currentCustomer }}</h3>
+    <!-- #enddocregion interpolation-example1 -->
+
+    <!-- #docregion component-property -->
+    <p>{{title}}</p>
+    <div><img src="{{itemImageUrl}}"></div>
+    <!-- #enddocregion component-property -->
+
+    <h3>Evaluating template expressions </h3>
+    <h4>Simple evaluation (to a string):</h4>
+    <!-- #docregion convert-string -->
+    <!-- "The sum of 1 + 1 is 2" -->
+    <p>The sum of 1 + 1 is {{1 + 1}}.</p>
+    <!-- #enddocregion convert-string -->
+
+    <h4>Evaluates using a method (also evaluates to a string):</h4>
+    <!-- #docregion invoke-method -->
+    <!-- "The sum of 1 + 1 is not 4" -->
+    <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
+    <!-- #enddocregion invoke-method -->
+  </div>
+
+  <hr />
+<h2>Expression Context</h2>
+
+<div>
+  <h3>Component context, properties of app.component.ts:</h3>
+  <!-- #docregion component-context -->
+  <h4>{{recommended}}</h4>
+  <img [src]="itemImageUrl2">
+  <!-- #enddocregion component-context -->
+</div>
+
+<div>
+  <h4>Template context, template input variables (let customer):</h4>
+  <!-- #docregion template-input-variable -->
+  <ul>
+    <li *ngFor="let customer of customers">{{customer.name}}</li>
+  </ul>
+  <!-- #enddocregion template-input-variable -->
+</div>
+
+<div (keyup)="0">
+  <h4>Template context: template reference variables (#customerInput):</h4>
+  <label>Type something:
+  <!-- #docregion template-reference-variable -->
+  <input #customerInput>{{customerInput.value}}</label>
+  <!-- #enddocregion template-reference-variable -->
+</div>
+
+</div>

aio/content/examples/interpolation/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'Featured product:'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Featured product:');
+  }));
+  it('should render title in a p tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
+  }));
+});

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+import { CUSTOMERS } from './customers';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  customers = CUSTOMERS;
+
+  currentCustomer = 'Maria';
+  title = 'Featured product:';
+  itemImageUrl = '../assets/pottedPlant.png';
+
+  recommended = 'You might also like:';
+  itemImageUrl2 = '../assets/lamp.png';
+
+
+
+  getVal(): number { return 2; }
+
+
+}

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

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

aio/content/examples/interpolation/src/app/customer.ts

@@ -0,0 +1,3 @@
+export class Customer {
+  name: string;
+}

aio/content/examples/interpolation/src/app/customers.ts

@@ -0,0 +1,9 @@
+import { Customer } from './customer';
+
+export const CUSTOMERS: Customer[] = [
+  { name: 'Maria' },
+  { name: 'Oliver' },
+  { name: 'Walter' },
+  { name: 'Lakshmi' },
+  { name: 'Yasha' }
+];

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

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title><%= utils.classify(name) %></title>
+  <title>Interpolation</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,7 +10,5 @@
 </head>
 <body>
   <app-root></app-root>
-  <script src="/zone.min.js"></script>
-  <script src="/bundle.min.js"></script>
 </body>
 </html>

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

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

aio/content/examples/interpolation/stackblitz.json

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

aio/content/examples/ngmodules/src/app/items/items.service.ts

@@ -16,7 +16,7 @@ const ITEMS: Item[] = [
 
 const FETCH_LATENCY = 500;
 
-/** Simulate a data service that retrieves crises from a server */
+/** Simulate a data service that retrieves items from a server */
 @Injectable()
 export class ItemService implements OnDestroy {
 

aio/content/examples/observables-in-angular/src/main.ts

@@ -61,7 +61,7 @@ export class Routable1Component implements OnInit {
   navStart: Observable<NavigationStart>;
 
   constructor(private router: Router) {
-    // Create a new Observable the publishes only the NavigationStart event
+    // Create a new Observable that publishes only the NavigationStart event
     this.navStart = router.events.pipe(
       filter(evt => evt instanceof NavigationStart)
     ) as Observable<NavigationStart>;

aio/content/examples/practical-observable-usage/src/backoff.ts

@@ -5,10 +5,9 @@ import { retryWhen, map, mergeMap } from 'rxjs/operators';
 
 function backoff(maxTries, ms) {
  return pipe(
-   retryWhen(attempts => range(1, maxTries)
+   retryWhen(attempts => zip(range(1, maxTries), attempts)
      .pipe(
-       zip(attempts, (i) => i),
-       map(i => i * i),
+       map(([i]) => i * i),
        mergeMap(i =>  timer(i * ms))
      )
    )

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

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  itemImageUrl = '../assets/lamp.png';
+  isUnchanged = true;
+  classes = 'special';
+  // #docregion parent-data-type
+  parentItem = 'bananas';
+  // #enddocregion parent-data-type
+
+  // #docregion pass-object
+  currentItem = [{
+    id: 21,
+    name: 'peaches'
+  }];
+  // #enddocregion pass-object
+
+  interpolationTitle = 'Interpolation';
+  propertyTitle = 'Property binding';
+
+  // #docregion malicious-content
+  evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
+  // #enddocregion malicious-content
+}

aio/content/examples/rx-library/src/simple-creation.ts

@@ -1,10 +1,10 @@
 
 // #docregion promise
 
-import { fromPromise } from 'rxjs';
+import { from } from 'rxjs';
 
 // Create an Observable out of a promise
-const data = fromPromise(fetch('/api/endpoint'));
+const data = from(fetch('/api/endpoint'));
 // Subscribe to begin listening for async result
 data.subscribe({
  next(response) { console.log(response); },

aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts

@@ -34,8 +34,9 @@ describe('sw-example App', () => {
         expect(items[3].getText()).toBe('Angular blog');
       });
   });
-   // Check for a rejected promise as the service worker is not enabled
-   it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
+
+  // Check for a rejected promise as the service worker is not enabled
+  it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
     const button = element(by.css('button'));
     const rejectMessage = element(by.css('p'));
     button.click();

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

@@ -0,0 +1,10 @@
+{
+  "projectType": "service-worker",
+  "e2e": [
+    {"cmd": "yarn", "args": ["e2e", "--no-webdriver-update"]},
+    {"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')"]},
+    {"cmd": "node", "args": ["--eval", "assert(require('./package.json').dependencies['@angular/service-worker'], '@angular/service-worker is missing')"]}
+  ]
+}

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

@@ -12,9 +12,9 @@ export class AppComponent {
   constructor(private update: SwUpdate) {}
 
   updateCheck(): void {
-      this.update
+    this.update
         .checkForUpdate()
         .then(() => this.updateCheckText = 'resolved')
         .catch(err => this.updateCheckText = `rejected: ${err.message}`);
-    }
+  }
 }

aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts

@@ -1,15 +1,17 @@
-import { Injectable } from '@angular/core';
+import { ApplicationRef, Injectable } from '@angular/core';
 import { SwUpdate } from '@angular/service-worker';
-
-
-// #docregion sw-check-update
-import { interval } from 'rxjs';
+import { concat, interval } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 @Injectable()
 export class CheckForUpdateService {
 
-  constructor(updates: SwUpdate) {
-    interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
+  constructor(appRef: ApplicationRef, updates: SwUpdate) {
+    // Allow the app to stabilize first, before starting polling for updates with `interval()`.
+    const appIsStable$ = appRef.isStable.pipe(first(isStable => isStable === true));
+    const everySixHours$ = interval(6 * 60 * 60 * 1000);
+    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
+
+    everySixHoursOnceAppIsStable$.subscribe(() => updates.checkForUpdate());
   }
 }
-// #enddocregion sw-check-update

aio/content/examples/testing/src/testing/router-link-directive-stub.ts

@@ -1,4 +1,4 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, HostListener } from '@angular/core';
 
 // export for convenience.
 export { RouterLink} from '@angular/router';
@@ -6,13 +6,13 @@ export { RouterLink} from '@angular/router';
 /* tslint:disable:directive-class-suffix */
 // #docregion router-link
 @Directive({
-  selector: '[routerLink]',
-  host: { '(click)': 'onClick()' }
+  selector: '[routerLink]'
 })
 export class RouterLinkDirectiveStub {
   @Input('routerLink') linkParams: any;
   navigatedTo: any = null;
 
+  @HostListener('click')
   onClick() {
     this.navigatedTo = this.linkParams;
   }

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

@@ -42,7 +42,7 @@ export class HeroService {
         // #enddocregion getHeroes-2
         tap(_ => this.log('fetched heroes')),
         // #docregion getHeroes-2
-        catchError(this.handleError('getHeroes', []))
+        catchError(this.handleError<Hero[]>('getHeroes', []))
       );
   // #docregion getHeroes-1
   }
@@ -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((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
     );
   }

aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js

@@ -23,15 +23,6 @@ module.exports = function(config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
 
-    customLaunchers: {
-      // From the CLI. Not used here but interesting
-      // chrome setup for travis CI using chromium
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
     files: [
       // System.js for module loading
       'node_modules/systemjs/dist/system.src.js',

aio/content/examples/upgrade-phonecat-3-final/karma.conf.js

@@ -23,15 +23,6 @@ module.exports = function(config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
 
-    customLaunchers: {
-      // From the CLI. Not used here but interesting
-      // chrome setup for travis CI using chromium
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-
     files: [
       // System.js for module loading
       'node_modules/systemjs/dist/system.src.js',

aio/content/guide/aot-compiler.md

@@ -453,7 +453,7 @@ The compiler understands all syntax forms that the _collector_ supports, but it
 
 The compiler can only reference _exported symbols_.
 
-Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
+Decorated component class members must be public. You cannot make an `@Input()` property private or protected.
 
 Data bound properties must also be public.
 
@@ -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 behaviour.
+Setting this option to `true` is not recommended because unsupported versions of TypeScript might have undefined behavior.
 
 This option is `false` by default.
 

aio/content/guide/architecture.md

@@ -73,7 +73,7 @@ Angular provides predefined pipes for common transformations, and you can also d
 
 ## Services and dependency injection
 
-For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows your service to be *injected* into client components as a dependency.
+For data or logic that isn't associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows other providers to be **injected** as dependencies into your class.
 
  *Dependency injection* (DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
 

aio/content/guide/browser-support.md

@@ -372,6 +372,27 @@ Here are the features which may require additional polyfills:
 
   </tr>
 
+  <tr style="vertical-align: top">
+
+    <td>
+
+      [Router](guide/router) 
+      
+      when using [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
+    </td>
+
+    <td>
+
+      [ES7/array](guide/browser-support#core-es7-array)
+
+    </td>
+
+    <td>
+      IE 11
+    </td>
+
+  </tr>
+
 </table>
 
 
@@ -402,7 +423,7 @@ Below are the polyfills which are used to test the framework itself. They are a
 
     <td>
 
-      <a id='core-es7-reflect' href="https://github.com/zloirock/core-js/blob/master/es7/reflect.js">ES7/reflect</a>
+      <a id='core-es7-reflect' href="https://github.com/zloirock/core-js/tree/v2/fn/reflect">ES7/reflect</a>
 
     </td>
 
@@ -416,6 +437,24 @@ Below are the polyfills which are used to test the framework itself. They are a
 
   </tr>
 
+  <tr>
+
+    <td>
+
+      <a id='core-es7-array' href="https://github.com/zloirock/core-js/tree/v2/fn/array">ES7/array</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      0.1KB
+    </td>
+
+  </tr>
+
   <tr>
 
     <td>

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 `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. 
+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. 
 
 * You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, `package.json`:
 ```

aio/content/guide/creating-libraries.md

@@ -0,0 +1,189 @@
+# Creating Libraries
+
+You can create and publish new libraries to extend Angular functionality. If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
+
+An simple example might be a button that sends users to your company website, that would be included in all apps that your company builds.
+
+## Getting started
+
+Use the Angular CLI to generate a new library skeleton with the following command:
+
+<code-example format="." language="bash">
+ ng generate library my-lib
+</code-example>
+
+This creates the `projects/my-lib` folder in your workspace, which contains a component and a service inside an NgModule.
+The workspace configuration file, `angular.json`, is updated with a project of type 'library'.
+
+<code-example format="json">
+"projects": {
+  ...
+  "my-lib": {
+    "root": "projects/my-lib",
+    "sourceRoot": "projects/my-lib/src",
+    "projectType": "library",
+    "prefix": "lib",
+    "architect": {
+      "build": {
+        "builder": "@angular-devkit/build-ng-packagr:build",
+        ...
+</code-example>
+
+You can build, test, and lint the project with CLI commands:
+
+<code-example format="." language="bash">
+ ng build my-lib
+ ng test my-lib
+ ng lint my-lib
+</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.
+
+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.
+
+The public API for your library is maintained in the `index.ts` file of your library folder.
+Anything exported from this file is made public when your library is imported into an application.
+Use an NgModule to expose services and components.
+
+Your library should supply documentation (typically a README file) for installation and maintenance.
+
+## Refactoring parts of an app into a library
+
+To make your solution reusable, you need to adjust it so that it does not depend on app-specific code.
+Here are some things to consider in migrating application functionality to a library.
+
+* Declarations such as components and pipes should be designed as stateless, meaning they don’t rely on or alter external variables. If you do rely on state, you need to evaluate every case and decide whether it is application state or state that the library would manage.
+
+* Any observables that the components subscribe to internally should be cleaned up and disposed of during the lifecycle of those components.
+
+* Components should expose their interactions through inputs for providing context, and outputs for communicating events to other components.
+
+* Services should declare their own providers (rather than declaring providers in the NgModule or a component), so that they are *tree-shakable*. This allows the compiler to leave the service out of the bundle if it never gets injected into the application that imports the library. For more about this, see [Tree-shakable providers](guide/dependency-injection-providers#tree-shakable-providers).
+
+* If you register global service providers or share providers across multiple NgModules, use the [`forRoot()` and `forChild()` patterns](guide/singleton-services) provided by the [RouterModule](api/router/RouterModule).
+
+* Check all internal dependencies.
+   * For custom classes or interfaces used in components or service, check whether they depend on additional classes or interfaces that also need to be migrated.
+   * Similarly, if your library code depends on a service, that service needs to be migrated.
+   * If your library code or its templates depend on other libraries (such a Angular Material, for instance), you must configure your library with those dependencies.
+
+## Reusable code and schematics
+
+A library typically includes *reusable code* that defines components, services, and other Angular artifacts (pipes, directives, and so on) that you simply import into a project.
+A library is packaged into an npm package for publishing and sharing, and this package can also include [schematics](guide/glossary#schematic) that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic skeleton app with `ng generate component`.
+A schematic that is combined with a library can, for example, provide the Angular CLI with the information it needs to generate a particular component defined in that library.
+
+What you include in your library is determined by the kind of task you are trying to accomplish.
+For example, if you want a dropdown with some canned data to show how to add it to your app, your library could define a schematic to create it.
+For a component like a dropdown that would contain different passed-in values each time, you could provide it as a component in a shared library.
+
+Suppose you want to read a configuration file and then generate a form based on that configuration.
+If that form will need additional customization by the user, it might work best as a schematic.
+However, if the forms will always be the same and not need much customization by developers, then you could create a dynamic component that takes the configuration and generates the form.
+In general, the more complex the customization, the more useful the schematic approach.
+
+## Integrating with the CLI
+
+A library can include [schematics](guide/glossary#schematic) that allow it to integrate with the Angular CLI.
+
+* Include an installation schematic so that `ng add` can add your library to a project.
+
+* Include generation schematics in your library so that `ng generate` can scaffold your defined artifacts (components, services, tests, and so on) in a project.
+
+* Include an update schematic so that `ng update` can update your library’s dependencies and provide migrations for breaking changes in new releases.
+
+To learn more, see [Schematics — An Introduction](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).
+
+## Publishing your library
+
+Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
+Libraries are built in [AoT mode](guide/aot-compiler) by default, so you do not need to specify the `-prod` flag when building for publication.
+
+<code-example format="." language="bash">
+ng build my-lib
+cd dist/my-lib
+npm publish
+</code-example>
+
+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.
+
+The library must be rebuilt on every change.
+When linking a library, make sure that the build step runs in watch mode, and that the library's `package.json` configuration points at the correct entry points.
+For example, `main` should point at a JavaScript file, not a TypeScript file.
+
+## Use TypeScript path mapping for peer dependencies
+
+Angular libraries should list all `@angular/*` dependencies as peer dependencies.
+This insures that when modules ask for Angular, they all get the exact same module.
+If a library lists `@angular/core` in `dependencies` instead of `peerDependencies`, it might get a different Angular module instead, which would cause your application to break.
+
+While developing a library, you must install all peer dependencies through `devDependencies` to ensure that the library compiles properly.
+A linked library will then have its own set of Angular libraries that it uses for building, located in its `node_modules` folder.
+However, this can cause problems while building or running your application.
+
+To get around this problem you can use TypeScript path mapping to tell TypeScript that it should load some modules from a specific location.
+List all the peer dependencies that your library uses in the TypeScript configuration file `./tsconfig.json`, and point them at the local copy in the app's `node_modules` folder.
+
+```
+{
+  "compilerOptions": {
+    // ...
+    // paths are relative to `baseUrl` path.
+    "paths": {
+      "@angular/*": [
+        "../node_modules/@angular/*"
+      ]
+    }
+  }
+}
+```
+
+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.
+
+To use your own library in an app:
+
+* Build the library. You cannot use a library before it is built.
+ <code-example format="." language="bash">
+ ng build my-lib
+ </code-example>
+
+* In your apps, import from the library by name:
+ ```
+ import { my-export } from 'my-lib';
+ ```
+
+### Building and rebuilding your library
+
+The build step is important if you haven't published your library as an npm package and then installed the package back into your app from npm.
+For instance, if you clone your git repository and run `npm install`, your editor will show the `my-lib` imports as missing if you haven't yet built your library.
+
+<div class="alert is-helpful">
+
+When you import something from a library in an Angular app, Angular looks for a mapping between the library name and a location on disk.
+When you install a library package, the mapping is in the `node_modules` folder. When you build your own library, it has to find the mapping  in your `tsconfig` paths.
+
+Generating a library with the Angular CLI automatically adds its path to the `tsconfig` file.
+The Angular CLI uses the `tsconfig` paths to tell the build system where to find the library.
+
+</div>
+
+If you find that changes to your library are not reflected in your app, your app is probably using an old build of the library.
+
+You can rebuild your library whenever you make changes to it, but this extra step takes time.
+*Incremental builds* functionality improves the library-development experience.
+Every time a file is changed a partial build is performed that emits the amended files.
+
+Incremental builds can be run as a backround process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command:
+
+<code-example format="." language="bash">
+ng build my-lib --watch
+</code-example>

aio/content/guide/dependency-injection.md

@@ -162,7 +162,7 @@ Here's the revised component, making use of the injected service, side-by-side w
   </code-pane>
 </code-tabs>
 
-`HeroService` must provided in some parent injector. The code in `HeroListComponent` doesn't depend on where `HeroService` comes from.
+`HeroService` must be provided in some parent injector. The code in `HeroListComponent` doesn't depend on where `HeroService` comes from.
 If you decided to provide `HeroService` in `AppModule`, `HeroListComponent` wouldn't change.
 
 {@a singleton-services}

aio/content/guide/deployment.md

@@ -35,7 +35,7 @@ Make a note of the user name and project name in GitHub.
 
 1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
    <code-example language="none" class="code-shell">
-     ng build --prod --output-path docs --base-href <project_name>
+     ng build --prod --output-path docs --base-href /<project_name>/
     </code-example>
 
 1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
@@ -46,9 +46,9 @@ Make a note of the user name and project name in GitHub.
 
 You can see your deployed page at `https://<user_name>.github.io/<project_name>/`.
 
-<div class="alert is-helpful>
+<div class="alert is-helpful">
 
- Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpages), a full featured package that does all this for you and has extra functionality.
+Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpages), a full featured package that does all this for you and has extra functionality.
 
 </div>
 

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. |
-| `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.  |
+| `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.  |
 | `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/glossary.md

@@ -19,18 +19,18 @@ unexpected definitions.
 
 ## ahead-of-time (AOT) compilation
 
-The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code 
-into efficient JavaScript code during the build phase, before the browser downloads 
-and runs that code. 
+The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code
+into efficient JavaScript code during the build phase, before the browser downloads
+and runs that code.
 This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](guide/glossary#jit).
 
 By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle.
 
-{@a angular-element} 
+{@a angular-element}
 
 ## Angular element
 
-An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element). 
+An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element).
 
 Learn more in [Angular Elements Overview](guide/elements).
 
@@ -62,8 +62,8 @@ Learn more in [Attribute Directives](guide/attribute-directives).
 
 ## binding
 
-Generally, the practice of setting a variable or property to a data value. 
-Within Angular, typically refers to [data binding](guide/glossary#data-binding), 
+Generally, the practice of setting a variable or property to a data value.
+Within Angular, typically refers to [data binding](guide/glossary#data-binding),
 which coordinates DOM object properties with data object properties.
 
 Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection) binding
@@ -75,7 +75,7 @@ between a [token](guide/glossary#token) and a dependency [provider](guide/glossa
 
 A way to initialize and launch an app or system.
 
-In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](guide/glossary#component). 
+In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](guide/glossary#component).
 During the bootstrap process, Angular creates and inserts these components into the `index.html` host web page.
 You can bootstrap multiple apps in the same `index.html`. Each app contains its own components.
 
@@ -90,7 +90,7 @@ Learn more in [Bootstrapping](guide/bootstrapping).
 
 ## case types
 
-Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: 
+Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types:
 
 * camelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants.
 Standard or lower camel case uses lowercase on the first letter of the item. For example, "selectedHero".
@@ -124,7 +124,13 @@ The following decorators can declare Angular class types:
 
 ## class field decorator
 
-A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. 
+A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`.
+
+{@a collection}
+
+## collection
+
+In Angular, a set of related [schematics](#schematic) collected in an [npm package](#npm-package).
 
 {@a cli}
 
@@ -135,13 +141,15 @@ The [Angular CLI](cli) is a command-line tool for managing the Angular developme
 * To begin using the CLI for a new project, see [Getting Started](guide/quickstart).
 * To learn more about the full capabilities of the CLI, see the [CLI command reference](cli).
 
+See also [Schematics CLI](#schematics-cli).
+
 {@a component}
 
 ## component
 
 A class with the `@Component()` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). Together, the component and template define a [view](guide/glossary#view).
 A component is a special type of [directive](guide/glossary#directive).
-The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features. 
+The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features.
 
 An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](guide/glossary#data-binding).
 
@@ -151,7 +159,7 @@ Read more about components, templates, and views in [Architecture Overview](guid
 
 ## custom element
 
-A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)). 
+A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)).
 
 The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a *web component*) is recognized by a browser when it's added to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
 
@@ -189,7 +197,7 @@ Read about the following forms of binding in [Template Syntax](guide/template-sy
 
 ## declarable
 
-A class type that you can add to the `declarations` list of an [NgModule](guide/glossary#ngmodule). 
+A class type that you can add to the `declarations` list of an [NgModule](guide/glossary#ngmodule).
 You can declare [components](guide/glossary#component), [directives](guide/glossary#directive), and [pipes](guide/glossary#pipe).
 
 Don't declare the following:
@@ -204,16 +212,15 @@ Don't declare the following:
 
 {@a decoration}
 
-
 ## decorator | decoration
 
-A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators). 
+A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators).
 TypeScript adds support for decorators.
 
 Angular defines decorators that attach metadata to classes or properties
-so that it knows what those classes or properties mean and how they should work. 
+so that it knows what those classes or properties mean and how they should work.
 
-See [class decorator](guide/glossary#class-decorator), [class field decorator](guide/glossary#class-field-decorator). 
+See [class decorator](guide/glossary#class-decorator), [class field decorator](guide/glossary#class-field-decorator).
 
 {@a di}
 
@@ -251,15 +258,15 @@ There are three categories of directive:
 
 * [Structural directives](guide/glossary#structural-directive) modify the structure of the DOM.
 
-Angular supplies a number of built-in directives that begin with the `ng` prefix. 
-You can also create new directives to implement your own functionality. 
+Angular supplies a number of built-in directives that begin with the `ng` prefix.
+You can also create new directives to implement your own functionality.
 You associate a *selector* (an HTML tag such as `<my-directive>`) with a custom directive, thereby extending the [template syntax](guide/template-syntax) that you can use in your apps.
 
 {@a dom}
 
 ## domain-specific language (DSL)
 
-A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language). 
+A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language).
 Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router).
 
 {@a dynamic-components}
@@ -270,6 +277,7 @@ A technique for adding a component to the DOM at run time. Requires that you exc
 
 See also [custom element](guide/glossary#custom-element), which provides an easier path with the same result.
 
+
 {@a E}
 
 {@a eager-loading}
@@ -287,7 +295,7 @@ See [lazy loading](guide/glossary#lazy-load).
 
 The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
 
-Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](guide/glossary#transpile) (like [TypeScript](guide/glossary#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers. 
+Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](guide/glossary#transpile) (like [TypeScript](guide/glossary#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.
 
 To learn more, see [Browser Support](guide/browser-support).
 
@@ -296,8 +304,8 @@ To learn more, see [Browser Support](guide/browser-support).
 
 ## element
 
-Angular defines an `ElementRef` class to wrap render-specific native UI elements. 
-In most cases, this allows you to use Angular templates and  data binding to access DOM elements 
+Angular defines an `ElementRef` class to wrap render-specific native UI elements.
+In most cases, this allows you to use Angular templates and  data binding to access DOM elements
 without reference to the native element.
 
 The documentation generally refers to *elements* (`ElementRef` instances), as distinct from  *DOM elements*
@@ -309,7 +317,7 @@ Compare to [custom element](guide/glossary#custom-element).
 
 ## entry point
 
-A JavaScript symbol that makes parts of an [npm package](guide/npm-packages) available for import by other code. 
+A JavaScript symbol that makes parts of an [npm package](guide/npm-packages) available for import by other code.
 The Angular [scoped packages](guide/glossary#scoped-package) each have an entry point named `index`.
 
 Within Angular, use [NgModules](guide/glossary#ngmodule) to make public parts available for import by other NgModules.
@@ -369,7 +377,7 @@ An Angular class or other definition that provides a dependency using the [depen
 
 An object in the Angular [dependency-injection](guide/glossary#dependency-injection) system
 that can find a named dependency in its cache or create a dependency
-using a configured [provider](guide/glossary#provider). 
+using a configured [provider](guide/glossary#provider).
 Injectors are created for NgModules automatically as part of the bootstrap process
 and are inherited through the component hierarchy.
 
@@ -385,7 +393,7 @@ Learn more about the injector hierarchy in [Hierarchical Dependency Injectors](g
 
 ## input
 
-When defining a [directive](guide/glossary#directive), the `@Input()` decorator on a directive property 
+When defining a [directive](guide/glossary#directive), the `@Input()` decorator on a directive property
 makes that property available as a *target* of a [property binding](guide/template-syntax#property-binding).
 Data values flow into an input property from the data source identified
 in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
@@ -396,7 +404,7 @@ To learn more, see [input and output properties](guide/template-syntax#inputs-ou
 
 ## interpolation
 
-A form of property [data binding](guide/glossary#data-binding) in which a [template expression](guide/glossary#template-expression) between double-curly braces renders as text.  
+A form of property [data binding](guide/glossary#data-binding) in which a [template expression](guide/glossary#template-expression) between double-curly braces renders as text.
 That text can be concatenated with neighboring text before it is assigned to an element property
 or displayed between element tags, as in this example.
 
@@ -423,11 +431,11 @@ See [ECMAScript](guide/glossary#ecma), [TypeScript](guide/glossary#typescript).
 
 ## just-in-time (JIT) compilation
 
-The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into 
+The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into
 efficient JavaScript code at run time, as part of bootstrapping.
 
-JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. 
-JIT mode is strongly discouraged for production use 
+JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development.
+JIT mode is strongly discouraged for production use
 because it results in large application payloads that hinder the bootstrap performance.
 
 Compare to [ahead-of-time (AOT) compilation](guide/glossary#aot).
@@ -442,22 +450,24 @@ Compare to [ahead-of-time (AOT) compilation](guide/glossary#aot).
 
 ## lazy loading
 
-A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand. 
-For example, dependencies can be lazy loaded as needed&mdash;as opposed to [eager-loaded](guide/glossary#eager-loading) modules that are required by the root module and are thus loaded on launch. 
+A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand.
+For example, dependencies can be lazy loaded as needed&mdash;as opposed to [eager-loaded](guide/glossary#eager-loading) modules that are required by the root module and are thus loaded on launch.
 
-The [router](guide/glossary#router) makes use of lazy loading to load child views only when the parent view is activated. 
+The [router](guide/glossary#router) makes use of lazy loading to load child views only when the parent view is activated.
 Similarly, you can build custom elements that can be loaded into an Angular app when needed.
 
 {@a library}
 
 ## library
 
-In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps. 
-A library isn't a complete Angular app and can't run independently. 
+In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps.
+A library isn't a complete Angular app and can't run independently.
 
-* Library developers can use the [CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package. 
+* Library developers can use the [Angular CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package.
 
-* App developers can use the [CLI](guide/glossary#cli) to `add` a published library for use with an app in the same [workspace](guide/glossary#workspace). 
+* Application developers can use the [Angular CLI](guide/glossary#cli) to `add` a published library for use with an application in the same [workspace](guide/glossary#workspace).
+
+See also [schematic](#schematic).
 
 {@a lifecycle-hook}
 
@@ -488,7 +498,7 @@ To learn more, see [Lifecycle Hooks](guide/lifecycle-hooks).
 
 ## module
 
-In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. 
+In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`.
 
 In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules.
 
@@ -516,9 +526,9 @@ To learn more, see [NgModules](guide/ngmodules).
 
 {@a npm-package}
 
-## npm package 
+## npm package
 
-The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. 
+The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries.
 
 Learn more about how Angular uses [Npm Packages](guide/npm-packages).
 
@@ -528,11 +538,11 @@ Learn more about how Angular uses [Npm Packages](guide/npm-packages).
 
 ## observable
 
-A producer of multiple values, which it pushes to [subscribers](guide/glossary#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion. 
+A producer of multiple values, which it pushes to [subscribers](guide/glossary#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion.
 
-Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion. 
+Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion.
 
-Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). 
+Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/).
 
 To learn more, see [Observables](guide/observables).
 
@@ -547,8 +557,8 @@ An object passed to the `subscribe()` method for an [observable](guide/glossary#
 
 ## output
 
-When defining a [directive](guide/glossary#directive), the `@Output{}` decorator on a directive property 
-makes that property available as a *target* of [event binding](guide/template-syntax#event-binding). 
+When defining a [directive](guide/glossary#directive), the `@Output{}` decorator on a directive property
+makes that property available as a *target* of [event binding](guide/template-syntax#event-binding).
 Events stream *out* of this property to the receiver identified
 in the [template expression](guide/glossary#template-expression) to the right of the equal sign.
 
@@ -562,22 +572,22 @@ To learn more, see [Input and Output Properties](guide/template-syntax#inputs-ou
 ## pipe
 
 A class which is preceded by the `@Pipe{}` decorator and which defines a function that transforms input values to output values for display in a [view](guide/glossary#view). Angular defines various pipes, and you can define new pipes.
- 
+
 To learn more, see [Pipes](guide/pipes).
 
 {@a polyfill}
 
 ## polyfill
 
-An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. 
-See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms. 
+An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation.
+See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms.
 
 {@a project}
 
 ## project
 
 In Angular, a folder within a [workspace](guide/glossary#workspace) that contains an Angular app or [library](guide/glossary#library).
-A workspace can contain multiple projects. 
+A workspace can contain multiple projects.
 All apps in a workspace can use libraries in the same workspace.
 
 {@a provider}
@@ -588,7 +598,7 @@ An object that implements one of the [`Provider`](api/core/Provider) interfaces.
 An [injector](guide/glossary#injector) uses the provider to create a new instance of a dependency
 for a class that requires it.
 
-Angular registers its own providers with every injector, for services that Angular defines. 
+Angular registers its own providers with every injector, for services that Angular defines.
 You can register your own providers for services that your app needs.
 
 See also [service](guide/glossary#service), [dependency injection](guide/glossary#di).
@@ -625,7 +635,7 @@ The alternative is a template-driven form. For an introduction and comparison of
 A tool that configures and implements navigation among states and [views](guide/glossary#view) within an Angular app.
 
 The `Router` module is an [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](guide/glossary#routing-component) is one that imports the `Router` module and whose template contains a `RouterOutlet` element where it can display views produced by the router.
- 
+
 The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy loading](guide/glossary#lazy-load) in your Angular apps.
 
 To learn more, see [Routing and Navigation](guide/router).
@@ -644,6 +654,10 @@ An Angular [component](guide/glossary#component) with a `RouterOutlet` directive
 
 For more information, see [Routing and Navigation](guide/router).
 
+{@a rule}
+
+In [schematics](#schematic), a function that operates on a [file tree](#file-tree) to create, delete, or modify files in a specific manner, and returns a new `Tree` object.
+
 
 {@a S}
 
@@ -651,22 +665,37 @@ For more information, see [Routing and Navigation](guide/router).
 
 ## schematic
 
-A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. 
-The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
+A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code.
+A schematic defines [rules](#rule) that operate on a virtual file system called a [tree](#file-tree).
+The [Angular CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
 
-* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs. 
+* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs.
 
-* Library developers can create schematics that enable the CLI to generate their published libraries.
-For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics). 
+* [Library](#library) developers can use the [Schematics CLI](#schematics-cli) to create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines.
+
+   For more information, see [devkit documentation](https://www.npmjs.com/package/@angular-devkit/schematics).
+
+{@a schematics-cli}
+
+## Schematics CLI
+
+Schematics come with their own command-line tool.
+Using Node 6.9 or above, install the Schematics CLI globally:
+
+<code-example format="." language="bash">
+npm install -g @angular-devkit/schematics-cli
+</code-example>
+
+This installs the `schematics` executable, which you can use to create a new project, add a new schematic to an existing project, or extend an existing schematic.
 
 {@a scoped-package}
 
 ## scoped package
 
-A way to group related [npm packages](guide/npm-packages). 
+A way to group related [npm packages](guide/npm-packages).
 NgModules are delivered within scoped packages whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`.
 
-Import a scoped package in the same way that you import a normal package. 
+Import a scoped package in the same way that you import a normal package.
 
 <code-example path="architecture/src/app/app.component.ts" linenums="false" header="architecture/src/app/app.component.ts (import)" region="import">
 
@@ -676,11 +705,11 @@ Import a scoped package in the same way that you import a normal package.
 
 ## service
 
-In Angular, a class with the [@Injectable()](guide/glossary#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application. 
+In Angular, a class with the [@Injectable()](guide/glossary#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application.
 Angular distinguishes components from services to increase modularity and reusability.
 
-The `@Injectable()` metadata allows the service class to be used with the [dependency injection](guide/glossary#di) mechanism. 
-The injectable class is instantiated by a [provider](guide/glossary#provider). 
+The `@Injectable()` metadata allows the service class to be used with the [dependency injection](guide/glossary#di) mechanism.
+The injectable class is instantiated by a [provider](guide/glossary#provider).
 [Injectors](guide/glossary#injector) maintain lists of providers and use them to provide service instances when they are required by components or other services.
 
 To learn more, see [Introduction to Services and Dependency Injection](guide/architecture-services).
@@ -713,13 +742,13 @@ The `subscribe()` method takes a JavaScript object (called an [observer](guide/g
 
 ## template
 
-Code associated with a component that defines how to render the component's [view](guide/glossary#view). 
+Code associated with a component that defines how to render the component's [view](guide/glossary#view).
 
-A template combines straight HTML with Angular [data-binding](guide/glossary#data-binding) syntax, [directives](guide/glossary#directive), 
-and [template expressions](guide/glossary#template-expression) (logical constructs). 
+A template combines straight HTML with Angular [data-binding](guide/glossary#data-binding) syntax, [directives](guide/glossary#directive),
+and [template expressions](guide/glossary#template-expression) (logical constructs).
 The Angular elements insert or calculate values that modify the HTML elements before the page is displayed.
- 
-A template is associated with a [component](guide/glossary#component) class through the `@Component()` [decorator](guide/glossary#decorator). The HTML can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property. 
+
+A template is associated with a [component](guide/glossary#component) class through the `@Component()` [decorator](guide/glossary#decorator). The HTML can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property.
 
 Additional templates, represented by `TemplateRef` objects, can define alternative or *embedded* views, which can be referenced from multiple components.
 
@@ -759,17 +788,23 @@ An opaque identifier used for efficient table lookup. In Angular, a [DI token](g
 
 The translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version.
 
+{@a file-tree}
+
+## tree
+
+In [schematics](#schematic), a virtual file system represented by the `Tree` class.
+Schematic [rules](#rule) take a tree object as input, operate on them, and return a new tree object.
 
 {@a typescript}
 
 ## TypeScript
 
-A programming language based on JavaScript that is notable for its optional typing system. 
+A programming language based on JavaScript that is notable for its optional typing system.
 TypeScript provides compile-time type checking and strong tooling support (such as
-code completion, refactoring, inline documentation, and intelligent search). 
+code completion, refactoring, inline documentation, and intelligent search).
 Many code editors and IDEs support TypeScript either natively or with plug-ins.
 
-TypeScript is the preferred language for Angular development. 
+TypeScript is the preferred language for Angular development.
 Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/).
 
 
@@ -781,16 +816,16 @@ Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org
 
 ## view
 
-The smallest grouping of display elements that can be created and destroyed together. 
+The smallest grouping of display elements that can be created and destroyed together.
 Angular renders a view under the control of one or more [directives](guide/glossary#directive),
-especially [component](guide/glossary#component) directives and their companion [templates](guide/glossary#template). 
+especially [component](guide/glossary#component) directives and their companion [templates](guide/glossary#template).
 
-A view is specifically represented by a `ViewRef` instance associated with the component. 
-A view that belongs to a component is called a *host view*. 
-Views are typically collected into [view hierarchies](guide/glossary#view-tree). 
+A view is specifically represented by a `ViewRef` instance associated with the component.
+A view that belongs to a component is called a *host view*.
+Views are typically collected into [view hierarchies](guide/glossary#view-tree).
 
-Properties of elements in a view can change dynamically, in response to user actions; 
-the structure (number and order) of elements in a view can't. 
+Properties of elements in a view can change dynamically, in response to user actions;
+the structure (number and order) of elements in a view can't.
 You can change the structure of elements by inserting, moving, or removing nested views within their view containers.
 
 View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](guide/glossary#router).
@@ -799,7 +834,7 @@ View hierarchies can be loaded and unloaded dynamically as the user navigates th
 
 ## view hierarchy
 
-A tree of related views that can be acted on as a unit. The root view is a component's *host view*.  A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection. 
+A tree of related views that can be acted on as a unit. The root view is a component's *host view*.  A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection.
 
 The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules.
 
@@ -815,8 +850,8 @@ See [custom element](guide/glossary#custom-element).
 ## workspace
 
 In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries).
-The [CLI](guide/glossary#cli) `ng new` command creates a workspace to contain projects. 
-Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. 
+The [CLI](guide/glossary#cli) `ng new` command creates a workspace to contain projects.
+Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder.
 
 {@a X}
 
@@ -833,7 +868,7 @@ An execution context for a set of asynchronous tasks. Useful for debugging, prof
 
 An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](guide/glossary#data-binding).
 
-A zone client can take action before and after an async operation completes. 
+A zone client can take action before and after an async operation completes.
 
 Learn more about zones in this
 [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).

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

@@ -1,7 +1,7 @@
 # Hierarchical Dependency Injectors
 
 The Angular dependency injection system is _hierarchical_.
-There is a tree of injectors that parallel an app's component tree.
+There is a tree of injectors that parallels an app's component tree.
 You can reconfigure the injectors at any level of that component tree.
 
 This guide explores this system and how to use it to your advantage.

aio/content/guide/libraries.md

@@ -0,0 +1,30 @@
+# Overview of Angular Libraries
+
+Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry.
+Developers can create general solutions for particular domains that can be adapted for re-use in different apps.
+Such a solution can be built as Angular *libraries* and these libraries can be published and shared as *npm packages*.
+
+An Angular library is an Angular [project](guide/glossary#project) that differs from an app in that it cannot run on its own.
+A library must be imported and used in an app.
+
+Libraries extend Angular's base functionality. For example, to add [reactive forms](guide/reactive-forms) to an app, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code.
+Similarly, adding the [service worker](guide/service-worker-intro) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA).
+[Angular Material](https://material.angular.io/) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components.
+
+Any app developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties. See [Using Published Libraries](guide/using-libraries).
+
+## Creating libraries
+
+If you have developed functionality that is suitable for reuse, you can create your own libraries.
+These libraries can be used locally in your workspace, or you can publish them as [npm packages](guide/npm-packages) to share with other projects or other Angular developers.
+These packages can be published to the npm registry, a private npm Enterprise registry, or a private package management system that supports npm packages.
+See [Creating Libraries](guide/creating-libraries).
+
+Whether you decide to package functionality as a library is an architectural decision, similar to deciding whether a piece of functionality is a component or a service, or deciding on the scope of a component.
+
+Packaging functionality as a library forces the artifacts in the library to be decoupled from the application's business logic.
+This can help to avoid various bad practices or architecture mistakes that can make it difficult to decouple and reuse code in the future.
+
+Putting code into a separate library is more complex than simply putting everything in one app.
+It requires more of an investment in time and thought for managing, maintaining, and updating the library.
+This complexity can pay off, however, when the library is being used in multiple apps.

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/ngmodule-faq.md

@@ -95,7 +95,7 @@ if your components have `[(ngModel)]` two-way binding expressions.
 Import _shared_ and _feature_ modules when this module's components incorporate their
 components, directives, and pipes.
 
-Import only [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) in the root `AppModule`.
+Import [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) only in the root `AppModule`.
 
 <hr/>
 

aio/content/guide/pipes.md

@@ -340,11 +340,11 @@ code with checkbox switches and additional displays to help you experience these
 
 
 Replacing the array is an efficient way to signal Angular to update the display.
-When do you replace the array? When the data change.
+When do you replace the array? When the data changes.
 That's an easy rule to follow in *this* example
 where the only way to change the data is by adding a hero.
 
-More often, you don't know when the data have changed,
+More often, you don't know when the data has changed,
 especially in applications that mutate data in many ways,
 perhaps in application locations far away.
 A component in such an application usually can't know about those changes.
@@ -495,7 +495,7 @@ Write one more impure pipe, a pipe that makes an HTTP request.
 Remember that impure pipes are called every few milliseconds.
 If you're not careful, this pipe will punish the server with requests.
 
-In the following code, the pipe only calls the server when the request URL changes and it caches the server response.
+In the following code, the pipe only calls the server when the requested URL changes and it caches the server response.
 The code uses the [Angular http](guide/http) client to retrieve data:
 
 

aio/content/guide/router.md

@@ -1055,7 +1055,7 @@ The default route should redirect to the `HeroListComponent` _only_ when the _en
 Remember to restore the redirect to `pathMatch = 'full'`.
 
 Learn more in Victor Savkin's
-[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
+[post on redirects](http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes).
 
 
 </div>
@@ -1304,7 +1304,7 @@ Create an `AppRouting` module in the `/app` folder to contain the routing config
   ng generate module app-routing --module app --flat
 </code-example>
 
-Import the `CrisisListComponent`, `HeroListComponent`, and `PageNotFoundCompponent` symbols
+Import the `CrisisListComponent`, `HeroListComponent`, and `PageNotFoundComponent` symbols
 just like you did in the `app.module.ts`. Then move the `Router` imports
 and routing configuration, including `RouterModule.forRoot`, into this routing module.
 
@@ -3392,10 +3392,10 @@ The admin feature is now protected by the guard, albeit protected poorly.
 
 Make the `AuthGuard` at least pretend to authenticate.
 
-The `AuthGuard` should call an application service that can login a user and retain information about the current user. Generate a new `AuthService` in the `admin` folder:
+The `AuthGuard` should call an application service that can login a user and retain information about the current user. Generate a new `AuthService` in the `auth` folder:
 
 <code-example language="none" class="code-shell">
-  ng generate service admin/auth
+  ng generate service auth/auth
 </code-example>
 
 Update the `AuthService` to log in the user:
@@ -3796,7 +3796,7 @@ The relevant *Crisis Center* code for this milestone follows.
 
   </code-pane>
 
-  <code-pane header="crisis-detail.component.html" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.html">
+  <code-pane header="crisis-detail.component.ts" path="router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts">
 
   </code-pane>
 

aio/content/guide/rx-library.md

@@ -53,7 +53,7 @@ RxJS provides many operators, but only a handful are used frequently. For a list
 
 | Area | Operators |
 | :------------| :----------|
-| Creation |  `from`, `fromPromise`,`fromEvent`, `of` |
+| Creation |  `from`,`fromEvent`, `of` |
 | Combination | `combineLatest`, `concat`, `merge`, `startWith` , `withLatestFrom`, `zip` |
 | Filtering | `debounceTime`, `distinctUntilChanged`, `filter`, `take`, `takeUntil` |
 | Transformation | `bufferTime`, `concatMap`, `map`, `mergeMap`, `scan`, `switchMap` |
@@ -94,4 +94,4 @@ This can be useful when scanning through code and looking for observable values.
 
 For example:
 
-<code-example path="rx-library/src/naming-convention.ts" header="Naming observables"></code-example>
+<code-example path="rx-library/src/naming-convention.ts" header="Naming observables"></code-example>

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

@@ -35,11 +35,23 @@ It's possible to ask the service worker to check if any updates have been deploy
 
 Do this with the `checkForUpdate()` method:
 
-<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" header="check-for-update.service.ts" region="sw-check-update"> </code-example>
+<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" header="check-for-update.service.ts"> </code-example>
 
 
 This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app.
 
+<div class="alert is-important">
+
+In order to avoid negatively affecting the initial rendering, `ServiceWorkerModule` will by default
+wait for the app to stabilize, before registering the ServiceWorker script. Constantly polling for
+updates, e.g. with `interval()`, will prevent the app from stabilizing and the ServiceWorker
+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).
+
+</div>
+
 ### Forcing update activation
 
 If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method:

aio/content/guide/singleton-services.md

@@ -17,7 +17,7 @@ There are two ways to make a service a singleton in Angular:
 * Declare that the service should be provided in the application root.
 * Include the service in the `AppModule` or in a module that is only imported by the `AppModule`.
 
-Beginning with Angular 6.0, the preferred way to create a singleton services is to specify on the service that it should be provided in the application root. This is done by setting `providedIn` to `root` on the service's `@Injectable` decorator:
+Beginning with Angular 6.0, the preferred way to create a singleton service is to specify on the service that it should be provided in the application root. This is done by setting `providedIn` to `root` on the service's `@Injectable` decorator:
 
 <code-example path="providers/src/app/user.service.0.ts"  header="src/app/user.service.0.ts" linenums="false"> </code-example>
 

aio/content/guide/template-syntax.md

@@ -42,31 +42,46 @@ Begin with the first form of data binding—interpolation—to see how m
 
 {@a interpolation}
 
-## Interpolation ( <span class="syntax">{&#xfeff;{...}}</span> )
+## Interpolation and Template Expressions
 
-You met the double-curly braces of interpolation, `{{` and `}}`, early in your Angular education.
+Interpolation allows you to incorporate calculated strings into the text
+between HTML element tags and within attribute assignments. Template
+expressions are what you use to calculate those strings.
 
-<code-example path="template-syntax/src/app/app.component.html" region="first-interpolation" header="src/app/app.component.html" linenums="false">
+The interpolation <live-example></live-example> demonstrates all of
+the syntax and code snippets described in this section.
+
+### Interpolation `{{...}}`
+
+Interpolation refers to embedding expressions into marked up text.
+By default, interpolation uses as its delimiter the double curly braces, `{{` and `}}`.
+
+In the following snippet, `{{ currentCustomer }}` is an example of interpolation.
+
+<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-You use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
+The text between the braces is often the name of a component
+property. Angular replaces that name with the
+string value of the corresponding component property.
 
-<code-example path="template-syntax/src/app/app.component.html" region="title+image" header="src/app/app.component.html" linenums="false">
+<code-example path="interpolation/src/app/app.component.html" region="component-property" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-The text between the braces is often the name of a component property. Angular replaces that name with the
-string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties
-and "fills in the blanks", first displaying a bold application title and then a heroic image.
+In the example above, Angular evaluates the `title` and `itemImageUrl` properties
+and fills in the blanks, first displaying some title text and then an image.
 
-More generally, the text between the braces is a **template expression** that Angular first **evaluates**
-and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers:
+More generally, the text between the braces is a **template expression**
+that Angular first **evaluates** and then **converts to a string**.
+The following interpolation illustrates the point by adding two numbers:
 
-<code-example path="template-syntax/src/app/app.component.html" region="sum-1" header="src/app/app.component.html" linenums="false">
+<code-example path="interpolation/src/app/app.component.html" region="convert-string" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-The expression can invoke methods of the host component such as `getVal()`, seen here:
+The expression can invoke methods of the host component such as `getVal()` in
+the following example:
 
-<code-example path="template-syntax/src/app/app.component.html" region="sum-2" header="src/app/app.component.html" linenums="false">
+<code-example path="interpolation/src/app/app.component.html" region="invoke-method" header="src/app/app.component.html" linenums="false">
 </code-example>
 
 Angular evaluates all expressions in double curly braces,
@@ -74,60 +89,67 @@ converts the expression results to strings, and links them with neighboring lite
 it assigns this composite interpolated result to an **element or directive property**.
 
 You appear to be inserting the result between element tags and assigning it to attributes.
-It's convenient to think so, and you rarely suffer for this mistake.
-Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
-[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation).
 
-But first, let's take a closer look at template expressions and statements.
+<div class="alert is-helpful">
 
+However, interpolation is a special syntax that Angular converts into a
+property binding.
 
+If you'd like to use something other than `{{` and `}}`, you can
+configure the interpolation delimiter via the
+[interpolation](api/core/Component#interpolation)
+option in the `Component` metadata.
 
-<hr/>
+</div>
 
-{@a template-expressions}
+### Template expressions
 
-## Template expressions
-
-A template **expression** produces a value.
+A template **expression** produces a value and appears within the double
+curly braces, `{{ }}`.
 Angular executes the expression and assigns it to a property of a binding target;
-the target might be an HTML element, a component, or a directive.
+the target could be an HTML element, a component, or a directive.
 
 The interpolation braces in `{{1 + 1}}` surround the template expression `1 + 1`.
-In the [property binding](guide/template-syntax#property-binding) section below,
+In the property binding,
 a template expression appears in quotes to the right of the&nbsp;`=` symbol as in `[property]="expression"`.
 
-You write these template expressions in a language that looks like JavaScript.
-Many JavaScript expressions are legal template expressions, but not all.
+In terms of syntax, template expressions are similar to JavaScript.
+Many JavaScript expressions are legal template expressions, with a few exceptions.
 
-JavaScript expressions that have or promote side effects are prohibited,
+You can't use JavaScript expressions that have or promote side effects,
 including:
 
-* assignments (`=`, `+=`, `-=`, ...)
-* <code>new</code>
-* chaining expressions with <code>;</code> or <code>,</code>
-* increment and decrement operators (`++` and `--`)
+* Assignments (`=`, `+=`, `-=`, `...`)
+* Operators such as `new`, `typeof`, `instanceof`, etc.
+* Chaining expressions with <code>;</code> or <code>,</code>
+* The increment and decrement operators `++` and `--`
+* Some of the ES2015+ operators
 
 Other notable differences from JavaScript syntax include:
 
-* no support for the bitwise operators `|` and `&`
-* new [template expression operators](guide/template-syntax#expression-operators), such as `|`, `?.` and `!`.
-
-{@a expression-context}
+* No support for the bitwise operators such as `|` and `&`
+* New template expression operators, such as `|`, `?.` and `!`
+<!-- link to: guide/template-syntax#expression-operators -->
 
 ### Expression context
 
 The *expression context* is typically the _component_ instance.
-In the following snippets, the `title`  within double-curly braces and the
-`isUnchanged` in quotes refer to properties of the `AppComponent`.
+In the following snippets, the `recommended` within double curly braces and the
+`itemImageUrl2` in quotes refer to properties of the `AppComponent`.
 
-<code-example path="template-syntax/src/app/app.component.html" region="context-component-expression" header="src/app/app.component.html" linenums="false">
+<code-example path="interpolation/src/app/app.component.html" region="component-context" header="src/app/app.component.html" linenums="false">
 </code-example>
 
 An expression may also refer to properties of the _template's_ context
-such as a [template input variable](guide/template-syntax#template-input-variable) (`let hero`)
-or a [template reference variable](guide/template-syntax#ref-vars) (`#heroInput`).
+such as a template input variable,
+<!-- link to built-in-directives#template-input-variables -->
+`let customer`, or a template reference variable, `#customerInput`.
+<!-- link to guide/template-ref-variables -->
 
-<code-example path="template-syntax/src/app/app.component.html" region="context-var" header="src/app/app.component.html" linenums="false">
+<code-example path="interpolation/src/app/app.component.html" region="template-input-variable" header="src/app/app.component.html (template input variable)" linenums="false">
+</code-example>
+
+<code-example path="interpolation/src/app/app.component.html" region="template-reference-variable" header="src/app/app.component.html (template reference variable)" linenums="false">
 </code-example>
 
 The context for terms in an expression is a blend of the _template variables_,
@@ -136,34 +158,32 @@ If you reference a name that belongs to more than one of these namespaces,
 the template variable name takes precedence, followed by a name in the directive's _context_,
 and, lastly, the component's member names.
 
-The previous example presents such a name collision. The component has a `hero`
-property and the `*ngFor` defines a `hero` template variable.
-The `hero` in `{{hero.name}}`
+The previous example presents such a name collision. The component has a `customer`
+property and the `*ngFor` defines a `customer` template variable.
+
+<div class="alert is-helpful">
+
+The `customer` in `{{customer.name}}`
 refers to the template input variable, not the component's property.
 
 Template expressions cannot refer to anything in
-the global namespace (except `undefined`). They can't refer to `window` or `document`. They
-can't call `console.log` or `Math.max`. They are restricted to referencing
+the global namespace, except `undefined`. They can't refer to
+`window` or `document`. Additionally, they
+can't call `console.log()` or `Math.max()` and they are restricted to referencing
 members of the expression context.
 
-
-{@a no-side-effects}
-
-{@a expression-guidelines}
+</div>
 
 ### Expression guidelines
 
-Template expressions can make or break an application.
-Please follow these guidelines:
+When using template expressions follow these guidelines:
 
 * [No visible side effects](guide/template-syntax#no-visible-side-effects)
 * [Quick execution](guide/template-syntax#quick-execution)
 * [Simplicity](guide/template-syntax#simplicity)
-* [Idempotence](guide/template-syntax#idempotence)
 
-The only exceptions to these guidelines should be in specific circumstances that you thoroughly understand.
 
-#### No visible side effects
+### No visible side effects
 
 A template expression should not change any application state other than the value of the
 target property.
@@ -172,37 +192,43 @@ This rule is essential to Angular's "unidirectional data flow" policy.
 You should never worry that reading a component value might change some other displayed value.
 The view should be stable throughout a single rendering pass.
 
-#### Quick execution
+An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is ideal because
+it is free of side effects and improves Angular's change detection performance.
+
+In Angular terms, an idempotent expression always returns
+*exactly the same thing* until
+one of its dependent values changes.
+
+Dependent values should not change during a single turn of the event loop.
+If an idempotent expression returns a string or a number, it returns the same string or number when called twice in a row. If the expression returns an object, including an `array`, it returns the same object *reference* when called twice in a row.
+
+<div class="alert is-helpful">
+
+There is one exception to this behavior that applies to `*ngFor`. `*ngFor` has `trackBy` functionality that can deal with referential inequality of objects that when iterating over them.
+
+For more information, see the [*ngFor with `trackBy`](guide/template-syntax#ngfor-with-trackby) section of this guide.
+
+</div>
+
+### Quick execution
 
 Angular executes template expressions after every change detection cycle.
 Change detection cycles are triggered by many asynchronous activities such as
-promise resolutions, http results, timer events, keypresses and mouse moves.
+promise resolutions, HTTP results, timer events, key presses and mouse moves.
 
 Expressions should finish quickly or the user experience may drag, especially on slower devices.
 Consider caching values when their computation is expensive.
 
-#### Simplicity
+### Simplicity
 
-Although it's possible to write quite complex template expressions, you should avoid them.
+Although it's possible to write complex template expressions, it's a better
+practice to avoid them.
 
-A property name or method call should be the norm.
-An occasional Boolean negation (`!`) is OK.
-Otherwise, confine application and business logic to the component itself,
-where it will be easier to develop and test.
-
-#### Idempotence
-
-An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is ideal because
-it is free of side effects and improves Angular's change detection performance.
-
-In Angular terms, an idempotent expression always returns *exactly the same thing* until
-one of its dependent values changes.
-
-Dependent values should not change during a single turn of the event loop.
-If an idempotent expression returns a string or a number, it returns the same string or number
-when called twice in a row. If the expression returns an object (including an `array`),
-it returns the same object *reference* when called twice in a row.
+A property name or method call should be the norm, but an occasional Boolean negation, `!`, is OK.
+Otherwise, confine application and business logic to the component,
+where it is easier to develop and test.
 
+<!-- end of Interpolation doc -->
 
 <hr/>
 
@@ -771,7 +797,6 @@ content harmlessly.
 
 
 <hr/>
-
 {@a other-bindings}
 
 ## Attribute, class, and style bindings
@@ -918,56 +943,44 @@ Note that a _style property_ name can be written in either
 
 {@a event-binding}
 
-## Event binding  ( <span class="syntax">(event)</span> )
+## Event binding `(event)`
 
-The bindings directives you've met so far flow data in one direction: **from a component to an element**.
+Event binding allows you to listen for certain events such as
+keystrokes, mouse movements, clicks, and touches. For an example
+demonstrating all of the points in this section, see the <live-example name="event-binding">event binding example</live-example>.
 
-Users don't just stare at the screen. They enter text into input boxes. They pick items from lists.
-They click buttons. Such user actions may result in a flow of data in the opposite direction:
-**from an element to a component**.
-
-The only way to know about a user action is to listen for certain events such as
-keystrokes, mouse movements, clicks, and touches.
-You declare your interest in user actions through Angular event binding.
-
-Event binding syntax consists of a **target event** name
+Angular event binding syntax consists of a **target event** name
 within parentheses on the left of an equal sign, and a quoted
-[template statement](guide/template-syntax#template-statements) on the right.
+template statement on the right.
 The following event binding listens for the button's click events, calling
 the component's `onSave()` method whenever a click occurs:
 
-<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
-</code-example>
+<figure>
+  <img src='generated/images/guide/event-binding/syntax-diagram.svg' alt="Syntax diagram">
+</figure>
 
 ### Target event
 
-A **name between parentheses** &mdash; for example, `(click)` &mdash;
-identifies the target event. In the following example, the target is the button's click event.
+As above, the target is the button's click event.
 
-<code-example path="template-syntax/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-1" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-Some people prefer the `on-` prefix alternative, known as the **canonical form**:
+Alternatively, use the `on-` prefix, known as the canonical form:
 
-<code-example path="template-syntax/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-2" header="src/app/app.component.html" linenums="false">
 </code-example>
 
 Element events may be the more common targets, but Angular looks first to see if the name matches an event property
 of a known directive, as it does in the following example:
 
-<code-example path="template-syntax/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
+<code-example path="event-binding/src/app/app.component.html" region="custom-directive" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-<div class="alert is-helpful">
-
-The `myClick` directive is further described in the section
-on [aliasing input/output properties](guide/template-syntax#aliasing-io).
-
-</div>
-
 If the name fails to match an element event or an output property of a known directive,
 Angular reports an “unknown directive” error.
 
+
 ### *$event* and event handling statements
 
 In an event binding, Angular sets up an event handler for the target event.
@@ -977,72 +990,73 @@ The template statement typically involves a receiver, which performs an action
 in response to the event, such as storing a value from the HTML control
 into a model.
 
-The binding conveys information about the event, including data values, through
-an **event object named `$event`**.
+The binding conveys information about the event. This information can include data values such as an event object, string, or number named `$event`.
 
-The shape of the event object is determined by the target event.
+The target event determines the shape of the `$event` object.
 If the target event is a native DOM element event, then `$event` is a
 [DOM event object](https://developer.mozilla.org/en-US/docs/Web/Events),
 with properties such as `target` and `target.value`.
 
 Consider this example:
 
-<code-example path="template-syntax/src/app/app.component.html" region="without-NgModel" header="src/app/app.component.html" linenums="false">
+<code-example path="event-binding/src/app/app.component.html" region="event-binding-3" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-This code sets the input box `value` property by binding to the `name` property.
-To listen for changes to the value, the code binds to the input box's `input` event.
+This code sets the `<input>` `value` property by binding to the `name` property.
+To listen for changes to the value, the code binds to the `input`
+event of the `<input>` element.
 When the user makes changes, the `input` event is raised, and the binding executes
 the statement within a context that includes the DOM event object, `$event`.
 
 To update the `name` property, the changed text is retrieved by following the path `$event.target.value`.
 
-If the event belongs to a directive (recall that components are directives),
-`$event` has whatever shape the directive decides to produce.
+If the event belongs to a directive&mdash;recall that components
+are directives&mdash;`$event` has whatever shape the directive produces.
 
-{@a eventemitter}
 
-{@a custom-event}
-
-### Custom events with <span class="syntax">EventEmitter</span>
+### Custom events with `EventEmitter`
 
 Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
 The directive creates an `EventEmitter` and exposes it as a property.
 The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
 Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
 
-Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
-Although the `HeroDetailComponent` has a delete button it doesn't know how to delete the hero itself.
-The best it can do is raise an event reporting the user's delete request.
+Consider an `ItemDetailComponent` that presents item information and responds to user actions.
+Although the `ItemDetailComponent` has a delete button, it doesn't know how to delete the hero. It can only raise an event reporting the user's delete request.
 
-Here are the pertinent excerpts from that `HeroDetailComponent`:
+Here are the pertinent excerpts from that `ItemDetailComponent`:
 
-<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (template)" region="template-1">
+
+<code-example path="event-binding/src/app/item-detail/item-detail.component.html" linenums="false" header="src/app/item-detail/item-detail.component.ts (template)" region="line-through">
 </code-example>
 
-<code-example path="template-syntax/src/app/hero-detail.component.ts" linenums="false" header="src/app/hero-detail.component.ts (deleteRequest)" region="deleteRequest">
+<code-example path="event-binding/src/app/item-detail/item-detail.component.ts" linenums="false" header="src/app/item-detail/item-detail.component.ts (deleteRequest)" region="deleteRequest">
 </code-example>
 
+
 The component defines a `deleteRequest` property that returns an `EventEmitter`.
 When the user clicks *delete*, the component invokes the `delete()` method,
-telling the `EventEmitter` to emit a `Hero` object.
+telling the `EventEmitter` to emit an `Item` object.
 
-Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
+Now imagine a hosting parent component that binds to the `deleteRequest` event
+of the `ItemDetailComponent`.
 
-<code-example path="template-syntax/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
+<code-example path="event-binding/src/app/app.component.html" linenums="false" header="src/app/app.component.html (event-binding-to-component)" region="event-binding-to-component">
 </code-example>
 
-When the `deleteRequest` event fires, Angular calls the parent component's `deleteHero` method,
-passing the *hero-to-delete* (emitted by `HeroDetail`) in the `$event` variable.
+When the `deleteRequest` event fires, Angular calls the parent component's
+`deleteItem()` method, passing the *item-to-delete* (emitted by `ItemDetail`)
+in the `$event` variable.
 
 ### Template statements have side effects
 
-The `deleteHero` method has a side effect: it deletes a hero.
-Template statement side effects are not just OK, but expected.
+Though [template expressions](guide/template-syntax#template-expressions) shouldn't have [side effects](guide/template-syntax#avoid-side-effects), template
+statements usually do. The `deleteItem()` method does have
+a side effect: it deletes an item.
 
-Deleting the hero updates the model, perhaps triggering other changes
-including queries and saves to a remote server.
-These changes percolate through the system and are ultimately displayed in this and other views.
+Deleting an item updates the model, and depending on your code, triggers
+other changes including queries and saving to a remote server.
+These changes propagate through the system and ultimately display in this and other views.
 
 
 <hr/>
@@ -1673,8 +1687,8 @@ You can only bind to _another_ component or directive through its _Input_ and _O
 
 Remember that all **components** are **directives**.
 
-The following discussion refers to _components_ for brevity and 
-because this topic is mostly a concern for component authors. 
+The following discussion refers to _components_ for brevity and
+because this topic is mostly a concern for component authors.
 </div>
 
 <h3 class="no-toc">Discussion</h3>
@@ -1985,7 +1999,7 @@ You'll need this template operator when you turn on strict null checks. It's opt
 
 {@a any-type-cast-function}
 
-## The `$any` type cast function (`$any( <expression> )`) 
+## The `$any` type cast function (`$any( <expression> )`)
 
 Sometimes a binding expression will be reported as a type error and it is not possible or difficult
 to fully specify the type. To silence the error, you can use the `$any` cast function to cast
@@ -1994,7 +2008,7 @@ the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/b
 <code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-1" header="src/app/app.component.html" linenums="false">
 </code-example>
 
-In this example, when the Angular compiler turns your template into TypeScript code, 
+In this example, when the Angular compiler turns your template into TypeScript code,
 it prevents TypeScript from reporting that `marker` is not a member of the `Hero`
 interface.
 

aio/content/guide/testing.md

@@ -61,7 +61,7 @@ You can fine-tune many options by editing the `karma.conf.js` and
 the `test.ts` files in the `src/` folder.
 
 The `karma.conf.js` file is a partial karma configuration file.
-The CLI constructs the full runtime configuration in memory,based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
+The CLI constructs the full runtime configuration in memory, based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
 
 Search the web for more details about Jasmine and karma configuration.
 
@@ -99,7 +99,7 @@ Continuous integration (CI) servers let you set up your project repository so th
 There are paid CI services like Circle CI and Travis CI, and you can also host your own for free using Jenkins and others. 
 Although Circle CI and Travis CI are paid services, they are provided free for open source projects. 
 You can create a public project on GitHub and add these services without paying. 
-Contributions to the Angular repo are automatically run through a whole suite of Circle CI and Travis CI tests.
+Contributions to the Angular repo are automatically run through a whole suite of Circle CI tests.
 
 This article explains how to configure your project to run Circle CI and Travis CI, and also update your test configuration to be able to run tests in the Chrome browser in either environment.
 
@@ -2205,7 +2205,7 @@ seen in the `AppComponent` template.
 
 The URL bound to the `[routerLink]` attribute flows in to the directive's `linkParams` property.
 
-The `host` metadata property wires the click event of the host element
+The `HostListener` wires the click event of the host element
 (the `<a>` anchor elements in `AppComponent`) to the stub directive's `onClick` method.
 
 Clicking the anchor should trigger the `onClick()` method,
@@ -2398,7 +2398,7 @@ So when you call `createComponent()`, the `TestBed` compiles implicitly.
 
 That's not a problem when the source code is in memory.
 But the `BannerComponent` requires external files
-that the compile must read from the file system,
+that the compiler must read from the file system,
 an inherently _asynchronous_ operation.
 
 If the `TestBed` were allowed to continue, the tests would run and fail mysteriously

aio/content/guide/universal.md

@@ -57,7 +57,7 @@ people who otherwise couldn't use the app at all.
 ### Show the first page quickly
 
 Displaying the first page quickly can be critical for user engagement.
-[53 percent of mobile site visits are abandoned](https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/) if pages take longer than 3 seconds to load.
+[53 percent of mobile site visits are abandoned](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/) if pages take longer than 3 seconds to load.
 Your app may have to launch faster to engage these users before they decide to do something else.
 
 With Angular Universal, you can generate landing pages for the app that look like the complete app.
@@ -111,7 +111,7 @@ Finally, the server returns the rendered page to the client.
 Before your app can be rendered on a server, you must make changes in the app itself, and also set up the server.
 
 1. Install dependencies.
-1. Prepare your app by modifying both the app code and its configuration.  
+1. Prepare your app by modifying both the app code and its configuration.
 1. Add a build target, and build a Universal bundle using the CLI with the `@nguniversal/express-engine` schematic.
 1. Set up a server to run Universal bundles.
 1. Pack and run the app on the server.
@@ -142,11 +142,11 @@ If your server handles HTTP requests, you'll have to add your own security plumb
 
 ## Step 1: Install dependencies
 
-Install `@angular/platform-server` into your project. Use the same version as the other `@angular` packages in your project. You also need `ts-loader` for your webpack build and `@nguniversal/module-map-ngfactory-loader` to handle lazy-loading in the context of a server-render.
+Install `@angular/platform-server` into your project. Use the same version as the other `@angular` packages in your project. You also need `ts-loader`, `webpack-cli` for your webpack build and `@nguniversal/module-map-ngfactory-loader` to handle lazy-loading in the context of a server-render.
 
-```
-$ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader
-```
+<code-example language="sh" class="code-shell">
+$ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader webpack-cli
+</code-example>
 
 ## Step 2: Prepare your app
 
@@ -325,6 +325,7 @@ import 'reflect-metadata';
 
 import { renderModuleFactory } from '@angular/platform-server';
 import { enableProdMode } from '@angular/core';
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 
 import * as express from 'express';
 import { join } from 'path';
@@ -342,10 +343,8 @@ const DIST_FOLDER = join(process.cwd(), 'dist');
 // Our index.html we'll use as our template
 const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
 
-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');
 
-const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
 
 app.engine('html', (_, options, callback) => {
   renderModuleFactory(AppServerModuleNgFactory, {
@@ -437,23 +436,16 @@ node dist/server.js
 ### Creating scripts
 
 Now let's create a few handy scripts to help us do all of this in the future.
-You can add these in the `"server"` section of the Angular configuration file, `angular.json`.
+You can add these in the `"scripts"` section of the `package.json`.
 
 <code-example format="." language="none" linenums="false">
-"architect": {
-  "build": { ... }
-  "server": {
-    ...
-     "scripts": {
-      // Common scripts
-      "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
-      "serve:ssr": "node dist/server.js",
-
-      // Helpers for the scripts
-      "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
-      "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
-    }
-   ...
+"scripts": {
+  "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+  "serve:ssr": "node dist/server.js",
+  "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
+  "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
+  ...
+}
 </code-example>
 
 To run a production build of your app with Universal on your local system, use the following command.

aio/content/guide/using-libraries.md

@@ -0,0 +1,146 @@
+# Using Published Libraries
+
+When building Angular applications you can take advantage of sophisticated first-party libraries, such as [Angular Material](https://material.angular.io/), as well as rich ecosystem of third-party libraries.
+See the [Angular Resources](https://angular.io/resources) page for links to the most popular ones.
+
+## Installing libraries
+
+Libraries are published as [npm packages](guide/npm-packages), usually together with schematics that integrate them with the Angular CLI.
+To integrate reusable library code into an application, you need to install the package and import the provided functionality where you will use it. For most published Angular libraries, you can use the Angular CLI `ng add <lib_name>` command.
+
+The `ng add` command uses the npm package manager or [yarn](https://yarnpkg.com/) to install the library package, and invokes schematics that are included in the package to other scaffolding within the project code, such as adding import statements, fonts, themes, and so on.
+
+A published library typically provides a README or other documentation on how to add that lib to your app.
+For an example, see [Angular Material](https://material.angular.io/) docs.
+
+### Library typings
+
+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">
+npm install d3 --save
+npm install @types/d3 --save-dev
+</code-example>
+
+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:
+
+1. Create a `typings.d.ts` file in your `src/` folder. This file is automatically included as global type definition.
+
+2. Add the following code in `src/typings.d.ts`.
+
+```
+declare module 'host' {
+  export interface Host {
+    protocol?: string;
+    hostname?: string;
+    pathname?: string;
+  }
+  export function parse(url: string, queryString?: string): Host;
+}
+```
+
+3. In the component or file that uses the library, add the following code.
+
+```
+import * as host from 'host';
+const parsedUrl = host.parse('https://angular.io');
+console.log(parsedUrl.hostname);
+```
+
+You can define more typings as needed.
+
+## Updating libraries
+
+Libraries can be updated by their publishers, and also have their own dependencies which need to be kept current.
+To check for updates to your installed libraries, use the [`ng update` command](cli/update).
+
+Use `ng update <lib_name>` to update individual library versions. The Angular CLI checks the latest published release of the library, and if the latest version is newer than your installed version, downloads it and updates your `package.json` to match the latest version.
+
+When you update Angular to a new version, you need to make sure that any libraries you are using are current. If libraries have interdependencies, you might have to update them in a particular order.
+See the [Angular Update Guide](https://update.angular.io/) for help.
+
+## Adding a library to the runtime global scope
+
+Legacy JavaScript libraries that are not imported into an app can be added to the runtime global scope and loaded as if they were in a script tag.
+Configure the CLI to do this at build time using the "scripts" and "styles" options of the build target in the [CLI configuration file](guide/workspace-config), `angular.json`.
+
+For example, to use the [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) library, first install the library and its dependencies using the npm package manager:
+
+<code-example format="." language="bash">
+npm install jquery --save
+npm install popper.js --save
+npm install bootstrap --save
+</code-example>
+
+In the `angular.json` configuration file, add the associated script files to the "scripts" array:
+
+```
+"scripts": [
+  "node_modules/jquery/dist/jquery.slim.js",
+  "node_modules/popper.js/dist/umd/popper.js",
+  "node_modules/bootstrap/dist/js/bootstrap.js"
+],
+```
+
+Add the Bootstrap CSS file to the "styles" array:
+
+```
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.css",
+  "src/styles.css"
+],
+```
+
+Run or restart `ng serve` to see Bootstrap 4 working in your app.
+
+### Using runtime-global libraries inside your app
+
+Once you import a library using the "scripts" array, you should **not** import it using an import statement in your TypeScript code (such as `import * as $ from 'jquery';`).
+If you do, you'll end up with two different copies of the library: one imported as a global library, and one imported as a module.
+This is especially bad for libraries with plugins, like JQuery, because each copy will have different plugins.
+
+Instead, download typings for your library (`npm install @types/jquery`) and follow the library installation steps. This gives you access to the global variables exposed by that library.
+
+### Defining typings for runtime-global libraries
+
+If the global library you need to use does not have global typings, you can declare them manually as `any` in `src/typings.d.ts`. For example:
+
+```
+declare var libraryName: any;
+```
+
+Some scripts extend other libraries; for instance with JQuery plugins:
+
+```
+$('.test').myPlugin();
+```
+
+In this case, the installed `@types/jquery` doesn't include `myPlugin`, so you need to add an interface  in `src/typings.d.ts`. For example:
+
+```
+interface JQuery {
+  myPlugin(options?: any): any;
+}
+```
+
+If don't add the interface for the script-defined extension, your IDE shows an error:
+
+```
+[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'
+```

aio/content/guide/workspace-config.md

@@ -123,7 +123,7 @@ You can define and name additional alternate configurations (such as `stage`, fo
 
 The configurable options for a default or targeted build generally correspond to the options available for the [`ng build`](cli/build), [`ng serve`](cli/serve), and [`ng test`](cli/test) commands. For details of those options and their possible values, see the [CLI Reference](cli). 
 
-Some additional options (listed below) can only be set through the configuration file, either by direct editing or with the `ng config` command.
+Some additional options (listed below) can only be set through the configuration file, either by direct editing or with the [`ng config`](cli/config) command.
 
 | OPTIONS PROPERTIES | DESCRIPTION |
 | :------------------------- | :---------------------------- |