release: cut the v8.1.2 release

`item` is an object, so it is stringified to `[object Object]`. Using
its `name` property produces a more meaningful message.

PR Close #31611

.bazelignore

@@ -1,3 +1,4 @@
+.git
 node_modules
 dist
 aio/content

.bazelrc

@@ -1,20 +1,3 @@
-################################
-# Settings for Angular team members only
-################################
-# To enable this feature check the "Remote caching" section in docs/BAZEL.md.
-build:angular-team --remote_http_cache=https://storage.googleapis.com/angular-team-cache
-
-###############################
-# Typescript / Angular / Sass #
-###############################
-
-# Make compilation fast, by keeping a few copies of the compilers
-# running as daemons, and cache SourceFile AST's to reduce parse time.
-build --strategy=AngularTemplateCompile=worker
-# TODO(alexeagle): re-enable after fixing worker instability with rxjs typings
-# build --strategy=TypeScriptCompile=worker
-build --strategy=TypeScriptCompile=standalone
-
 # Enable debugging tests with --config=debug
 test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results
 
@@ -91,12 +74,6 @@ query --output=label_kind
 # By default, failing tests don't print any output, it goes to the log file
 test --test_output=errors
 
-# Show which actions are run under workers,
-# and print all the actions running in parallel.
-# Helps to demonstrate that bazel uses all the cores on the machine.
-build --experimental_ui
-test --experimental_ui
-
 ################################
 # Settings for CircleCI        #
 ################################
@@ -137,10 +114,19 @@ build:remote --platforms=//tools:rbe_ubuntu1604-angular
 
 # Remote instance.
 build:remote --remote_instance_name=projects/internal-200822/instances/default_instance
+build:remote --project_id=internal-200822
 
-# Do not accept remote cache.
-# We need to understand the security risks of using prior build artifacts.
+# Remote caching
+build:remote --remote_cache=remotebuildexecution.googleapis.com
+# By default, do not accept remote cache, to be set to true for CI based on environment
 build:remote --remote_accept_cached=false
+# By default, do not upload local results to cache, to be set to true for CI based on environment
+build:remote --remote_upload_local_results=false
+
+# Build Event Service Configuration
+build:remote --bes_backend=buildeventservice.googleapis.com
+build:remote --bes_timeout=30s
+build:remote --bes_results_url="https://source.cloud.google.com/results/invocations/"
 
 ###############################
 # NodeJS rules settings
@@ -151,6 +137,31 @@ build:remote --remote_accept_cached=false
 # This allows us to avoid installing a second copy of node_modules
 common --experimental_allow_incremental_repository_updates
 
+# This option is changed to true in Bazel 0.27 and exposes a possible
+# regression in Bazel 0.27.0.
+# Error observed is in npm_package target `//packages/common/locales:package`:
+# ```
+# ERROR: /home/circleci/ng/packages/common/locales/BUILD.bazel:13:1: Assembling
+# npm package packages/common/locales/package failed: No usable spawn strategy found
+# for spawn with mnemonic SkylarkAction.  Your --spawn_strategyor --strategy flags
+# are probably too strict. Visit https://github.com/bazelbuild/bazel/issues/7480 for
+# migration advises
+# ```
+# Suspect is https://github.com/bazelbuild/rules_nodejs/blob/master/internal/npm_package/npm_package.bzl#L75-L82:
+# ```
+# execution_requirements = {
+#     # Never schedule this action remotely because it's not computationally expensive.
+#     # It just copies files into a directory; it's not worth copying inputs and outputs to a remote worker.
+#     # Also don't run it in a sandbox, because it resolves an absolute path to the bazel-out directory
+#     # allowing the .pack and .publish runnables to work with no symlink_prefix
+#     # See https://github.com/bazelbuild/rules_nodejs/issues/187
+#     "local": "1",
+# },
+# ```
+build --incompatible_list_based_execution_strategy_selection=false
+test --incompatible_list_based_execution_strategy_selection=false
+run --incompatible_list_based_execution_strategy_selection=false
+
 ####################################################
 # User bazel configuration
 # NOTE: This needs to be the *last* entry in the config.

.circleci/bazel.rc

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

.circleci/config.yml

@@ -58,7 +58,17 @@ var_5: &setup_bazel_remote_execution
       # cause decryption failures based on the openssl version. https://stackoverflow.com/a/39641378/4317734
       openssl aes-256-cbc -d -in .circleci/gcp_token -md md5 -k "$CI_REPO_NAME" -out /home/circleci/.gcp_credentials
       echo "export GOOGLE_APPLICATION_CREDENTIALS=/home/circleci/.gcp_credentials" >> $BASH_ENV
-      sudo bash -c "echo 'build --config=remote' >> /etc/bazel.bazelrc"
+      touch .bazelrc.user
+      sudo bash -c "echo -e 'build --config=remote\n' >> .bazelrc.user"
+      sudo bash -c "echo -e 'build:remote --remote_accept_cached=true\n' >> .bazelrc.user"
+      echo "Reading from remote cache for bazel remote jobs."
+      if [[ "$CI_PULL_REQUEST" == "false" ]]; then
+        sudo bash -c "echo -e 'build:remote --remote_upload_local_results=true\n' >> .bazelrc.user"
+        echo "Uploading local build results to remote cache."
+      else
+        sudo bash -c "echo -e 'build:remote --remote_upload_local_results=false\n' >> .bazelrc.user"
+        echo "Not uploading local build results to remote cache."
+      fi
 
 # Settings common to each job
 var_6: &job_defaults
@@ -106,7 +116,7 @@ var_10: &restore_cache
 
 # Branch filter that can be specified for jobs that should only run on publish branches
 # (e.g. master or the patch branch)
-var_12: &publish_branches_filter
+var_11: &publish_branches_filter
   branches:
     only:
       - master
@@ -117,10 +127,30 @@ var_12: &publish_branches_filter
 # `build-npm-packages`.
 # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
 # https://circleci.com/blog/deep-diving-into-circleci-workspaces/
-var_13: &attach_workspace
+var_12: &attach_workspace
   attach_workspace:
     at: ~/
 
+var_13: &notify_caretaker_on_fail
+  run:
+    when: on_fail
+    name: Notify caretaker about failure
+    # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
+    # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
+    command: |
+      notificationJson="{\"text\":\":x: \`$CIRCLE_JOB\` job for $CIRCLE_BRANCH branch failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}"
+      curl --request POST --header "Content-Type: application/json" --data "$notificationJson" $SLACK_CARETAKER_WEBHOOK_URL
+
+var_14: &notify_dev_infra_on_fail
+  run:
+    when: on_fail
+    name: Notify dev-infra about failure
+    # `$SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
+    # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
+    command: |
+      notificationJson="{\"text\":\":x: \`$CIRCLE_JOB\` job for $CIRCLE_BRANCH branch failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}"
+      curl --request POST --header "Content-Type: application/json" --data "$notificationJson" $SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
+
 version: 2
 jobs:
   setup:
@@ -170,8 +200,6 @@ jobs:
       - *attach_workspace
       - *init_environment
       - *setup_circleci_bazel_config
-      # Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
-      - setup_remote_docker
       # Setup remote execution and run RBE-compatible tests.
       - *setup_bazel_remote_execution
       - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
@@ -191,8 +219,6 @@ jobs:
       - *attach_workspace
       - *init_environment
       - *setup_circleci_bazel_config
-      # Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
-      - setup_remote_docker
       - *setup_bazel_remote_execution
 
         # We need to explicitly specify the --symlink_prefix option because otherwise we would
@@ -247,6 +273,7 @@ jobs:
         # //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
       - run: yarn bazel test --config=saucelabs //:test_web_all
       - run: ./scripts/saucelabs/stop-tunnel.sh
+      - *notify_dev_infra_on_fail
 
   test_aio:
     <<: *job_defaults
@@ -266,6 +293,8 @@ jobs:
       - run: yarn --cwd aio e2e --configuration=ci
         # Run PWA-score tests
       - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
+        # Run accessibility tests
+      - run: yarn --cwd aio test-a11y-score-localhost
         # Check the bundle sizes.
       - run: yarn --cwd aio payload-size
         # Run unit tests for Firebase redirects
@@ -422,8 +451,6 @@ jobs:
       - *attach_workspace
       - *init_environment
       - *setup_circleci_bazel_config
-      # Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
-      - setup_remote_docker
       - *setup_bazel_remote_execution
 
       - run: scripts/build-packages-dist.sh
@@ -450,8 +477,6 @@ jobs:
       - *attach_workspace
       - *init_environment
       - *setup_circleci_bazel_config
-      # Enable remote/sibling docker which is needed by auto-selection of toolchain configs for RBE.
-      - setup_remote_docker
       - *setup_bazel_remote_execution
 
       - run: scripts/build-ivy-npm-packages.sh
@@ -534,12 +559,8 @@ jobs:
       - run:
           name: Run tests against https://angular.io/
           command: ./aio/scripts/test-production.sh https://angular.io/ $CI_AIO_MIN_PWA_SCORE
-      - run:
-          name: Notify caretaker about failure
-          # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
-          # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
-          command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
-          when: on_fail
+      - *notify_caretaker_on_fail
+      - *notify_dev_infra_on_fail
 
   aio_monitoring_next:
     <<: *job_defaults
@@ -553,12 +574,8 @@ jobs:
       - run:
           name: Run tests against https://next.angular.io/
           command: ./aio/scripts/test-production.sh https://next.angular.io/ $CI_AIO_MIN_PWA_SCORE
-      - run:
-          name: Notify caretaker about failure
-          # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
-          # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
-          command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
-          when: on_fail
+      - *notify_caretaker_on_fail
+      - *notify_dev_infra_on_fail
 
   legacy-unit-tests-saucelabs:
     <<: *job_defaults

.codefresh/Dockerfile.win-1809

@@ -82,6 +82,9 @@ FROM baseimage
 
 SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
 
+# Install Bazel prereqs on Windows (https://docs.bazel.build/versions/master/install-windows.html)
+
+# Install MSYS2
 RUN Invoke-WebRequest -UseBasicParsing 'https://www.7-zip.org/a/7z1805-x64.exe' -OutFile 7z.exe; `
     Start-Process -FilePath 'C:\\7z.exe' -ArgumentList '/S', '/D=C:\\7zip0' -NoNewWindow -Wait; `
     Invoke-WebRequest -UseBasicParsing 'http://repo.msys2.org/distrib/x86_64/msys2-base-x86_64-20180531.tar.xz' -OutFile msys2.tar.xz; `
@@ -94,7 +97,10 @@ RUN Invoke-WebRequest -UseBasicParsing 'https://www.7-zip.org/a/7z1805-x64.exe'
     [Environment]::SetEnvironmentVariable('Path', $env:Path + ';C:\msys64\usr\bin', [System.EnvironmentVariableTarget]::Machine); `
     [Environment]::SetEnvironmentVariable('BAZEL_SH', 'C:\msys64\usr\bin\bash.exe', [System.EnvironmentVariableTarget]::Machine)
 
-# Install VS Build Tools
+# Install MSYS2 packages
+RUN C:\msys64\usr\bin\bash.exe -l -c \"pacman --needed --noconfirm -S zip unzip patch diffutils git\"
+
+# Install VS Build Tools (required to build C++ targets)
 RUN Invoke-WebRequest -UseBasicParsing https://download.visualstudio.microsoft.com/download/pr/df649173-11e9-4af2-8eb7-0eb02ba8958a/cadb5bdac41e55bb8f6a6b7c45273370/vs_buildtools.exe -OutFile vs_BuildTools.exe; `
     # Installer won't detect DOTNET_SKIP_FIRST_TIME_EXPERIENCE if ENV is used, must use setx /M
     setx /M DOTNET_SKIP_FIRST_TIME_EXPERIENCE 1; `
@@ -112,7 +118,7 @@ RUN Invoke-WebRequest -UseBasicParsing https://download.visualstudio.microsoft.c
     Remove-Item -Force -Recurse \"${Env:ProgramData}\Package Cache\"; `
     [Environment]::SetEnvironmentVariable('BAZEL_VC', \"${Env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\BuildTools\VC\", [System.EnvironmentVariableTarget]::Machine)
 
-# Install Python
+# Install Python (required to build Python targets)
 RUN Invoke-WebRequest -UseBasicParsing https://www.python.org/ftp/python/3.5.1/python-3.5.1.exe -OutFile python-3.5.1.exe; `
     Start-Process python-3.5.1.exe -ArgumentList '/quiet InstallAllUsers=1 PrependPath=1' -Wait; `
     Remove-Item -Force python-3.5.1.exe

.github/CODEOWNERS

@@ -53,6 +53,8 @@
 #  IgorMinar - Igor Minar
 #  jasonaden - Jason Aden
 #  jenniferfell - Jennifer Fell
+#  JiaLiPassion - Jia Li
+#  josephperrott - Joey Perrott
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
@@ -247,6 +249,15 @@
 #   - mhevery
 
 
+# ===========================================================
+#  @angular/fw-zones
+# ===========================================================
+#
+#   - JiaLiPassion
+#   - mhevery
+#   - vikerman
+
+
 # ===========================================================
 #  @angular/tools-benchpress
 # ===========================================================
@@ -346,7 +357,7 @@
 #   - filipesilva
 #   - gkalpak
 #   - IgorMinar
-
+#   - josephperrott
 
 
 
@@ -730,6 +741,13 @@ testing/**                                                      @angular/fw-test
 
 
 
+# ================================================
+#  zone.js
+# ================================================
+
+/packages/zone.js/**                                            @angular/fw-zones @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+
 # ================================================
 #  benchpress
 # ================================================

BUILD.bazel

@@ -18,15 +18,15 @@ filegroup(
     name = "web_test_bootstrap_scripts",
     # do not sort
     srcs = [
-        "@npm//node_modules/core-js:client/core.js",
-        "@npm//node_modules/zone.js:dist/zone.js",
-        "@npm//node_modules/zone.js:dist/zone-testing.js",
-        "@npm//node_modules/zone.js:dist/task-tracking.js",
+        "@npm//:node_modules/core-js/client/core.js",
+        "@npm//:node_modules/zone.js/dist/zone.js",
+        "@npm//:node_modules/zone.js/dist/zone-testing.js",
+        "@npm//:node_modules/zone.js/dist/task-tracking.js",
         "//:test-events.js",
         "//:shims_for_IE.js",
         # Including systemjs because it defines `__eval`, which produces correct stack traces.
-        "@npm//node_modules/systemjs:dist/system.src.js",
-        "@npm//node_modules/reflect-metadata:Reflect.js",
+        "@npm//:node_modules/systemjs/dist/system.src.js",
+        "@npm//:node_modules/reflect-metadata/Reflect.js",
     ],
 )
 
@@ -35,15 +35,15 @@ filegroup(
     srcs = [
         # We also declare the unminfied AngularJS files since these can be used for
         # local debugging (e.g. see: packages/upgrade/test/common/test_helpers.ts)
-        "@npm//node_modules/angular:angular.js",
-        "@npm//node_modules/angular:angular.min.js",
-        "@npm//node_modules/angular-1.5:angular.js",
-        "@npm//node_modules/angular-1.5:angular.min.js",
-        "@npm//node_modules/angular-1.6:angular.js",
-        "@npm//node_modules/angular-1.6:angular.min.js",
-        "@npm//node_modules/angular-mocks:angular-mocks.js",
-        "@npm//node_modules/angular-mocks-1.5:angular-mocks.js",
-        "@npm//node_modules/angular-mocks-1.6:angular-mocks.js",
+        "@npm//:node_modules/angular/angular.js",
+        "@npm//:node_modules/angular/angular.min.js",
+        "@npm//:node_modules/angular-1.5/angular.js",
+        "@npm//:node_modules/angular-1.5/angular.min.js",
+        "@npm//:node_modules/angular-1.6/angular.js",
+        "@npm//:node_modules/angular-1.6/angular.min.js",
+        "@npm//:node_modules/angular-mocks/angular-mocks.js",
+        "@npm//:node_modules/angular-mocks-1.5/angular-mocks.js",
+        "@npm//:node_modules/angular-mocks-1.6/angular-mocks.js",
     ],
 )
 

CHANGELOG.md

@@ -1,3 +1,70 @@
+<a name="8.1.2"></a>
+## [8.1.2](https://github.com/angular/angular/compare/8.1.0...8.1.2) (2019-07-17)
+
+
+### Bug Fixes
+
+* use the correct WTF array to iterate over ([#31208](https://github.com/angular/angular/issues/31208)) ([4aed480](https://github.com/angular/angular/commit/4aed480))
+* **compiler-cli:** Return original sourceFile instead of redirected sourceFile from getSourceFile ([#26036](https://github.com/angular/angular/issues/26036)) ([13dbb98](https://github.com/angular/angular/commit/13dbb98)), closes [#22524](https://github.com/angular/angular/issues/22524)
+* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
+
+
+
+<a name="8.1.1"></a>
+## [8.1.1](https://github.com/angular/angular/compare/8.1.0...8.1.1) (2019-07-10)
+
+
+### Bug Fixes
+
+* **core:** export provider interfaces that are part of the public API types ([#31377](https://github.com/angular/angular/issues/31377)) ([bebf089](https://github.com/angular/angular/commit/bebf089)), closes [/github.com/angular/angular/pull/31377#discussion_r299254408](https://github.com//github.com/angular/angular/pull/31377/issues/discussion_r299254408) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L365-L366](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L365-L366) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts#L283-L284](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/interface/provider.ts/issues/L283-L284) [/github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts#L23](https://github.com//github.com/angular/angular/blob/9e34670b2/packages/core/src/di/index.ts/issues/L23)
+
+
+
+<a name="8.1.0"></a>
+# [8.1.0](https://github.com/angular/angular/compare/8.1.0-rc.0...8.1.0) (2019-07-02)
+
+
+### Bug Fixes
+
+* **core:** handle `undefined` meta in `injectArgs` ([#31333](https://github.com/angular/angular/issues/31333)) ([80ccd6c](https://github.com/angular/angular/commit/80ccd6c)), closes [CLI #14888](https://github.com/angular/angular-cli/issues/14888)
+* **service-worker:** cache opaque responses in data groups with `freshness` strategy ([#30977](https://github.com/angular/angular/issues/30977)) ([b0c3453](https://github.com/angular/angular/commit/b0c3453)), closes [#30968](https://github.com/angular/angular/issues/30968)
+* **service-worker:** cache opaque responses when requests exceeds timeout threshold ([#30977](https://github.com/angular/angular/issues/30977)) ([a9038ef](https://github.com/angular/angular/commit/a9038ef))
+
+
+
+<a name="8.1.0-rc.0"></a>
+# [8.1.0-rc.0](https://github.com/angular/angular/compare/8.1.0-next.3...8.1.0-rc.0) (2019-06-26)
+
+
+### Bug Fixes
+
+* **bazel:** exclude all angular schematics folders from metadata build ([#31237](https://github.com/angular/angular/issues/31237)) ([16717fa](https://github.com/angular/angular/commit/16717fa)), closes [#31235](https://github.com/angular/angular/issues/31235)
+* **bazel:** remove unsupported Css pre-processors from ng new ([#31234](https://github.com/angular/angular/issues/31234)) ([e83667a](https://github.com/angular/angular/commit/e83667a)), closes [#31209](https://github.com/angular/angular/issues/31209)
+* **bazel:** update ng new schema to match the current ng new schema of [@schematics](https://github.com/schematics)/angular ([#31234](https://github.com/angular/angular/issues/31234)) ([805fc86](https://github.com/angular/angular/commit/805fc86)), closes [#31233](https://github.com/angular/angular/issues/31233)
+* **compiler:** fix Elements not making a new ParseSourceSpan ([#31190](https://github.com/angular/angular/issues/31190)) ([7035f22](https://github.com/angular/angular/commit/7035f22))
+* **compiler:** stringify `Object.create(null)` tokens ([#16848](https://github.com/angular/angular/issues/16848)) ([5e53956](https://github.com/angular/angular/commit/5e53956))
+* **service-worker:** registration failed on Safari ([#31140](https://github.com/angular/angular/issues/31140)) ([a5dd4ed](https://github.com/angular/angular/commit/a5dd4ed)), closes [#31061](https://github.com/angular/angular/issues/31061)
+
+
+### Features
+
+* **upgrade:** provide unit test helpers for wiring up injectors ([#16848](https://github.com/angular/angular/issues/16848)) ([3fb78aa](https://github.com/angular/angular/commit/3fb78aa))
+
+
+
+<a name="8.0.3"></a>
+## [8.0.3](https://github.com/angular/angular/compare/8.0.2...8.0.3) (2019-06-26)
+
+
+### Bug Fixes
+
+* **bazel:** exclude all angular schematics folders from metadata build ([#31237](https://github.com/angular/angular/issues/31237)) ([6bad2ca](https://github.com/angular/angular/commit/6bad2ca)), closes [#31235](https://github.com/angular/angular/issues/31235)
+* **bazel:** remove unsupported Css pre-processors from ng new ([#31234](https://github.com/angular/angular/issues/31234)) ([980bcaf](https://github.com/angular/angular/commit/980bcaf)), closes [#31209](https://github.com/angular/angular/issues/31209)
+* **bazel:** update ng new schema to match the current ng new schema of [@schematics](https://github.com/schematics)/angular ([#31234](https://github.com/angular/angular/issues/31234)) ([48f7f65](https://github.com/angular/angular/commit/48f7f65)), closes [#31233](https://github.com/angular/angular/issues/31233)
+* **service-worker:** registration failed on Safari ([#31140](https://github.com/angular/angular/issues/31140)) ([f470e69](https://github.com/angular/angular/commit/f470e69)), closes [#31061](https://github.com/angular/angular/issues/31061)
+
+
+
 <a name="8.1.0-next.3"></a>
 # [8.1.0-next.3](https://github.com/angular/angular/compare/8.1.0-next.2...8.1.0-next.3) (2019-06-19)
 

CONTRIBUTING.md

@@ -222,6 +222,7 @@ The following is the list of supported scopes:
 * **router**
 * **service-worker**
 * **upgrade**
+* **zone.js**
 
 There are currently a few exceptions to the "use package name" rule:
 
@@ -231,6 +232,7 @@ There are currently a few exceptions to the "use package name" rule:
 * **changelog**: used for updating the release notes in CHANGELOG.md
 * **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
   repo
+* **ivy**: used for changes to the [Ivy renderer](https://github.com/angular/angular/issues/21706).
 * none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
   packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
   specific package (e.g. `docs: fix typo in tutorial`).

WORKSPACE

@@ -18,8 +18,11 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "e04a82a72146bfbca2d0575947daa60fda1878c8d3a3afe868a8ec39a6b968bb",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.31.1/rules_nodejs-0.31.1.tar.gz"],
+    patch_args = ["-p1"],
+    # Patch https://github.com/bazelbuild/rules_nodejs/pull/903
+    patches = ["//tools:rollup_bundle_commonjs_ignoreGlobal.patch"],
+    sha256 = "6d4edbf28ff6720aedf5f97f9b9a7679401bf7fca9d14a0fff80f644a99992b4",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.32.2/rules_nodejs-0.32.2.tar.gz"],
 )
 
 # Check the bazel version and download npm dependencies
@@ -27,6 +30,7 @@ load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "check_rules
 
 # Bazel version must be at least the following version because:
 #   - 0.26.0 managed_directories feature added which is required for nodejs rules 0.30.0
+#   - 0.27.0 has a fix for managed_directories after `rm -rf node_modules`
 check_bazel_version(
     message = """
 You no longer need to install Bazel on your machine.
@@ -35,7 +39,7 @@ Try running `yarn bazel` instead.
     (If you did run that, check that you've got a fresh `yarn install`)
 
 """,
-    minimum_bazel_version = "0.26.0",
+    minimum_bazel_version = "0.27.0",
 )
 
 # The NodeJS rules version must be at least the following version because:
@@ -46,7 +50,10 @@ Try running `yarn bazel` instead.
 #   - 0.27.12 Adds NodeModuleSources provider for transtive npm deps support
 #   - 0.30.0 yarn_install now uses symlinked node_modules with new managed directories Bazel 0.26.0 feature
 #   - 0.31.1 entry_point attribute of nodejs_binary & rollup_bundle is now a label
-check_rules_nodejs_version(minimum_version_string = "0.31.1")
+#   - 0.32.0 yarn_install and npm_install no longer puts build files under symlinked node_modules
+#   - 0.32.1 remove override of @bazel/tsetse & exclude typescript lib declarations in node_module_library transitive_declarations
+#   - 0.32.2 resolves bug in @bazel/hide-bazel-files postinstall step
+check_rules_nodejs_version(minimum_version_string = "0.32.2")
 
 # Setup the Node.js toolchain
 node_repositories(
@@ -70,19 +77,7 @@ node_repositories(
 
 yarn_install(
     name = "npm",
-    data = [
-        "//:tools/npm/@angular_bazel/index.js",
-        "//:tools/npm/@angular_bazel/package.json",
-        "//:tools/postinstall-patches.js",
-        "//:tools/yarn/check-yarn.js",
-    ],
     package_json = "//:package.json",
-    # Don't install devDependencies, they are large and not used under Bazel
-    prod_only = True,
-    # Temporarily disable node_modules symlinking until the fix for
-    # https://github.com/bazelbuild/bazel/issues/8487 makes it into a
-    # future Bazel release
-    symlink_node_modules = False,
     yarn_lock = "//:yarn.lock",
 )
 
@@ -132,17 +127,20 @@ load("@bazel_toolchains//rules:rbe_repo.bzl", "rbe_autoconfig")
 
 rbe_autoconfig(
     name = "rbe_ubuntu1604_angular",
-    # The sha256 of marketplace.gcr.io/google/rbe-ubuntu16-04 container that is
-    # used by rbe_autoconfig() to pair toolchain configs in the @bazel_toolchains repo.
-    base_container_digest = "sha256:677c1317f14c6fd5eba2fd8ec645bfdc5119f64b3e5e944e13c89e0525cc8ad1",
+    # Need to specify a base container digest in order to ensure that we can use the checked-in
+    # platform configurations for the "ubuntu16_04" image. Otherwise the autoconfig rule would
+    # need to pull the image and run it in order determine the toolchain configuration. See:
+    # https://github.com/bazelbuild/bazel-toolchains/blob/0.27.0/configs/ubuntu16_04_clang/versions.bzl
+    base_container_digest = "sha256:94d7d8552902d228c32c8c148cc13f0effc2b4837757a6e95b73fdc5c5e4b07b",
     # Note that if you change the `digest`, you might also need to update the
     # `base_container_digest` to make sure marketplace.gcr.io/google/rbe-ubuntu16-04-webtest:<digest>
     # and marketplace.gcr.io/google/rbe-ubuntu16-04:<base_container_digest> have
-    # the same Clang and JDK installed.
-    # Clang is needed because of the dependency on @com_google_protobuf.
-    # Java is needed for the Bazel's test executor Java tool.
-    digest = "sha256:74a8e9dca4781d5f277a7bd8e7ea7ed0f5906c79c9cd996205b6d32f090c62f3",
+    # the same Clang and JDK installed. Clang is needed because of the dependency on
+    # @com_google_protobuf. Java is needed for the Bazel's test executor Java tool.
+    digest = "sha256:76e2e4a894f9ffbea0a0cb2fbde741b5d223d40f265dbb9bca78655430173990",
     env = clang_env(),
     registry = "marketplace.gcr.io",
+    # We can't use the default "ubuntu16_04" RBE image provided by the autoconfig because we need
+    # a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
     repository = "google/rbe-ubuntu16-04-webtest",
 )

aio/content/cli/index.md

@@ -36,6 +36,14 @@ ng serve
 In your browser, open http://localhost:4200/ to see the new app run.
 When you use the [ng serve](cli/serve) command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.
 
+<div class="alert is-helpful">
+
+   When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
+
+   If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
+
+</div>
+
 ## Workspaces and project files
 
 The [ng new](cli/new) command creates an *Angular workspace* folder and generates a new app skeleton.
@@ -74,7 +82,7 @@ Command syntax is shown as follows:
 * Option names are prefixed with a double dash (--).
     Option aliases are prefixed with a single dash (-).
     Arguments are not prefixed.
-    For example: 
+    For example:
     <code-example format="." language="bash">
         ng build my-app -c production
     </code-example>
@@ -105,5 +113,5 @@ Schematic options are supplied to the command in the same format as immediate co
 
 ### Building with Bazel
 
-Optionally, you can configure the Angular CLI to use [Bazel](https://docs.bazel.build) as the build tool. For more information, see [Building with Bazel](guide/bazel). 
+Optionally, you can configure the Angular CLI to use [Bazel](https://docs.bazel.build) as the build tool. For more information, see [Building with Bazel](guide/bazel).
 

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

@@ -25,8 +25,8 @@ describe('Attribute directives', () => {
     greenRb.click();
     browser.actions().mouseMove(highlightedEle).perform();
 
-    // Wait for up to 2s for the background color to be updated,
+    // Wait for up to 4s for the background color to be updated,
     // to account for slow environments (e.g. CI).
-    browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 2000);
+    browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 4000);
   });
 });

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

@@ -18,7 +18,7 @@ export class AppComponent {
   }
 
   deleteItem(item: Item) {
-    alert(`Delete the ${item}.`);
+    alert(`Delete the ${item.name}.`);
   }
 
   onClickMe(event?: KeyboardEvent) {

aio/content/examples/http/src/app/heroes/heroes.component.ts

@@ -6,14 +6,14 @@ import { HeroesService } from './heroes.service';
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  providers: [ HeroesService ],
+  providers: [HeroesService],
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   editHero: Hero; // the hero currently being edited
 
-  constructor(private heroesService: HeroesService) { }
+  constructor(private heroesService: HeroesService) {}
 
   ngOnInit() {
     this.getHeroes();
@@ -21,18 +21,21 @@ export class HeroesComponent implements OnInit {
 
   getHeroes(): void {
     this.heroesService.getHeroes()
-      .subscribe(heroes => this.heroes = heroes);
+      .subscribe(heroes => (this.heroes = heroes));
   }
 
   add(name: string): void {
     this.editHero = undefined;
     name = name.trim();
-    if (!name) { return; }
+    if (!name) {
+      return;
+    }
 
     // The server will generate the id for this new hero
     const newHero: Hero = { name } as Hero;
     // #docregion add-hero-subscribe
-    this.heroesService.addHero(newHero)
+    this.heroesService
+      .addHero(newHero)
       .subscribe(hero => this.heroes.push(hero));
     // #enddocregion add-hero-subscribe
   }
@@ -40,7 +43,9 @@ export class HeroesComponent implements OnInit {
   delete(hero: Hero): void {
     this.heroes = this.heroes.filter(h => h !== hero);
     // #docregion delete-hero-subscribe
-    this.heroesService.deleteHero(hero.id).subscribe();
+    this.heroesService
+      .deleteHero(hero.id)
+      .subscribe();
     // #enddocregion delete-hero-subscribe
     /*
     // #docregion delete-hero-no-subscribe
@@ -50,26 +55,30 @@ export class HeroesComponent implements OnInit {
     */
   }
 
-  edit(hero) {
+  edit(hero: Hero) {
     this.editHero = hero;
   }
 
   search(searchTerm: string) {
     this.editHero = undefined;
     if (searchTerm) {
-      this.heroesService.searchHeroes(searchTerm)
-        .subscribe(heroes => this.heroes = heroes);
+      this.heroesService
+        .searchHeroes(searchTerm)
+        .subscribe(heroes => (this.heroes = heroes));
     }
   }
 
   update() {
     if (this.editHero) {
-      this.heroesService.updateHero(this.editHero)
+      this.heroesService
+        .updateHero(this.editHero)
         .subscribe(hero => {
-          // replace the hero in the heroes list with update from server
-          const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
-          if (ix > -1) { this.heroes[ix] = hero; }
-        });
+        // replace the hero in the heroes list with update from server
+        const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
+        if (ix > -1) {
+          this.heroes[ix] = hero;
+        }
+      });
       this.editHero = undefined;
     }
   }

aio/content/examples/http/src/app/package-search/package-search.service.ts

@@ -48,7 +48,7 @@ export class PackageSearchService {
     // TODO: Add error handling
     return this.http.get(searchUrl, options).pipe(
       map((data: any) => {
-        return data.results.map(entry => ({
+        return data.results.map((entry: any) => ({
             name: entry.name[0],
             version: entry.version[0],
             description: entry.description[0]

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

@@ -10,7 +10,6 @@ export class AppComponent {
   gender = 'female';
   fly = true;
   logo = 'https://angular.io/assets/images/logos/angular/angular.png';
-  heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {
     this.minutes = Math.min(5, Math.max(0, this.minutes + i));
   }

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

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

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

@@ -7,9 +7,9 @@ import { from } from 'rxjs';
 const data = from(fetch('/api/endpoint'));
 // Subscribe to begin listening for async result
 data.subscribe({
- next(response) { console.log(response); },
- error(err) { console.error('Error: ' + err); },
- complete() { console.log('Completed'); }
+  next(response) { console.log(response); },
+  error(err) { console.error('Error: ' + err); },
+  complete() { console.log('Completed'); }
 });
 
 // #enddocregion promise

aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts

@@ -2,42 +2,49 @@
 
 import { browser, element, by } from 'protractor';
 
-// Not yet complete
-describe('Template Syntax', function () {
+// TODO Not yet complete
+describe('Template Syntax', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should be able to use interpolation with a hero', function () {
-    let heroInterEle = element.all(by.css('h2+p')).get(0);
+  it('should be able to use interpolation with a hero', () => {
+    const heroInterEle = element.all(by.css('h2+p')).get(0);
     expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
   });
 
-  it('should be able to use interpolation with a calculation', function () {
-    let theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
+  it('should be able to use interpolation with a calculation', () => {
+    const theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
     expect(theSumEles.count()).toBe(2);
     expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
     expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
   });
 
-  it('should be able to use class binding syntax', function () {
-    let specialEle = element(by.cssContainingText('div', 'Special'));
+  it('should be able to use class binding syntax', () => {
+    const specialEle = element(by.cssContainingText('div', 'Special'));
     expect(specialEle.getAttribute('class')).toMatch('special');
   });
 
-  it('should be able to use style binding syntax', function () {
-    let specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
+  it('should be able to use style binding syntax', () => {
+    const specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
     expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
   });
 
   it('should two-way bind to sizer', async () => {
-    let div = element(by.css('div#two-way-1'));
-    let incButton = div.element(by.buttonText('+'));
-    let input = div.element(by.css('input'));
-    let initSize = await input.getAttribute('value');
+    const div = element(by.css('div#two-way-1'));
+    const incButton = div.element(by.buttonText('+'));
+    const input = div.element(by.css('input'));
+    const initSize = await input.getAttribute('value');
     incButton.click();
     expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
   });
-});
 
+  it('should change SVG rectangle\'s fill color on click', async () => {
+    const div = element(by.css('app-svg'));
+    const colorSquare = div.element(by.css('rect'));
+    const initialColor = await colorSquare.getAttribute('fill');
+    colorSquare.click();
+    expect(colorSquare.getAttribute('fill')).not.toEqual(initialColor);
+  });
+});

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

@@ -38,6 +38,7 @@
 <a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
 <a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
 <a href="#enums">Enums</a><br>
+<a href="#svg-templates">SVG Templates</a><br>
 
 <!-- Interpolation and expressions -->
 <hr><h2 id="interpolation">Interpolation</h2>
@@ -442,7 +443,7 @@ button</button>
 
 <!-- #docregion without-NgModel -->
 <input [value]="currentHero.name"
-       (input)="currentHero.name=$event.target.value" >
+       (input)="updateCurrentHeroName($event)">
 <!-- #enddocregion without-NgModel -->
 without NgModel
 <br>
@@ -752,7 +753,7 @@ bindon-ngModel
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product.price | currency:'USD':true}}
+  <label>Price: </label>{{product.price | currency:'USD':'symbol'}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -857,3 +858,9 @@ The null hero's name is {{nullHero && nullHero.name}}
 </p>
 
 <a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="svg-templates">SVG Templates</h2>
+<!-- #docregion svg-templates -->
+<app-svg></app-svg>
+<!-- #enddocregion svg-templates -->
+<a class="to-toc" href="#toc">top</a>

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

@@ -5,7 +5,7 @@ import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren }
 
 import { Hero } from './hero';
 
-export enum Color {Red, Green, Blue};
+export enum Color {Red, Green, Blue}
 
 /**
  * Giant grab bag of stuff to drive the chapter
@@ -29,7 +29,7 @@ export class AppComponent implements AfterViewInit, OnInit {
     trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
   }
 
-  @ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
+  @ViewChildren('noTrackBy')   heroesNoTrackBy: QueryList<ElementRef>;
   @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
 
   actionName = 'Go for it';
@@ -66,6 +66,10 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   currentHero: Hero;
 
+  updateCurrentHeroName(event: Event) {
+    this.currentHero.name = (event.target as any).value;
+  }
+
   deleteHero(hero?: Hero) {
     this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
   }
@@ -105,13 +109,13 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   get nullHero(): Hero { return null; }
 
-  onClickMe(event?: KeyboardEvent) {
-    let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className  : '';
+  onClickMe(event?: MouseEvent) {
+    const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className  : '';
     this.alert('Click me.' + evtMsg);
   }
 
-  onSave(event?: KeyboardEvent) {
-    let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).textContent : '';
+  onSave(event?: MouseEvent) {
+    const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : '';
     this.alert('Saved.' + evtMsg);
     if (event) { event.stopPropagation(); }
   }
@@ -140,9 +144,9 @@ export class AppComponent implements AfterViewInit, OnInit {
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      'saveable': this.canSave,
-      'modified': !this.isUnchanged,
-      'special':  this.isSpecial
+      saveable: this.canSave,
+      modified: !this.isUnchanged,
+      special:  this.isSpecial
     };
   }
   // #enddocregion setClasses
@@ -164,7 +168,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   // #enddocregion trackByHeroes
 
   // #docregion trackById
-  trackById(index: number, item: any): number { return item['id']; }
+  trackById(index: number, item: any): number { return item.id; }
   // #enddocregion trackById
 }
 

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

@@ -1,13 +1,14 @@
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
 import { ClickDirective, ClickDirective2 } from './click.directive';
-import { HeroFormComponent }      from './hero-form.component';
-import { heroSwitchComponents }   from './hero-switch.components';
-import { SizerComponent }         from './sizer.component';
+import { HeroFormComponent } from './hero-form.component';
+import { heroSwitchComponents } from './hero-switch.components';
+import { SizerComponent } from './sizer.component';
+import { SvgComponent } from './svg.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { SizerComponent }         from './sizer.component';
     heroSwitchComponents,
     ClickDirective,
     ClickDirective2,
-    SizerComponent
+    SizerComponent,
+    SvgComponent
   ],
   bootstrap: [ AppComponent ]
 })

aio/content/examples/template-syntax/src/app/click.directive.ts

@@ -1,4 +1,4 @@
-/* tslint:disable use-output-property-decorator directive-class-suffix */
+/* tslint:disable directive-selector directive-class-suffix */
 // #docplaster
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 

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

@@ -1,5 +1,5 @@
 import { Component, Input, ViewChild } from '@angular/core';
-import { NgForm }                      from '@angular/forms';
+import { NgForm } from '@angular/forms';
 
 import { Hero } from './hero';
 
@@ -15,10 +15,11 @@ export class HeroFormComponent {
   @Input() hero: Hero;
   @ViewChild('heroForm', {static: false}) form: NgForm;
 
+  // tslint:disable-next-line:variable-name
   private _submitMessage = '';
 
   get submitMessage() {
-    if (!this.form.valid) {
+    if (this.form && !this.form.valid) {
       this._submitMessage = '';
     }
     return this._submitMessage;

aio/content/examples/template-syntax/src/app/svg.component.css

@@ -0,0 +1,4 @@
+svg {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,6 @@
+<svg>
+  <g>
+    <rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
+    <text x="120" y="50">click the rectangle to change the fill color</text>
+  </g>
+</svg>

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-svg',
+  templateUrl: './svg.component.svg',
+  styleUrls: ['./svg.component.css']
+})
+export class SvgComponent {
+  fillColor = 'rgb(255, 0, 0)';
+
+  changeColor() {
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    this.fillColor = `rgb(${r}, ${g}, ${b})`;
+  }
+}

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

@@ -0,0 +1,35 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Testing Example', () => {
+  const expectedViewNames = ['Dashboard', 'Heroes', 'About'];
+
+  beforeAll(() => browser.get(''));
+
+  function getPageElts() {
+    let navElts = element.all(by.css('app-root nav a'));
+
+    return {
+      navElts: navElts,
+
+      appDashboard: element(by.css('app-root app-dashboard')),
+    };
+  }
+
+  it('has title', async() => {
+    expect(await browser.getTitle()).toEqual('App Under Test');
+  });
+
+  it(`has views ${expectedViewNames}`, async () => {
+    let viewNames = getPageElts().navElts.map(async(el: ElementFinder) => await el.getText());
+
+    expect(viewNames).toEqual(expectedViewNames);
+  });
+
+  it('has dashboard as the active view', () => {
+    let page = getPageElts();
+
+    expect(page.appDashboard.isPresent()).toBeTruthy();
+  });
+});

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts

@@ -20,7 +20,7 @@ describe('DashboardHeroComponent class only', () => {
     const hero: Hero = { id: 42, name: 'Test' };
     comp.hero = hero;
 
-    comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+    comp.selected.subscribe((selectedHero: Hero) => expect(selectedHero).toBe(hero));
     comp.click();
   });
   // #enddocregion class-only
@@ -95,7 +95,7 @@ describe('DashboardHeroComponent when tested directly', () => {
   // #docregion click-test-3
   it('should raise selected event when clicked (click helper)', () => {
     let selectedHero: Hero;
-    comp.selected.subscribe(hero => selectedHero = hero);
+    comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
     click(heroDe); // click helper with DebugElement
     click(heroEl); // click helper with native element

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

@@ -19,7 +19,7 @@ export class Hero {
 // #docregion ValueService
 @Injectable()
 export class ValueService {
-  protected value = 'real value';
+  value = 'real value';
 
   getValue() { return this.value; }
   setValue(value: string) { this.value = value; }

aio/content/examples/testing/src/app/model/hero.ts

@@ -2,7 +2,3 @@ export interface Hero {
   id: number;
   name: string;
 }
-
-// SystemJS bug:
-// TS file must export something real in JS, not just interfaces
-export const _dummy = undefined;

aio/content/examples/testing/src/app/shared/canvas.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'sample-canvas',
@@ -6,7 +6,7 @@ import { Component, AfterViewInit, ViewChild } from '@angular/core';
 })
 export class CanvasComponent implements AfterViewInit {
   blobSize: number;
-  @ViewChild('sampleCanvas', {static: false}) sampleCanvas;
+  @ViewChild('sampleCanvas', {static: false}) sampleCanvas: ElementRef;
 
   constructor() { }
 

aio/content/examples/testing/src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { FormsModule }   from '@angular/forms';
 
 import { HighlightDirective } from './highlight.directive';
 import { TitleCasePipe }      from './title-case.pipe';
+import { CanvasComponent }    from './canvas.component';
 
 @NgModule({
   imports: [ CommonModule ],
@@ -12,8 +13,9 @@ import { TitleCasePipe }      from './title-case.pipe';
     // SharedModule importers won't have to import FormsModule too
     FormsModule,
     HighlightDirective,
-    TitleCasePipe
+    TitleCasePipe,
+    CanvasComponent
   ],
-  declarations: [ HighlightDirective, TitleCasePipe ]
+  declarations: [ HighlightDirective, TitleCasePipe, CanvasComponent ]
 })
 export class SharedModule { }

aio/content/examples/testing/src/app/twain/twain.service.ts

@@ -2,7 +2,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
-import { Observable, of, throwError } from 'rxjs';
+import { Observable, of, throwError, Observer } from 'rxjs';
 import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
 
 import { Quote } from './quote';
@@ -14,7 +14,7 @@ export class TwainService {
   private nextId = 1;
 
   getQuote(): Observable<string> {
-    return Observable.create(observer => observer.next(this.nextId++)).pipe(
+    return Observable.create((observer: Observer<number>) => observer.next(this.nextId++)).pipe(
 
       // tap((id: number) => console.log(id)),
       // tap((id: number) => { throw new Error('Simulated server error'); }),

aio/content/examples/testing/src/testing/global-jasmine.ts

@@ -1,3 +1,3 @@
-import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+const jasmineRequire = require('jasmine-core/lib/jasmine-core/jasmine.js');
 
 window['jasmineRequire'] = jasmineRequire;

aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,79 @@
+import { browser, element, by, ExpectedConditions } from 'protractor';
+
+describe('Lazy Loading AngularJS Tests', function () {
+  const pageElements = {
+    homePageHref: element(by.cssContainingText('app-root nav a', 'Home')),
+    homePageParagraph: element(by.css('app-root app-home p')),
+    ajsUsersPageHref: element(by.cssContainingText('app-root nav a', 'Users')),
+    ajsUsersPageParagraph: element(by.css('app-root app-angular-js div p')),
+    notFoundPageHref: element(by.cssContainingText('app-root nav a', '404 Page')),
+    notFoundPageParagraph: element(by.css('app-root app-app404 p')),
+  };
+
+  beforeAll(async() => {
+    await browser.get('/');
+  });
+
+  it('should display \'Angular Home\' when visiting the home page', async() => {
+    await pageElements.homePageHref.click();
+
+    const paragraphText = await pageElements.homePageParagraph.getText();
+
+    expect(paragraphText).toEqual('Angular Home');
+  });
+
+  it('should display \'Users Page\' page when visiting the AngularJS page at /users', async() => {
+    await pageElements.ajsUsersPageHref.click();
+    await loadAngularJS();
+
+    const paragraphText = await pageElements.ajsUsersPageParagraph.getText();
+
+    expect(paragraphText).toEqual('Users Page');
+  });
+
+  it('should display \'Angular 404\' when visiting an invalid URL', async() => {
+    await pageElements.notFoundPageHref.click();
+
+    const paragraphText = await pageElements.notFoundPageParagraph.getText();
+
+    expect(paragraphText).toEqual('Angular 404');
+  });
+
+  // Workaround for https://github.com/angular/protractor/issues/4724
+  async function loadAngularJS() {
+    // Abort if `resumeBootstrap` has already occured
+    if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) {
+        return;
+    }
+
+    // Might have to re-insert the 'NG_DEFER_BOOTSTRAP!' if the name has been changed since protractor loaded the page
+    if (!await browser.executeScript('window.name.includes(\'NG_DEFER_BOOTSTRAP!\')')) {
+        await browser.executeScript('window.name = \'NG_DEFER_BOOTSTRAP!\' + name');
+    }
+
+    // Wait for the AngularJS bundle to download and initialize
+    await browser.wait(ExpectedConditions.presenceOf(element(by.css('app-root app-angular-js'))), 5000, 'AngularJS app');
+
+    // Run the protractor pre-bootstrap logic and resumeBootstrap
+    // Based on https://github.com/angular/protractor/blob/5.3.0/lib/browser.ts#L950-L969
+    {
+        let moduleNames = [];
+        for (const {name, script, args} of browser.mockModules_) {
+            moduleNames.push(name);
+            await browser.executeScriptWithDescription(script, 'add mock module ' + name, ...args);
+        }
+
+        await browser.executeScriptWithDescription(
+            // TODO: must manually assign __TESTABILITY__NG1_APP_ROOT_INJECTOR__ (https://github.com/angular/angular/issues/22723)
+            `window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = angular.resumeBootstrap(arguments[0]) `
+            + `|| angular.element('app-angular-js').injector();`,
+            'resume bootstrap',
+            moduleNames
+        );
+    }
+
+    // Wait for the initial AngularJS page to finish loading
+    await browser.waitForAngular();
+  }
+});
+

aio/content/examples/upgrade-lazy-load-ajs/example-config.json

@@ -0,0 +1,3 @@
+{
+  "projectType": "cli-ajs"
+}

aio/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts

@@ -1,14 +1,22 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { LazyLoaderService } from '../lazy-loader.service';
 
 @Component({
   selector: 'app-angular-js',
   template: '<div ng-view></div>'
 })
-export class AngularJSComponent implements OnInit {
-  constructor(private lazyLoader: LazyLoaderService, private elRef: ElementRef) {}
+export class AngularJSComponent implements OnInit, OnDestroy {
+  constructor(
+    private lazyLoader: LazyLoaderService,
+    private elRef: ElementRef
+  ) {}
 
   ngOnInit() {
     this.lazyLoader.load(this.elRef.nativeElement);
   }
+
+
+  ngOnDestroy() {
+    this.lazyLoader.destroy();
+  }
 }

aio/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts

@@ -19,7 +19,6 @@ import { App404Component } from './app404/app404.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts

@@ -1,23 +1,25 @@
 import { Injectable } from '@angular/core';
+import * as angular from 'angular';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LazyLoaderService {
-  bootstrapped = false;
+  private app: angular.auto.IInjectorService;
 
   load(el: HTMLElement): void {
-    if (this.bootstrapped) {
-      return;
-    }
-
     import('./angularjs-app').then(app => {
       try {
-        app.bootstrap(el);
-        this.bootstrapped = true;
+        this.app = app.bootstrap(el);
       } catch (e) {
         console.error(e);
       }
     });
   }
+
+  destroy() {
+    if (this.app) {
+      this.app.get('$rootScope').$destroy();
+    }
+  }
 }

aio/content/guide/accessibility.md

@@ -0,0 +1,181 @@
+# Accessibility in Angular
+
+The web is used by a wide variety of people, including those who have visual or motor impairments.
+A variety of assistive technologies are available that make it much easier for these groups to
+interact with web-based software applications.
+In addition, designing an application to be more accessible generally improves the user experience for all users.
+
+For an in-depth introduction to issues and techniques for designing accessible applications, see the [Accessibility](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility) section of the Google's [Web Fundamentals](https://developers.google.com/web/fundamentals/).
+
+This page discusses best practices for designing Angular applications that
+work well for all users, including those who rely on assistive technologies.
+
+## Accessibility attributes
+
+Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
+to provide semantic meaning where it might otherwise be missing.
+Use [attribute binding](guide/template-syntax#attribute-binding) template syntax to control the values of accessibility-related attributes.
+
+When binding to ARIA attributes in Angular, you must use the `attr.` prefix, as the ARIA
+specification depends specifically on HTML attributes rather than properties on DOM elements.
+
+```html
+<!-- Use attr. when binding to an ARIA attribute -->
+<button [attr.aria-label]="myActionLabel">...</button>
+```
+
+Note that this syntax is only necessary for attribute _bindings_.
+Static ARIA attributes require no extra syntax.
+
+```html
+<!-- Static ARIA attributes require no extra syntax -->
+<button aria-label="Save document">...</button>
+```
+
+NOTE:
+
+<div class="alert is-helpful">
+
+   By convention, HTML attributes use lowercase names (`tabindex`), while properties use camelCase names (`tabIndex`).
+
+   See the [Template Syntax](https://angular.io/guide/template-syntax#html-attribute-vs-dom-property) guide for more background on the difference between attributes and properties.
+
+</div>
+
+
+## Angular UI components
+
+The [Angular Material](https://material.angular.io/) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
+The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
+For example:
+
+* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region. See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
+
+* The `cdkTrapFocus` directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
+
+For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
+
+
+### Augmenting native elements
+
+Native HTML elements capture a number of standard interaction patterns that are important to accessibility.
+When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
+
+For example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native `<button>` element.
+This most commonly applies to `<button>` and `<a>`, but can be used with many other types of element.
+
+You can see examples of this pattern in Angular Material: [`MatButton`](https://github.com/angular/components/blob/master/src/material/button/button.ts#L66-L68), [`MatTabNav`](https://github.com/angular/components/blob/master/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L67), [`MatTable`](https://github.com/angular/components/blob/master/src/material/table/table.ts#L17).
+
+### Using containers for native elements
+
+Sometimes using the appropriate native element requires a container element.
+For example, the native `<input>` element cannot have children, so any custom text entry components need
+to wrap an `<input>` with additional elements.
+While you might just include the `<input>` in your custom component's template,
+this makes it impossible for users of the component to set arbitrary properties and attributes to the input element.
+Instead, you can create a container component that uses content projection to include the native control in the
+component's API.
+
+You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
+
+## Case study: Building a custom progress bar
+
+The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes.
+
+* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
+
+   ```ts
+  import { Component, Input } from '@angular/core';
+   /**
+    * Example progressbar component.
+    */
+   @Component({
+     selector: 'example-progressbar',
+     template: `<div class="bar" [style.width.%]="value"></div>`,
+     styleUrls: ['./progress-bar.css'],
+     host: {
+       // Sets the role for this component to "progressbar"
+       role: 'progressbar',
+
+      // Sets the minimum and maximum values for the progressbar role.
+       'aria-valuemin': '0',
+       'aria-valuemax': '0',
+
+       // Binding that updates the current value of the progressbar.
+       '[attr.aria-valuenow]': 'value',
+     }
+   })
+   export class ExampleProgressbar  {
+     /** Current value of the progressbar. */
+     @Input() value: number = 0;
+   }
+   ```
+
+* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
+
+   ```html
+   <label>
+      Enter an example progress value
+      <input type="number" min="0" max="100"
+         [value]="progress" (input)="progress = $event.target.value">
+   </label>
+
+   <!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
+   <example-progressbar [value]="progress" aria-label="Example of a progress bar">
+   </example-progressbar>
+   ```
+
+[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html).
+
+## Routing and focus management
+
+Tracking and controlling [focus](https://developers.google.com/web/fundamentals/accessibility/focus/) in a UI is an important consideration in designing for accessibility.
+When using Angular routing, you should decide where page focus goes upon navigation.
+
+To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.
+Use the `NavigationEnd` event from the `Router` service to know when to update
+focus.
+
+The following example shows how to find and focus the main content header in the DOM after navigation.
+
+```ts
+
+router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
+  const mainHeader = document.querySelector('#main-content-header')
+  if (mainHeader) {
+    mainHeader.focus();
+  }
+});
+
+```
+In a real application, the element that receives focus will depend on your specific
+application structure and layout.
+The focused element should put users in a position to immediately move into the main content that has just been routed into view.
+You should avoid situations where focus returns to the `body` element after a route change.
+
+
+## Additional resources
+
+* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
+
+* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria/)
+
+* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
+
+* [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
+
+* [Inclusive Components](https://inclusive-components.design/)
+
+* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources/)
+
+* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web/)
+
+* [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
+
+* [Codelyzer](http://codelyzer.com/rules/) provides linting rules that can help you make sure your code meets accessibility standards.
+
+Books
+
+* "A Web for Everyone: Designing Accessible User Experiences", Sarah Horton and Whitney Quesenbery
+
+* "Inclusive Design Patterns", Heydon Pickering

aio/content/guide/app-shell.md

@@ -29,7 +29,7 @@ ng generate app-shell --client-project my-app --universal-project server-app
 
 After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
 
-<code-example format="." language="none" linenums="false">
+<code-example format="." language="json" linenums="false">
 "server": {
   "builder": "@angular-devkit/build-angular:server",
   "options": {

aio/content/guide/browser-support.md

@@ -53,7 +53,7 @@ Angular supports most recent browsers. This includes the following specific vers
       IE
     </td>
     <td>
-      11<br>10<br>9
+      11, 10, 9
     </td>
   </tr>
  <tr>
@@ -89,7 +89,7 @@ Angular supports most recent browsers. This includes the following specific vers
     </td>
 
     <td>
-      Nougat (7.0)<br>Marshmallow (6.0)<br>Lollipop (5.0, 5.1)<br>KitKat (4.4)
+      Nougat (7.0), Marshmallow (6.0), Lollipop (5.0, 5.1), KitKat (4.4)
     </td>
   </tr>
 
@@ -120,32 +120,34 @@ Note that polyfills cannot magically transform an old, slow browser into a moder
 
 In Angular CLI version 8 and higher, applications are built using *differential loading*, a strategy where the CLI builds two separate bundles as part of your deployed application.
 
-* The first bundle contains modern ES1015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
+* The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
 
 * The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.
 
 This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs.
 For more information about how this works, see [Differential Loading](guide/deployment#differential-loading) in the [Deployment guide](guide/deployment).
 
-## Enabling polyfills
+## Enabling polyfills with CLI projects
 
-[Angular CLI](cli) users enable polyfills through the `src/polyfills.ts` file that
-the CLI created with your project.
+The [Angular CLI](cli) provides support for polyfills.
+If you are not using the CLI to create your projects, see [Polyfill instructions for non-CLI users](#non-cli).
 
+When you create a project with the `ng new` command, a `src/polyfills.ts` configuration file is created as part of your project folder.
 This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements.
 
-The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these.
+* The npm packages for the [_mandatory_ polyfills](#polyfill-libs) (such as `zone.js`) are installed automatically for you when you create your project with `ng new`, and their corresponding `import` statements are already enabled in the `src/polyfills.ts` configuration file.
 
-But if you need an optional polyfill, you'll have to install its npm package.
-For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
+* If you need an _optional_ polyfill, you must install its npm package, then uncomment or create the corresponding import statement in the `src/polyfills.ts` configuration file.
+
+For example, if you need the optional [web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
 
 <code-example language="sh" class="code-shell">
-  # note that the web-animations-js polyfill is only here as an example
-  # it isn't a strict requirement of Angular anymore (more below)
+  # install the optional web animations polyfill
   npm install --save web-animations-js
 </code-example>
 
-Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
+You can then add the import statement in the `src/polyfills.ts` file.
+For many polyfills, you can simply un-comment the corresponding `import` statement in the file, as in the following example.
 
 <code-example header="src/polyfills.ts">
   /**
@@ -155,23 +157,14 @@ Then open the `polyfills.ts` file and un-comment the corresponding `import` stat
   import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 </code-example>
 
-If you can't find the polyfill you want in `polyfills.ts`,
-add it yourself, following the same pattern:
+If the polyfill you want is not already in `polyfills.ts` file, add the `import` statement by hand.
 
-1. install the npm package
-1. `import` the file in `polyfills.ts`
-
-<div class="alert is-helpful">
-
-Non-CLI users should follow the instructions [below](#non-cli).
-</div>
 
 {@a polyfill-libs}
 
 ### Mandatory polyfills
 These are the polyfills required to run an Angular application on each supported browser:
 
-
 <table>
 
   <tr style="vertical-align: top">
@@ -189,26 +182,13 @@ These are the polyfills required to run an Angular application on each supported
   <tr style="vertical-align: top">
 
     <td>
-      Chrome, Firefox, Edge, Safari 9+
+      Chrome, Firefox, Edge, <br>
+      Safari, Android, IE10+
     </td>
 
     <td>
 
-      [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
-
-    </td>
-
-  </tr>
-
-  <tr style="vertical-align: top">
-
-    <td>
-      Safari 7 & 8, IE10 & 11, Android 4.1+
-    </td>
-
-    <td>
-
-      [ES6](guide/browser-support#core-es6)
+      [ES2015](guide/browser-support#core-es6)
 
     </td>
 
@@ -222,7 +202,7 @@ These are the polyfills required to run an Angular application on each supported
 
     <td>
 
-      [ES6<br>classList](guide/browser-support#classlist)
+      ES2015<br>[classList](guide/browser-support#classlist)
 
     </td>
 
@@ -235,12 +215,6 @@ These are the polyfills required to run an Angular application on each supported
 
 Some features of Angular may require additional polyfills.
 
-For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
-(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
-
-Here are the features which may require additional polyfills:
-
-
 <table>
 
   <tr style="vertical-align: top">
@@ -263,31 +237,8 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-      [JIT compilation](guide/aot-compiler).
-
-      Required to reflect for metadata.
-    </td>
-
-    <td>
-
-      [ES7/reflect](guide/browser-support#core-es7-reflect)
-
-    </td>
-
-    <td>
-      All current browsers. Enabled by default.
-      Can remove if you always use AOT and only use Angular decorators.
-    </td>
-
-  </tr>
-
-  <tr style="vertical-align: top">
-
-    <td>
-
-      [Animations](guide/animations)
-      <br>Only if `Animation Builder` is used within the application--standard
-      animation support in Angular doesn't require any polyfills (as of NG6).
+      [AnimationBuilder](api/animations/AnimationBuilder).
+      (Standard animation support does not require polyfills.)
 
     </td>
 
@@ -298,8 +249,9 @@ Here are the features which may require additional polyfills:
     </td>
 
     <td>
-      <p>If AnimationBuilder is used then the polyfill will enable scrubbing
-      support for IE/Edge and Safari (Chrome and Firefox support this natively).</p>
+      <p>If AnimationBuilder is used, enables scrubbing
+      support for IE/Edge and Safari.
+      (Chrome and Firefox support this natively).</p>
     </td>
 
   </tr>
@@ -308,15 +260,10 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-    If you use the following deprecated i18n pipes:
-
-
+     If you use the following deprecated i18n pipes:
      [date](api/common/DeprecatedDatePipe),
-
      [currency](api/common/DeprecatedCurrencyPipe),
-
      [decimal](api/common/DeprecatedDecimalPipe),
-
      [percent](api/common/DeprecatedPercentPipe)
 
     </td>
@@ -337,9 +284,7 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-       [NgClass](api/common/NgClass)
-
-       on SVG elements
+       [NgClass](api/common/NgClass) on SVG elements
     </td>
 
     <td>
@@ -358,9 +303,7 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-      [Http](guide/http)
-
-      when sending and receiving binary data
+      [Http](guide/http) when sending and receiving binary data
     </td>
 
     <td>
@@ -383,9 +326,8 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-      [Router](guide/router)
-
-      when using [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
+      [Router](guide/router) when using
+      [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
     </td>
 
     <td>
@@ -404,8 +346,9 @@ Here are the features which may require additional polyfills:
 
 
 
-### Suggested polyfills ##
-Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
+### Suggested polyfills
+
+The following polyfills are used to test the framework itself. They are a good starting point for an application.
 
 
 <table>
@@ -426,24 +369,6 @@ Below are the polyfills which are used to test the framework itself. They are a
 
   </tr>
 
-  <tr>
-
-    <td>
-
-      <a id='core-es7-reflect' href="https://github.com/zloirock/core-js/tree/v2/fn/reflect">ES7/reflect</a>
-
-    </td>
-
-    <td>
-      MIT
-    </td>
-
-    <td>
-      0.5KB
-    </td>
-
-  </tr>
-
   <tr>
 
     <td>
@@ -466,7 +391,7 @@ Below are the polyfills which are used to test the framework itself. They are a
 
     <td>
 
-      <a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
+      <a id='core-es6' href="https://github.com/zloirock/core-js">ES2015</a>
 
     </td>
 
@@ -595,11 +520,14 @@ Below are the polyfills which are used to test the framework itself. They are a
 computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.
 
 {@a non-cli}
+
 ## Polyfills for non-CLI users
 
-If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
+If you are not using the CLI, add your polyfill scripts directly to the host web page (`index.html`).
 
-<code-example header="src/index.html">
+For example:
+
+<code-example header="src/index.html" language="html" linenums="false">
   &lt;!-- pre-zone polyfills -->
   &lt;script src="node_modules/core-js/client/shim.min.js">&lt;/script>
   &lt;script src="node_modules/web-animations-js/web-animations.min.js">&lt;/script>

aio/content/guide/cheatsheet.md

@@ -185,8 +185,7 @@ is available to <code>declarations</code> of this module.</p>
 </td>
 </tr><tr>
 <td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
-<td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
-</p>
+<td><p>Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.</p>
 </td>
 </tr>
 </tbody></table>

aio/content/guide/deployment.md

@@ -83,11 +83,12 @@ Another simple way to deploy your Angular app is to use [GitHub Pages](https://h
 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 /&lt;project_name&gt;/
+  <code-example language="none" class="code-shell">
 
-   </code-example>
+    ng build --prod --output-path docs --base-href /&lt;project_name&gt;/
+
+  </code-example>
 
 1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
 
@@ -152,16 +153,13 @@ The list is by no means exhaustive, but should provide you with a good starting
   (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
 
   <code-example format=".">
-
     RewriteEngine On
     &#35 If an existing asset or directory is requested go to it as it is
     RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
     RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
-    RewriteRule ^ - [L]
-
+    RewriteRule ^ - [L]<br>
     &#35 If the requested resource doesn't exist, use index.html
     RewriteRule ^ /index.html
-
   </code-example>
 
 
@@ -169,18 +167,15 @@ The list is by no means exhaustive, but should provide you with a good starting
 [Front Controller Pattern Web Apps](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps),
 modified to serve `index.html`:
 
-  <code-example format=".">
-
-    try_files $uri $uri/ /index.html;
-
-  </code-example>
+  ```
+  try_files $uri $uri/ /index.html;
+  ```
 
 
 * [IIS](https://www.iis.net/): add a rewrite rule to `web.config`, similar to the one shown
 [here](http://stackoverflow.com/a/26152011/2116927):
 
-  <code-example format='.' linenums="false">
-
+  <code-example format='.' language="xml" linenums="false">
     &lt;system.webServer&gt;
       &lt;rewrite&gt;
         &lt;rules&gt;
@@ -195,7 +190,6 @@ modified to serve `index.html`:
         &lt;/rules&gt;
       &lt;/rewrite&gt;
     &lt;/system.webServer&gt;
-
   </code-example>
 
 
@@ -213,13 +207,11 @@ and to
 * [Firebase hosting](https://firebase.google.com/docs/hosting/): add a
 [rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites).
 
-  <code-example format=".">
-
+  <code-example format="." language="json">
     "rewrites": [ {
       "source": "**",
       "destination": "/index.html"
     } ]
-
   </code-example>
 
 {@a cors}
@@ -411,7 +403,7 @@ Differential loading, which is supported by default in Angular CLI version 8 and
 
 Differential loading is a strategy where the CLI builds two separate bundles as part of your deployed application.
 
-* The first bundle contains modern ES1015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
+* The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
 
 * The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.
 
@@ -445,23 +437,19 @@ When you create a production build using [`ng build --prod`](cli/build), the CLI
 The `index.html` file is also modified during the build process to include script tags that enable differential loading. See the sample output below from the `index.html` file produced during a build using `ng build`.
 
 <code-example language="html" format="." linenums="false">
-
-<!-- ... -->
-<body>
-  <app-root></app-root>
-  <script src="runtime-es2015.js" type="module"></script>
-  <script src="runtime-es5.js" nomodule></script>
-  <script src="polyfills-es2015.js" type="module"></script>
-  <script src="polyfills-es5.js" nomodule></script>
-  <script src="styles-es2015.js" type="module"></script>
-  <script src="styles-es5.js" nomodule></script>
-  <script src="vendor-es2015.js" type="module"></script>
-  <script src="vendor-es5.js" nomodule></script>
-  <script src="main-es2015.js" type="module"></script>
-  <script src="main-es5.js" nomodule></script>
-</body>
-<!-- ... -->
-
+&lt;body>
+  &lt;app-root>&lt;/app-root>
+  &lt;script src="runtime-es2015.js" type="module">&lt;/script>
+  &lt;script src="runtime-es5.js" nomodule>&lt;/script>
+  &lt;script src="polyfills-es2015.js" type="module">&lt;/script>
+  &lt;script src="polyfills-es5.js" nomodule>&lt;/script>
+  &lt;script src="styles-es2015.js" type="module">&lt;/script>
+  &lt;script src="styles-es5.js" nomodule>&lt;/script>
+  &lt;script src="vendor-es2015.js" type="module">&lt;/script>
+  &lt;script src="vendor-es5.js" nomodule>&lt;/script>
+  &lt;script src="main-es2015.js" type="module">&lt;/script>
+  &lt;script src="main-es5.js" nomodule>&lt;/script>
+&lt;/body>
 </code-example>
 
 Each script tag has a `type="module"` or `nomodule` attribute. Browsers with native support for ES modules only load the scripts with the `module` type attribute and ignore scripts with the `nomodule` attribute. Legacy browsers only load the scripts with the `nomodule` attribute, and ignore the script tags with the `module` type that load ES modules.
@@ -522,7 +510,7 @@ By default, legacy browsers such as IE 9-11 are ignored, and the compilation tar
 
 <div class="alert is-important">
 
-   To see which browsers are supported with the above configuration, see which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+Chrome+41%2C+not+dead%2C+not+IE+9-11).
+   To see which browsers are supported with the above configuration, see which settings meet to your browser support requirements, see the [Browserslist compatibility page](https://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead%2C+not+IE+9-11).
 
 </div>
 
@@ -659,7 +647,7 @@ ng test --configuration es5
 
 ### Configuring the e2e command
 
-Create an ES5 serve configuration as explained above (link to the above serve section), and configuration an ES5 configuration for the E2E target.
+Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5) as explained above, and configuration an ES5 configuration for the E2E target.
 
 <code-example language="json" format="." linenums="false">
 

aio/content/guide/deprecations.md

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

aio/content/guide/entry-components.md

@@ -1,12 +1,5 @@
 # Entry Components
 
-#### Prerequisites:
-
-A basic understanding of the following concepts:
-* [Bootstrapping](guide/bootstrapping).
-
-<hr />
-
 An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.
 
 <div class="alert is-helpful">

aio/content/guide/feature-modules.md

@@ -1,12 +1,6 @@
 # Feature Modules
 
-Feature modules are NgModules for the purpose of  organizing code.
-
-#### Prerequisites
-A basic understanding of the following:
-* [Bootstrapping](guide/bootstrapping).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-* [Frequently Used Modules](guide/frequent-ngmodules).
+Feature modules are NgModules for the purpose of organizing code.
 
 For the final sample app with a feature module that this page describes,
 see the <live-example></live-example>.

aio/content/guide/frequent-ngmodules.md

@@ -1,12 +1,5 @@
 # Frequently Used Modules
 
-#### Prerequisites
-
-A basic understanding of [Bootstrapping](guide/bootstrapping).
-
-
-<hr>
-
 An Angular app needs at least one module that serves as the root module.
 As you add features to your app, you can add them in modules.
 The following are frequently used Angular modules with examples

aio/content/guide/glossary.md

@@ -362,7 +362,7 @@ Compare to [custom element](#custom-element).
 
 ## entry point
 
-A JavaScript module(#module) that is intended to be imported by a user of [an
+A [JavaScript module](#module) that is intended to be imported by a user of [an
 npm package](guide/npm-packages). An entry-point module typically re-exports
 symbols from other internal modules. A package can contain multiple
 entry points. For example, the `@angular/core` package has two entry-point
@@ -454,10 +454,9 @@ A form of property [data binding](#data-binding) in which a [template expression
 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.
 
-<code-example language="html" escape="html">
-  <label>My current hero is {{hero.name}}</label>
-
-</code-example>
+```html
+<label>My current hero is {{hero.name}}</label>
+```
 
 
 Read more about [interpolation](guide/template-syntax#interpolation) in [Template Syntax](guide/template-syntax).

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

@@ -1,23 +1,13 @@
 # Lazy Loading Feature Modules
 
-#### Prerequisites
-A basic understanding of the following:
-* [Feature Modules](guide/feature-modules).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-* [Frequently Used Modules](guide/frequent-ngmodules).
-* [Types of Feature Modules](guide/module-types).
-* [Routing and Navigation](guide/router).
-
-For the final sample app with two lazy loaded modules that this page describes, see the
-<live-example></live-example>.
-
-<hr>
-
 ## High level view
 
 By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading&mdash;a design pattern that loads NgModules as needed. Lazy loading helps keep initial
 bundle sizes smaller, which in turn helps decrease load times.
 
+For the final sample app with two lazy loaded modules that this page describes, see the
+<live-example></live-example>.
+
 There are three main steps to setting up a lazy loaded feature module:
 
 1. Create the feature module.

aio/content/guide/module-types.md

@@ -1,16 +1,5 @@
-
-
 # Types of Feature Modules
 
-#### Prerequisites
-
-A basic understanding of the following concepts:
-* [Feature Modules](guide/feature-modules).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-* [Frequently Used Modules](guide/frequent-ngmodules).
-
-<hr>
-
 There are five general categories of feature modules which
 tend to fall into the following groups:
 

aio/content/guide/ngmodule-api.md

@@ -1,15 +1,5 @@
 # NgModule API
 
-#### Prerequisites
-
-A basic understanding of the following concepts:
-* [Bootstrapping](guide/bootstrapping).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-
-<hr />
-
-## Purpose of `@NgModule`
-
 At a high level, NgModules are a way to organize Angular apps
 and they accomplish this through the metadata in the `@NgModule`
 decorator.

aio/content/guide/ngmodule-faq.md

@@ -1,13 +1,5 @@
 # NgModule FAQs
 
-
-#### Prerequisites:
-
-A basic understanding of the following concepts:
-* [NgModules](guide/ngmodules).
-
-<hr />
-
 NgModules help organize an application into cohesive blocks of functionality.
 
 This page answers the questions many developers ask about NgModule design and implementation.

aio/content/guide/ngmodule-vs-jsmodule.md

@@ -1,13 +1,9 @@
 # JavaScript Modules vs. NgModules
 
-#### Prerequisites
-A basic understanding of [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
-
-<hr>
-
 JavaScript and Angular use modules to organize code, and
 though they organize it differently, Angular apps rely on both.
 
+
 ## JavaScript modules
 
 In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this:
@@ -24,6 +20,8 @@ import { AppComponent } from './app.component';
 
 JavaScript modules help you namespace, preventing accidental global variables.
 
+For more information on JavaScript modules, see [JavaScript/ECMAScript modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/).
+
 ## NgModules
 
 <!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->

aio/content/guide/ngmodules.md

@@ -1,13 +1,5 @@
 # NgModules
 
-#### Prerequisites
-
-A basic understanding of the following concepts:
-* [Bootstrapping](guide/bootstrapping).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-
-<hr>
-
 **NgModules** configure the injector and the compiler and help organize related things together.
 
 An NgModule is a class marked by the `@NgModule` decorator.
@@ -20,7 +12,6 @@ For an example app showcasing all the techniques that NgModules related pages
 cover, see the <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules
 section.
 
-
 ## Angular modularity
 
 Modules are a great way to organize an application and extend it with capabilities from external libraries.
@@ -57,12 +48,13 @@ You then import these modules into the root module.
 
 ## The basic NgModule
 
-The [Angular CLI](cli) generates the following basic app module when creating a new app.
+The [Angular CLI](cli) generates the following basic `AppModule` when creating a new app.
 
-<code-example path="bootstrapping/src/app/app.module.ts" region="whole-ngmodule" header="src/app/app.module.ts" linenums="false">
+
+<code-example path="ngmodules/src/app/app.module.1.ts" header="src/app/app.module.ts (default AppModule)" linenums="false">	// @NgModule decorator with its metadata
 </code-example>
 
-At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). This page builds on [Bootstrapping](guide/bootstrapping), which covers the structure of an NgModule in detail. If you need more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
+At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
 
 <hr />
 

aio/content/guide/providers.md

@@ -1,16 +1,10 @@
 # Providers
 
-#### Prerequisites:
-* A basic understanding of [Bootstrapping](guide/bootstrapping).
-* Familiarity with [Frequently Used Modules](guide/frequent-ngmodules).
+A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
 
 For the final sample app using the provider that this page describes,
 see the <live-example></live-example>.
 
-<hr>
-
-A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
-
 ## Providing a service
 
 If you already have an app that was created with the [Angular CLI](cli), you can create a service using the [`ng generate`](cli/generate) CLI command in the root project directory. Replace _User_ with the name of your service.

aio/content/guide/sharing-ngmodules.md

@@ -1,18 +1,5 @@
 # Sharing Modules
 
-#### Prerequisites
-A basic understanding of the following:
-* [Feature Modules](guide/feature-modules).
-* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
-* [Frequently Used Modules](guide/frequent-ngmodules).
-* [Routing and Navigation](guide/router).
-* [Lazy loading modules](guide/lazy-loading-ngmodules).
-
-
-<!--* Components (#TBD) We don’t have a page just on the concept of components, but I think one would be helpful for beginners.-->
-
-<hr>
-
 Creating shared modules allows you to organize and streamline your code. You can put commonly
 used directives, pipes, and components into one module and then import just that module wherever
 you need it in other parts of your app.
@@ -54,7 +41,7 @@ to import `FormsModule`, `SharedModule` can still export
 way, you can give other modules access to `FormsModule` without
 having to import it directly into the `@NgModule` decorator.
 
-### Using components vs services from other modules.
+### Using components vs services from other modules
 
 There is an important distinction between using another module's component and
 using a service from another module. Import modules when you want to use

aio/content/guide/singleton-services.md

@@ -1,15 +1,10 @@
 # Singleton services
 
-#### Prerequisites:
-
-* A basic understanding of [Bootstrapping](guide/bootstrapping).
-* Familiarity with [Providers](guide/providers).
+A singleton service is a service for which only once instance exists in an app.
 
 For a sample app using the app-wide singleton service that this page describes, see the
 <live-example name="ngmodules"></live-example> showcasing all the documented features of NgModules.
 
-<hr />
-
 ## Providing a singleton service
 
 There are two ways to make a service a singleton in Angular:

aio/content/guide/static-query-migration.md

@@ -6,21 +6,21 @@ In version 9, the default setting for `@ViewChild` and `@ContentChild` queries i
 
 In preparation for this change, in version 8, we are migrating all applications and libraries to explicitly specify the resolution strategy for `@ViewChild` and `@ContentChild` queries.
 
-Specifically, this migration adds an explicit "static" flag that dictates when that query's results should be assigned. 
-Adding this flag will ensure your code works the same way when upgrading to version 9.   
+Specifically, this migration adds an explicit "static" flag that dictates when that query's results should be assigned.
+Adding this flag will ensure your code works the same way when upgrading to version 9.
 
 Before:
 
 ```
 // query results sometimes available in `ngOnInit`, sometimes in `ngAfterViewInit` (based on template)
-@ViewChild('foo') foo: ElementRef; 
+@ViewChild('foo') foo: ElementRef;
 ```
 
 After:
 
 ```
 // query results available in ngOnInit
-@ViewChild('foo', {static: true}) foo: ElementRef; 
+@ViewChild('foo', {static: true}) foo: ElementRef;
 
 OR
 
@@ -28,7 +28,7 @@ OR
 @ViewChild('foo', {static: false}) foo: ElementRef;
 ```
 
-Starting with version 9, the `static` flag will default to false. 
+Starting with version 9, the `static` flag will default to false.
 At that time, any `{static: false}` flags can be safely removed, and we will have a schematic that will update your code for you.
 
 Note: this flag only applies to `@ViewChild` and `@ContentChild` queries specifically, as `@ViewChildren` and `@ContentChildren` queries do not have a concept of static and dynamic (they are always resolved as if they are "dynamic").
@@ -38,50 +38,50 @@ Note: this flag only applies to `@ViewChild` and `@ContentChild` queries specifi
 {@a what-to-do-with-todo}
 ### What should I do if I see a `/* TODO: add static flag */` comment printed by the schematic?
 
-If you see this comment, it means that the schematic couldn't statically figure out the correct flag. In this case, you'll have to add the correct flag based on your application's behavior. 
+If you see this comment, it means that the schematic couldn't statically figure out the correct flag. In this case, you'll have to add the correct flag based on your application's behavior.
 For more information on how to choose, see the [next question](#how-do-i-choose).
 
 {@a how-do-i-choose}
 ### How do I choose which `static` flag value to use: `true` or `false`?
 
-In the official API docs, we have always recommended retrieving query results in [`ngAfterViewInit` for view queries](https://angular.io/api/core/ViewChild#description) and [`ngAfterContentInit` for content queries](https://angular.io/api/core/ContentChild#description). 
-This is because by the time those lifecycle hooks run, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results. 
+In the official API docs, we have always recommended retrieving query results in [`ngAfterViewInit` for view queries](https://angular.io/api/core/ViewChild#description) and [`ngAfterContentInit` for content queries](https://angular.io/api/core/ContentChild#description).
+This is because by the time those lifecycle hooks run, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results.
 
-Most applications will want to use `{static: false}` for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside `*ngIf`s or `*ngFor`s) will be found by the query. 
+Most applications will want to use `{static: false}` for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside `*ngIf`s or `*ngFor`s) will be found by the query.
 
 There are rarer cases where `{static: true}` flag might be necessary (see [answer here](#should-i-use-static-true)).
 
 {@a should-i-use-static-true}
 ### Is there a case where I should use `{static: true}`?
 
-This option was introduced to support creating embedded views on the fly. 
-If you need access to a `TemplateRef` in a query to create a view dynamically, you won't be able to do so in `ngAfterViewInit`. 
-Change detection has already run on that view, so creating a new view with the template will cause an `ExpressionHasChangedAfterChecked` error to be thrown. 
-In this case, you will want to set the `static` flag to `true` and create your view in `ngOnInit`. 
+This option was introduced to support creating embedded views on the fly.
+If you need access to a `TemplateRef` in a query to create a view dynamically, you won't be able to do so in `ngAfterViewInit`.
+Change detection has already run on that view, so creating a new view with the template will cause an `ExpressionHasChangedAfterChecked` error to be thrown.
+In this case, you will want to set the `static` flag to `true` and create your view in `ngOnInit`.
 In most other cases, the best practice is to use `{static: false}`.
 
 However, to facilitate the migration to version 8, you may also want to set the `static` flag to `true` if your component code already depends on the query results being available some time **before** `ngAfterViewInit` (for view queries) or `ngAfterContentInit` (for content queries).
-For example, if your component relies on the query results being populated in the `ngOnInit` hook or in `@Input` setters, you will need to either set the flag to `true` or re-work your component to adjust to later timing. 
+For example, if your component relies on the query results being populated in the `ngOnInit` hook or in `@Input` setters, you will need to either set the flag to `true` or re-work your component to adjust to later timing.
 
-Note: Selecting the static option means that query results nested in `*ngIf` or `*ngFor` will not be found by the query. 
-These results are only retrievable after change detection runs. 
+Note: Selecting the static option means that query results nested in `*ngIf` or `*ngFor` will not be found by the query.
+These results are only retrievable after change detection runs.
 
 {@a what-does-this-flag-mean}
 ### What does this flag mean and why is it necessary?
 
-The default behavior for queries has historically been undocumented and confusing, and has also commonly led to issues that are difficult to debug. 
-In version 9, we would like to make query behavior more consistent and simple to understand. 
+The default behavior for queries has historically been undocumented and confusing, and has also commonly led to issues that are difficult to debug.
+In version 9, we would like to make query behavior more consistent and simple to understand.
 
 To explain why, first it's important to understand how queries have worked up until now.
 
-Without the `static` flag, the compiler decided when each query would be resolved on a case-by-case basis. 
-All `@ViewChild`/`@ContentChild` queries were categorized into one of two buckets at compile time: "static" or "dynamic". 
+Without the `static` flag, the compiler decided when each query would be resolved on a case-by-case basis.
+All `@ViewChild`/`@ContentChild` queries were categorized into one of two buckets at compile time: "static" or "dynamic".
 This classification determined when query results would become available to users.
 
-- **Static queries** were queries where the result could be determined statically because the result didn't depend on runtime values like bindings. 
+- **Static queries** were queries where the result could be determined statically because the result didn't depend on runtime values like bindings.
 Results from queries classified as static were available before change detection ran for that view (accessible in `ngOnInit`).
 
-- **Dynamic queries** were queries where the result could NOT be determined statically because the result depended on runtime values (aka bindings). 
+- **Dynamic queries** were queries where the result could NOT be determined statically because the result depended on runtime values (aka bindings).
 Results from queries classified as dynamic were not available until after change detection ran for that view (accessible in `ngAfterContentInit` for content queries or `ngAfterViewInit` for view queries).
 
 For example, let's say we have a component, `Comp`. Inside it, we have this query:
@@ -96,8 +96,8 @@ and this template:
 <div foo></div>
 ```
 
-This `Foo` query would be categorized as static because at compile-time it's known that the `Foo` instance on the `<div>` is the correct result for the query. 
-Because the query result is not dependent on runtime values, we don't have to wait for change detection to run on the template before resolving the query. 
+This `Foo` query would be categorized as static because at compile-time it's known that the `Foo` instance on the `<div>` is the correct result for the query.
+Because the query result is not dependent on runtime values, we don't have to wait for change detection to run on the template before resolving the query.
 Consequently, results can be made available in `ngOnInit`.
 
 Let's say the query is the same, but the component template looks like this:
@@ -106,53 +106,62 @@ Let's say the query is the same, but the component template looks like this:
 <div foo *ngIf="showing"></div>
 ```
 
-With that template, the query would be categorized as a dynamic query. 
-We would need to know the runtime value of `showing` before determining what the correct results are for the query. 
+With that template, the query would be categorized as a dynamic query.
+We would need to know the runtime value of `showing` before determining what the correct results are for the query.
 As a result, change detection must run first, and results can only be made available in `ngAfterViewInit` or a setter for the query property.
 
-The effect of this implementation is that adding an `*ngIf` or `*ngFor` anywhere above a query match can change when that query's results become available. 
+The effect of this implementation is that adding an `*ngIf` or `*ngFor` anywhere above a query match can change when that query's results become available.
 
-Keep in mind that these categories only applied to `@ViewChild` and `@ContentChild` queries specifically. 
+Keep in mind that these categories only applied to `@ViewChild` and `@ContentChild` queries specifically.
 `@ViewChildren` and `@ContentChildren` queries did not have a concept of static and dynamic, so they were always resolved as if they were "dynamic".
 
-This strategy of resolving queries at different times based on the location of potential query matches has caused a lot of confusion. Namely: 
+This strategy of resolving queries at different times based on the location of potential query matches has caused a lot of confusion. Namely:
 
 * Sometimes query results are available in `ngOnInit`, but sometimes they aren't and it's not clear why (see [21800](https://github.com/angular/angular/issues/21800) or [19872](https://github.com/angular/angular/issues/19872)).
 
-* `@ViewChild` queries are resolved at a different time from `@ViewChildren` queries, and `@ContentChild` queries are resolved at a different time from `@ContentChildren` queries. 
+* `@ViewChild` queries are resolved at a different time from `@ViewChildren` queries, and `@ContentChild` queries are resolved at a different time from `@ContentChildren` queries.
 If a user turns a `@ViewChild` query into a `@ViewChildren` query, their code can break suddenly because the timing has shifted.
- 
+
 * Code depending on a query result can suddenly stop working as soon as an `*ngIf` or an `*ngFor` is added to a template.
 
-* A `@ContentChild` query for the same component will resolve at different times in the lifecycle for each usage of the component. 
+* A `@ContentChild` query for the same component will resolve at different times in the lifecycle for each usage of the component.
 This leads to buggy behavior where using a component with `*ngIf` is broken in subtle ways that aren't obvious to the component author.
 
-In version 9, we plan to simplify the behavior so all queries resolve after change detection runs by default. 
-The location of query matches in the template cannot affect when the query result will become available and suddenly break your code, and the default behavior is always the same. 
-This makes the logic more consistent and predictable for users. 
+In version 9, we plan to simplify the behavior so all queries resolve after change detection runs by default.
+The location of query matches in the template cannot affect when the query result will become available and suddenly break your code, and the default behavior is always the same.
+This makes the logic more consistent and predictable for users.
 
-That said, if an application does need query results earlier (for example, the query result is needed to create an embedded view), it's possible to add the `{static: true}` flag to explicitly ask for static resolution. 
+That said, if an application does need query results earlier (for example, the query result is needed to create an embedded view), it's possible to add the `{static: true}` flag to explicitly ask for static resolution.
 With this flag, users can indicate that they only care about results that are statically available and the query results will be populated before `ngOnInit`.
 
 {@a view-children-and-content-children}
 ### Does this change affect `@ViewChildren` or `@ContentChildren` queries?
 
-No, this change only affects `@ViewChild` and `@ContentChild` queries specifically. 
+No, this change only affects `@ViewChild` and `@ContentChild` queries specifically.
 `@ViewChildren` and `@ContentChildren` queries are already "dynamic" by default and don't support static resolution.
 
 {@a why-specify-static-false}
 ### ​Why do I have to specify `{static: false}`? Isn't that the default?
 
-The goal of this migration is to transition apps that aren't yet on version 9 to a query pattern that is compatible with version 9. 
-However, most applications use libraries, and it's likely that some of these libraries may not be upgraded to version 8 yet (and thus might not have the proper flags). 
-Since the application's version of Angular will be used for compilation, if we change the default, the behavior of queries in the library's components will change to the version 8 default and possibly break. 
-This way, an application's dependencies will behave the same way during the transition as they did in the previous version. 
+The goal of this migration is to transition apps that aren't yet on version 9 to a query pattern that is compatible with version 9.
+However, most applications use libraries, and it's likely that some of these libraries may not be upgraded to version 8 yet (and thus might not have the proper flags).
+Since the application's version of Angular will be used for compilation, if we change the default, the behavior of queries in the library's components will change to the version 8 default and possibly break.
+This way, an application's dependencies will behave the same way during the transition as they did in the previous version.
 
 In Angular version 9 and later, it will be safe to remove any `{static: false}` flags and we will do this cleanup for you in a schematic.
 
 {@a libraries}
 ###  Can I keep on using Angular libraries that haven’t yet updated to version 8 yet?
 
-Yes, absolutely! 
+Yes, absolutely!
 Because we have not changed the default query behavior in version 8 (i.e. the compiler still chooses a timing if no flag is set), when your application runs with a library that has not updated to version 8, the library will run the same way it did in version 7.
-This guarantees your app will work in version 8 even if libraries take longer to update their code.  
+This guarantees your app will work in version 8 even if libraries take longer to update their code.
+
+{@a update-library-to-use-static-flag}
+###  Can I update my library to version 8 by adding the `static` flag to view queries, while still being compatible with Angular version 7 apps?
+
+Yes, the Angular team's recommendation for libraries is to update to version 8 and add the `static` flag. Angular version 7 apps will continue to work with libraries that have this flag.
+
+However, if you update your library to Angular version 8 and want to take advantage of the new version 8 APIs, or you want more recent dependencies (such as Typescript or RxJS) your library will become incompatible with Angular version 7 apps. If your goal is to make your library compatible with Angular versions 7 and 8, you should not update your lib at all—except for `peerDependencies` in `package.json`.
+
+In general, the most efficient plan is for libraries to adopt a 6 month major version schedule and bump the major version after each Angular update. That way, libraries stay in the same release cadence as Angular.

aio/content/guide/structural-directives.md

@@ -275,53 +275,179 @@ In this example, the `[ngClass]="odd"` stays on the `<div>`.
 {@a microsyntax}
 
 
-### Microsyntax
+## Microsyntax
 
 The Angular microsyntax lets you configure a directive in a compact, friendly string.
 The microsyntax parser translates that string into attributes on the `<ng-template>`:
 
 * The `let` keyword declares a [_template input variable_](guide/structural-directives#template-input-variable)
 that you reference within the template. The input variables in this example are `hero`, `i`, and `odd`.
-The parser translates `let hero`, `let i`, and `let odd` into variables named,
+The parser translates `let hero`, `let i`, and `let odd` into variables named
 `let-hero`, `let-i`, and `let-odd`.
 
-* The microsyntax parser takes `of` and `trackBy`, title-cases them (`of` -> `Of`, `trackBy` -> `TrackBy`),
-and prefixes them with the directive's attribute name (`ngFor`), yielding the names `ngForOf` and `ngForTrackBy`.
-Those are the names of two `NgFor` _input properties_ .
+* The microsyntax parser title-cases all directives and prefixes them with the directive's
+attribute name, such as `ngFor`. For example, the `ngFor` input properties,
+`of` and `trackBy`, become `ngForOf` and `ngForTrackBy`, respectively.
 That's how the directive learns that the list is `heroes` and the track-by function is `trackById`.
 
 * As the `NgFor` directive loops through the list, it sets and resets properties of its own _context_ object.
-These properties include `index` and `odd` and a special property named `$implicit`.
+These properties can include, but aren't limited to, `index`, `odd`, and a special property
+named `$implicit`.
 
 * The `let-i` and `let-odd` variables were defined as `let i=index` and `let odd=odd`.
 Angular sets them to the current value of the context's `index` and `odd` properties.
 
 * The context property for `let-hero` wasn't specified.
 Its intended source is implicit.
-Angular sets `let-hero` to the value of the context's `$implicit` property
+Angular sets `let-hero` to the value of the context's `$implicit` property,
 which `NgFor` has initialized with the hero for the current iteration.
 
-* The [API guide](api/common/NgForOf "API: NgFor")
+* The [`NgFor` API guide](api/common/NgForOf "API: NgFor")
 describes additional `NgFor` directive properties and context properties.
 
-* `NgFor` is implemented by the `NgForOf` directive. Read more about additional `NgForOf` directive properties and context properties [NgForOf API reference](api/common/NgForOf).
+* The `NgForOf` directive implements `NgFor`. Read more about additional `NgForOf` directive properties and context properties in the [NgForOf API reference](api/common/NgForOf).
+
+### Writing your own structural directives
+
+These microsyntax mechanisms are also available to you when you write your own structural directives.
+For example, microsyntax in Angular allows you to write `<div *ngFor="let item of items">{{item}}</div>`
+instead of `<ng-template ngFor [ngForOf]="items"><div>{{item}}</div></ng-template`.
+The following sections provide detailed information on constraints, grammar,
+and translation of microsyntax.
+
+### Constraints
+
+Microsyntax must meet the following requirements:
+
+- It must be known ahead of time so that IDEs can parse it without knowing the underlying semantics of the directive or what directives are present.
+- It must translate to key-value attributes in the DOM.
+
+### Grammar
+
+When you write your own structural directives, use the following grammar:
+
+```
+*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
+```
+
+The following tables describe each portion of the microsyntax grammar.
+
+<!-- What should I put in the table headers? -->
+
+<table>
+  <tr>
+    <th></th>
+    <th></th>
+  </tr>
+  <tr>
+    <td><code>prefix</code></td>
+    <td>HTML attribute key</td>
+  </tr>
+  <tr>
+    <td><code>key</code></td>
+    <td>HTML attribute key</td>
+  </tr>
+  <tr>
+    <td><code>local</code></td>
+    <td>local variable name used in the template</td>
+  </tr>
+  <tr>
+    <td><code>export</code></td>
+    <td>value exported by the directive under a given name</td>
+  </tr>
+  <tr>
+    <td><code>expression</code></td>
+    <td>standard Angular expression</td>
+  </tr>
+</table>
+
+<!-- The items in this table seem different. Is there another name for how we should describe them? -->
+<table>
+  <tr>
+    <th></th>
+  </tr>
+  <tr>
+    <td colspan="3"><code>keyExp = :key ":"? :expression ("as" :local)? ";"? </code></td>
+  </tr>
+  <tr>
+    <td colspan="3"><code>let = "let" :local "=" :export ";"?</code></td>
+  </tr>
+  <tr>
+    <td colspan="3"><code>as = :export "as" :local ";"?</code></td>
+  </tr>
+</table>
 
 
-These microsyntax mechanisms are available to you when you write your own structural directives.
+### Translation
+
+A microsyntax is translated to the normal binding syntax as follows:
+
+<!-- What to put in the table headers below? Are these correct?-->
+<table>
+  <tr>
+    <th>Microsyntax</th>
+    <th>Translation</th>
+  </tr>
+  <tr>
+    <td><code>prefix</code> and naked <code>expression</code></td>
+    <td><code>[prefix]="expression"</code></td>
+  </tr>
+  <tr>
+    <td><code>keyExp</code></td>
+    <td><code>[prefixKey] "expression"
+    (let-prefixKey="export")</code>
+    <br />
+    Notice that the <code>prefix</code>
+    is added to the <code>key</code>
+    </td>
+  </tr>
+  <tr>
+    <td><code>let</code></td>
+    <td><code>let-local="export"</code></td>
+  </tr>
+</table>
+
+### Microsyntax examples
+
+The following table demonstrates how Angular desugars microsyntax.
+
+<table>
+  <tr>
+    <th>Microsyntax</th>
+    <th>Desugared</th>
+  </tr>
+  <tr>
+    <td><code>*ngFor="let item of [1,2,3]"</code></td>
+    <td><code>&lt;ng-template ngFor let-item [ngForOf]="[1,2,3]"&gt;</code></td>
+  </tr>
+  <tr>
+    <td><code>*ngFor="let item of [1,2,3] as items; trackBy: myTrack; index as i"</code></td>
+    <td><code>&lt;ng-template ngFor let-item [ngForOf]="[1,2,3]" let-items="ngForOf" [ngForTrackBy]="myTrack" let-i="index"&gt;</code>
+    </td>
+  </tr>
+  <tr>
+    <td><code>*ngIf="exp"</code></td>
+    <td><code>&lt;ng-template [ngIf]="exp"&gt;</code></td>
+  </tr>
+  <tr>
+    <td><code>*ngIf="exp as value"</code></td>
+    <td><code>&lt;ng-template [ngIf]="exp" let-value="ngIf"&gt;</code></td>
+  </tr>
+</table>
+
 Studying the
 [source code for `NgIf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts "Source: NgIf")
 and [`NgForOf`](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts "Source: NgForOf")
 is a great way to learn more.
 
 
-
 {@a template-input-variable}
 
 
 {@a template-input-variables}
 
 
-### Template input variable
+## Template input variable
 
 A _template input variable_ is a variable whose value you can reference _within_ a single instance of the template.
 There are several such variables in this example: `hero`, `i`, and `odd`.
@@ -346,7 +472,7 @@ variable as the `hero` declared as `#hero`.
 {@a one-per-element}
 
 
-### One structural directive per host element
+## One structural directive per host element
 
 Someday you'll want to repeat a block of HTML but only when a particular condition is true.
 You'll _try_ to put both an `*ngFor` and an `*ngIf` on the same host element.

aio/content/guide/template-syntax.md

@@ -1626,6 +1626,14 @@ Here is an illustration of the `trackBy` effect.
   <img src="generated/images/guide/built-in-directives/ngfor-trackby.gif" alt="Animation of trackBy">
 </figure>
 
+
+<div class="alert is-helpful">
+
+Built-in directives use only public APIs; that is,
+they do not have special access to any private APIs that other directives can't access.
+
+</div>
+
 <hr/>
 
 {@a ngSwitch}
@@ -1753,7 +1761,9 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
 
 ## `@Input()` and `@Output()` properties
 
-`@Input()` and `@Output()` allow Angular to share data between the parent context and child directives. An `@Input()` property is writable while an `@Output()` property is observable.
+`@Input()` and `@Output()` allow Angular to share data between the parent context
+and child directives or components. An `@Input()` property is writable
+while an `@Output()` property is observable.
 
 Consider this example of a child/parent relationship:
 
@@ -1786,7 +1796,7 @@ Though `@Input()` and `@Output()` often appear together in apps, you can use
 them separately. If the nested
 component is such that it only needs to send data to its parent, you wouldn't
 need an `@Input()`, only an `@Output()`. The reverse is also true in that if the
-child only needs to receive data from the parent, you'd only neeed `@Input()`.
+child only needs to receive data from the parent, you'd only need `@Input()`.
 
 </div>
 
@@ -2053,14 +2063,14 @@ to declare inputs and outputs, you can identify
 members in the `inputs` and `outputs` arrays
 of the directive metadata, as in this example:
 
-<code-example path="inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts" region="metadata" header="src/app/app.component.html" linenums="false">
+<code-example path="inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts" region="metadata" header="src/app/in-the-metadata/in-the-metadata.component.ts" linenums="false">
 </code-example>
 
 While declaring `inputs` and `outputs` in the `@Directive` and `@Component`
 metadata is possible, it is a better practice to use the `@Input()` and `@Output()`
 class decorators instead, as follows:
 
-<code-example path="inputs-outputs/src/app/input-output/input-output.component.ts" region="input-output" header="src/app/app.component.html" linenums="false">
+<code-example path="inputs-outputs/src/app/input-output/input-output.component.ts" region="input-output" header="src/app/input-output/input-output.component.ts" linenums="false">
 </code-example>
 
 See the [Decorate input and output properties](guide/styleguide#decorate-input-and-output-properties) section of the
@@ -2094,7 +2104,7 @@ offer a solution.
 Alias inputs and outputs in the metadata using a colon-delimited (`:`) string with
 the directive property name on the left and the public alias on the right:
 
-<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias" header="src/app/app.component.html" linenums="false">
+<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias" header="src/app/aliasing/aliasing.component.ts" linenums="false">
 </code-example>
 
 
@@ -2102,7 +2112,7 @@ the directive property name on the left and the public alias on the right:
 
 You can specify the alias for the property name by passing the alias name to the `@Input()`/`@Output()` decorator. The internal name remains as usual.
 
-<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias-input-output" header="src/app/app.component.html" linenums="false">
+<code-example path="inputs-outputs/src/app/aliasing/aliasing.component.ts" region="alias-input-output" header="src/app/aliasing/aliasing.component.ts" linenums="false">
 </code-example>
 
 
@@ -2263,3 +2273,27 @@ the component.
 </code-example>
 
 The `$any()` cast function works anywhere in a binding expression where a method call is valid.
+
+## SVG in templates
+
+It is possible to use SVG as valid templates in Angular. All of the template syntax below is
+applicable to both SVG and HTML. Learn more in the SVG [1.1](https://www.w3.org/TR/SVG11/) and
+[2.0](https://www.w3.org/TR/SVG2/) specifications.
+
+Why would you use SVG as template, instead of simply adding it as image to your application?
+
+When you use an SVG as the template, you are able to use directives and bindings just like with HTML
+templates. This means that you will be able to dynamically generate interactive graphics.
+
+Refer to the sample code snippet below for a syntax example:
+
+<code-example path="template-syntax/src/app/svg.component.ts" header="src/app/svg.component.ts">
+</code-example>
+
+Add the below code to your `svg.component.svg` file:
+
+<code-example path="template-syntax/src/app/svg.component.svg" header="src/app/svg.component.svg">
+</code-example>
+
+Here you can see the use of a `click()` event binding and the property binding syntax
+(`[attr.fill]="fillColor"`).

aio/content/guide/testing.md

@@ -150,7 +150,7 @@ sudo: false
 
 language: node_js
 node_js:
-  - "8"
+  - "10"
   
 addons:
   apt:

aio/content/guide/upgrade.md

@@ -868,6 +868,8 @@ As of Angular version 8, lazy loading code can be accomplished simply by using t
 
 The service uses the `import()` method to load your bundled AngularJS application lazily. This decreases the initial bundle size of your application as you're not loading code your user doesn't need yet. You also need to provide a way to _bootstrap_ the application manually after it has been loaded. AngularJS provides a way to manually bootstrap an application using the [angular.bootstrap()](https://docs.angularjs.org/api/ng/function/angular.bootstrap) method with a provided HTML element. Your AngularJS app should also expose a `bootstrap` method that bootstraps the AngularJS app.
 
+To ensure any necessary teardown is triggered in the AngularJS app, such as removal of global listeners, you also implement a method to call the `$rootScope.destroy()` method.
+
 <code-example path="upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts" header="angularjs-app">
 </code-example>
 
@@ -886,7 +888,7 @@ In your Angular application, you need a component as a placeholder for your Angu
 <code-example path="upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts" header="src/app/angular-js/angular-js.component.ts">
 </code-example>
 
-When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive. 
+When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive. When the user navigates away from the route, the `$rootScope` is destroyed on the AngularJS application.
 
 ### Configure a custom route matcher for AngularJS routes
 

aio/content/guide/web-worker.md

@@ -27,7 +27,7 @@ Running this command will:
     // Create a new
     const worker = new Worker('./app.worker', { type: 'module' });
     worker.onmessage = ({ data }) => {
-      console.log('page got message: $\{data\}');
+      console.log(`page got message: ${data}`);
     };
     worker.postMessage('hello');
   } else {

aio/content/guide/workspace-config.md

@@ -227,3 +227,107 @@ The following example uses the `ignore` field to exclude certain files in the as
  { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" },
 ]
 </code-example>
+
+{@a style-script-config}
+
+### Styles and scripts configuration
+
+An array entry for the `styles` and `scripts` options can be a simple path string, or an object that points to an extra entry-point file.
+The associated builder will load that file and its dependencies as a separate bundle during the build.
+With a configuration object, you have the option of naming the bundle for the entry point, using a `bundleName` field.
+
+The bundle is injected by default, but you can set `inject` to false to exclude the bundle from injection.
+For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:
+
+<code-example format="." language="json" linenums="false">
+
+   "styles": [
+     { "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" }
+   ],
+   "scripts": [
+     { "input": "src/external-module/main.js", "inject": false, "bundleName": "external-module" }
+   ]
+
+</code-example>
+
+You can mix simple and complex file references for styles and scripts.
+
+<code-example format="." language="json" linenums="false">
+
+"styles": [
+  "src/styles.css",
+  "src/more-styles.css",
+  { "input": "src/lazy-style.scss", "inject": false },
+  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
+]
+
+</code-example>
+
+{@a style-preprocessor}
+
+#### Style preprocessor options
+
+In Sass and Stylus you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
+
+To add paths, use the `stylePreprocessorOptions` option:
+
+<code-example format="." language="json" linenums="false">
+
+"stylePreprocessorOptions": {
+  "includePaths": [
+    "src/style-paths"
+  ]
+}
+
+</code-example>
+
+Files in that folder, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
+
+```ts
+// src/app/app.component.scss
+// A relative path works
+@import '../style-paths/variables';
+// But now this works as well
+@import 'variables';
+```
+
+Note that you will also need to add any styles or scripts to the `test` builder if you need them for unit tests.
+See also [Using runtime-global libraries inside your app](guide/using-libraries#using-runtime-global-libraries-inside-your-app).
+
+
+{@a optimize-and-srcmap}
+
+### Optimization and source map configuration
+
+The `optimization` and `sourceMap` command options are simple Boolean flags.
+You can supply an object as a configuration value for either of these to provide more detailed instruction.
+
+* The flag `--optimization="true"` applies to both scripts and styles. You can supply a value such as the following to apply optimization to one or the other:
+
+<code-example format="." language="json" linenums="false">
+
+   "optimization": { "scripts": true, "styles": false }
+
+</code-example>
+
+* The flag `--sourceMap="true"` outputs source maps for both scripts and styles.
+You can configure the option to apply to one or the other.
+You can also choose to output hidden source maps, or resolve vendor package source maps.
+For example:
+
+<code-example format="." language="json" linenums="false">
+
+   "sourceMaps": { "scripts": true, "styles": false, "hidden": true, "vendor": true }
+
+</code-example>
+
+<div class="alert is-helpful">
+
+   When using hidden source maps, source maps will not be referenced in the bundle.
+   These are useful if you only want source maps to map error stack traces in error reporting tools,
+   but don't want to expose your source maps in the browser developer tools.
+
+   For [Universal](guide/glossary#universal), you can reduce the code rendered in the HTML page by 
+   setting styles optimization to `true` and styles source maps to `false`.
+
+</div>

aio/content/marketing/resources.json

@@ -34,23 +34,12 @@
             "url": "https://dev.to/t/angular",
             "rev": true,
             "title": "DEV Community"
-          }
-        }
-      },
-      "Groups": {
-        "order": 2,
-        "resources": {
-          "sldkjfslkjfslkjdsklj": {
-            "desc": "Meetup in Barcelona, Spain. Express your motivations, share your ideas and play together creating awesome things in team.",
-            "rev": true,
-            "title": "Angular Beers",
-            "url": "http://www.meetup.com/AngularJS-Beers/"
           },
-          "sldkjfslkjfslkjdskzzzlj": {
-            "desc": "Angular Conferences and Angular Camps in Barcelona, Spain.",
+          "angular-in-depth" : {
+            "desc": "The place where advanced Angular concepts are explained",
+            "url": "https://blog.angularindepth.com",
             "rev": true,
-            "title": "Angular Camp",
-            "url": "http://angularcamp.org/"
+            "title": "Angular In Depth"
           }
         }
       },
@@ -62,7 +51,7 @@
             "logo": "",
             "rev": true,
             "title": "Adventures in Angular",
-            "url": "https://devchat.tv/adventures-in-angular"
+            "url": "https://devchat.tv/adv-in-angular/"
           },
           "sdlkfjsldfkj": {
             "desc": "Weekly video podcast hosted by Jeff Whelpley with all the latest and greatest happenings in the wild world of Angular.",
@@ -77,13 +66,6 @@
             "rev": true,
             "title": "Happy Angular Podcast",
             "url": "https://happy-angular.de/"
-          },
-          "sldkfjsldjf": {
-            "desc": "The live broadcast podcast all about JavaScript",
-            "logo": "",
-            "rev": true,
-            "title": "Javascript Air",
-            "url": "https://javascriptair.com/"
           }
         }
       }
@@ -95,40 +77,26 @@
       "Cross-Platform Development": {
         "order": 5,
         "resources": {
-          "a2b": {
-            "desc": "Angular and React Native to build applications for Android and iOS",
-            "logo": "",
-            "rev": true,
-            "title": "ReactNative",
-            "url": "http://angular.github.io/react-native-renderer/"
-          },
           "a3b": {
             "desc": "Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps.",
             "logo": "http://ionicframework.com/img/ionic-logo-white.svg",
             "rev": true,
             "title": "Ionic",
-            "url": "http://ionicframework.com/docs/v2/"
+            "url": "https://ionicframework.com/docs"
           },
           "a4b": {
             "desc": "Electron Platform for Angular.",
             "logo": "",
             "rev": true,
             "title": "Electron",
-            "url": "http://github.com/angular/angular-electron"
+            "url": "https://github.com/maximegris/angular-electron"
           },
           "ab": {
             "desc": "NativeScript is how you build cross-platform, native iOS and Android apps with Angular and TypeScript. Get 100% access to native APIs via JavaScript and reuse of packages from NPM, CocoaPods and Gradle. Open source and backed by Telerik.​​​",
             "logo": "",
             "rev": true,
             "title": "NativeScript",
-            "url": "https://github.com/NativeScript/nativescript-angular"
-          },
-          "ab5": {
-            "desc": "An Universal Windows App (uwp) powered by Angular",
-            "logo": "",
-            "rev": true,
-            "title": "Windows (UWP)",
-            "url": "http://github.com/preboot/angular2-universal-windows-app"
+            "url": "https://docs.nativescript.org/angular/start/introduction"
           }
         }
       },
@@ -139,7 +107,7 @@
             "desc": "Reactive Extensions for Angular",
             "rev": true,
             "title": "ngrx",
-            "url": "http://github.com/ngrx"
+            "url": "https://ngrx.io/"
           },
           "ab": {
             "desc": "The official library for Firebase and Angular",
@@ -153,21 +121,14 @@
             "logo": "http://www.angular-meteor.com/images/logo.png",
             "rev": true,
             "title": "Meteor",
-            "url": "http://www.angular-meteor.com/angular2"
+            "url": "https://github.com/urigo/angular-meteor"
           },
           "ab3": {
             "desc": "Apollo is a data stack for modern apps, built with GraphQL.",
             "logo": "http://docs.apollostack.com/logo/large.png",
             "rev": true,
             "title": "Apollo",
-            "url": "http://docs.apollostack.com/apollo-client/angular2.html"
-          },
-          "ab4": {
-            "desc": "Angular Commerce is a solution for building modern e-commerce applications with power of Google Firebase. Set of components is design agnostic and allows to easily extend functionality.",
-            "logo": "",
-            "rev": true,
-            "title": "AngularCommerce",
-            "url": "https://github.com/NodeArt/angular-commerce"
+            "url": "https://www.apollographql.com/docs/angular/"
           },
           "ngx-api-utils": {
             "desc": "ngx-api-utils is a lean library of utilities and helpers to quickly integrate any HTTP API (REST, Ajax, and any other) with Angular.",
@@ -219,12 +180,6 @@
       "Tooling": {
         "order": 2,
         "resources": {
-          "-KLIzHfBEr1qMMUDxfq3": {
-            "desc": "Generate an Angular CRUD application from an existing database schema",
-            "rev": true,
-            "title": "Celerio Angular Quickstart",
-            "url": "https://github.com/jaxio/celerio-angular-quickstart"
-          },
           "a1": {
             "desc": "A Google Chrome Dev Tools extension for debugging Angular applications.",
             "logo": "https://augury.angular.io/images/augury-logo.svg",
@@ -259,13 +214,6 @@
             "title": "Codelyzer",
             "url": "https://github.com/mgechev/codelyzer"
           },
-          "e1": {
-            "desc": "This package provides facilities for developers building Angular applications on ASP.NET.",
-            "logo": "",
-            "rev": true,
-            "title": "Universal for ASP.NET",
-            "url": "https://github.com/aspnet/nodeservices"
-          },
           "f1": {
             "desc": "This tool generates dedicated documentation for Angular applications.",
             "logo": "",
@@ -273,13 +221,6 @@
             "title": "Compodoc",
             "url": "https://github.com/compodoc/compodoc"
           },
-          "ncg": {
-            "desc": "Generate several types of CRUD apps complete with e2e testing using template-sets for Angular, Material Design, Bootstrap, Kendo UI, Ionic, ...",
-            "logo": "https://avatars3.githubusercontent.com/u/27976684",
-            "rev": true,
-            "title": "NinjaCodeGen - Angular CRUD Generator",
-            "url": "https://ninjaCodeGen.com"
-          },
           "angular-playground": {
             "desc": "UI development environment for building, testing, and documenting Angular applications.",
             "rev": true,
@@ -330,12 +271,6 @@
             "title": "Clarity Design System",
             "url": "https://vmware.github.io/clarity/"
           },
-          "-KLIzI9BTvvP_hUwutXk": {
-            "desc": "UI components for Angular using Semantic UI",
-            "rev": true,
-            "title": "Semantic UI",
-            "url": "https://github.com/vladotesanovic/ngSemantic"
-          },
           "-KMVB8P4TDfht8c0L1AE": {
             "desc": "The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.",
             "rev": true,
@@ -404,6 +339,13 @@
             "title": "Material Community Components",
             "url": "https://github.com/tiaguinho/material-community-components"
           },
+          "mosaic": {
+            "desc": "Positive Technologies UI components based on Angular",
+            "logo": "https://i.ibb.co/fQNPgv6/logo-png-200.png",
+            "rev": true,
+            "title": "Mosaic - Angular UI Components",
+            "url": "https://github.com/positive-js/mosaic"
+          },
           "ngzorro": {
             "desc": "A set of enterprise-class UI components based on Ant Design and Angular",
             "rev": true,
@@ -513,12 +455,6 @@
       "Books": {
         "order": 1,
         "resources": {
-          "-KLI8vJ0ZkvWhqPembZ7": {
-            "desc": "A guide that helps developers get up to speed quickly on Angular and its accompanying technologies.",
-            "rev": true,
-            "title": "How to Get Started and Productive in Angular Fast",
-            "url": "http://www.amazon.com/How-Started-Productive-Angular-Fast-ebook/dp/B01D3B0ET4/ref=sr_1_1_twi_kin_2?ie=UTF8&qid=1462381159&sr=8-1"
-          },
           "-KLIzGEp8Mh5W-FkiQnL": {
             "desc": "Your quick, no-nonsense guide to building real-world apps with Angular",
             "rev": true,
@@ -529,25 +465,7 @@
             "desc": "More than 15 books from O'Reilly about Angular",
             "rev": true,
             "title": "O'Reilly Media",
-            "url": "https://ssearch.oreilly.com/?q=angular+2&x=0&y=0"
-          },
-          "8ab": {
-            "desc": "This books shows all the steps necessary for the development of SPA (Single Page Application) applications with the brand new Angular",
-            "rev": true,
-            "title": "Practical Angular",
-            "url": "https://leanpub.com/practical-angular-2"
-          },
-          "a2b": {
-            "desc": "Publications and books from Manning about Angular",
-            "rev": true,
-            "title": "Manning Publications",
-            "url": "https://www.manning.com/search?q=angular"
-          },
-          "a4b": {
-            "desc": "From getting started with the Angular toolchain to writing applications with scalable front end architectures, this book walks you through everything you need to know.",
-            "rev": true,
-            "title": "Rangle's Angular Training Book",
-            "url": "http://ngcourse.rangle.io/"
+            "url": "https://ssearch.oreilly.com/?q=angular"
           },
           "a5b": {
             "desc": "The in-depth, complete, and up-to-date book on Angular. Become an Angular expert today.",
@@ -555,12 +473,6 @@
             "title": "ng-book",
             "url": "https://www.ng-book.com/2/"
           },
-          "a6b": {
-            "desc": "A Practical Introduction to the new Web Development Platform Angular",
-            "rev": true,
-            "title": "Angular Book",
-            "url": "https://leanpub.com/angular2-book"
-          },
           "a7b": {
             "desc": "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why",
             "rev": true,
@@ -571,13 +483,13 @@
             "desc": "More than 10 books from Packt Publishing about Angular",
             "rev": true,
             "title": "Packt Publishing",
-            "url": "https://www.packtpub.com/all/?search=angular%202#"
+            "url": "https://www.packtpub.com/catalogsearch/result/?q=angular"
           },
           "cnoring-rxjs-fundamentals": {
             "desc": "A free book that covers all facets of working with Rxjs from your first Observable to how to make your code run at optimal speed with Schedulers.",
             "rev": true,
-            "title": "RxJS 5 Ultimate",
-            "url": "https://www.gitbook.com/book/chrisnoring/rxjs-5-ultimate/details"
+            "title": "RxJS Ultimate",
+            "url": "https://chrisnoring.gitbooks.io/rxjs-5-ultimate/content/"
           },
           "vsavkin-angular-router": {
             "desc": "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.",
@@ -635,18 +547,6 @@
             "title": "Academia Binaria (español)",
             "url": "http://academia-binaria.com/"
           },
-          "-KLIzIOgdPXzI4LMOzYP": {
-            "desc": "In this course, you will learn the features listed above and so much more. This amazing Angular tutorial will cover the fundamentals of Angular (you don’t even need to know Angular), TypeScript, and introduction to the programming concepts such as conditions, arrays, functions, directives, pipes, etc.",
-            "rev": true,
-            "title": "Eduonix Angular Fundamentals",
-            "url": "https://www.eduonix.com/courses/Web-Development/angular-2-fundamentals-for-web-developers"
-          },
-          "-KMUuOWwciL_S_o0fzFO": {
-            "desc": "The ngMigrate project is brought to you by Todd Motto, a Developer Advocate at Telerik, spreading the good word of Kendo UI, NativeScript and Angular & AngularJS. You can follow him on Twitter for questions, or even requests about this guide.",
-            "rev": true,
-            "title": "ngMigrate",
-            "url": "http://ngmigrate.telerik.com/"
-          },
           "-KN3uNQvxifu26D6WKJW": {
             "category": "Education",
             "desc": "Create the future of web applications by taking Angular for a test drive.",
@@ -667,14 +567,14 @@
             "logo": "",
             "rev": true,
             "title": "Pluralsight",
-            "url": "https://www.pluralsight.com/search?q=angular+2&categories=all"
+            "url": "https://www.pluralsight.com/paths/angular"
           },
           "ab3": {
             "desc": "Angular courses hosted by  Udemy",
             "logo": "",
             "rev": true,
             "title": "Udemy",
-            "url": "https://www.udemy.com/courses/search/?ref=home&src=ukw&q=angular+2&lang=en"
+            "url": "https://www.udemy.com/courses/search/?q=angular"
           },
           "ab4": {
             "desc": "Angular Fundamentals and advanced topics focused on Redux Style Angular Applications",
@@ -688,13 +588,7 @@
             "logo": "",
             "rev": true,
             "title": "Frontend Masters",
-            "url": "https://frontendmasters.com/courses/angular-2/"
-          },
-          "ac6": {
-            "desc": "French language Angular course covering TypeScript, ES6, Dependency Injection, Observables, and more.",
-            "rev": true,
-            "title": "Wishtack's Angular Course (francais)",
-            "url": "http://courses.wishtack.com/angular-2/ecmascript-6"
+            "url": "https://frontendmasters.com/courses/angular-core/"
           },
           "angular-love": {
             "desc": "Polish language Angular articles and information",
@@ -702,12 +596,6 @@
             "title": "angular.love (Polski)",
             "url": "http://www.angular.love/"
           },
-          "angular2forms": {
-            "desc": "Learn about how to use Reactive Forms with Angular.",
-            "rev": true,
-            "title": "Angular Forms: Data Binding and Validation",
-            "url": "https://www.lynda.com/AngularJS-tutorials/Angular-2-Forms-Data-Binding-Validation/461451-2.html"
-          },
           "learn-angular-fr": {
             "desc": "French language Angular content.",
             "rev": true,
@@ -783,7 +671,7 @@
             "desc": "Basic and Advanced training across Europe in German",
             "rev": true,
             "title": "TheCodeCampus (German)",
-            "url": "https://www.thecodecampus.de/#!/angularjs"
+            "url": "https://www.thecodecampus.de/schulungen/angular"
           },
           "-KLIzFhfGKi1xttqJ7Uh": {
             "desc": "4 day in-depth Angular training in Israel",
@@ -816,13 +704,6 @@
             "title": "Angular Boot Camp",
             "url": "https://angularbootcamp.com"
           },
-          "ab": {
-            "desc": "With Rangle’s Custom Training, you can cover Angular in comprehensive detail, on your premises or theirs. Learn directly from Angular experts who will tailor course material to suit your specific application needs.",
-            "logo": "",
-            "rev": true,
-            "title": "Rangle.io",
-            "url": "http://rangle.io/services/javascript-training/angular2-training/"
-          },
           "ab3": {
             "desc": "Trainings & Code Reviews. We help people to get a deep understanding of different technologies through trainings and code reviews. Our services can be arranged online, making it possible to join in from anywhere in the world, or on-site to get the best experience possible.",
             "logo": "",
@@ -837,12 +718,6 @@
             "title": "Learn Javascript (Russian)",
             "url": "https://learn.javascript.ru/courses/angular"
           },
-          "sa200": {
-            "desc": "Free Angular training delivered by SFEIR in France",
-            "rev": true,
-            "title": "SFEIR School (French)",
-            "url": "https://school.sfeir.com/project/sa200/"
-          },
           "zenika-angular": {
             "desc": "Angular trainings delivered by Zenika (FRANCE)",
             "rev": true,

aio/content/navigation.json

@@ -208,16 +208,16 @@
               "title": "Component Styles",
               "tooltip": "Add CSS styles that are specific to a component."
             },
-            {
-              "url": "guide/elements",
-              "title": "Angular Elements",
-              "tooltip": "Convert components to Custom Elements."
-            },
             {
               "url": "guide/dynamic-component-loader",
               "title": "Dynamic Components",
               "tooltip": "Load components dynamically."
             },
+            {
+              "url": "guide/elements",
+              "title": "Angular Elements",
+              "tooltip": "Convert components to Custom Elements."
+            },
             {
               "url": "guide/attribute-directives",
               "title": "Attribute Directives",
@@ -456,6 +456,11 @@
           "title": "Internationalization (i18n)",
           "tooltip": "Translate the app's template text into multiple languages."
         },
+        {
+          "url": "guide/accessibility",
+          "title": "Accessibility",
+          "tooltip": "Design apps to be accessible to all users."
+        },
         {
           "title": "Service Workers & PWA",
           "tooltip": "Angular service workers: Controlling caching of application resources.",

aio/content/start/index.md

@@ -6,6 +6,11 @@ This tutorial introduces you to the essentials of Angular.
 It leverages what you already know about HTML and JavaScript—plus some useful Angular features—to build a simple online store application, with a catalog, shopping cart, and check-out form. 
 You don't need to install anything: you'll build the app using the [StackBlitz](https://stackblitz.com/ "StackBlitz web site") online development environment.
 
+<div class="alert is-helpful">
+
+We are using the StackBlitz Generator to show you a ready-made, simple application that you can examine and play with interactively. In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli), a powerful command-line tool that lets you generate and modify applications. For more information, see the [CLI Overview](cli).
+
+</div>
 
 <div class="callout is-helpful">
 <header>New to web development?</header>

aio/package.json

@@ -19,7 +19,7 @@
     "build-local": "yarn ~~build",
     "prebuild-with-ivy": "yarn setup-local && node scripts/switch-to-ivy",
     "build-with-ivy": "yarn ~~build",
-    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js ab6f36229",
+    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 823731f6e",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
     "test": "yarn check-env && ng test",
     "pree2e": "yarn check-env && yarn update-webdriver",
@@ -33,8 +33,10 @@
     "set-opensearch-url": "node --eval \"const sh = require('shelljs'); sh.set('-e'); sh.sed('-i', /PLACEHOLDER_URL/g, process.argv[1], 'dist/assets/opensearch.xml');\"",
     "presmoke-tests": "yarn update-webdriver",
     "smoke-tests": "protractor tests/deployment/e2e/protractor.conf.js --suite smoke --baseUrl",
-    "test-pwa-score": "node scripts/test-pwa-score",
-    "test-pwa-score-localhost": "run-p --race \"~~http-server dist -p 4200 --silent\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
+    "test-a11y-score": "node scripts/test-aio-a11y",
+    "test-a11y-score-localhost": "run-p --race \"~~light-server -s dist -p 4200 --quiet\" \"test-a11y-score http://localhost:4200\" --",
+    "test-pwa-score": "run-s \"~~audit-web-app {1} all:0,pwa:{2} {3}\" --",
+    "test-pwa-score-localhost": "run-p --race \"~~light-server -s dist -p 4200 --quiet\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
     "example-e2e": "yarn example-check-local && node ./tools/examples/run-example-e2e",
     "example-lint": "tslint --config \"content/examples/tslint.json\" \"content/examples/**/*.ts\" --exclude \"content/examples/styleguide/**/*.avoid.ts\"",
     "example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug",
@@ -64,15 +66,16 @@
     "generate-zips": "node ./tools/example-zipper/generateZips",
     "build-404-page": "node scripts/build-404-page",
     "update-webdriver": "webdriver-manager update --standalone false --gecko false $CI_CHROMEDRIVER_VERSION_ARG",
+    "~~audit-web-app": "node scripts/audit-web-app",
     "~~check-env": "node scripts/check-environment",
     "~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
     "~~build": "ng build --configuration=stable",
     "post~~build": "yarn build-404-page",
-    "~~http-server": "http-server"
+    "~~light-server": "light-server --bind=localhost --historyindex=/index.html --no-reload"
   },
   "engines": {
     "node": ">=10.9.0 <11.0.0",
-    "yarn": ">=1.12.1 <=1.14.0"
+    "yarn": ">=1.12.1 <=1.16.0"
   },
   "private": true,
   "dependencies": {
@@ -106,13 +109,13 @@
     "archiver": "^1.3.0",
     "canonical-path": "1.0.0",
     "chalk": "^2.1.0",
-    "chrome-launcher": "^0.10.5",
+    "chrome-launcher": "^0.10.7",
     "cjson": "^0.5.0",
     "codelyzer": "^5.0.0",
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.11",
-    "dgeni-packages": "^0.27.1",
+    "dgeni-packages": "^0.27.5",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
@@ -123,7 +126,6 @@
     "hast-util-is-element": "^1.0.0",
     "hast-util-to-string": "^1.0.0",
     "html": "^1.0.0",
-    "http-server": "^0.11.1",
     "ignore": "^3.3.3",
     "image-size": "^0.5.1",
     "jasmine": "^2.6.0",
@@ -140,7 +142,8 @@
     "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "lighthouse": "^4.3.0",
+    "light-server": "^2.6.2",
+    "lighthouse": "^5.1.0",
     "lighthouse-logger": "^1.2.0",
     "lodash": "^4.17.4",
     "lunr": "^2.1.0",
@@ -167,4 +170,4 @@
     "xregexp": "^4.0.0",
     "yargs": "^7.0.2"
   }
-}
+}

aio/scripts/audit-web-app.js

@@ -0,0 +1,179 @@
+#!/bin/env node
+'use strict';
+
+/**
+ * Usage:
+ * ```sh
+ * node scripts/audit-web-app <url> <min-scores> [<log-file>]
+ * ```
+ *
+ * Runs audits against the specified URL on specific categories (accessibility, best practices, performance, PWA, SEO).
+ * It fails, if the score in any category is below the score specified in `<min-scores>`. (Only runs audits for the
+ * specified categories.)
+ *
+ * `<min-scores>` is either a number (in which case it is interpreted as `all:<min-score>`) or a list of comma-separated
+ * strings of the form `key:value`, where `key` is one of `accessibility`, `best-practices`, `performance`, `pwa`, `seo`
+ * or `all` and `value` is a number (between 0 and 100).
+ *
+ * Examples:
+ * - `95` _(Same as `all:95`.)_
+ * - `all:95` _(Run audits for all categories and require a score of 95 or higher.)_
+ * - `all:95,pwa:100` _(Same as `all:95`, except that a scope of 100 is required for the `pwa` category.)_
+ * - `performance:90` _(Only run audits for the `performance` category and require a score of 90 or higher.)_
+ *
+ * If `<log-file>` is defined, the full results will be logged there.
+ *
+ * (Skips HTTPS-related audits, when run for an HTTP URL.)
+ */
+
+// Imports
+const chromeLauncher = require('chrome-launcher');
+const lighthouse = require('lighthouse');
+const printer = require('lighthouse/lighthouse-cli/printer');
+const logger = require('lighthouse-logger');
+
+// Constants
+const AUDIT_CATEGORIES = ['accessibility', 'best-practices', 'performance', 'pwa', 'seo'];
+const CHROME_LAUNCH_OPTS = {chromeFlags: ['--headless']};
+const LIGHTHOUSE_FLAGS = {logLevel: process.env.CI ? 'error' : 'info'};  // Be less verbose on CI.
+const SKIPPED_HTTPS_AUDITS = ['redirects-http', 'uses-http2'];
+const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer';
+const WAIT_FOR_SW_DELAY = 5000;
+
+// Run
+_main(process.argv.slice(2));
+
+// Functions - Definitions
+async function _main(args) {
+  const {url, minScores, logFile} = parseInput(args);
+  const isOnHttp = /^http:/.test(url);
+  const lhFlags = {...LIGHTHOUSE_FLAGS, onlyCategories: Object.keys(minScores).sort()};
+  const lhConfig = {
+    extends: 'lighthouse:default',
+    // Since the Angular ServiceWorker waits for the app to stabilize before registering,
+    // wait a few seconds after load to allow Lighthouse to reliably detect it.
+    passes: [{passName: 'defaultPass', pauseAfterLoadMs: WAIT_FOR_SW_DELAY}],
+  };
+
+  console.log(`Running web-app audits for '${url}'...`);
+  console.log(`  Audit categories: ${lhFlags.onlyCategories.join(', ')}`);
+
+  // If testing on HTTP, skip HTTPS-specific tests.
+  // (Note: Browsers special-case localhost and run ServiceWorker even on HTTP.)
+  if (isOnHttp) skipHttpsAudits(lhConfig);
+
+  logger.setLevel(lhFlags.logLevel);
+
+  try {
+    console.log('');
+    const startTime = Date.now();
+    const results = await launchChromeAndRunLighthouse(url, lhFlags, lhConfig);
+    const success = await processResults(results, minScores, logFile);
+    console.log(`\n(Completed in ${((Date.now() - startTime) / 1000).toFixed(1)}s.)\n`);
+
+    if (!success) {
+      throw new Error('One or more scores are too low.');
+    }
+  } catch (err) {
+    onError(err);
+  }
+}
+
+function formatScore(score) {
+  return `${(score * 100).toFixed(0).padStart(3)}`;
+}
+
+async function launchChromeAndRunLighthouse(url, flags, config) {
+  const chrome = await chromeLauncher.launch(CHROME_LAUNCH_OPTS);
+  flags.port = chrome.port;
+
+  try {
+    return await lighthouse(url, flags, config);
+  } finally {
+    await chrome.kill();
+  }
+}
+
+function onError(err) {
+  console.error(err);
+  console.error('');
+  process.exit(1);
+}
+
+function parseInput(args) {
+  const [url, minScoresRaw, logFile] = args;
+
+  if (!url) {
+    onError('Invalid arguments: <url> not specified.');
+  } else if (!minScoresRaw) {
+    onError('Invalid arguments: <min-scores> not specified.');
+  }
+
+  const minScores = parseMinScores(minScoresRaw || '');
+  const unknownCategories = Object.keys(minScores).filter(cat => !AUDIT_CATEGORIES.includes(cat));
+  const allValuesValid = Object.values(minScores).every(x => (0 <= x) && (x <= 1));
+
+  if (unknownCategories.length > 0) {
+    onError(`Invalid arguments: <min-scores> contains unknown category(-ies): ${unknownCategories.join(', ')}`);
+  } else if (!allValuesValid) {
+    onError(`Invalid arguments: <min-scores> has non-numeric or out-of-range values: ${minScoresRaw}`);
+  }
+
+  return {url, minScores, logFile};
+}
+
+function parseMinScores(raw) {
+  const minScores = {};
+
+  if (/^\d+$/.test(raw)) {
+    raw = `all:${raw}`;
+  }
+
+  raw.
+    split(',').
+    map(x => x.split(':')).
+    forEach(([key, val]) => minScores[key] = Number(val) / 100);
+
+  if (minScores.hasOwnProperty('all')) {
+    AUDIT_CATEGORIES.forEach(cat => minScores.hasOwnProperty(cat) || (minScores[cat] = minScores.all));
+    delete minScores.all;
+  }
+
+  return minScores;
+}
+
+async function processResults(results, minScores, logFile) {
+  const lhVersion = results.lhr.lighthouseVersion;
+  const categories = results.lhr.categories;
+  const report = results.report;
+
+  if (logFile) {
+    console.log(`\nSaving results in '${logFile}'...`);
+    console.log(`  LightHouse viewer: ${VIEWER_URL}`);
+
+    await printer.write(report, printer.OutputMode.json, logFile);
+  }
+
+  console.log(`\nLighthouse version: ${lhVersion}`);
+  console.log('\nAudit results:');
+
+  const maxTitleLen = Math.max(...Object.values(categories).map(({title}) => title.length));
+  const success = Object.keys(categories).sort().reduce((aggr, cat) => {
+    const {title, score} = categories[cat];
+    const paddedTitle = `${title}:`.padEnd(maxTitleLen + 1);
+    const minScore = minScores[cat];
+    const passed = !isNaN(score) && (score >= minScore);
+
+    console.log(
+      `  - ${paddedTitle}  ${formatScore(score)}  (Required: ${formatScore(minScore)})  ${passed ? 'OK' : 'FAILED'}`);
+
+    return aggr && passed;
+  }, true);
+
+  return success;
+}
+
+function skipHttpsAudits(config) {
+  console.log(`  Skipping HTTPS-related audits: ${SKIPPED_HTTPS_AUDITS.join(', ')}`);
+  config.settings = {...config.settings, skipAudits: SKIPPED_HTTPS_AUDITS};
+}

aio/scripts/test-aio-a11y.js

@@ -0,0 +1,38 @@
+#!/bin/env node
+'use strict';
+
+/**
+ * Usage:
+ * ```sh
+ * node scripts/test-aio-a11y <origin>
+ * ```
+ *
+ * Runs accessibility audits on several (pre-defined) pages on the specified origin. It fails, if
+ * the score for any page is below the minimum (see `MIN_SCORES_PER_PAGE` below).
+ *
+ * `<origin>` is the origin (scheme + hostname + port) of an angular.io deployment. It can be remote
+ * (e.g. `https://next.angular.io`) or local (e.g. `http://localhost:4200`).
+ */
+
+// Imports
+const sh = require('shelljs');
+sh.set('-e');
+
+// Constants
+const MIN_SCORES_PER_PAGE = {
+  '': 100,
+  'api': 100,
+  'api/core/Directive': 90,
+  'cli': 91,
+  'cli/add': 91,
+  'docs': 100,
+  'guide/docs-style-guide': 88,
+  'start': 90,
+};
+
+// Run
+const auditWebAppCmd = `"${process.execPath}" "${__dirname}/audit-web-app"`;
+const origin = process.argv[2];
+for (const [page, minScore] of Object.entries(MIN_SCORES_PER_PAGE)) {
+  sh.exec(`${auditWebAppCmd} ${origin}/${page} accessibility:${minScore}`);
+}

aio/scripts/test-production.sh

@@ -25,5 +25,8 @@ set +x -eu -o pipefail
   # Run PWA-score tests.
   yarn test-pwa-score "$targetUrl" "$minPwaScore"
 
+  # Run a11y tests.
+  yarn test-a11y-score "$targetUrl"
+
   echo -e "\nAll checks passed!"
 )

aio/scripts/test-pwa-score.js

@@ -1,135 +0,0 @@
-#!/bin/env node
-
-/**
- * Usage:
- * ```sh
- * node scripts/test-pwa-score <url> <min-score> [<log-file>]
- * ```
- *
- * Fails if the score is below `<min-score>`.
- * If `<log-file>` is defined, the full results will be logged there.
- *
- * (Skips HTTPS-related audits, when run for HTTP URL.)
- */
-
-// Imports
-const chromeLauncher = require('chrome-launcher');
-const lighthouse = require('lighthouse');
-const printer = require('lighthouse/lighthouse-cli/printer');
-const logger = require('lighthouse-logger');
-
-// Constants
-const CHROME_LAUNCH_OPTS = {};
-const LIGHTHOUSE_FLAGS = {logLevel: 'info'};
-const SKIPPED_HTTPS_AUDITS = ['redirects-http'];
-const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
-const WAIT_FOR_SW_DELAY = 5000;
-
-// Be less verbose on CI.
-if (process.env.CI) {
-  LIGHTHOUSE_FLAGS.logLevel = 'error';
-}
-
-// Run
-_main(process.argv.slice(2));
-
-// Functions - Definitions
-async function _main(args) {
-  const {url, minScore, logFile} = parseInput(args);
-  const isOnHttp = /^http:/.test(url);
-  const config = {
-    extends: 'lighthouse:default',
-    // Since the Angular ServiceWorker waits for the app to stabilize before registering,
-    // wait a few seconds after load to allow Lighthouse to reliably detect it.
-    passes: [{passName: 'defaultPass', pauseAfterLoadMs: WAIT_FOR_SW_DELAY}],
-  }
-
-  console.log(`Running PWA audit for '${url}'...`);
-
-  // If testing on HTTP, skip HTTPS-specific tests.
-  // (Note: Browsers special-case localhost and run ServiceWorker even on HTTP.)
-  if (isOnHttp) skipHttpsAudits(config);
-
-  logger.setLevel(LIGHTHOUSE_FLAGS.logLevel);
-
-  try {
-    const results = await launchChromeAndRunLighthouse(url, LIGHTHOUSE_FLAGS, config);
-    const score = await processResults(results, logFile);
-    evaluateScore(minScore, score);
-  } catch (err) {
-    onError(err);
-  }
-}
-
-function evaluateScore(expectedScore, actualScore) {
-  console.log('\nLighthouse PWA score:');
-  console.log(`  - Expected: ${expectedScore.toFixed(0).padStart(3)} / 100 (or higher)`);
-  console.log(`  - Actual:   ${actualScore.toFixed(0).padStart(3)} / 100\n`);
-
-  if (isNaN(actualScore) || (actualScore < expectedScore)) {
-    throw new Error(`PWA score is too low. (${actualScore} < ${expectedScore})`);
-  }
-}
-
-async function launchChromeAndRunLighthouse(url, flags, config) {
-  const chrome = await chromeLauncher.launch(CHROME_LAUNCH_OPTS);
-  flags.port = chrome.port;
-
-  try {
-    return await lighthouse(url, flags, config);
-  } finally {
-    await chrome.kill();
-  }
-}
-
-function onError(err) {
-  console.error(err);
-  process.exit(1);
-}
-
-function parseInput(args) {
-  const url = args[0];
-  const minScore = Number(args[1]);
-  const logFile = args[2];
-
-  if (!url) {
-    onError('Invalid arguments: <URL> not specified.');
-  } else if (isNaN(minScore)) {
-    onError('Invalid arguments: <MIN_SCORE> not specified or not a number.');
-  }
-
-  return {url, minScore, logFile};
-}
-
-async function processResults(results, logFile) {
-  const lhVersion = results.lhr.lighthouseVersion;
-  const categories = results.lhr.categories;
-  const report = results.report;
-
-  if (logFile) {
-    console.log(`\nSaving results in '${logFile}'...`);
-    console.log(`(LightHouse viewer: ${VIEWER_URL})`);
-
-    await printer.write(report, printer.OutputMode.json, logFile);
-  }
-
-  const categoryData = Object.keys(categories).map(name => categories[name]);
-  const maxTitleLen = Math.max(...categoryData.map(({title}) => title.length));
-
-  console.log(`\nLighthouse version: ${lhVersion}`);
-
-  console.log('\nAudit scores:');
-  categoryData.forEach(({title, score}) => {
-    const paddedTitle = `${title}:`.padEnd(maxTitleLen + 1);
-    const paddedScore = (score * 100).toFixed(0).padStart(3);
-    console.log(`  - ${paddedTitle} ${paddedScore} / 100`);
-  });
-
-  return categories.pwa.score * 100;
-}
-
-function skipHttpsAudits(config) {
-  console.info(`Skipping HTTPS-related audits (${SKIPPED_HTTPS_AUDITS.join(', ')})...`);
-  const settings = config.settings || (config.settings = {});
-  settings.skipAudits = SKIPPED_HTTPS_AUDITS;
-}

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

@@ -15,7 +15,7 @@
   </aio-select>
 
   <div class="form-search">
-    <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
+    <input #filter placeholder="Filter" (input)="setQuery($event.target.value)" aria-label="Filter Search">
     <i class="material-icons">search</i>
   </div>
 </div>

aio/src/app/layout/mode-banner/mode-banner.component.ts

@@ -4,9 +4,9 @@ import { VersionInfo } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-mode-banner',
   template: `
-  <div *ngIf="mode == 'archive'" class="mode-banner">
-    This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
-    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
+  <div *ngIf="mode == 'archive'" class="mode-banner alert archive-warning">
+    <p>This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
+    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.</p>
   </div>
   `
 })

aio/src/app/layout/nav-item/nav-item.component.html

@@ -1,21 +1,21 @@
 <div *ngIf="!node.children">
   <a href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     class="vertical-menu-item">
-    {{node.title}}
+    <span>{{node.title}}</span>
   </a>
 </div>
 
 <div *ngIf="node.children">
   <a *ngIf="node.url != null" href="{{node.url}}" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading">
-    {{node.title}}
+    <span>{{node.title}}</span>
     <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </a>
 
   <button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading"
     [attr.aria-pressed]="isExpanded">
-    {{node.title}}
+    <span>{{node.title}}</span>
     <mat-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></mat-icon>
   </button>
 

aio/src/app/shared/scroll.service.spec.ts

@@ -51,6 +51,8 @@ describe('ScrollService', () => {
     spyOn(window, 'scrollBy');
   });
 
+  afterEach(() => scrollService.ngOnDestroy());
+
   it('should debounce `updateScrollPositonInHistory()`', fakeAsync(() => {
     const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
 
@@ -65,6 +67,25 @@ describe('ScrollService', () => {
     expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
   }));
 
+  it('should stop updating scroll position once destroyed', fakeAsync(() => {
+    const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory');
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1);
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(2);
+
+    updateScrollPositionInHistorySpy.calls.reset();
+    scrollService.ngOnDestroy();
+
+    window.dispatchEvent(new Event('scroll'));
+    tick(250);
+    expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled();
+  }));
+
   it('should set `scrollRestoration` to `manual` if supported', () => {
     if (scrollService.supportManualScrollRestoration) {
       expect(window.history.scrollRestoration).toBe('manual');
@@ -112,6 +133,23 @@ describe('ScrollService', () => {
       expect(scrollService.topOffset).toBe(100 + topMargin);
       expect(document.querySelector).toHaveBeenCalled();
     });
+
+    it('should stop updating on resize once destroyed', () => {
+      let clientHeight = 50;
+      (document.querySelector as jasmine.Spy).and.callFake(() => ({clientHeight}));
+
+      expect(scrollService.topOffset).toBe(50 + topMargin);
+
+      clientHeight = 100;
+      window.dispatchEvent(new Event('resize'));
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+
+      scrollService.ngOnDestroy();
+
+      clientHeight = 200;
+      window.dispatchEvent(new Event('resize'));
+      expect(scrollService.topOffset).toBe(100 + topMargin);
+    });
   });
 
   describe('#topOfPageElement', () => {

aio/src/app/shared/scroll.service.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT, Location, PlatformLocation, PopStateEvent, ViewportScroller } from '@angular/common';
-import { Injectable, Inject } from '@angular/core';
-import { fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Injectable, Inject, OnDestroy } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 type ScrollPosition = [number, number];
 interface ScrollPositionPopStateEvent extends PopStateEvent {
@@ -14,10 +14,11 @@ export const topMargin = 16;
  * A service that scrolls document elements into view
  */
 @Injectable()
-export class ScrollService {
+export class ScrollService implements OnDestroy {
 
   private _topOffset: number | null;
   private _topOfPageElement: Element;
+  private onDestroy = new Subject<void>();
 
   // The scroll position which has to be restored, after a `popstate` event.
   poppedStateScrollPosition: ScrollPosition | null = null;
@@ -49,10 +50,13 @@ export class ScrollService {
       private viewportScroller: ViewportScroller,
       private location: Location) {
     // On resize, the toolbar might change height, so "invalidate" the top offset.
-    fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
+    fromEvent(window, 'resize')
+        .pipe(takeUntil(this.onDestroy))
+        .subscribe(() => this._topOffset = null);
 
     fromEvent(window, 'scroll')
-      .pipe(debounceTime(250)).subscribe(() => this.updateScrollPositionInHistory());
+        .pipe(debounceTime(250), takeUntil(this.onDestroy))
+        .subscribe(() => this.updateScrollPositionInHistory());
 
     // Change scroll restoration strategy to `manual` if it's supported
     if (this.supportManualScrollRestoration) {
@@ -75,6 +79,10 @@ export class ScrollService {
     }
   }
 
+  ngOnDestroy() {
+    this.onDestroy.next();
+  }
+
   /**
    * Scroll to the element with id extracted from the current location hash fragment.
    * Scroll to top if no hash.

aio/src/app/shared/search-results/search-results.component.html

@@ -26,5 +26,5 @@
 </ng-template>
 
 <ng-template #notFound>
-  <p>{{notFoundMessage}}</p>
+  <p class="not-found">{{notFoundMessage}}</p>
 </ng-template>

aio/src/app/shared/select/select.component.html

@@ -1,6 +1,6 @@
 <div class="form-select-menu">
   <button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled">
-    <strong>{{label}}</strong><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span>{{selected?.title}}
+    <span><strong>{{label}}</strong></span><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span><span>{{selected?.title}}</span>
   </button>
   <ul class="form-select-dropdown" *ngIf="showOptions">
     <li *ngFor="let option of options; index as i"
@@ -10,7 +10,7 @@
         (click)="select(option, i)"
         (keydown.enter)="select(option, i)"
         (keydown.space)="select(option, i); $event.preventDefault()">
-      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span>{{option.title}}
+      <span *ngIf="showSymbol" class="symbol {{option.value}}"></span><span>{{option.title}}</span>
     </li>
   </ul>
 </div>

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

@@ -41,13 +41,11 @@ describe('SelectComponent', () => {
       expect(getButton().textContent!.trim()).toEqual('Label:');
     });
 
-    it('should contain a symbol `<span>` if hasSymbol is true', () => {
-      expect(getButton().querySelector('span')).toEqual(null);
+    it('should contain a symbol if hasSymbol is true', () => {
+      expect(getButtonSymbol()).toEqual(null);
       host.showSymbol = true;
       fixture.detectChanges();
-      const span = getButton().querySelector('span');
-      expect(span).not.toEqual(null);
-      expect(span!.className).toContain('symbol');
+      expect(getButtonSymbol()).not.toEqual(null);
     });
 
     it('should display the selected option, if there is one', () => {
@@ -55,7 +53,7 @@ describe('SelectComponent', () => {
       host.selected = options[0];
       fixture.detectChanges();
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should toggle the visibility of the options list when clicked', () => {
@@ -110,7 +108,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should select the current option when enter is pressed', () => {
@@ -119,7 +117,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should select the current option when space is pressed', () => {
@@ -128,7 +126,7 @@ describe('SelectComponent', () => {
       fixture.detectChanges();
       expect(host.onChange).toHaveBeenCalledWith({ option: options[0], index: 0 });
       expect(getButton().textContent).toContain(options[0].title);
-      expect(getButton().querySelector('span')!.className).toContain(options[0].value);
+      expect(getButtonSymbol()!.className).toContain(options[0].value);
     });
 
     it('should hide when an option is clicked', () => {
@@ -177,6 +175,10 @@ function getButton(): HTMLButtonElement {
   return element.query(By.css('button')).nativeElement;
 }
 
+function getButtonSymbol(): HTMLElement | null {
+  return getButton().querySelector('.symbol');
+}
+
 function getOptionContainer(): HTMLUListElement|null {
   const de = element.query(By.css('ul'));
   return de && de.nativeElement;

aio/src/styles/0-base/_typography.scss

@@ -1,8 +1,12 @@
+html {
+  font-size: 62.5%;
+}
+
 body {
   font-family: $main-font;
   margin: 0;
   color: $darkgray;
-  font-size: 14px;
+  @include font-size(14);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -12,9 +16,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  display: inline-block;
-  font-size: 24px;
+  @include font-size(24);
   font-weight: 500;
+  display: inline-block;
   margin: 8px 0px;
 
   @media screen and (max-width: 600px) {
@@ -23,37 +27,37 @@ h1 {
 }
 
 h2 {
-  font-size: 22px;
+  @include font-size(22);
   font-weight: 500;
   margin: 32px 0px 24px;
   clear: both;
 }
 
 h3 {
-  font-size: 20px;
+  @include font-size(20);
   font-weight: 400;
   margin: 24px 0px 12px;
   clear: both;
 }
 
 h4 {
-  font-size: 18px;
+  @include font-size(18);
   font-weight: 400;
   margin: 8px 0px;
   clear: both;
 }
 
 h5 {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
   margin: 8px 0px;
   clear: both;
 }
 
 h6 {
-  color: $mediumgray;
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
+  color: $mediumgray;
   margin: 8px 0px;
   clear: both;
 }
@@ -83,13 +87,13 @@ ol,
 li,
 input,
 a {
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0.3px;
+  @include font-size(14);
+  @include line-height(24);
+  @include letter-spacing(0.3);
   font-weight: 400;
   color: $darkgray;
   & > em {
-    letter-spacing: 0.3px;
+    @include letter-spacing(0.3);
   }
 }
 
@@ -129,7 +133,7 @@ a {
 }
 
 .app-toolbar a {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 400;
   color: $white;
   font-family: $main-font;
@@ -157,7 +161,7 @@ table tbody th {
 td {
   font-weight: 400;
   padding: 8px 30px;
-  letter-spacing: 0.3px;
+  @include letter-spacing(0.3);
 
   > p,
   ul {
@@ -171,7 +175,7 @@ td {
 }
 
 th {
-  font-size: 16px;
+  @include font-size(16);
   font-weight: 500;
   padding: 13px 32px;
   text-align: left;

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

@@ -1,6 +1,6 @@
 footer {
   position: relative;
-  line-height: 24px;
+  @include line-height(24);
   flex: 1;
   padding: 48px;
   z-index: 0;
@@ -37,7 +37,7 @@ footer {
     cursor: pointer;
   }
   h3 {
-    font-size: 16px;
+    @include font-size(16);
     text-transform: uppercase;
     font-weight: 400;
     margin: 0 0 16px;
@@ -82,23 +82,15 @@ footer {
     }
   }
 
-
-
-
-  @media (max-width: 700px) {
-    h3 {
-      font-size: 110%;
-    }
-  }
   @media (max-width: 600px) {
     h3 {
-      font-size: 100%;
+      @include font-size(14);
     }
   }
 }
 
 footer::after {
-    content: "";
+    content: '';
     position: absolute;
     z-index: -1;
     top: 0;

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

@@ -22,9 +22,9 @@
 
   .hero-title {
     display: inline-block;
-    font-size: 28px;
+    @include font-size(28);
     font-weight: 400;
-    line-height: 48px;
+    @include line-height(48);
     margin: 0 8px 0 0;
     text-transform: uppercase;
 
@@ -76,8 +76,8 @@ section#intro {
   }
 
   .hero-headline {
-    font-size: 40px;
-    line-height: 64px;
+    @include font-size(40);
+    @include line-height(64);
     font-weight: 500;
     margin: 32px 0;
 
@@ -90,8 +90,8 @@ section#intro {
     }
 
     @media (max-width: 575px) {
-      font-size: 32px;
-      line-height: 50px;
+      @include font-size(32);
+      @include line-height(50);
     }
   }
 
@@ -154,7 +154,7 @@ section#intro {
     align-items: center;
     height: 40px;
     min-width: 160px;
-    font-size: 16px;
+    @include font-size(16);
     color: $white;
     background-color: $blue;
     border-radius: 48px;
@@ -172,11 +172,11 @@ section#intro {
     right: 0;
     position: static;
     transition: all 0.3s ease-in;
-    font-size: 16px;
+    @include font-size(16);
   }
 
   p {
-    font-size: 16px;
+    @include font-size(16);
     margin: 8px;
     text-align: center;
   }
@@ -246,15 +246,10 @@ section#intro {
 }
 
 .button.hero-cta {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 184px;
-  height: 40px;
-  padding: 0 24px;
-  font-size: 18px;
+  padding: 2px 34px 0;
+  @include font-size(18);
   font-weight: 600;
-  line-height: 40px;
+  @include line-height(40);
   background-color: $white;
   border-radius: 48px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
@@ -325,7 +320,7 @@ aio-shell {
 }
 
 .text-headline {
-  font-size: 20px;
+  @include font-size(20);
   font-weight: 500;
   color: $blue;
   margin-top: 10px;
@@ -424,7 +419,7 @@ div[layout=row]{
 
   .banner-headline {
     text-transform: uppercase;
-    font-size: 24px;
+    @include font-size(24);
     font-weight: 300;
     color: $white;
     margin: 0;
@@ -432,7 +427,7 @@ div[layout=row]{
     -webkit-margin-after: 0;
 
     @media (max-width: 600px) {
-      font-size: 18px;
+      @include font-size(18);
       font-weight: 400;
     }
 

aio/src/styles/1-layouts/_not-found.scss

@@ -1,7 +1,3 @@
-#file-not-found {
-    padding: 3rem 3rem 3rem;
-}
-
 .nf-container {
     align-items: center;
     padding: 32px;
@@ -13,8 +9,8 @@
     flex-direction: column;
 
     h1 {
-        font-size: 48px;
-        color: $blue;
+      @include font-size(48);
+      color: $blue;
         text-transform: uppercase;
         margin: 8px 0;
     }
@@ -22,6 +18,6 @@
 
 .nf-icon.material-icons {
     color: $blue;
-    font-size: 100px;
+    @include font-size(100);
     position: static;
 }

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

@@ -6,9 +6,10 @@
 aio-nav-menu {
   display: block;
   margin: 0 auto;
-  font-size: 13px;
+  max-width: 260px;
+  @include font-size(13);
+
   ul, a {
-    padding: 0;
     margin: 0;
   }
 
@@ -61,14 +62,14 @@ mat-sidenav-container div.mat-sidenav-content {
   box-sizing: border-box;
   color: $darkgray;
   cursor: pointer;
-  display: block;
-  max-width: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   overflow-wrap: break-word;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: 8px;
   text-decoration: none;
   text-align: left;
-  width: 93%;
+  width: 100%;
   word-wrap: break-word;
 
   &:hover {
@@ -81,26 +82,33 @@ mat-sidenav-container div.mat-sidenav-content {
     outline: $accentblue auto 2px;
   }
 
+  &.selected {
+    color: $blue;
+  }
+
+  &.level-2 {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  span {
+    padding-right: 32px;
+  }
+
   //icons _within_ nav
   .mat-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 4px;
+    height: 24px;
+    width: 24px;
   }
 }
 
-.vertical-menu-item.selected {
-  color: $blue;
-}
-
 button.vertical-menu-item {
   border: none;
   background-color: transparent;
-  margin-right: 0;
-  padding-left: 6px;
-  padding-top: 8px;
+  padding-top: 10px;
   padding-bottom: 10px;
+  margin: 0;
+  width: 100%;
 }
 
 .heading {
@@ -110,62 +118,73 @@ button.vertical-menu-item {
   text-transform: uppercase;
 }
 
-.heading-children.expanded {
-  visibility: visible;
-  opacity: 1;
-  max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
-  transition: visibility 500ms, opacity 500ms, max-height 500ms;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-}
+.heading-children {
+  &.expanded {
+    visibility: visible;
+    opacity: 1;
+    padding-left: 0;
+    max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.
+    transition: visibility 500ms, opacity 500ms, max-height 500ms;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+  }
 
-.heading-children.collapsed {
-  overflow: hidden;  // Needed to prevent unnecessary sidenav scrollbar.
-  visibility: hidden;
-  opacity: 0;
-  max-height: 1px; // Must have measurement to transition height.
-  transition: visibility 275ms, opacity 275ms, max-height 280ms;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
+  &.collapsed {
+    overflow: hidden;  // Needed to prevent unnecessary sidenav scrollbar.
+    visibility: hidden;
+    padding-left: 0;
+    opacity: 0;
+    max-height: 1px; // Must have measurement to transition height.
+    transition: visibility 275ms, opacity 275ms, max-height 280ms;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+  }
 }
 
 .no-animations {
-  .heading-children.expanded, .heading-children.collapsed {
+  .heading-children.expanded,
+  .heading-children.collapsed {
     transition: none! important;
   }
 }
 
 .level-1 {
   font-family: $main-font;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
-  margin-left: 14px;
+  padding-left: 20px;
+  margin: 0;
   transition: background-color 0.2s;
   text-transform: uppercase;
+
+  &.expanded .mat-icon,
+  .level-2.expanded .mat-icon {
+    @include rotate(90deg);
+  }
+
+  &:not(.expanded) .mat-icon,
+  .level-2:not(.expanded) .mat-icon {
+    @include rotate(0deg);
+  }
+
 }
 
 .level-2 {
   color: $mediumgray;
   font-family: $main-font;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
-  margin-left: 12px;
+  margin: 0;
+  padding-left: 32px;
   text-transform: none;
 }
 
 .level-3 {
   color: $mediumgray;
   font-family: $main-font;
-  font-size: 14px;
-  margin-left: 10px;
-}
-
-.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
-  @include rotate(90deg);
-}
-
-.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
-  @include rotate(0deg);
+  @include font-size(14);
+  margin: 0;
+  padding-left: 40px;
 }
 
 aio-nav-menu.top-menu {
@@ -195,7 +214,7 @@ mat-sidenav .doc-version {
 
     option {
       font-family: $main-font;
-      font-size: 14px;
+      @include font-size(14);
     }
   }
 }

aio/src/styles/1-layouts/_top-menu.scss

@@ -192,6 +192,11 @@ aio-search-box.search-container {
       outline: none;
     }
 
+    @include placeholder {
+      @include font-size(14);
+      color: $mediumgray;
+    }
+
     @include bp(big) {
       transition: width 0.4s ease-in-out;
 

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

@@ -1,7 +1,7 @@
 .alert {
     padding: 16px;
     margin: 24px 0px;
-    font-size: 14px;
+    @include font-size(14);
     color: $darkgray;
     width: 100%;
     box-sizing: border-box;
@@ -38,6 +38,26 @@
         }
     }
 
+    &.archive-warning {
+      background-color: $darkred;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+
+      * {
+        color: $white;
+      }
+
+      a {
+        color: $white;
+        font-weight: bold;
+        text-decoration: underline;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+    }
+
     > * {
         margin: 8px 16px;
     }

aio/src/styles/2-modules/_api-list.scss

@@ -8,24 +8,29 @@
 /* API LIST STYLES */
 
 aio-api-list {
-    div.form-search i.material-icons {
-        width: 20px;
-        pointer-events: none;
-    }
+  div.form-search i.material-icons {
+    width: 20px;
+    pointer-events: none;
+  }
 
-    .form-search input {
-        width: 182px;
-    }
+  .form-search input {
+    width: 182px;
 
-    .api-list-container {
-      display: flex;
-      flex-direction: column;
-      margin: 0 auto;
-
-      h2 {
-        margin-top: 16px;
-      }
+    @media screen and (max-width: 600px) {
+      width: 100%;
     }
+  }
+
+  .api-list-container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    padding-left: 0;
+
+    h2 {
+      margin-top: 16px;
+    }
+  }
 }
 
 .api-filter {
@@ -33,12 +38,21 @@ aio-api-list {
   margin: 0 auto;
 
   @media (max-width: 600px) {
-      flex-direction: column;
-      margin: 16px auto;
+    flex-direction: column;
+    margin: 16px auto;
   }
 
-  .form-select-menu, .form-search {
-      margin: 8px;
+  .form-select-menu,
+  .form-search {
+    margin: 8px;
+
+    @media screen and (max-width: 600px) {
+      margin-left: 0;
+    }
+  }
+
+  aio-select:first-child .form-select-menu {
+    margin-left: 0;
   }
 }
 
@@ -69,30 +83,17 @@ aio-api-list {
     box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
     box-sizing: border-box;
     border: 1px solid $white;
-    color: $blue-600;
-    font-size: 16px;
-    height: 32px;
-    line-height: 32px;
+    border-radius: 4px;
+    color: $darkgray;
+    @include font-size(14);
+    @include line-height(32);
     outline: none;
-    padding: 0 16px 0 32px;
+    padding: 4px 16px 4px 32px;
     transition: all .2s;
 
-    // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
-      color: $blue-grey-100;
-      font-size: 14px;
+    @include placeholder {
+      @include font-size(14);
+      color: $mediumgray;
     }
 
     &:focus {
@@ -103,10 +104,10 @@ aio-api-list {
 
   .material-icons {
     color: $blue-grey-100;
-    font-size: 20px;
+    @include font-size(20);
     left: 8px;
     position: absolute;
-    top: 6px;
+    top: 12px;
     z-index: $layer-1;
   }
 }
@@ -120,9 +121,9 @@ aio-api-list {
   box-shadow: 0 1px 2px rgba($black, .24);
   color: $white;
   display: inline-block;
-  font-size: 10px;
+  @include font-size(10);
   font-weight: 600;
-  line-height: 16px;
+  @include line-height(16);
   text-align: center;
   width: 16px;
 
@@ -147,6 +148,10 @@ aio-api-list {
   aio-select {
     width: 200px;
 
+    @media screen and (max-width: 600px) {
+      width: 100%;
+    }
+
     .symbol {
       margin-right: 8px;
     }
@@ -166,13 +171,13 @@ aio-api-list {
   overflow: hidden;
 
   @media screen and (max-width: 600px) {
-        margin: 0 0 0 -8px;
-    }
+    margin: 0 0 0 -8px;
+  }
 
   li {
-    font-size: 14px;
+    @include font-size(14);
     margin: 8px 0;
-    line-height: 14px;
+    @include line-height(14);
     padding: 0;
     float: left;
     width: 33%;
@@ -184,10 +189,11 @@ aio-api-list {
     .symbol {
       margin-right: 8px;
     }
+
     a {
       color: $blue-grey-600;
       display: inline-block;
-      line-height: 16px;
+      @include line-height(16);
       padding: 0 16px 0;
       text-decoration: none;
       transition: all .3s;
@@ -208,8 +214,8 @@ aio-api-list {
 
 .docs-content .h2-api-docs,
 .docs-content .h2-api-docs:first-of-type {
-  font-size: 18px;
-  line-height: 24px;
+  @include font-size(18);
+  @include line-height(24);
   margin-top: 0;
 }
 
@@ -230,7 +236,6 @@ aio-api-list {
 }
 
 p {
-
   &.selector {
     margin: 0;
   }
@@ -251,7 +256,7 @@ p {
 .row-margin {
   margin-bottom: 36px;
   h2 {
-    line-height: 28px;
+    @include line-height(28);
   }
 }
 
@@ -292,7 +297,7 @@ p {
 }
 
 .api-doc-code {
-  font-size: 14px;
+  @include font-size(14);
   color: #1a2326;
 
   // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
@@ -314,11 +319,11 @@ p {
   }
 
   .api-doc-code {
-    font-size: 12px;
+    @include font-size(12);
   }
 
   p.location-badge {
     position: relative;
-    font-size: 11px;
+    @include font-size(11);
   }
 }

aio/src/styles/2-modules/_api-pages.scss

@@ -6,7 +6,7 @@
 
       th {
           text-transform: none;
-          font-size: 16px;
+          @include font-size(16);
           font-weight: bold;
       }
 
@@ -52,7 +52,7 @@
 
       &.parameters-table {
         margin-top: 0;
-        font-size: 14px;
+        @include font-size(14);
         box-shadow: none;
 
         tr {
@@ -120,7 +120,7 @@
   .material-icons {
     border-radius: 4px;
     padding: 4px;
-    font-size: 20px;
+    @include font-size(20);
     &:hover {
       background-color: $mist;
     }
@@ -166,7 +166,7 @@
     }
 
     h4 {
-      font-size: 14px;
+      @include font-size(14);
       font-weight: bold;
       margin-top: 12px;
     }
@@ -175,12 +175,12 @@
 
   .api-heading {
     padding: 5px 0;
-    font-size: 14px;
+    @include font-size(14);
   }
 
   .parameters-table {
     margin-top: 0;
-    font-size: 14px;
+    @include font-size(14);
     td:nth-child(1) {
       width: 20%;
     }
@@ -245,9 +245,9 @@
 
 
   .from-constructor, .read-only-property, .write-only-property {
-    font-size: 12px;
+    @include font-size(12);
     font-weight: 600;
-    letter-spacing: 0.5px;
+    @include letter-spacing(0.5);
     font-style: italic;
     background-color: $lightgray;
     border-radius: 4px;

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

@@ -3,9 +3,9 @@
 .button,
 a.button.mat-button {
   display: inline-block;
-  line-height: 32px;
+  @include line-height(32);
   padding: 0px 16px;
-  font-size: 14px;
+  @include font-size(14);
   font-weight: 400;
   border-radius: 3px;
   text-decoration: none;
@@ -15,20 +15,20 @@ a.button.mat-button {
 
   // SIZES
   &.button-small {
-    font-size: 12px;
-    line-height: 24px;
+    @include font-size(12);
+    @include line-height(24);
     padding: 0px 8px;
   }
 
   &.button-large {
-    font-size: 15px;
-    line-height: 48px;
+    @include font-size(15);
+    @include line-height(48);
     padding: 0px 24px;
   }
 
   &.button-x-large {
-    font-size: 16px;
-    line-height: 56px;
+    @include font-size(16);
+    @include line-height(56);
     padding: 0px 24px;
   }
 
@@ -85,10 +85,10 @@ a.button.mat-button {
 
 a.filter-button {
   width: 140px;
-  font-size: 14px;
+  @include font-size(14);
   padding: 0px 16px;
   margin: 8px;
-  line-height: 48px;
+  @include line-height(48);
   border: 2px solid $blue;
   border-radius: 4px;
 

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

@@ -6,7 +6,7 @@
 
   header {
     color: $white;
-    line-height: 24px;
+    @include line-height(24);
     font-weight: 500;
     padding: 8px 16px;
     margin: 0;
@@ -17,7 +17,7 @@
   p {
     padding: 16px;
     margin: 0px;
-    font-size: 14px;
+    @include font-size(14);
   }
 
   > *:not(:first-child) {

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

@@ -26,7 +26,7 @@
     }
 
     .card-footer {
-      line-height: 32px;
+      @include line-height(32);
       padding: 8px 16px;
       background-color: rgba($blue, 0.1);
       color: $blue;
@@ -36,8 +36,8 @@
 
   section {
     color: $deepgray;
-    font-size: 20px;
-    line-height: 24px;
+    @include font-size(20);
+    @include line-height(24);
     margin: 0;
     padding: 32px 0 24px;
     text-transform: none;
@@ -46,8 +46,8 @@
 
   p {
     color: $darkgray;
-    font-size: 13px;
-    line-height: 24px;
+    @include font-size(13);
+    @include line-height(24);
     padding: 0 16px;
     margin: 0;
     text-align: center;
@@ -57,7 +57,7 @@
     bottom: 0;
     border-top: 0.5px solid $lightgray;
     box-sizing: border-box;
-    line-height: 48px;
+    @include line-height(48);
     left: 0;
     position: absolute;
     right: 0;
@@ -66,7 +66,7 @@
 
     a {
       color: $mediumgray;
-      font-size: 13px;
+      @include font-size(13);
     }
   }
   .card-footer.center {

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

@@ -51,7 +51,7 @@ code-example header {
   background-color: $accentblue;
   border-radius: 5px 5px 0 0;
   color: $offwhite;
-  font-size: 16px;
+  @include font-size(16);
   padding: 8px 16px;
 }
 
@@ -88,7 +88,7 @@ aio-code pre {
     align-items: center;
 
     code span {
-      line-height: 24px;
+      @include line-height(24);
     }
 }
 
@@ -159,7 +159,7 @@ ol.linenums {
     margin: 0;
     font-family: $code-font;
     font-size: 90%;
-    line-height: 24px;
+    @include line-height(24);
   }
 }
 

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

@@ -72,7 +72,7 @@ aio-contributor {
 
     .info-item {
       color: $white;
-      font-size: 14px;
+      @include font-size(14);
       font-weight: 500;
       margin: 8px;
       padding: 0;
@@ -142,8 +142,8 @@ aio-contributor {
 
       p {
         margin: 8px 0;
-        font-size: 12px;
-        line-height: 14px;
+        @include font-size(12);
+        @include line-height(14);
         text-align: left;
       }
 
@@ -172,7 +172,7 @@ aio-contributor {
   }
 
   section {
-    font-size: 14px;
+    @include font-size(14);
     font-weight: 500;
     padding: 8px;
     margin: 0;
@@ -184,8 +184,8 @@ aio-contributor {
 
   p {
     cursor: pointer;
-    font-size: 14px;
-    line-height: 18px;
+    @include font-size(14);
+    @include line-height(18);
     margin: 8px 16px;
     text-overflow: ellipsis;
     overflow-y: auto;

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

@@ -14,7 +14,7 @@
 
 summary {
   cursor: pointer;
-  font-size: 16px;
+  @include font-size(16);
   position: relative;
   padding: 16px 24px;
   color: $black;

aio/src/styles/2-modules/_edit-page-cta.scss

@@ -1,10 +1,10 @@
 .edit-page-cta {
     font-weight: 400;
-    font-size: 14px;
+    @include font-size(14);
     color: $blue;
     text-align: right;
     margin-right: 32px;
     display: block;
     position: absolute;
     right: 0;
-}
+}