release: cut the v8.2.7 release

PR Close #32721

.bazelrc

@@ -18,8 +18,11 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
 # See https://github.com/bazelbuild/bazel/issues/4603
 build --symlink_prefix=dist/
 
+# Disable watchfs as it causes tests to be flaky on Windows
+# https://github.com/angular/angular/issues/29541
+build --nowatchfs
+
 # Turn off legacy external runfiles
-build --nolegacy_external_runfiles
 run --nolegacy_external_runfiles
 test --nolegacy_external_runfiles
 
@@ -59,7 +62,7 @@ test --test_output=errors
 # Settings for CircleCI        #
 ################################
 
-# Bazel flags for CircleCI are in /.circleci/bazel.linux.rc and /.circleci/bazel.windows.rc
+# Bazel flags for CircleCI are in /.circleci/bazel.rc
 
 ################################
 # Temporary Settings for Ivy   #
@@ -68,45 +71,18 @@ test --test_output=errors
 # any bazel target. This is a temporary flag until codebase is permanently switched to Ivy.
 build --define=compile=legacy
 
-################################
-# Settings for rules_nodejs    #
-################################
-# Temporary define while angular depends on the legacy rollup_bundle rule.
-# TODO: remove this setting after https://github.com/angular/angular/pull/33201 lands.
-build --define=enable_legacy_rollup_rule=1
+###############################
+# Remote Build Execution support
+# Turn on these settings with
+#  --config=remote
+###############################
 
-#######################
-# Remote HTTP Caching #
-#######################
-build --remote_http_cache=https://storage.googleapis.com/angular-team-cache
-build --remote_accept_cached=true
-build --remote_upload_local_results=false
-
-######################################
-# Remote HTTP Caching writes support #
-# Turn on these settings with        #
-#  --config=-http-caching            #
-######################################
-build:remote-http-caching --remote_upload_local_results=true
-build:remote-http-caching --google_default_credentials
-
-##################################
-# Remote Build Execution support #
-# Turn on these settings with    #
-#  --config=remote               #
-##################################
-
-# The following --define=EXECUTOR=remote will be able to be removed
-# once https://github.com/bazelbuild/bazel/issues/7254 is fixed
-build:remote --define=EXECUTOR=remote
-
-# Set a higher timeout value, just in case.
-build:remote --remote_timeout=600
+# Load default settings for Remote Build Execution.
+import %workspace%/third_party/github.com/bazelbuild/bazel-toolchains/bazelrc/.bazelrc.notoolchain
 
 # Increase the default number of jobs by 50% because our build has lots of
 # parallelism
 build:remote --jobs=150
-build:remote --google_default_credentials
 
 # Toolchain and platform related flags
 build:remote --host_javabase=@rbe_ubuntu1604_angular//java:jdk
@@ -120,11 +96,21 @@ build:remote --extra_execution_platforms=//tools:rbe_ubuntu1604-angular
 build:remote --host_platform=//tools:rbe_ubuntu1604-angular
 build:remote --platforms=//tools:rbe_ubuntu1604-angular
 
-# Remote instance and caching
+# Remote instance.
 build:remote --remote_instance_name=projects/internal-200822/instances/default_instance
 build:remote --project_id=internal-200822
+
+# Remote caching
 build:remote --remote_cache=remotebuildexecution.googleapis.com
-build:remote --remote_executor=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
@@ -135,6 +121,31 @@ build:remote --remote_executor=remotebuildexecution.googleapis.com
 # 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.common.rc

@@ -1,15 +0,0 @@
-# Settings in this file should be OS agnostic. Use the bazel.<OS>.rc files for OS specific settings.
-
-# Don't be spammy in the logs
-build --noshow_progress
-
-# Print all the options that apply to the build.
-# This helps us diagnose which options override others
-# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
-build --announce_rc
-
-# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
-test --flaky_test_attempts=2
-
-# More details on failures
-build --verbose_failures=true

.circleci/bazel.rc

@@ -2,16 +2,29 @@
 # We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
 # See documentation in /docs/BAZEL.md
 
-# Import config items common to both Linux and Windows setups.
-# https://docs.bazel.build/versions/master/guide.html#bazelrc-syntax-and-semantics
-import %workspace%/.circleci/bazel.common.rc
-
 # Save downloaded repositories in a location that can be cached by CircleCI. This helps us
 # speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
 build --repository_cache=/home/circleci/bazel_repository_cache
 
+# Don't be spammy in the logs
+# TODO(gmagolan): Hide progress again once build performance improves
+# Presently, CircleCI can timeout during bazel test ... with the following
+# error: Too long with no output (exceeded 10m0s)
+# build --noshow_progress
+
+# Print all the options that apply to the build.
+# This helps us diagnose which options override others
+# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
+build --announce_rc
+
 # Workaround https://github.com/bazelbuild/bazel/issues/3645
 # Bazel doesn't calculate the memory ceiling correctly when running under Docker.
 # Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
 # https://circleci.com/docs/2.0/configuration-reference/#resource_class
 build --local_resources=14336,8.0,1.0
+
+# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
+test --flaky_test_attempts=2
+
+# More details on failures
+build --verbose_failures=true

.circleci/bazel.windows.rc

@@ -1,14 +0,0 @@
-# These options are enabled when running on CI
-# We do this by copying this file to $env:ProgramData\bazel.bazelrc at the start of the build.
-# See documentation in /docs/BAZEL.md
-
-# Import config items common to both Linux and Windows setups.
-# https://docs.bazel.build/versions/master/guide.html#bazelrc-syntax-and-semantics
-import %workspace%/.circleci/bazel.common.rc
-
-# Save downloaded repositories in a location that can be cached by CircleCI. This helps us
-# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
-build --repository_cache=C:/Users/circleci/bazel_repository_cache
-
-# All windows jobs run on master and should use http caching
-build --config=remote-http-caching

.circleci/env.sh

@@ -84,7 +84,7 @@ setPublicVar MATERIAL_REPO_TMP_DIR "/tmp/material2"
 setPublicVar MATERIAL_REPO_URL "https://github.com/angular/material2.git"
 setPublicVar MATERIAL_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI "config.yml".
-setPublicVar MATERIAL_REPO_COMMIT "a5cad10cf9ca5db84c307d38d5594c3f1d89ae2b"
+setPublicVar MATERIAL_REPO_COMMIT "18b9ef3f5529f0fa8f034944681486447af7b879"
 
 # Source `$BASH_ENV` to make the variables available immediately.
 source $BASH_ENV;

.circleci/windows-env.ps1

@@ -1,41 +0,0 @@
-# Install Bazel pre-reqs on Windows
-# https://docs.bazel.build/versions/master/install-windows.html
-# https://docs.bazel.build/versions/master/windows.html
-# Install MSYS2 and packages
-choco install msys2 --version 20180531.0.0 --no-progress --package-parameters "/NoUpdate"
-C:\tools\msys64\usr\bin\bash.exe -l -c "pacman --needed --noconfirm -S zip unzip patch diffutils git"
-
-# Add PATH modifications to the Powershell profile. This is the win equivalent of .bash_profile.
-# https://docs.microsoft.com/en-us/previous-versions//bb613488(v=vs.85)
-new-item -path $profile -itemtype file -force
-# Paths for nodejs, npm, yarn, and msys2. Use single quotes to prevent interpolation.
-# Add before the original path to use msys2 instead of the installed gitbash.
-Add-Content $profile '$Env:path = "${Env:ProgramFiles}\nodejs\;C:\Users\circleci\AppData\Roaming\npm\;${Env:ProgramFiles(x86)}\Yarn\bin\;C:\Users\circleci\AppData\Local\Yarn\bin\;C:\tools\msys64\usr\bin\;" + $Env:path'
-# Environment variables for Bazel
-Add-Content $profile '$Env:BAZEL_SH = "C:\tools\msys64\usr\bin\bash.exe"'
-
-# Get the bazel version devdep and store it in a global var for use in the circleci job.
-$bazelVersion = & ${Env:ProgramFiles}\nodejs\node.exe -e "console.log(require('./package.json').devDependencies['@bazel/bazel'])"
-# This is a tricky situation: we want $bazelVersion to be evaluated but not $Env:BAZEL_VERSION.
-# Formatting works https://stackoverflow.com/questions/32127583/expand-variable-inside-single-quotes
-$bazelVersionGlobalVar = '$Env:BAZEL_VERSION = "{0}"' -f $bazelVersion
-Add-Content $profile $bazelVersionGlobalVar
-
-# Remove the CircleCI checkout SSH override, because it breaks cloning repositories through Bazel.
-# See https://circleci.com/gh/angular/angular/401454 for an example.
-# TODO: is this really needed? Maybe there's a better way. It doesn't happen on Linux or on Codefresh.
-git config --global --unset url.ssh://git@github.com.insteadOf
-
-
-# These Bazel prereqs aren't needed because the CircleCI image already includes them.
-# choco install nodejs --version 10.16.0 --no-progress
-# choco install yarn --version 1.16.0 --no-progress
-# choco install vcredist2015 --version 14.0.24215.20170201
-
-# We don't need VS Build Tools for the tested bazel targets.
-# If it's needed again, uncomment these lines.
-# VS Build Tools are needed for Bazel C++ targets (like com_google_protobuf)
-# choco install visualstudio2019buildtools --version 16.1.2.0 --no-progress --package-parameters "--add Microsoft.VisualStudio.Workload.VCTools --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 --add Microsoft.Component.VC.Runtime.UCRTSDK --add Microsoft.VisualStudio.Component.Windows10SDK.17763"
-# Add-Content $profile '$Env:BAZEL_VC = "${Env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\BuildTools\VC\"'
-# Python is needed for Bazel Python targets
-# choco install python --version 3.5.1 --no-progress

.github/CODEOWNERS

@@ -368,44 +368,6 @@
 
 
 
-# ================================================
-#  Build, CI & Dev-infra Owners
-# ================================================
-
-/*                                                              @angular/dev-infra-framework
-/.buildkite/**                                                  @angular/dev-infra-framework
-/.circleci/**                                                   @angular/dev-infra-framework
-/.devcontainer/**                                               @angular/dev-infra-framework
-/.github/**                                                     @angular/dev-infra-framework
-/.vscode/**                                                     @angular/dev-infra-framework
-/docs/BAZEL.md                                                  @angular/dev-infra-framework
-/packages/*                                                     @angular/dev-infra-framework
-/packages/examples/test-utils/**                                @angular/dev-infra-framework
-/packages/private/**                                            @angular/dev-infra-framework
-/scripts/**                                                     @angular/dev-infra-framework
-/third_party/**                                                 @angular/dev-infra-framework
-/tools/build/**                                                 @angular/dev-infra-framework
-/tools/cjs-jasmine/**                                           @angular/dev-infra-framework
-/tools/gulp-tasks/**                                            @angular/dev-infra-framework
-/tools/ngcontainer/**                                           @angular/dev-infra-framework
-/tools/npm/**                                                   @angular/dev-infra-framework
-/tools/npm_workspace/**                                         @angular/dev-infra-framework
-/tools/public_api_guard/**                                      @angular/dev-infra-framework
-/tools/rxjs/**                                                  @angular/dev-infra-framework
-/tools/size-tracking/**                                         @angular/dev-infra-framework
-/tools/source-map-test/**                                       @angular/dev-infra-framework
-/tools/symbol-extractor/**                                      @angular/dev-infra-framework
-/tools/testing/**                                               @angular/dev-infra-framework
-/tools/ts-api-guardian/**                                       @angular/dev-infra-framework
-/tools/tslint/**                                                @angular/dev-infra-framework
-/tools/validate-commit-message/**                               @angular/dev-infra-framework
-/tools/yarn/**                                                  @angular/dev-infra-framework
-/tools/*                                                        @angular/dev-infra-framework
-*.BAZEL                                                         @angular/dev-infra-framework
-*.bzl                                                           @angular/dev-infra-framework
-
-
-
 # ================================================
 #  @angular/animations
 # ================================================
@@ -447,7 +409,6 @@
 /aio/content/guide/angular-compiler-options.md                  @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/aot-compiler.md                              @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/aot-metadata-errors.md                       @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/template-typecheck.md                       @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -456,7 +417,6 @@
 # ================================================
 
 /packages/compiler-cli/ngcc/**                                  @angular/fw-ngcc @angular/framework-global-approvers
-/aio/content/guide/ngcc.md                                      @angular/fw-ngcc @angular/framework-global-approvers
 
 
 
@@ -472,6 +432,7 @@
 /aio/content/guide/web-worker.md                                @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
+
 # ================================================
 #  @angular/core
 #  @angular/common (except @angular/common/http)
@@ -764,7 +725,6 @@ testing/**                                                      @angular/fw-test
 /packages/compiler/src/i18n/**                                  @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/compiler/src/render3/view/i18n/**                     @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/compiler-cli/src/extract_i18n.ts                      @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/localize/**                                           @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/i18n.md                                      @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/i18n/**                                   @angular/fw-i18n @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -883,13 +843,6 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/deprecations.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/migration-renderer.md                        @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/migration-undecorated-classes.md             @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-dynamic-flag.md                    @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-injectable.md                      @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-localize.md                        @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/migration-module-with-providers.md           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/updating-to-version-9.md                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/ivy-compatibility.md                         @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/ivy-compatibility-examples.md                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 # ================================================
@@ -926,10 +879,38 @@ testing/**                                                      @angular/fw-test
 
 
 # ================================================
-#  Material CI
+#  Build, CI & Dev-infra Owners
 # ================================================
 
-/tools/material-ci/**                                           @angular/fw-core @angular/framework-global-approvers
+/*                                                              @angular/dev-infra-framework
+/.buildkite/**                                                  @angular/dev-infra-framework
+/.circleci/**                                                   @angular/dev-infra-framework
+/.devcontainer/**                                               @angular/dev-infra-framework
+/.github/**                                                     @angular/dev-infra-framework
+/.vscode/**                                                     @angular/dev-infra-framework
+/docs/BAZEL.md                                                  @angular/dev-infra-framework
+/packages/*                                                     @angular/dev-infra-framework
+/packages/examples/test-utils/**                                @angular/dev-infra-framework
+/packages/private/**                                            @angular/dev-infra-framework
+/scripts/**                                                     @angular/dev-infra-framework
+/third_party/**                                                 @angular/dev-infra-framework
+/tools/build/**                                                 @angular/dev-infra-framework
+/tools/cjs-jasmine/**                                           @angular/dev-infra-framework
+/tools/gulp-tasks/**                                            @angular/dev-infra-framework
+/tools/ngcontainer/**                                           @angular/dev-infra-framework
+/tools/npm/**                                                   @angular/dev-infra-framework
+/tools/npm_workspace/**                                         @angular/dev-infra-framework
+/tools/public_api_guard/**                                      @angular/dev-infra-framework
+/tools/rxjs/**                                                  @angular/dev-infra-framework
+/tools/source-map-test/**                                       @angular/dev-infra-framework
+/tools/symbol-extractor/**                                      @angular/dev-infra-framework
+/tools/testing/**                                               @angular/dev-infra-framework
+/tools/ts-api-guardian/**                                       @angular/dev-infra-framework
+/tools/tslint/**                                                @angular/dev-infra-framework
+/tools/validate-commit-message/**                               @angular/dev-infra-framework
+/tools/yarn/**                                                  @angular/dev-infra-framework
+/tools/*                                                        @angular/dev-infra-framework
+*.bzl                                                           @angular/dev-infra-framework
 
 
 

.github/ISSUE_TEMPLATE/7-angular-components.md

@@ -1,13 +0,0 @@
----
-name: "\U0001F48EAngular Components"
-about: Issues and feature requests for Angular Components
-
----
-
-🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
-
-Please file any Angular Components issues at: https://github.com/angular/components/issues/new
-
-For the time being, we keep Angular Components issues in a separate repository.
-
-🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑

.github/ISSUE_TEMPLATE/7-angular-material.md

@@ -0,0 +1,13 @@
+---
+name: "\U0001F48EAngular Material"
+about: Issues and feature requests for Angular Material
+
+---
+
+🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑
+
+Please file any Angular Material issues at: https://github.com/angular/material2/issues/new
+
+For the time being, we keep Angular Material issues in a separate repository.
+
+🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑🛑

.github/angular-robot.yml

@@ -52,7 +52,6 @@ merge:
       - "packages/elements/schematics/**"
       - "packages/examples/**"
       - "packages/language-service/**"
-      - "packages/localize/**"
       - "packages/private/**"
       - "packages/service-worker/**"
       - "**/.gitignore"
@@ -62,15 +61,10 @@ merge:
       - "**/third_party/**"
       - "**/tsconfig-build.json"
       - "**/tsconfig.json"
-      - "**/rollup.config.js"
       - "**/BUILD.bazel"
       - "**/*.md"
       - "packages/**/integrationtest/**"
       - "packages/**/test/**"
-      - "packages/zone.js/*"
-      - "packages/zone.js/doc/**"
-      - "packages/zone.js/example/**"
-      - "packages/zone.js/scripts/**"
 
   # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
   mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.

.github/workflows/lock-closed.yml

@@ -1,14 +0,0 @@
-name: Lock closed inactive issues
-
-on:
-  schedule:
-    # Run at 16:00 every day
-    - cron: '0 16 * * *'
-
-jobs:
-  lock_closed:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: angular/dev-infra/github-actions/lock-closed@66462f6
-        with:
-          lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}

.gitignore

@@ -4,7 +4,6 @@
 /bazel-out
 /integration/bazel/bazel-*
 e2e_test.*
-*.log
 node_modules
 tools/gulp-tasks/cldr/cldr-data/
 
@@ -18,12 +17,9 @@ pubspec.lock
 .settings/
 .vscode/launch.json
 .vscode/settings.json
-.vscode/tasks.json
 *.swo
 modules/.settings
 modules/.vscode
-.vimrc
-.nvimrc
 
 # Don't check in secret files
 *secret.js
@@ -41,5 +37,3 @@ yarn-error.log
 # User specific bazel settings
 .bazelrc.user
 
-.notes.md
-baseline.json

.nvmrc

@@ -1 +1 @@
-10.13.0
+10.9.0

.vscode/README.md

@@ -1,25 +1,23 @@
 # VSCode Configuration
 
-This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings), [Tasks](https://code.visualstudio.com/docs/editor/tasks), [Launch Configurations](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations) and [Extension Recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) that the Angular team recommends using when working on this repository.
+This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) and [Extension Recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) that the Angular team recommends using when working on this repository.
 
 ## Usage
 
-To use the recommended configurations follow the steps below:
+To use the recommended settings follow the steps below:
 
-- install the recommneded extensions in `.vscode/extensions.json`
-- copy (or link) `.vscode/recommended-settings.json` to `.vscode/settings.json`
-- copy (or link) `.vscode/recommended-launch.json` to `.vscode/launch.json`
-- copy (or link) `.vscode/recommended-tasks.json` to `.vscode/tasks.json`
+- install <https://marketplace.visualstudio.com/items?itemName=xaver.clang-format>
+- copy `.vscode/recommended-settings.json` to `.vscode/settings.json`
 - restart the editor
 
-If you already have your custom workspace settings you should instead manually merge the file contents.
+If you already have your custom workspace settings you should instead manually merge the file content.
 
 This isn't an automatic process so you will need to repeat it when settings are updated.
 
 To see the recommended extensions select "Extensions: Show Recommended Extensions" in the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
 
-## Editing `.vscode/recommended-*.json` files
+## Editing `.vscode/recommended-settings.json`
 
-If you wish to add extra configuration items please keep in mind any modifications you make here will be used by many users.
+If you wish to add extra configuration items please keep in mind any settings you add here will be used by many users.
 
-Try to keep these settings/configuations to things that help facilitate the development process and avoid altering the user workflow whenever possible.
+Try to keep these settings to things that help facilitate the development process and avoid altering the user workflow whenever possible.

.vscode/recommended-launch.json

@@ -1,85 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Attach to bazel test ... --config=debug",
-      "type": "node",
-      "request": "attach",
-      "port": 9229,
-      "address": "localhost",
-      "restart": false,
-      "sourceMaps": true,
-      "localRoot": "${workspaceRoot}",
-      "remoteRoot": "${workspaceRoot}",
-      "stopOnEntry": false,
-      "timeout": 600000,
-    },
-    {
-      "name": "Attach to bazel test ... --config=debug (no source maps)",
-      "type": "node",
-      "request": "attach",
-      "port": 9229,
-      "address": "localhost",
-      "restart": false,
-      "sourceMaps": false,
-      "localRoot": "${workspaceRoot}",
-      "remoteRoot": "${workspaceRoot}",
-      "stopOnEntry": false,
-      "timeout": 600000,
-    },
-    {
-      "name": "IVY:packages/core/test/acceptance",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test/acceptance",
-        "--config=debug"
-      ],
-      "port": 9229,
-      "address": "localhost",
-      "restart": true,
-      "sourceMaps": true,
-      "timeout": 600000,
-    },
-    {
-      "name": "IVY:packages/core/test/render3",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test/render3",
-        "--config=debug"
-      ],
-      "port": 9229,
-      "address": "localhost",
-      "restart": true,
-      "sourceMaps": true,
-      "timeout": 600000,
-    },
-    {
-      "name": "IVY:packages/core/test",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test",
-        "--config=debug"
-      ],
-      "port": 9229,
-      "address": "localhost",
-      "restart": true,
-      "sourceMaps": true,
-      "timeout": 600000,
-    },
-  ]
-}

.vscode/recommended-tasks.json

@@ -1,113 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "IVY:packages/core/test/...",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test",
-        "packages/core/test/acceptance",
-        "packages/core/test/render3",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "VE:packages/core/test/...",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "packages/core/test",
-        "packages/core/test/acceptance",
-        "packages/core/test/render3",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "IVY:packages/core/test/acceptance",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test/acceptance",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "VE:packages/core/test/acceptance",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "packages/core/test/acceptance",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "IVY:packages/core/test",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "VE:packages/core/test",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "packages/core/test",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-    {
-      "label": "IVY:packages/core/test/render3",
-      "type": "shell",
-      "command": "${workspaceFolder}/node_modules/.bin/bazel",
-      "args": [
-        "test",
-        "--define=compile=aot",
-        "packages/core/test/render3",
-      ],
-      "group": "test",
-      "presentation": {
-        "reveal": "always",
-        "panel": "dedicated",
-      },
-    },
-  ],
-}

BUILD.bazel

@@ -19,9 +19,9 @@ filegroup(
     # do not sort
     srcs = [
         "@npm//:node_modules/core-js/client/core.js",
-        "//packages/zone.js/dist:zone.js",
-        "//packages/zone.js/dist:zone-testing.js",
-        "//packages/zone.js/dist:task-tracking.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.

CONTRIBUTING.md

@@ -201,7 +201,7 @@ Must be one of the following:
 * **test**: Adding missing tests or correcting existing tests
 
 ### Scope
-The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages).
+The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
 
 The following is the list of supported scopes:
 

WORKSPACE

@@ -21,12 +21,12 @@ http_archive(
     patch_args = ["-p1"],
     # Patch https://github.com/bazelbuild/rules_nodejs/pull/903
     patches = ["//tools:rollup_bundle_commonjs_ignoreGlobal.patch"],
-    sha256 = "3d7296d834208792fa3b2ded8ec04e75068e3de172fae79db217615bd75a6ff7",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.39.1/rules_nodejs-0.39.1.tar.gz"],
+    sha256 = "7c4a690268be97c96f04d505224ec4cb1ae53c2c2b68be495c9bd2634296a5cd",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.34.0/rules_nodejs-0.34.0.tar.gz"],
 )
 
 # Check the bazel version and download npm dependencies
-load("@build_bazel_rules_nodejs//:index.bzl", "check_bazel_version", "check_rules_nodejs_version", "node_repositories", "yarn_install")
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "check_rules_nodejs_version", "node_repositories", "yarn_install")
 
 # 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
@@ -54,10 +54,7 @@ Try running `yarn bazel` instead.
 #   - 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
 #   - 0.34.0 introduces protractor rule
-#   - 0.37.1 windows fixes
-#   - 0.38.2 Adds NpmPackageInfo & JSNamedModuleInfo providers
-#   - 0.38.3 all providers loaded from //:providers.bzl
-check_rules_nodejs_version(minimum_version_string = "0.38.3")
+check_rules_nodejs_version(minimum_version_string = "0.34.0")
 
 # Setup the Node.js toolchain
 node_repositories(
@@ -104,21 +101,20 @@ load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
 npm_bazel_protractor_dependencies()
 
 # Load karma dependencies
-load("@npm_bazel_karma//:package.bzl", "npm_bazel_karma_dependencies")
+load("@npm_bazel_karma//:package.bzl", "rules_karma_dependencies")
 
-npm_bazel_karma_dependencies()
+rules_karma_dependencies()
 
 # Setup the rules_webtesting toolchain
 load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
 
 web_test_repositories()
 
-load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
+# Temporary work-around for https://github.com/angular/angular/issues/28681
+# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
+load("//:browser_repositories.bzl", "browser_repositories")
 
-browser_repositories(
-    chromium = True,
-    firefox = True,
-)
+browser_repositories()
 
 # Setup the rules_typescript tooolchain
 load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")

aio/README.md

@@ -18,8 +18,8 @@ Here are the most important tasks you might need to use:
 
 * `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
 * `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`.
-* `yarn build-local-with-viewengine` - same as `build-local`, but in addition also turns on `ViewEngine` mode in aio.
-                                       (Note: Docs examples run in `ViewEngine` mode by default. To turn on `ivy` mode in examples, see `yarn boilerplate:add` below.)
+* `yarn build-with-ivy` - same as `build-local`, but in addition also turns on `ivy` mode in aio.
+                          (Note: To turn on `ivy` mode in examples, see `yarn boilerplate:add` below.)
 
 * `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
 * `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
@@ -34,18 +34,17 @@ Here are the most important tasks you might need to use:
 * `yarn docs-test` - run the unit tests for the doc generation code.
 
 * `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
-* `yarn boilerplate:add:ivy` - same as `boilerplate:add` but also turns on `ivy` mode.
+  - Add the option `--local` to use your local version of Angular contained in the "dist" folder.
+  - Add the option `--ivy` to turn on `ivy` mode.
 
 * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
 * `yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
 
-* `yarn example-e2e` - run all e2e tests for examples. Available options:
-  - `--setup`: generate boilerplate, force webdriver update & other setup, then run tests.
-  - `--local`: run e2e tests with the local version of Angular contained in the "dist" folder.
-               _Requires `--setup` in order to take effect._
-  - `--ivy`: run e2e tests in `ivy` mode.
-  - `--filter=foo`: limit e2e tests to those containing the word "foo".
+* `yarn example-e2e` - run all e2e tests for examples
+  - `yarn example-e2e --setup` - force webdriver update & other setup, then run tests
+  - `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
+  - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
 > **Note for Windows users**
 >

aio/aio-builds-setup/dockerbuild/scripts-js/package.json

@@ -34,7 +34,7 @@
     "shelljs": "^0.8.2",
     "source-map-support": "^0.5.9",
     "tar-stream": "^1.6.1",
-    "tslib": "^1.10.0"
+    "tslib": "^1.9.3"
   },
   "devDependencies": {
     "@types/body-parser": "^1.17.0",

aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock

@@ -2444,12 +2444,7 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tslib@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
-tslib@^1.8.0, tslib@^1.8.1:
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 

aio/angular.json

@@ -59,13 +59,7 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [],
-            "budgets": [
-              {
-                "type": "anyComponentStyle",
-                "maximumWarning": "6kb"
-              }
-            ]
+            "scripts": []
           },
           "configurations": {
             "fast": {

aio/content/examples/animations/src/app/open-close.component.3.ts

@@ -36,6 +36,9 @@ import { transAnimation } from './animations';
         })
       ])
     ])
+// #docregion runtime
+  ],
+// #enddocregion runtime
 // #enddocregion reusable
   templateUrl: 'open-close.component.html',
   styleUrls: ['open-close.component.css']

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

@@ -8,7 +8,7 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
 })
 export class AppComponent {
 
-  @ViewChild('bindingInput') bindingInput: ElementRef;
+  @ViewChild('bindingInput', { static: false }) bindingInput: ElementRef;
 
   isUnchanged = true;
 

aio/content/examples/component-interaction/src/app/countdown-parent.component.ts

@@ -39,7 +39,7 @@ export class CountdownLocalVarParentComponent { }
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {
 
-  @ViewChild(CountdownTimerComponent)
+  @ViewChild(CountdownTimerComponent, {static: false})
   private timerComponent: CountdownTimerComponent;
 
   seconds() { return 0; }

aio/content/examples/http/src/app/heroes/heroes.service.spec.ts

@@ -28,9 +28,9 @@ describe('HeroesService', () => {
 
     // Inject the http, test controller, and service-under-test
     // as they will be referenced by each test.
-    httpClient = TestBed.inject(HttpClient);
-    httpTestingController = TestBed.inject(HttpTestingController);
-    heroService = TestBed.inject(HeroesService);
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    heroService = TestBed.get(HeroesService);
   });
 
   afterEach(() => {
@@ -44,7 +44,7 @@ describe('HeroesService', () => {
     let expectedHeroes: Hero[];
 
     beforeEach(() => {
-      heroService = TestBed.inject(HeroesService);
+      heroService = TestBed.get(HeroesService);
       expectedHeroes = [
         { id: 1, name: 'A' },
         { id: 2, name: 'B' },

aio/content/examples/http/src/testing/http-client.spec.ts

@@ -27,8 +27,8 @@ describe('HttpClient testing', () => {
     });
 
     // Inject the http service and test controller for each test
-    httpClient = TestBed.inject(HttpClient);
-    httpTestingController = TestBed.inject(HttpTestingController);
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
   });
   // #enddocregion setup
   // #docregion afterEach

aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts

@@ -18,26 +18,26 @@ describe('providers App', () => {
     expect(page.getTitleText()).toEqual('Lazy loading feature modules');
   });
 
-  describe('Customers', function() {
+  describe('Customers list', function() {
     beforeEach(function() {
       customersButton.click();
     });
 
-    it('should show customers when the button is clicked', function() {
-        let customersMessage = element(by.css('app-customers > p'));
-        expect(customersMessage.getText()).toBe('customers works!');
+    it('should show customers list when the button is clicked', function() {
+        let customersMessage = element(by.css('app-customer-list > p'));
+        expect(customersMessage.getText()).toBe('customer-list works!');
     });
 
   });
 
-  describe('Orders', function() {
+  describe('Orders list', function() {
     beforeEach(function() {
       ordersButton.click();
     });
 
-    it('should show orders when the button is clicked', function() {
-        let ordersMessage = element(by.css('app-orders > p'));
-        expect(ordersMessage.getText()).toBe('orders works!');
+    it('should show orders list when the button is clicked', function() {
+        let ordersMessage = element(by.css('app-order-list > p'));
+        expect(ordersMessage.getText()).toBe('order-list works!');
     });
 
   });

aio/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts

@@ -21,16 +21,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'customer-app'`, async(() => {
+  it(`should have as title 'app works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('customer-app');
+    expect(app.title).toEqual('app works!');
   }));
 
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('customer-app');
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
   }));
 });

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  customer-list works!
+</p>

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CustomersComponent } from './customers.component';
+import { CustomerListComponent } from './customer-list.component';
 
 describe('CustomerListComponent', () => {
-  let component: CustomersComponent;
-  let fixture: ComponentFixture<CustomersComponent>;
+  let component: CustomerListComponent;
+  let fixture: ComponentFixture<CustomerListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CustomersComponent ]
+      declarations: [ CustomerListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CustomersComponent);
+    fixture = TestBed.createComponent(CustomerListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-list',
+  templateUrl: './customer-list.component.html',
+  styleUrls: ['./customer-list.component.css']
+})
+export class CustomerListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts

@@ -3,13 +3,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { CustomersComponent } from './customers.component';
+import { CustomerListComponent } from './customer-list/customer-list.component';
 
 
 const routes: Routes = [
   {
     path: '',
-    component: CustomersComponent
+    component: CustomerListComponent
   }
 ];
 

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.html

@@ -1,3 +0,0 @@
-<p>
-  customers works!
-</p>

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-customers',
-  templateUrl: './customers.component.html',
-  styleUrls: ['./customers.component.css']
-})
-export class CustomersComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts

@@ -3,14 +3,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CustomersRoutingModule } from './customers-routing.module';
-import { CustomersComponent } from './customers.component';
+import { CustomerListComponent } from './customer-list/customer-list.component';
 
 @NgModule({
   imports: [
     CommonModule,
     CustomersRoutingModule
   ],
-  declarations: [CustomersComponent]
+  declarations: [CustomerListComponent]
 })
 export class CustomersModule { }
 // #enddocregion customers-module

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  order-list works!
+</p>

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { OrdersComponent } from './orders.component';
+import { OrderListComponent } from './order-list.component';
 
 describe('OrderListComponent', () => {
-  let component: OrdersComponent;
-  let fixture: ComponentFixture<OrdersComponent>;
+  let component: OrderListComponent;
+  let fixture: ComponentFixture<OrderListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ OrdersComponent ]
+      declarations: [ OrderListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(OrdersComponent);
+    fixture = TestBed.createComponent(OrderListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-order-list',
+  templateUrl: './order-list.component.html',
+  styleUrls: ['./order-list.component.css']
+})
+export class OrderListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts

@@ -4,12 +4,12 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 // #docregion orders-routing-module-detail
-import { OrdersComponent } from './orders.component';
+import { OrderListComponent } from './order-list/order-list.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: OrdersComponent
+    component: OrderListComponent
   }
 ];
 // #enddocregion orders-routing-module-detail

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.html

@@ -1,3 +0,0 @@
-<p>
-  orders works!
-</p>

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-orders',
-  templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.css']
-})
-export class OrdersComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts

@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { OrdersRoutingModule } from './orders-routing.module';
-import { OrdersComponent } from './orders.component';
+import { OrderListComponent } from './order-list/order-list.component';
 
 @NgModule({
   imports: [
     CommonModule,
     OrdersRoutingModule
   ],
-  declarations: [OrdersComponent]
+  declarations: [OrderListComponent]
 })
 export class OrdersModule { }

aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts

@@ -34,7 +34,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
   comment = '';
 
   // Query for a CONTENT child of type `ChildComponent`
-  @ContentChild(ChildComponent) contentChild: ChildComponent;
+  @ContentChild(ChildComponent, {static: false}) contentChild: ChildComponent;
 
 // #enddocregion hooks
   constructor(private logger: LoggerService) {

aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts

@@ -35,7 +35,7 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
   private prevHero = '';
 
   // Query for a VIEW child of type `ChildViewComponent`
-  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
+  @ViewChild(ChildViewComponent, {static: false}) viewChild: ChildViewComponent;
 
 // #enddocregion hooks
   constructor(private logger: LoggerService) {

aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts

@@ -81,7 +81,7 @@ export class DoCheckParentComponent {
   hero: Hero;
   power: string;
   title = 'DoCheck';
-  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
+  @ViewChild(DoCheckComponent, {static: false}) childView: DoCheckComponent;
 
   constructor() { this.reset(); }
 

aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts

@@ -55,7 +55,7 @@ export class OnChangesParentComponent {
   hero: Hero;
   power: string;
   title = 'OnChanges';
-  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
+  @ViewChild(OnChangesComponent, {static: false}) childView: OnChangesComponent;
 
   constructor() {
     this.reset();

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts

@@ -6,7 +6,7 @@ describe('MyLibService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
 
   it('should be created', () => {
-    const service: MyLibService = TestBed.inject(MyLibService);
+    const service: MyLibService = TestBed.get(MyLibService);
     expect(service).toBeTruthy();
   });
 });

aio/content/examples/template-reference-variables/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { NgForm } from '@angular/forms';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  @ViewChild('itemForm') form: NgForm;
+  @ViewChild('itemForm', { static: false }) form: NgForm;
 
   private _submitMessage = '';
 

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

@@ -13,7 +13,7 @@ import { Hero } from './hero';
 })
 export class HeroFormComponent {
   @Input() hero: Hero;
-  @ViewChild('heroForm') form: NgForm;
+  @ViewChild('heroForm', {static: false}) form: NgForm;
 
   // tslint:disable-next-line:variable-name
   private _submitMessage = '';

aio/content/examples/testing/src/app/app.component.router.spec.ts

@@ -103,7 +103,7 @@ xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
 
   beforeEach(fakeAsync(() => {
     createComponent();
-    loader = TestBed.inject(NgModuleFactoryLoader);
+    loader = TestBed.get(NgModuleFactoryLoader);
     loader.stubbedModules = { expected: HeroModule };
     router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]);
   }));

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

@@ -46,21 +46,21 @@ describe('demo (with TestBed):', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({ providers: [ValueService] });
       // #enddocregion value-service-before-each
-      service = TestBed.inject(ValueService);
+      service = TestBed.get(ValueService);
       // #docregion value-service-before-each
     });
     // #enddocregion value-service-before-each, value-service-inject-before-each
 
     // #docregion value-service-inject-it
     it('should use ValueService', () => {
-      service = TestBed.inject(ValueService);
+      service = TestBed.get(ValueService);
       expect(service.getValue()).toBe('real value');
     });
     // #enddocregion value-service-inject-it
 
     it('can inject a default value when service is not provided', () => {
       // #docregion testbed-get-w-null
-      service = TestBed.inject(NotProvided, null); // service is null
+      service = TestBed.get(NotProvided, null); // service is null
       // #enddocregion testbed-get-w-null
     });
 
@@ -109,8 +109,8 @@ describe('demo (with TestBed):', () => {
         ]
       });
       // Inject both the service-to-test and its (spy) dependency
-      masterService = TestBed.inject(MasterService);
-      valueServiceSpy = TestBed.inject(ValueService);
+      masterService = TestBed.get(MasterService);
+      valueServiceSpy = TestBed.get(ValueService);
     });
     // #enddocregion master-service-before-each
 

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

@@ -206,7 +206,6 @@ function heroModuleSetup() {
       nameInput.value = 'quick BROWN  fOx';
 
       // dispatch a DOM event so that Angular learns of input value change.
-      // use newEvent utility function (not provided by Angular) for better browser compatibility
       nameInput.dispatchEvent(newEvent('input'));
 
       // Tell Angular to update the display binding through the title pipe

aio/content/examples/testing/src/app/hero/hero-detail.service.ts

@@ -15,7 +15,7 @@ export class HeroDetailService {
   // Returns a clone which caller may modify safely
   getHero(id: number | string): Observable<Hero> {
     if (typeof id === 'string') {
-      id = parseInt(id, 10);
+      id = parseInt(id as string, 10);
     }
     return this.heroService.getHero(id).pipe(
       map(hero => {

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

@@ -65,9 +65,9 @@ describe('HeroesService (with mocks)', () => {
 
     // Inject the http, test controller, and service-under-test
     // as they will be referenced by each test.
-    httpClient = TestBed.inject(HttpClient);
-    httpTestingController = TestBed.inject(HttpTestingController);
-    heroService = TestBed.inject(HeroService);
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    heroService = TestBed.get(HeroService);
   });
 
   afterEach(() => {
@@ -80,7 +80,7 @@ describe('HeroesService (with mocks)', () => {
     let expectedHeroes: Hero[];
 
     beforeEach(() => {
-      heroService = TestBed.inject(HeroService);
+      heroService = TestBed.get(HeroService);
       expectedHeroes = [
         { id: 1, name: 'A' },
         { id: 2, name: 'B' },

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

@@ -18,7 +18,7 @@ export class HeroService {
   constructor(private http: HttpClient) { }
 
   /** GET heroes from the server */
-  getHeroes(): Observable<Hero[]> {
+  getHeroes (): Observable<Hero[]> {
     return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
         tap(heroes => this.log(`fetched heroes`)),
@@ -29,7 +29,7 @@ export class HeroService {
   /** GET hero by id. Return `undefined` when id not found */
   getHero<Data>(id: number | string): Observable<Hero> {
     if (typeof id === 'string') {
-      id = parseInt(id, 10);
+      id = parseInt(id as string, 10);
     }
     const url = `${this.heroesUrl}/?id=${id}`;
     return this.http.get<Hero[]>(url)
@@ -46,14 +46,14 @@ export class HeroService {
   //////// Save methods //////////
 
   /** POST: add a new hero to the server */
-  addHero(hero: Hero): Observable<Hero> {
+  addHero (hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
-      tap((addedHero) => this.log(`added hero w/ id=${addedHero.id}`)),
+      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
     );
   }
   /** DELETE: delete the hero from the server */
-  deleteHero(hero: Hero | number): Observable<Hero> {
+  deleteHero (hero: Hero | number): Observable<Hero> {
     const id = typeof hero === 'number' ? hero : hero.id;
     const url = `${this.heroesUrl}/${id}`;
 
@@ -64,7 +64,7 @@ export class HeroService {
   }
 
   /** PUT: update the hero on the server */
-  updateHero(hero: Hero): Observable<any> {
+  updateHero (hero: Hero): Observable<any> {
     return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
       tap(_ => this.log(`updated hero id=${hero.id}`)),
       catchError(this.handleError<any>('updateHero'))
@@ -75,7 +75,7 @@ export class HeroService {
    * This error handler lets the app continue to run as if no error occurred.
    * @param operation - name of the operation that failed
    */
-  private handleError<T>(operation = 'operation') {
+  private handleError<T> (operation = 'operation') {
     return (error: HttpErrorResponse): Observable<T> => {
 
       // TODO: send the error to remote logging infrastructure

aio/content/examples/testing/src/app/model/testing/http-client.spec.ts

@@ -27,8 +27,8 @@ describe('HttpClient testing', () => {
     });
 
     // Inject the http service and test controller for each test
-    httpClient = TestBed.inject(HttpClient);
-    httpTestingController = TestBed.inject(HttpTestingController);
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
   });
   // #enddocregion setup
   // #docregion afterEach

aio/content/examples/testing/src/app/model/testing/test-hero.service.ts

@@ -42,9 +42,9 @@ export class TestHeroService extends HeroService {
 
   getHero(id: number | string): Observable<Hero> {
     if (typeof id === 'string') {
-      id = parseInt(id, 10);
+      id = parseInt(id as string, 10);
     }
-    const hero = this.heroes.find(h => h.id === id);
+    let hero = this.heroes.find(h => h.id === id);
     return this.lastResult = asyncData(hero);
   }
 

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

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

aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts

@@ -25,8 +25,8 @@ describe('WelcomeComponent (class only)', () => {
       ]
     });
     // inject both the component and the dependent service.
-    comp = TestBed.inject(WelcomeComponent);
-    userService = TestBed.inject(UserService);
+    comp = TestBed.get(WelcomeComponent);
+    userService = TestBed.get(UserService);
   });
   // #enddocregion class-only-before-each
 
@@ -93,7 +93,7 @@ describe('WelcomeComponent', () => {
     // #docregion setup
     // #docregion inject-from-testbed
     // UserService from the root injector
-    userService = TestBed.inject(UserService);
+    userService = TestBed.get(UserService);
     // #enddocregion inject-from-testbed
 
     //  get the "welcome" element by CSS selector (e.g., by class name)

aio/content/examples/testing/src/testing/activated-route-stub.ts

@@ -24,6 +24,6 @@ export class ActivatedRouteStub {
   /** Set the paramMap observables's next value */
   setParamMap(params?: Params) {
     this.subject.next(convertToParamMap(params));
-  }
+  };
 }
 // #enddocregion activated-route-stub

aio/content/examples/universal/server.ts

@@ -1,66 +1,61 @@
+// These are important and needed before anything else
 import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
+import { enableProdMode } from '@angular/core';
 
-import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
 import { join } from 'path';
 
-import { AppServerModule } from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
 
-// The Express app is exported so that it can be used by serverless Functions.
-export function app() {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/express-engine-ivy/browser');
+// Express server
+const app = express();
 
-  // #docregion ngExpressEngine
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
-  // #enddocregion ngExpressEngine
-  server.set('view engine', 'html');
-  server.set('views', distFolder);
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist');
 
-  // #docregion data-request
-  // TODO: implement data requests securely
-  server.get('/api/*', (req, res) => {
-    res.status(404).send('data requests are not supported');
-  });
-  // #enddocregion data-request
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
 
-  // #docregion static
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-  // #enddocregion static
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 
-  // #docregion navigation-request
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-  });
-  // #enddocregion navigation-request
+// #docregion ngExpressEngine
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+// #enddocregion ngExpressEngine
 
-  return server;
-}
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'browser'));
 
-function run() {
-  const port = process.env.PORT || 4000;
+// #docregion data-request
+// TODO: implement data requests securely
+app.get('/api/*', (req, res) => {
+  res.status(404).send('data requests are not supported');
+});
+// #enddocregion data-request
 
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
+// #docregion static
+// Server static files from /browser
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
+// #enddocregion static
 
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
-  run();
-}
+// #docregion navigation-request
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+// #enddocregion navigation-request
 
-export * from './src/main.server';
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node server listening on http://localhost:${PORT}`);
+});

aio/content/examples/universal/src/main.server.ts

@@ -1,10 +1 @@
-import { enableProdMode } from '@angular/core';
-
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
 export { AppServerModule } from './app/app.server.module';
-export { renderModule, renderModuleFactory } from '@angular/platform-server';

aio/content/examples/universal/tsconfig.server.json

@@ -1,15 +1,16 @@
 {
-  "extends": "./tsconfig.app.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/app-server",
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
     "module": "commonjs",
-    "types": ["node"]
+    "types": []
   },
-  "files": [
-    "src/main.server.ts",
-    "server.ts"
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
   ],
   "angularCompilerOptions": {
-    "entryModule": "./src/app/app.server.module#AppServerModule"
+    "entryModule": "src/app/app.server.module#AppServerModule"
   }
 }

aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json

@@ -6,10 +6,7 @@
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "es2015",
-      "dom"
-    ],
+    "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
     "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true
@@ -19,8 +16,5 @@
     "node_modules/*",
     "**/*-aot.ts",
     "aot/**/*"
-  ],
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}
+  ]
+}

aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json

@@ -19,7 +19,6 @@
   ],
 
   "angularCompilerOptions": {
-    "skipMetadataEmit" : true,
-    "enableIvy": false,
+    "skipMetadataEmit" : true
  }
 }

aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json

@@ -6,10 +6,7 @@
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "es2015",
-      "dom"
-    ],
+    "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
     "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true
@@ -18,8 +15,5 @@
   "exclude": [
     "node_modules/*",
     "**/*-aot.ts"
-  ],
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}
+  ]
+}

aio/content/examples/upgrade-phonecat-3-final/tsconfig.json

@@ -6,10 +6,7 @@
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "es2015",
-      "dom"
-    ],
+    "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
     "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true
@@ -18,8 +15,5 @@
   "exclude": [
     "node_modules/*",
     "**/*-aot.ts"
-  ],
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}
+  ]
+}

aio/content/examples/user-input/src/app/keyup.components.ts

@@ -28,7 +28,7 @@ export class KeyUpComponent_v1 {
   // #docregion key-up-component-1-class
 
   onKey(event: KeyboardEvent) { // with type info
-    this.values += (event.target as HTMLInputElement).value + ' | ';
+    this.values += (<HTMLInputElement>event.target).value + ' | ';
   }
 // #docregion key-up-component-1-class-no-type
 }

aio/content/examples/visual-studio-2015/tsconfig.json

@@ -13,8 +13,5 @@
       "node_modules/@types"
     ]
   },
-  "compileOnSave": true,
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}
+  "compileOnSave": true
+}

aio/content/guide/ajs-quick-reference.md

@@ -1148,7 +1148,9 @@ The Angular code is shown using TypeScript.
       <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="class"></code-example>
 
 
-      In Angular, you create a component class to contain the data model and control methods. Use the TypeScript <code>export</code> keyword to export the class so that the functionality can be imported into NgModules.
+      In Angular, you create a component class.
+
+      NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
 
       For more information, see the [Components](guide/architecture#components)
       section of the [Architecture Overview](guide/architecture) page.

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

@@ -44,7 +44,7 @@ For example:
 }
 ```
 
-For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+For more informaton, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
 
 ## Template options
 
@@ -77,20 +77,12 @@ When `false`, disables this rewriting, requiring the rewriting to be done manual
 
 When `true`, the compiler does not check the TypeScript version and does not report an error when an unsupported version of TypeScript is used. Not recommended, as unsupported versions of TypeScript might have undefined behavior. Default is false.
 
-### `enableIvy`
-
-Enables the [Ivy](guide/ivy) compilation and rendering pipeline. Default is `true`, as of version 9. In version 9, you can [opt out of Ivy](guide/ivy#opting-out-of-angular-ivy) to continue using the previous compiler, View Engine.
-
-For library projects generated with the CLI, the `prod` configuration default is false in version 9.
-
 ### `enableResourceInlining`
 
 When true, replaces the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
 
 When enabled, the `.js` output of `ngc` does not include any lazy-loaded template or style URLs.
 
-For library projects generated with the CLI, the dev configuration default is true.
-
 
 {@a enablelegacytemplate}
 
@@ -126,9 +118,9 @@ would be `"index.d.ts"`.
 
 ### `fullTemplateTypeCheck`
 
-When true (recommended), enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler, which uses TypeScript to validate binding expressions. For more information, see [Template type checking](guide/template-typecheck).
+When true (recommended), enables the [binding expression validation](guide/aot-compiler#binding-expression-validation) phase of the template compiler, which uses TypeScript to validate binding expressions.
 
-Default is false, but when you use the CLI command `ng new`, it is set to true by default in the generated project's configuration.
+Default is currently false.
 
 ### `generateCodeForLibraries`
 
@@ -162,8 +154,6 @@ When true, does not emit `.ngfactory.js` and `.ngstyle.js` files. This turns off
 
 Can be used to instruct the template compiler to produce `.metadata.json` files for distribution with an `npm` package while avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to `npm`.
 
-For library projects generated with the CLI, the dev configuration default is true.
-
 ### `strictMetadataEmit`
 
 When true, reports an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false`.
@@ -180,21 +170,10 @@ If the client of a library intends to use a symbol in an annotation, the templat
 This option allows detection of these errors during the build phase of
 the library and is used, for example, in producing Angular libraries themselves.
 
-For library projects generated with the CLI, the dev configuration default is true.
-
 ### `strictInjectionParameters`
 
 When true (recommended), reports an error for a supplied parameter whose injection type cannot be determined. When false (currently the default), constructor parameters of classes marked with `@Injectable` whose type cannot be resolved produce a warning.
 
-When you use the CLI command `ng new`, it is set to true by default in the generated project's configuration.
-
-### `strictTemplates`
-
-When true, enables [strict template type checking](guide/template-typecheck#strict-mode) in Angular version 9. Strict mode is only available when using [Ivy](guide/ivy).
-
-Additional strictness flags allow you to enable and disable specific types of strict template type checking. See [troubleshooting template errors](guide/template-typecheck#troubleshooting-template-errors).
-
-
 ### `trace`
 
 When true, prints extra information while compiling templates. Default is false.

aio/content/guide/animations.md

@@ -69,10 +69,8 @@ Let's animate a simple transition that changes a single HTML element from one st
 
 In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
-  </div>
+<figure>
+<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
 </figure>
 
 ### Animation state and styles
@@ -95,7 +93,7 @@ In the `closed` state, shown below, the button has a height of 100 pixels, an op
 
 In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
 
-To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
+To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an `animate()` function.
 
 
 Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function.
@@ -168,10 +166,8 @@ The `trigger()` function describes the property name to watch for changes. When
 
 In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
-  </div>
+<figure>
+<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
 </figure>
 
 <div class="alert is-helpful">

aio/content/guide/aot-compiler.md

@@ -144,7 +144,7 @@ describes the JSON format as a collection of TypeScript interfaces.
 {@a expression-syntax}
 ### Expression syntax limitations
 
-The AOT collector only understands a subset of JavaScript.
+The  AOT collector only understands a subset of JavaScript.
 Define metadata objects with the following limited syntax:
 
 <style>
@@ -467,7 +467,7 @@ export class AppComponent {
 The collector can represent a function call or object creation with `new` as long as the syntax is valid.
 The compiler, however, can later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
 
-The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions.
+The compiler can only create instances certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions.
 * New instances
 
    The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.
@@ -564,25 +564,10 @@ It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize
 {@a binding-expression-validation}
 ## Phase 3: Template type checking
 
-One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime.
 In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.
-
 Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
 (see [Angular Compiler Options](guide/angular-compiler-options)).
 
-<div class="alert is-helpful>
-
-In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect.
-
-As a result, templates that previously compiled under View Engine can fail type checking under Ivy. This can happen because Ivy's stricter checking catches genuine errors, or because application code is not typed correctly, or because the application uses libraries in which typings are inaccurate or not specific enough.
-
-This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option.
-We do expect to make strict type checking the default in the future.
-
-<!-- For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-type-checking). -->
-
-</div>
-
 Template validation produces error messages when a type error is detected in a template binding
 expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
 file.
@@ -674,7 +659,7 @@ There is no convenient way to describe this constraint to TypeScript and the tem
 
 The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.
 
-In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
+In this example it is recommended to include the checking of `address` in the `*ngIf`as shown below:
 
 ```typescript
   @Component({
@@ -692,80 +677,6 @@ In this example it is recommended to include the checking of `address` in the `*
   }
 ```
 
-### Input setter coercion
-
-Occasionally it is desirable for the `@Input` of a directive or component to alter the value bound to it, typically using a getter/setter pair for the input. As an example, consider this custom button component:
-
-Consider the following directive:
-
-```typescript
-@Component({
-  selector: 'submit-button',
-  template: `
-    <div class="wrapper">
-      <button [disabled]="disabled">Submit</button>'
-    </div>
-  `,
-})
-class SubmitButton {
-  private _disabled: boolean;
-
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
-  set disabled(value: boolean) {
-    this._disabled = value;
-  }
-}
-```
-
-Here, the `disabled` input of the component is being passed on to the `<button>` in the template. All of this works as expected, as long as a `boolean` value is bound to the input. But, suppose a consumer uses this input in the template as an attribute:
-
-```html
-<submit-button disabled></submit-button>
-```
-
-This has the same effect as the binding:
-
-```html
-<submit-button [disabled]="''"></submit-button>
-```
-
-At runtime, the input will be set to the empty string, which is not a `boolean` value. Angular component libraries that deal with this problem often "coerce" the value into the right type in the setter:
-
-```typescript
-set disabled(value: boolean) {
-  this._disabled = (value === '') || value;
-}
-```
-
-It would be ideal to change the type of `value` here, from `boolean` to `boolean|''`, to match the set of values which are actually accepted by the setter. Unfortunately, TypeScript requires that both the getter and setter have the same type, so if the getter should return a `boolean` then the setter is stuck with the narrower type.
-
-If the consumer has Angular's strictest type checking for templates enabled, this creates a problem: the empty string `''` is not actually assignable to the `disabled` field, which will create a type error when the attribute form is used.
-
-As a workaround for this problem, Angular supports checking a wider, more permissive type for `@Input`s than is declared for the input field itself. This is enabled by adding a static property with the `ngAcceptInputType_` prefix to the component class:
-
-```typescript
-class SubmitButton {
-  private _disabled: boolean;
-
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
-  set disabled(value: boolean) {
-    this._disabled = (value === '') || value;
-  }
-
-  static ngAcceptInputType_disabled: boolean|'';
-}
-```
-
-This field does not need to have a value. Its existence communicates to the Angular type checker that the `disabled` input should be considered as accepting bindings that match the type `boolean|''`. The suffix should be the `@Input` _field_ name.
-
-Care should be taken that if an `ngAcceptInputType_` override is present for a given input, then the setter should be able to handle any values of the overridden type.
-
 ### Disabling type checking using `$any()`
 
 Disable checking of a binding expression by surrounding the expression in a call to the [`$any()` cast pseudo-function](guide/template-syntax).

aio/content/guide/app-shell.md

@@ -21,10 +21,11 @@ For an existing application, you have to manually add the `RouterModule` and def
 Use the CLI to automatically create the app shell.
 
 <code-example language="bash">
-ng generate app-shell
+ng generate app-shell --client-project my-app --universal-project server-app
 </code-example>
 
-* `client-project` takes the name of your client application.
+* `my-app` takes the name of your client application.
+* `server-app` takes the name of the Universal (or server) application.
 
 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.
 

aio/content/guide/architecture-components.md

@@ -35,7 +35,7 @@ Here's an example of basic metadata for `HeroListComponent`.
 
 This example shows some of the most useful `@Component` configuration options:
 
-* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains `<app-hero-list></app-hero-list>`, then
+* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's  HTML contains `<app-hero-list></app-hero-list>`, then
 Angular inserts an instance of the `HeroListComponent` view between those tags.
 
 * `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*.
@@ -51,10 +51,8 @@ You define a component's view with its companion template. A template is a form
 
 Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
-  </div>
+<figure>
+<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
 </figure>
 
 A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
@@ -83,10 +81,8 @@ Angular supports *two-way data binding*, a mechanism for coordinating the parts
 
 The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
-  </div>
+<figure>
+<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
 </figure>
 
 This example from the `HeroListComponent` template uses three of these forms.
@@ -114,18 +110,14 @@ as with event binding.
 Angular processes *all* data bindings once for each JavaScript event cycle,
 from the root of the application component tree through all child components.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
-  </div>
+<figure>
+  <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
 </figure>
 
 Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
-  </div>
+<figure>
+  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
 </figure>
 
 ### Pipes

aio/content/guide/architecture-modules.md

@@ -35,20 +35,20 @@ Here's a simple root NgModule definition.
 
 NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
-  </div>
+<figure>
+
+<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
+
 </figure>
 
 <br class="clear">
 
 A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
-  </div>
+<figure>
+
+<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
+
 </figure>
 
 <br class="clear">

aio/content/guide/architecture-services.md

@@ -70,10 +70,8 @@ When all requested services have been resolved and returned, Angular can call th
 
 The process of `HeroService` injection looks something like this.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
-  </div>
+<figure>
+  <img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
 </figure>
 
 ### Providing services
@@ -84,7 +82,7 @@ or you can register providers with specific modules or components.
 You register providers in the metadata of the service (in the `@Injectable()` decorator),
 or in the `@NgModule()` or `@Component()` metadata
 
-* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of HeroService class definition.
+* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. The tutorial uses this method to register the provider of  HeroService class definition.
 
    ```
    @Injectable({

aio/content/guide/architecture.md

@@ -113,10 +113,8 @@ To define navigation rules, you associate *navigation paths* with your component
 
 You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/architecture/overview2.png" alt="overview">
-  </div>
+<figure>
+  <img src="generated/images/guide/architecture/overview2.png" alt="overview">
 </figure>
 
 * Together, a component and template define an Angular view.

aio/content/guide/attribute-directives.md

@@ -142,7 +142,7 @@ Begin by adding `HostListener` to the list of imported symbols.
 
 <code-example path="attribute-directives/src/app/highlight.directive.2.ts" header="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
 
-Then add two event handlers that respond when the mouse enters or leaves,
+Then add two eventhandlers that respond when the mouse enters or leaves,
 each adorned by the `HostListener` decorator.
 
 <code-example path="attribute-directives/src/app/highlight.directive.2.ts" header="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods"></code-example>
@@ -175,10 +175,8 @@ Here's the updated directive in full:
 Run the app and confirm that the background color appears when
 the mouse hovers over the `p` and disappears as it moves out.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
-  </div>
+<figure>
+  <img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
 </figure>
 
 {@a bindings}
@@ -249,7 +247,7 @@ You get the best of both worlds: the property name you want and the binding synt
 <code-example path="attribute-directives/src/app/app.component.html" header="src/app/app.component.html (color)" region="color"></code-example>
 
 Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
-If someone neglects to bind to `appHighlight`, highlight the host element in red:
+If someone neglects to bind to `appHighlightColor`, highlight the host element in red:
 
 <code-example path="attribute-directives/src/app/highlight.directive.3.ts" header="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter"></code-example>
 
@@ -273,10 +271,8 @@ Revise the `AppComponent.color` so that it has no initial value.
 
 Here are the harness and directive in action.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
-  </div>
+<figure>
+  <img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
 </figure>
 
 {@a second-property}
@@ -311,10 +307,8 @@ because you made it _public_ with the `@Input` decorator.
 
 Here's how the harness should work when you're done coding.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
-  </div>
+<figure>
+  <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
 </figure>
 
 ## Summary

aio/content/guide/bazel.md

@@ -73,7 +73,7 @@ Now you'll find new files in the Angular workspace:
 * `/WORKSPACE` tells Bazel how to download external dependencies.
 * `/BUILD.bazel` and `/src/BUILD.bazel` tell Bazel about your source code.
 
-You can find a full-featured example with custom Bazel configurations at https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular.
+You can find a full-featured example with custom Bazel configurations at http://github.com/angular/angular-bazel-example.
 
 Documentation for using Bazel for frontend projects is linked from https://docs.bazel.build/versions/master/bazel-and-javascript.html.
 

aio/content/guide/browser-support.md

@@ -256,6 +256,30 @@ Some features of Angular may require additional polyfills.
 
   </tr>
 
+  <tr style="vertical-align: top">
+
+    <td>
+
+     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>
+
+    <td>
+
+      [Intl API](guide/browser-support#intl)
+
+    </td>
+
+    <td>
+      All but Chrome, Firefox, Edge, IE 11 and Safari 10
+    </td>
+
+  </tr>
+
   <tr style="vertical-align: top">
 
     <td>
@@ -515,7 +539,7 @@ For example:
      */
     // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
     // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
-    // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+    // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
     /*
      * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js

aio/content/guide/build.md

@@ -328,7 +328,7 @@ For more information, see [Autoprefixer documentation](https://autoprefixer.gith
 You can use the [proxying support](https://webpack.js.org/configuration/dev-server/#devserver-proxy) in the `webpack` dev server to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
 For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps.
 
-1. Create a file `proxy.conf.json` in your project's `src/` folder.
+1. Create a file `proxy.conf.json` in the projects `src/` folder, in the same directory as `package.json`.
 
 1. Add the following content to the new proxy file:
     ```
@@ -411,7 +411,7 @@ Proxy log levels are `info` (the default), `debug`, `warn`, `error`, and `silent
 
 ### Proxy multiple entries
 
-You can proxy multiple entries to the same target by defining the configuration in JavaScript.
+You can  proxy multiple entries to the same target by defining the configuration in JavaScript.
 
 Set the proxy configuration file to `proxy.conf.js` (instead of `proxy.conf.json`), and specify configuration files as in the following example.
 

aio/content/guide/cli-builder.md

@@ -30,7 +30,7 @@ This object contains a Boolean `success` field and an optional `error` field tha
 
 Angular provides some builders that are used by the CLI for commands such as `ng build`, `ng test`, and `ng lint`.
 Default target configurations for these and other built-in CLI builders can be found (and customized) in the "architect" section of the [workspace configuration file](guide/workspace-config), `angular.json`.
-You can also extend and customize Angular by creating your own builders, which you can run using the [`ng run` CLI command](cli/run).
+You can also extend and customize Angular by creating your own builders, which you can run  using the [`ng run` CLI command](cli/run).
 
 ### Builder project structure
 
@@ -59,7 +59,8 @@ npm install @example/my-builder
 As an example, let’s create a builder that executes a shell command.
 To create a builder, use the `createBuilder()` CLI Builder function, and return a `BuilderOutput` object.
 
-<code-example language="typescript" header="/command/index.ts">
+```
+
 import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
 
 export default createBuilder(_commandBuilder);
@@ -71,13 +72,13 @@ function _commandBuilder(
   ...
 }
 
-</code-example>
+```
 
 Now let’s add some logic to it.
 The following code retrieves the command and arguments from the user options, spawns the new process, and waits for the process to finish.
 If the process is successful (returns a code of 0), it resolves the return value.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -94,8 +95,7 @@ function _commandBuilder(
     });
   });
 }
-
-</code-example>
+```
 
 ### Handling output
 
@@ -105,7 +105,7 @@ This also allows the builder itself to be executed in a separate process, even i
 
 We can retrieve a Logger instance from the context.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder, BuilderContext } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -130,7 +130,7 @@ function _commandBuilder(
   });
 }
 
-</code-example>
+```
 
 ### Progress and status reporting
 
@@ -144,10 +144,10 @@ You can see an [example](https://github.com/angular/angular-cli/blob/ba21c855c0c
 
 In our example, the shell command either finishes or is still executing, so there’s no need for a progress report, but we can report status so that a parent builder that called our builder would know what’s going on.
 Use the `BuilderContext.reportStatus()` method to generate a status string of any length.
-(Note that there’s no guarantee that a long string will be shown entirely; it could be cut to fit the UI that displays it.)
+(Note that there’s no guarantee that a long string will be shown entirely; it could be cut to fit the  UI that displays it.)
 Pass an empty string to remove the status.
 
-<code-example language="typescript" header="/command/index.ts">
+```
 import { BuilderOutput, createBuilder, BuilderContext } from '@angular-devkit/architect';
 import * as childProcess from 'child_process';
 
@@ -174,8 +174,7 @@ function _commandBuilder(
     });
   });
 }
-
-</code-example>
+```
 
 ## Builder input
 
@@ -192,7 +191,8 @@ For our example builder, we expect the `options` value to be a `JsonObject` with
 
 We can provide the following schema for type validation of these values.
 
-<code-example language="json" header="command/schema.json">
+<code-example language="json">
+
 {
   "$schema": "http://json-schema.org/schema",
   "type": "object",
@@ -222,7 +222,7 @@ To link our builder implementation with its schema and name, we need to create a
 
 Create a file named `builders.json` file that looks like this.
 
-<code-example language="json" header="builders.json">
+<code-example language="json">
 
 {
   "builders": {
@@ -238,7 +238,7 @@ Create a file named `builders.json` file that looks like this.
 
 In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
 
-<code-example language="json" header="package.json">
+<code-example language="json">
 
 {
   "name": "@example/command-runner",
@@ -253,11 +253,11 @@ In the `package.json` file, add a `builders` key that tells the Architect tool w
 </code-example>
 
 The official name of our builder is now ` @example/command-runner:command`.
-The first part of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builders.json` file).
+The first part  of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builders.json` file).
 
 Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`.
 
-<code-example language="typescript" header="/command/index.ts">
+<code-example language="typescript">
     context.reportStatus(`Executing "${options.command}"...`);
     const child = childProcess.spawn(options.command, options.args, { stdio: 'pipe' });
 
@@ -267,14 +267,14 @@ Using one of our `options` is very straightforward, we did this in the previous
 
 A builder must have a defined target that associates it with a specific input configuration and [project](guide/glossary#project).
 
-Targets are defined in the `angular.json` [CLI configuration file](guide/workspace-config).
+Targets are defined in the `angular.json` [workspace configuration file](guide/workspace-config).
 A target specifies the builder to use, its default options configuration, and named alternative configurations.
 The Architect tool uses the target definition to resolve input options for a given run.
 
 The  `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'lint'.
-By default, for example, the `build` command runs the builder  `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in   `angular.json`.
+By default, for example, the `build` command runs the builder  `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 {
   "myApp": {
     ...
@@ -311,7 +311,7 @@ You might also add more alternative configurations to the `build` target, to def
 
 #### Target strings
 
-The generic `ng run` CLI command takes as its first argument a target string of the form *project:target[:configuration]*.
+The  generic `ng run` CLI command takes as its first argument a target string of the form *project:target[:configuration]*.
 
 * *project*: The name of the Angular CLI project that the target is associated with.
 
@@ -361,7 +361,7 @@ npm install @example/command-runner
 
 If we create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 
 {
   // ...
@@ -413,7 +413,7 @@ We need to update the `angular.json` file to add a target for this builder to th
 
 * The configurations key is optional, we'll leave it out for now.
 
-<code-example language="json" header="angular.json">
+<code-example language="json">
 
 {
   "projects": {
@@ -493,7 +493,7 @@ Use integration testing for your builder, so that you can use the Architect sche
 Here’s an example of a test that runs the command builder.
 The test uses the builder to run the `ls` command, then validates that it ran successfully and listed the proper files.
 
-<code-example language="typescript" header="command/index_spec.ts">
+<code-example language="typescript">
 
 import { Architect } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';

aio/content/guide/comparing-observables.md

@@ -26,8 +26,8 @@ Observables are often compared to promises. Here are some key differences:
 new Observable((observer) => { subscriber_fn });
 // initiate execution
 observable.subscribe(() => {
-  // observer handles notifications
-});
+      // observer handles notifications
+    });
 </code-example>
 
 * Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation.
@@ -37,8 +37,8 @@ observable.subscribe(() => {
 new Promise((resolve, reject) => { executer_fn });
 // handle return value
 promise.then((value) => {
-  // handle result here
-});
+      // handle result here
+    });
 </code-example>
 
 ### Chaining
@@ -80,7 +80,7 @@ obs.subscribe(() => {
 
 <code-example hideCopy>
 promise.then(() => {
-  throw Error('my error');
+      throw Error('my error');
 });
 </code-example>
 
@@ -314,3 +314,6 @@ An observable produces values over time. An array is created as a static set of
     </td>
   </tr>
 </table>
+
+
+

aio/content/guide/complex-animation-sequences.md

@@ -2,7 +2,7 @@
 
 #### Prerequisites
 
-A basic understanding of the following concepts:
+A basic understanding of the  following concepts:
 
 * [Introduction to Angular animations](guide/animations)
 * [Transition and triggers](guide/transition-and-triggers)

aio/content/guide/component-interaction.md

@@ -50,10 +50,8 @@ and each iteration's `hero` instance to the child's `hero` property.
 The running application displays three heroes:
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
 </figure>
 
 
@@ -96,10 +94,8 @@ Here's the `NameParentComponent` demonstrating name variations including a name
 
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
 </figure>
 
 
@@ -129,7 +125,7 @@ Detect and act upon changes to input property values with the `ngOnChanges()` me
 
 You may prefer this approach to the property setter when watching multiple, interacting input properties.
 
-Learn about `ngOnChanges()` in the [Lifecycle Hooks](guide/lifecycle-hooks) chapter.
+Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chapter.
 
 </div>
 
@@ -156,10 +152,8 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b
 Here's the output of a button-pushing sequence:
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
 </figure>
 
 
@@ -212,10 +206,8 @@ The framework passes the event argument&mdash;represented by `$event`&mdash;to t
 and the method processes it:
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
 </figure>
 
 
@@ -276,10 +268,8 @@ uses interpolation to display the child's `seconds` property.
 Here we see the parent and child working together.
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
 </figure>
 
 
@@ -431,10 +421,8 @@ the parent `MissionControlComponent` and the `AstronautComponent` children,
 facilitated by the service:
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
-  </div>
+<figure>
+  <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
 </figure>
 
 

aio/content/guide/creating-libraries.md

@@ -1,4 +1,4 @@
-# Creating Libraries
+# Creating Libraries
 
 You can create and publish new libraries to extend Angular functionality. If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
 
@@ -13,15 +13,9 @@ A simple example might be a button that sends users to your company website, tha
 Use the Angular CLI to generate a new library skeleton with the following command:
 
 <code-example language="bash">
- ng new my-workspace --create-application=false
- cd my-workspace
  ng generate library my-lib
 </code-example>
 
-<div class="alert is-helpful">
-     <p>You can use the monorepo model to use the same workspace for multiple projects. See <a href="guide/file-structure#multiple-projects">Setting up for a multi-project workspace</a>.</p>
-</div>
-
 This creates the `projects/my-lib` folder in your workspace, which contains a component and a service inside an NgModule.
 The workspace configuration file, `angular.json`, is updated with a project of type 'library'.
 
@@ -47,7 +41,7 @@ You can build, test, and lint the project with CLI commands:
  ng lint my-lib
 </code-example>
 
-Notice that the configured builder for the project is different from the default builder for app projects.
+Notice that the configured builder for the  project is different from the default builder for app projects.
 This builder, among other things, ensures that the library is always built with the [AoT compiler](guide/aot-compiler), without the need to specify the `--prod` flag.
 
 To make library code reusable you must define a public API for it. This "user layer" defines what is available to consumers of your library. A user of your library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path.
@@ -181,7 +175,7 @@ For instance, if you clone your git repository and run `npm install`, your edito
 <div class="alert is-helpful">
 
 When you import something from a library in an Angular app, Angular looks for a mapping between the library name and a location on disk.
-When you install a library package, the mapping is in the `node_modules` folder. When you build your own library, it has to find the mapping in your `tsconfig` paths.
+When you install a library package, the mapping is in the `node_modules` folder. When you build your own library, it has to find the mapping  in your `tsconfig` paths.
 
 Generating a library with the Angular CLI automatically adds its path to the `tsconfig` file.
 The Angular CLI uses the `tsconfig` paths to tell the build system where to find the library.
@@ -194,23 +188,8 @@ You can rebuild your library whenever you make changes to it, but this extra ste
 *Incremental builds* functionality improves the library-development experience.
 Every time a file is changed a partial build is performed that emits the amended files.
 
-Incremental builds can be run as a background process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command:
+Incremental builds can be run as a backround process in your dev environment. To take advantage of this feature add the `--watch` flag to the build command:
 
 <code-example language="bash">
 ng build my-lib --watch
 </code-example>
-
-<div class="alert is-important">
-
-The CLI `build` command uses a different builder and invokes a different build tool for libraries than it does for applications.
-
-* The build system for apps, `@angular-devkit/build-angular`, is based on `webpack`, and is included in all new Angular CLI projects.
-* The build system for libraries is based on `ng-packagr`. It is only added to your dependencies when you add a library using `ng generate library my-lib`.
-
-The two build systems support different things, and even where they support the same things, they do those things differently.
-This means that the TypeScript source can result in different JavaScript code in a built library than it would in a built application.
-
-For this reason, an app that depends on a library should only use TypeScript path mappings that point to the *built library*.
-TypeScript path mappings should *not* point to the library source `.ts` files.
-
-</div>

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

@@ -40,10 +40,8 @@ and the framework resolves the nested dependencies.
 
 When all dependencies are in place, `AppComponent` displays the user information.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
 </figure>
 
 {@a service-scope}
@@ -133,10 +131,8 @@ The template displays this data-bound property.
 Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
 and confirm that the three `HeroBioComponent` instances have their own cached hero data.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
 </figure>
 
 {@a qualify-dependency-lookup}
@@ -195,10 +191,8 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template.
 
 The result is shown below, with the hero's telephone number from `HeroContactComponent` projected above the hero description.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
 </figure>
 
 
@@ -227,10 +221,8 @@ When the property is marked as optional, Angular sets `loggerService` to null an
 
 Here's `HeroBiosAndContactsComponent` in action.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
 </figure>
 
 
@@ -240,10 +232,8 @@ until it finds the logger at the `AppComponent` level.
 The logger logic kicks in and the hero display updates
 with the "!!!" marker to indicate that the logger was found.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
 </figure>
 
 
@@ -272,7 +262,7 @@ Providers can also be scoped by injector through constructor parameter decorator
 
 </code-example>
 
-Using the `@Self` decorator, the injector only looks at the component's injector for its providers. The `@SkipSelf` decorator allows you to skip the local injector and look up in the hierarchy to find a provider that satisfies this dependency. The `sessionStorageService` instance interacts with the `BrowserStorageService` using the `sessionStorage` browser API, while the `localStorageService` skips the local injector and uses the root `BrowserStorageService` that uses the `localStorage` browser API.
+Using the `@Self` decorator, the injector only looks at the component's injector for its providers. The `@SkipSelf` decorator allows you to skip the local injector and look up in the hierarchy to find a provider that satisfies this dependency. The `sessionStorageService` instance interacts with the `BrowserStorageService` using the `sessionStorage` browser API, while the `localStorageService` skips the local injector and uses the root `BrowserStorageService` that uses the `localStorage` browswer API.
 
 {@a component-element}
 
@@ -304,10 +294,8 @@ first without a value (yielding the default color) and then with an assigned col
 
 The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
 </figure>
 
 {@a providers}
@@ -359,10 +347,8 @@ You learned about some other methods in [Dependency Providers](guide/dependency-
 The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
 It's visually simple: a few properties and the logs produced by a logger.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
 </figure>
 
 The code behind it customizes how and where the DI framework provides dependencies.
@@ -474,10 +460,8 @@ The following example puts `MinimalLogger` to use in a simplified version of `He
 
 The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
-    </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
 </figure>
 
 
@@ -488,10 +472,8 @@ Behind the scenes, Angular sets the `logger` parameter to the full service regis
 
 This is illustrated in the following image, which displays the logging date.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
 </figure>
 
 </div>
@@ -574,7 +556,7 @@ as the token for a provider of `LoggerService`.
 
 An abstract class is usually a base class that you can extend.
 In this app, however there is no class that inherits from `MinimalLogger`.
-The `LoggerService` and the `DateLoggerService` could have inherited from `MinimalLogger`,
+The `LoggerService` and the `DateLoggerService`could have inherited from `MinimalLogger`,
 or they could have implemented it instead, in the manner of an interface.
 But they did neither.
 `MinimalLogger` is used only as a dependency injection token.
@@ -586,7 +568,7 @@ an interface is not a valid DI token because it is a TypeScript artifact that do
 Use this abstract class interface to get the strong typing of an interface,
 and also use it as a provider token in the way you would a normal class.
 
-A class interface should define *only* the members that its consumers are allowed to call.
+A  class interface should define *only* the members that its consumers are allowed to call.
 Such a narrowing interface helps decouple the concrete class from its consumers.
 
 
@@ -645,10 +627,8 @@ and then pass them down to the base class through the constructor.
 In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`
 to display a *sorted* list of heroes.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
 </figure>
 
 The `HeroesBaseComponent` can stand on its own.

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

@@ -145,10 +145,8 @@ the same way you've done it before.
 
 Here's *Alex* and family in action.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
 </figure>
 
 
@@ -203,10 +201,8 @@ which *is* what parent means.
 Here's *Alice*, *Barry*, and family in action.
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
-  </div>
+<figure>
+  <img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
 </figure>
 
 
@@ -233,7 +229,7 @@ A component that could serve as a parent *should* implement the class interface
 
 
 
-Doing so adds clarity to the code. But it's not technically necessary.
+Doing so adds clarity to the code.  But it's not technically necessary.
 Although `AlexComponent` has a `name` property, as required by its `Base` class,
 its class signature doesn't mention `Parent`.
 
@@ -283,3 +279,4 @@ Here's a revised version that defaults to `parent` but also accepts an optional
 And here's how you could use it with a different parent type.
 
 <code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="beth-providers" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
+

aio/content/guide/dependency-injection.md

@@ -114,7 +114,7 @@ from the injector of its parent NgModule, or from the `root` injector.
 
 * Learn more about the [different kinds of providers](guide/dependency-injection-providers).
 
-* Learn more about how the [injector hierarchy](guide/hierarchical-dependency-injection) works.
+* Learn more about  how the [injector hierarchy](guide/hierarchical-dependency-injection) works.
 
 </div>
 
@@ -229,7 +229,7 @@ Here is the revised `HeroService` that injects `Logger`, side by side with the p
 
 The constructor asks for an injected instance of `Logger` and stores it in a private field called `logger`. The `getHeroes()` method logs a message when asked to fetch heroes.
 
-Notice that the `Logger` service also has the `@Injectable()` decorator, even though it might not need its own dependencies. In fact, the `@Injectable()` decorator is **required for all services**.
+Notice that the `Logger` service also has the `@Injectable()` decorator, even though it might not need its own dependencies. In fact, the `@Injectable()` decorator is **required  for all services**.
 
 When Angular creates a class whose constructor has parameters, it looks for type and injection metadata about those parameters so that it can inject the correct service.
 If Angular can't find that parameter information, it throws an error.
@@ -293,7 +293,7 @@ value of `logger` to null.
 
 <div class="alert is-helpful">
 
-`@Inject()` and `@Optional()` are _parameter decorators_. They alter the way the DI framework provides a dependency, by annotating the dependency parameter on the constructor of the class that requires the dependency.
+`@Inject()` and `@Optional()` are _parameter decorators_.  They alter the way the DI framework provides a dependency, by annotating the dependency parameter on the constructor of the class that requires the dependency.
 
 Learn more about parameter decorators in [Hierarchical Dependency Injectors](guide/hierarchical-dependency-injection).
 
@@ -314,3 +314,5 @@ Dive deeper into the capabilities and advanced feature of the Angular DI system
 * Learn more about [DI tokens and providers](guide/dependency-injection-providers).
 
 * [Dependency Injection in Action](guide/dependency-injection-in-action) is a cookbook for some of the interesting things you can do with DI.
+
+

aio/content/guide/deployment.md

@@ -79,7 +79,6 @@ In the table below, you can find a list of packages which implement deployment f
 | [Now](https://zeit.co/now)                                    | [`@zeit/ng-deploy`](https://npmjs.org/package/@zeit/ng-deploy)                 |
 | [Netlify](https://www.netlify.com/)                           | [`@netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy) |
 | [GitHub pages](https://pages.github.com/)                     | [`angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)         |
-| [NPM](https://npmjs.com/)                                     | [`ngx-deploy-npm`](https://npmjs.org/package/ngx-deploy-npm)                   |
 
 If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your app.
 
@@ -140,7 +139,7 @@ Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpa
 
 ## Server configuration
 
-This section covers changes you may have to make to the server or to files deployed on the server.
+This section covers changes you may have make to the server or to files deployed to the server.
 
 {@a fallback}
 
@@ -202,54 +201,6 @@ modified to serve `index.html`:
   ```
 
 
-* [Golang](https://golang.org/): create a Golang server using ([gorilla/mux](https://github.com/gorilla/mux)) with a basic Golang file that configures the server `main.go`:
-
-  ``` go
-  package main
-
-  import (
-  	"net/http"
-  	"os"
-  	"github.com/gorilla/mux"
-  )
-  var httpPort = "80"
-  var folderDist = "./dist" // ng build output folder
-
-  func serverHandler(w http.ResponseWriter, r *http.Request) {
-  	if _, err := os.Stat(folderDist + r.URL.Path); err != nil {
-  		http.ServeFile(w, r, folderDist+"/index.html")
-  		return
-  	}
-  	http.ServeFile(w, r, folderDist+r.URL.Path)
-  }
-
-  func main() {
-  	r := mux.NewRouter()
-  	r.NotFoundHandler = r.NewRoute().HandlerFunc(serverHandler).GetHandler()
-  	http.Handle("/", r)
-  	http.ListenAndServe(":"+httpPort, nil)
-  }
-  ```
-
-* [Ruby](https://www.ruby-lang.org/): create a Ruby server using ([sinatra](http://sinatrarb.com/)) with a basic Ruby file that configures the server `server.rb`:
-
-  ``` ruby
-  require 'sinatra'
-
-  # Folder structure
-  # .
-  # -- server.rb
-  # -- public
-  #    |-- dist
-  #        |-- index.html
-
-  get '/' do
-      folderDir = settings.public_folder + '/dist'  # ng build output folder
-      send_file File.join(folderDir, 'index.html')
-  end
-  ```
-
-
 * [IIS](https://www.iis.net/): add a rewrite rule to `web.config`, similar to the one shown
 [here](http://stackoverflow.com/a/26152011/2116927):
 
@@ -353,7 +304,7 @@ Configure the Angular Router to defer loading of all other modules (and their as
 or by [_lazy loading_](guide/router#asynchronous-routing "Lazy loading")
 them on demand.
 
-<div class="callout is-helpful">
+<div class="callout is-helpful>
 
 <header>Don't eagerly import something from a lazy-loaded module</header>
 
@@ -434,10 +385,8 @@ showing exactly which classes are included in the bundle.
 
 Here's the output for the _main_ bundle of an example app called `cli-quickstart`.
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
-  </div>
+<figure>
+  <img src="generated/images/guide/deployment/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
 </figure>
 
 {@a base-tag}
@@ -475,7 +424,7 @@ Even as JavaScript continues to evolve, with new features being introduced, not
 
 The code you write in development using TypeScript is compiled and bundled into ES2015, the JavaScript syntax that is compatible with most browsers.
 All modern browsers support ES2015 and beyond, but in most cases, you still have to account for users accessing your application from a browser that doesn't.
-When targeting older browsers, [polyfills](guide/browser-support#polyfills) can bridge the gap by providing functionality that doesn't exist in the older versions of JavaScript supported by those browsers.
+When targeting older browsers, [polyfills](guide/browser-support#polyfills) can bridge the gap by providing functionality that  doesn't exist in the older versions of JavaScript supported by those browsers.
 
 To maximize compatibility, you could ship a single bundle that includes all your compiled code, plus any polyfills that may be needed.
 Users with modern browsers, however, shouldn't have to pay the price of increased bundle size that comes with polyfills they don't need.
@@ -669,7 +618,7 @@ In `angular.json` add two new configuration sections under the `build` and `serv
      ...
     },
     "es5": {
-      "browserTarget": "&lt;app-name&gt;:build:es5"
+      "browserTarget": "<app-name>:build:es5"
     }
   }
 },
@@ -741,7 +690,7 @@ Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5)
 		  ...
 	  },
     "es5": {
-      "devServerTarget": "&lt;app-name&gt;:serve:es5"
+      "devServerTarget": "<app-name>:serve:es5"
     }
   }
 },

aio/content/guide/deprecations.md

@@ -29,40 +29,34 @@ v5 - v8
 v6 - v9
 v7 - v10
 v8 - v11
-v9 - v12
 -->
 
 
-| Area                          | API or Feature                                                                | May be removed in |
-| ----------------------------- | ---------------------------------------------------------------------------   | ----------------- |
-| `@angular/common`             | [`ReflectiveInjector`](#reflectiveinjector)                                   | <!--v8--> v10 |
-| `@angular/core`               | [`CollectionChangeRecord`](#core)                                             | <!--v7--> v10 |
-| `@angular/core`               | [`DefaultIterableDiffer`](#core)                                              | <!--v7--> v10 |
-| `@angular/core`               | [`ReflectiveKey`](#core)                                                      | <!--v8--> v10 |
-| `@angular/core`               | [`RenderComponentType`](#core)                                                | <!--v7--> v10 |
-| `@angular/core`               | [`ViewEncapsulation.Native`](#core)                                           | <!--v6--> v10 |
-| `@angular/core`               | [`WtfScopeFn`](api/core/WtfScopeFn)                                           | <!--v8--> v10 |
-| `@angular/core`               | [`wtfCreateScope`](api/core/wtfCreateScope)                                   | <!--v8--> v10 |
-| `@angular/core`               | [`wtfStartTimeRange`](api/core/wtfStartTimeRange)                             | <!--v8--> v10 |
-| `@angular/core`               | [`wtfEndTimeRange`](api/core/wtfEndTimeRange)                                 | <!--v8--> v10 |
-| `@angular/core`               | [`wtfLeave`](api/core/wtfLeave)                                               | <!--v8--> v10 |
-| `@angular/core`               | [`ModuleWithProviders` without a generic](#moduleWithProviders)               | <!--v9--> v10 |
-| `@angular/forms`              | [`ngModel` with reactive forms](#ngmodel-reactive)                            | <!--v6--> v10 |
-| `@angular/router`             | [`preserveQueryParams`](#router)                                              | <!--v7--> v10 |
-| `@angular/upgrade`            | [`@angular/upgrade`](#upgrade)                                                | <!--v8--> v10 |
-| `@angular/upgrade`            | [`getAngularLib`](#upgrade-static)                                            | <!--v8--> v10 |
-| `@angular/upgrade`            | [`setAngularLib`](#upgrade-static)                                            | <!--v8--> v10 |
-| `@angular/platform-webworker` | [All entry points](api/platform-webworker)                                    | <!--v8--> v10 |
-| template syntax               | [`<template`>](#template-tag)                                                 | <!--v7--> v10 |
-| polyfills                     | [reflect-metadata](#reflect-metadata)                                         | <!--v8--> v10 |
-| npm package format            | [`esm5` and `fesm5` entry-points in @angular/* npm packages](guide/deprecations#esm5-fesm5) | <!-- v9 --> v10 |
-| `@angular/core`               | [`defineInjectable`](#core)                                                   | <!--v8--> v11 |
-| `@angular/core`               | [`entryComponents`](api/core/NgModule#entryComponents)                        | <!--v9--> v11 |
-| `@angular/core`               | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS)       | <!--v9--> v11 |
-| `@angular/router`             | [`loadChildren` string syntax](#loadChildren)                                 | <!--v9--> v11 |
-| `@angular/core/testing`       | [`TestBed.get`](#testing)                                                     | <!--v9--> v12 |
-| `@angular/router`             | [`ActivatedRoute` params and `queryParams` properties](#activatedroute-props) | unspecified |
-| template syntax               | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector)            | <!--v7--> unspecified |
+| Area | API or Feature | May be removed in |
+| ---- | -------------- | ----------------- |
+| `@angular/common` | [Pipes using Intl API](#i18n-pipes) | <!--v8--> v9 |
+| `@angular/common` | [`ReflectiveInjector`](#reflectiveinjector) | <!--v8--> v9 |
+| `@angular/core` | [`CollectionChangeRecord`](#core) | <!--v7--> v9 |
+| `@angular/core` | [`DefaultIterableDiffer`](#core) | <!--v7--> v9 |
+| `@angular/core` | [`ReflectiveKey`](#core) | <!--v8--> v9 |
+| `@angular/core` | [`RenderComponentType`](#core) | <!--v7--> v9 |
+| `@angular/core` | [`Renderer`](#core) | <!--v7--> v9 |
+| `@angular/core` | [`RootRenderer`](#core) | <!--v7--> v9 |
+| `@angular/core` | [`ViewEncapsulation.Native`](#core) | v9 |
+| `@angular/forms` | [`ngForm` element selector](#ngform) | v9 |
+| `@angular/forms` | [`NgFormSelectorWarning`](#forms) | v9 |
+| `@angular/forms` | [`ngModel` with reactive forms](#ngmodel-reactive) | v9 |
+| `@angular/router` | [`preserveQueryParams`](#router) | <!--v7--> v9 |
+| `@angular/upgrade` | [`@angular/upgrade`](#upgrade) | <!--v8--> v9 |
+| `@angular/upgrade` | [`getAngularLib`](#upgrade-static) | <!--v8--> v9 |
+| `@angular/upgrade` | [`setAngularLib`](#upgrade-static) | <!--v8--> v9 |
+| template syntax | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector) | <!--v7--> unspecified |
+| template syntax | [`<template`>](#template-tag) | <!--v7--> v9 |
+| service worker | [`versionedFiles` setting](#sw-versionedfiles)| v9 |
+| polyfills | [reflect-metadata](#reflect-metadata) | <!--v8--> v9 |
+| `@angular/core` | [`defineInjectable`](#core) | v11 |
+| `@angular/router` | [`loadChildren` string syntax](#loadChildren) | v11 |
+| `@angular/router` | [`ActivatedRoute` params and `queryParams` properties](#activatedroute-props) | unspecified |
 
 
 
@@ -78,6 +72,21 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
 
 </div>
 
+
+
+{@a common}
+### @angular/common
+
+
+| API | Replacement | Deprecation announced | Notes |
+| --- | ----------- | --------------------- | ----- |
+| [`DeprecatedI18NPipesModule`](api/common/DeprecatedI18NPipesModule) | [`CommonModule`](api/common/CommonModule#pipes) | v5 | See [Pipes](#i18n-pipes) |
+ | [`DeprecatedCurrencyPipe`](api/common/DeprecatedCurrencyPipe) | [`CurrencyPipe`](api/common/CurrencyPipe) | v5  | See [Pipes](#i18n-pipes) |
+ | [`DeprecatedDatePipe`](api/common/DeprecatedDatePipe) | [`DatePipe`](api/common/DatePipe) | v5  | See [Pipes](#i18n-pipes) |
+ | [`DeprecatedDecimalPipe`](api/common/DeprecatedDecimalPipe) | [`DecimalPipe`](api/common/DecimalPipe) | v5  | See [Pipes](#i18n-pipes) |
+ | [`DeprecatedPercentPipe`](api/common/DeprecatedPercentPipe) | [`PercentPipe`](api/common/PercentPipe) | v5 | See [Pipes](#i18n-pipes) |
+
+
 {@a core}
 ### @angular/core
 
@@ -85,30 +94,18 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
 | --- | ----------- | --------------------- | ----- |
 | [`CollectionChangeRecord`](api/core/CollectionChangeRecord) | [`IterableChangeRecord`](api/core/IterableChangeRecord) | v4 | none |
 | [`DefaultIterableDiffer`](api/core/DefaultIterableDiffer) | n/a | v4 | Not part of public API. |
+| [`defineInjectable`](api/core/defineInjectable) | `ɵɵdefineInjectable` | v8 | Used only in generated code. No source code should depend on this API. |
 | [`ReflectiveInjector`](api/core/ReflectiveInjector) | [`Injector.create`](api/core/Injector#create)  | v5 | See [`ReflectiveInjector`](#reflectiveinjector) |
 | [`ReflectiveKey`](api/core/ReflectiveKey) | none | v5 | none |
+| [`RenderComponentType`](api/core/RenderComponentType) | [`RendererType2`](api/core/RendererType2) and  [`Renderer2`](api/core/Renderer2) | v4 | none |
+| [`Renderer`](api/core/Renderer) | [`Renderer2`](api/core/Renderer2) | v4 | none |
+| [`RootRenderer`](api/core/RootRenderer) | [`RendererFactory2`](api/core/RendererFactory2) | v4 | none |
 | [`ViewEncapsulation.Native`](api/core/ViewEncapsulation#Native) | [`ViewEncapsulation.ShadowDom`](api/core/ViewEncapsulation#ShadowDom) | v6 | Use the native encapsulation mechanism of the renderer. See [view.ts](https://github.com/angular/angular/blob/3e992e18ebf51d6036818f26c3d77b52d3ec48eb/packages/core/src/metadata/view.ts#L32).
-| [`defineInjectable`](api/core/defineInjectable) | `ɵɵdefineInjectable` | v8 | Used only in generated code. No source code should depend on this API. |
 | [`WtfScopeFn`](api/core/WtfScopeFn) | none | v8 | See [Web Tracing Framework](#wtf) |
 | [`wtfCreateScope`](api/core/wtfCreateScope) | none | v8 | See [Web Tracing Framework](#wtf) |
 | [`wtfStartTimeRange`](api/core/wtfStartTimeRange) | none | v8 | See [Web Tracing Framework](#wtf) |
 | [`wtfEndTimeRange`](api/core/wtfEndTimeRange) | none | v8 | See [Web Tracing Framework](#wtf) |
 | [`wtfLeave`](api/core/wtfLeave) | none | v8 | See [Web Tracing Framework](#wtf) |
-| [`entryComponents`](api/core/NgModule#entryComponents) | none | v9 | See [`entryComponents`](#entryComponents) |
-| [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | none | v9 | See [`ANALYZE_FOR_ENTRY_COMPONENTS`](#entryComponents) |
-| `ModuleWithProviders` without a generic |  `ModuleWithProviders` with a generic             | v9 | See [`ModuleWithProviders` section](#moduleWithProviders) |
-
-
-
-
-
-
-{@a testing}
-### @angular/core/testing
-
-| API | Replacement | Deprecation announced | Notes |
-| --- | ----------- | --------------------- | ----- |
-| [`TestBed.get`](api/core/testing/TestBed#get) | [`TestBed.inject`](api/core/testing/TestBed#inject) | v9 | Same behavior, but type safe. |
 
 
 {@a forms}
@@ -116,7 +113,7 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
 
 | API | Replacement | Deprecation announced | Notes |
 | --- | ----------- | --------------------- | ----- |
-| [`ngModel` with reactive forms](#ngmodel-reactive) | See [FormControlDirective usage notes](api/forms/FormControlDirective#use-with-ngmodel) | v6 | none |
+| [`NgFormSelectorWarning`](api/forms/NgFormSelectorWarning) | n/a | v6 | See [ngForm](#ngform). |
 
 {@a router}
 ### @angular/router
@@ -185,6 +182,27 @@ The `<template>` tag was deprecated in v4 to avoid colliding with the DOM's elem
 
 
 
+{@a ngform}
+### ngForm element selector
+
+Support for using `ngForm` element selector was deprecated in v6.
+It has been deprecated to be consistent with other core Angular selectors, which are typically written in kebab-case.
+
+Deprecated:
+
+```
+<ngForm #myForm="ngForm">
+```
+
+Replacement:
+
+```
+<ng-form #myForm="ngForm">
+```
+
+The [`NgFormSelectorWarning`](api/forms/NgFormSelectorWarning) directive is solely used to display warnings when the deprecated `ngForm` selector is used.
+
+
 {@a ngmodel-reactive}
 ### ngModel with reactive forms
 
@@ -193,6 +211,14 @@ Support for using the `ngModel` input property and `ngModelChange` event with re
 For more information, see the usage notes for [`FormControlDirective`](api/forms/FormControlDirective#use-with-ngmodel) and [`FormControlName`](api/forms/FormControlName#use-with-ngmodel).
 
 
+{@a sw-versionedfiles}
+### Service worker versionedFiles
+
+In the service worker configuration file `ngsw-config.json`, `versionedFiles` and `files` have the same behavior. As of v6, `versionedFiles` is deprecated; use `files` instead.
+
+For more information, see [Service Worker Configuration](guide/service-worker-config#assetgroups).
+
+
 {@a reflectiveinjector}
 ### ReflectiveInjector
 
@@ -210,6 +236,23 @@ After:
 Injector.create({providers});
 ```
 
+{@a i18n-pipes}
+### Pipes using Intl API
+
+<!--
+From https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
+-->
+
+Angular used to rely on the browser to provide number, date, and currency formatting using browser i18n APIs. This practice meant that most apps needed to use a polyfill, users were seeing inconsistent results across browsers, and common formats (such as the currency pipe) didn’t match developer expectations out of the box.
+
+In version 4.3, Angular introduced new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills. These pipes use the Unicode Common Locale Data Repository (CLDR) instead of the JS Intl API to provide extensive locale support.
+
+In version 5.0.0, Angular updated its standard pipes to use the CLRD implementation.
+At that time, Angular also added [`DeprecatedI18NPipesModule`](api/common/DeprecatedI18NPipesModule) and related APIs to provide limited-time access to the old behavior. If you need to use these `Deprecated*` pipes, see [Angular change log](https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes) and the [Date Formats mappings](https://docs.google.com/spreadsheets/d/12iygt-_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0 "Date Formats Google sheet").
+
+Reminder: If you use these `Deprecated*` pipes, you should migrate to the current APIs listed above as soon as possible. These deprecated APIs are candidates for removal in version 9.
+
+
 {@a loadChildren}
 ### loadChildren string syntax
 
@@ -346,124 +389,31 @@ As of Angular version 8, all  `platform-webworker` APIs are deprecated.
 This includes both packages: `@angular/platform-webworker` and
 `@angular/platform-webworker-dynamic`.
 
-{@a entryComponents}
-### `entryComponents` and `ANALYZE_FOR_ENTRY_COMPONENTS` no longer required
-Previously, the `entryComponents` array in the `NgModule` definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the `entryComponents` array can be removed from existing module declarations. The same applies to the `ANALYZE_FOR_ENTRY_COMPONENTS` injection token.
 
-{@a moduleWithProviders}
-### `ModuleWithProviders` type without a generic
+## Angular version 9 schematics
 
-Some Angular libraries, such as `@angular/router` and `@ngrx/store`, implement APIs that return a type called `ModuleWithProviders` (typically via a method named `forRoot()`).
-This type represents an `NgModule` along with additional providers.
-Angular version 9 deprecates use of `ModuleWithProviders` without an explicitly generic type, where the generic type refers to the type of the `NgModule`.
-In a future version of Angular, the generic will no longer be optional.
-
-
-If you're using the CLI, `ng update` should [migrate your code automatically](guide/migration-module-with-providers).
-If you're not using the CLI, you can add any missing generic types to your application manually.
-For example:
-
-**Before**
-```ts
-@NgModule({...})
-export class MyModule {
-  static forRoot(config: SomeConfig): ModuleWithProviders {
-    return {
-      ngModule: SomeModule,
-      providers: [
-        {provide: SomeConfig, useValue: config}
-      ]
-    };
-  }
-}
-```
-
-**After**
-
-```ts
-@NgModule({...})
-export class MyModule {
-  static forRoot(config: SomeConfig): ModuleWithProviders<SomeModule> {
-    return {
-      ngModule: SomeModule,
-      providers: [
-        {provide: SomeConfig, useValue: config }
-      ]
-    };
-  }
-}
-```
-
-{@a esm5-fesm5}
-### `esm5` and `fesm5` code formats in @angular/* npm packages
-
-As of Angular v8, the CLI primarily consumes the `fesm2015` variant of the code distributed via `@angular/*` npm packages.
-This renders the `esm5` and `fesm5` distributions obsolete and unnecessary, adding bloat to the package size and slowing down npm installations.
-
-The future removal of this distribution will have no impact on CLI users, unless they modified their build configuration to explicitly consume these code distributions.
-
-Any application still relying on the `esm5` and `fesm5` as the input to its build system will need to ensure that the build pipeline is capable of accepting JavaScript code conforming to ECMAScript 2015 (ES2015) language specification.
-
-Note that this change doesn't make existing libraries distributed in this format incompatible with the Angular CLI.
-The CLI will fall back and consume libraries in less desirable formats if others are not available.
-However, we do recommend that libraries ship their code in ES2015 format in order to make builds faster and build output smaller.
-
-In practical terms, the `package.json` of all `@angular` packages will change in the following way:
-
-**Before**:
-```
-{
-  "name": "@angular/core",
-  "version": "9.0.0",
-  "main": "./bundles/core.umd.js",
-  "module": "./fesm5/core.js",
-  "es2015": "./fesm2015/core.js",
-  "esm5": "./esm5/core.js",
-  "esm2015": "./esm2015/core.js",
-  "fesm5": "./fesm5/core.js",
-  "fesm2015": "./fesm2015/core.js",
-  ...
-}
-```
-
-**After**:
-```
-{
-  "name": "@angular/core",
-  "version": "10.0.0",
-  "main": "./bundles/core.umd.js",
-  "module": "./fesm2015/core.js",
-  "es2015": "./fesm2015/core.js",
-  "esm2015": "./esm2015/core.js",
-  "fesm2015": "./fesm2015/core.js",
-  ...
-}
-```
-
-For more information about the npm package format, see the [Angular Package Format spec](https://goo.gl/jB3GVv).
+{@a renderer-to-renderer2}
+### Migrating from `Renderer` to `Renderer2`
 
+See the [dedicated migration guide for Renderer](guide/migration-renderer).
 
+{@a undecorated-classes}
+### Migrating undecorated classes
+  See the [dedicated migration guide for undecorated classes](guide/migration-undecorated-classes).
 
 {@a removed}
 ## Removed APIs
 
-The following APIs have been removed starting with version 9.0.0*:
+The following APIs have been removed starting with version 8.0.0:
 
-| Package          | API            | Replacement | Notes |
-| ---------------- | -------------- | ----------- | ----- |
-| `@angular/core`  | [`Renderer`](https://v8.angular.io/api/core/Renderer) | [`Renderer2`](https://angular.io/api/core/Renderer2) | [Migration guide](guide/migration-renderer) |
-| `@angular/core`  | [`RootRenderer`](https://v8.angular.io/api/core/RootRenderer) | [`RendererFactory2`](https://angular.io/api/core/RendererFactory2) | none |
-| `@angular/core`  | [`RenderComponentType`](https://v8.angular.io/api/core/RenderComponentType) | [`RendererType2`](https://angular.io/api/core/RendererType2) | none |
-| `@angular/common` | `DeprecatedI18NPipesModule` | [`CommonModule`](api/common/CommonModule#pipes) | none |
-| `@angular/common` | `DeprecatedCurrencyPipe` | [`CurrencyPipe`](api/common/CurrencyPipe) | none |
-| `@angular/common` | `DeprecatedDatePipe`     | [`DatePipe`](api/common/DatePipe) | none |
-| `@angular/common` | `DeprecatedDecimalPipe` | [`DecimalPipe`](api/common/DecimalPipe) | none |
-| `@angular/common` | `DeprecatedPercentPipe` | [`PercentPipe`](api/common/PercentPipe) | none |
-| `@angular/forms` | [`NgFormSelectorWarning`](https://v8.angular.io/api/forms/NgFormSelectorWarning) | none | none |
-| `@angular/forms` | `ngForm` element selector | `ng-form` element selector | none |
-| `@angular/service-worker` | `versionedFiles` | `files` | In the service worker configuration file `ngsw-config.json`, replace `versionedFiles` with `files`. See [Service Worker Configuration](guide/service-worker-config#assetgroups). |
+| Package | API            | Replacement | Notes |
+| ------- | -------------- | ----------- | ----- |
+| [`@angular/http`](https://v7.angular.io/api/http) | All exports | [`@angular/common/http`](api/common/http) | See [below](#http). |
+[`@angular/http/testing`](https://v7.angular.io/api/http/testing) | All exports | [`@angular/common/http/testing`](api/common/http/testing) | See [below](#http). |
+| `@angular/platform-browser` | [`DOCUMENT`](https://v7.angular.io/api/platform-browser/DOCUMENT) | [`DOCUMENT` in `@angular/common`](api/common/DOCUMENT) | Updating to version 8 with [`ng update`](cli/update) changes this automatically.  |
+| `@angular/core/testing` | [`TestBed.deprecatedOverrideProvider()`](https://v7.angular.io/api/core/testing/TestBed#deprecatedoverrideprovider) | [`TestBed.overrideProvider()`](api/core/testing/TestBed#overrideprovider) | none |
+| `@angular/core/testing` | [`TestBedStatic.deprecatedOverrideProvider()`](https://v7.angular.io/api/core/testing/TestBedStatic#deprecatedoverrideprovider) | [`TestBedStatic.overrideProvider()`](api/core/testing/TestBedStatic#overrideprovider) | none |
 
-*To see APIs removed in version 8, check out this guide on the [version 8 docs site](https://v8.angular.io/guide/deprecations#removed).
 
 
 <!-- The following anchor is used by redirects from the removed API pages. Do not change or remove. -->

aio/content/guide/displaying-data.md

@@ -9,10 +9,8 @@ conditionally show a message below the list.
 The final UI looks like this:
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
-  </div>
+<figure>
+  <img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
 </figure>
 
 <div class="alert is-helpful">
@@ -105,10 +103,8 @@ inside the `<app-root>` tag.
 
 Now run the app. It should display the title and hero name:
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
-  </div>
+<figure>
+  <img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
 </figure>
 
 
@@ -216,10 +212,8 @@ repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/Jav
 Now the heroes appear in an unordered list.
 
 
-<figure class="lightbox">
-  <div class="card">
-    <img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
-  </div>
+<figure>
+  <img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
 </figure>
 
 

aio/content/guide/docs-style-guide.md

@@ -37,7 +37,7 @@ Angular docs are written in Markdown, with custom extensions for this site. Corr
 
 * **Angular coding style:** Coding style for example apps and code snippets.
 Code examples are encouraged for demonstrating how to apply the concepts and features discussed.
-Angular has a custom framework that enables authors to include code snippets directly from example apps that are automatically tested as part of doc builds.
+Angular has a custom framework that enables authors to include code snippets directly from example apps  that are automatically tested as part of doc builds.
 To contribute example code, you must understand Angular itself and the custom framework for Angular doc examples.
 
 For each aspect of style, the following table explains where to find the primary guidelines and what this Angular Documentation Style Guide offers.
@@ -322,7 +322,6 @@ The <code class="no-auto-link">item</code> property is `true`.
 
 For block code snippets, we generally prefer to display code with
 the Angular documentation _code-example_ component represented by the `<code-example>` tag.
-The `<code-example>` tag has a `header` attribute that you use to identify the file that the example comes from. The header should be used whenever possible to establish the context of the example.
 See [Code snippets and code examples](guide/docs-style-guide#code-snippets-and-code-samples) for more details.
 
 <h3 class="no-toc">Inline code-snippets</h3>
@@ -349,8 +348,6 @@ user input in a command shell or the _output_ of some process.
 **Do not write inline code snippets** unless you have a good reason and the editor's permission to do so.
 In all other cases, code snippets should be generated automatically from tested code samples.
 
-For hypothetical examples such as illustrations of configuration options in a JSON file, you should still use The `<code-example>` tag with the `header` attribute to identify the context.
-
 {@a from-code-samples}
 
 <h3 class="no-toc">Code snippets and code samples</h3>