release: cut the v8.2.3 release

Updates the SHA that will be tested against in the `material-unit-tests` job
to the latest commit in the components repository. SHA 18b9ef3f5529f0fa8f034944681486447af7b879
is needed in order to make the newly introduced material-ci test blocklist effective.

Patch version of #32243.

PR Close #32244

.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.linux.rc

@@ -1,17 +0,0 @@
-# These options are enabled when running on CI
-# 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
-
-# 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

.circleci/bazel.rc

@@ -0,0 +1,41 @@
+# These options are enabled when running on CI
+# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
+# See documentation in /docs/BAZEL.md
+
+# Save downloaded repositories in a location that can be cached by CircleCI. This helps us
+# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
+build --repository_cache=/home/circleci/bazel_repository_cache
+
+# Don't be spammy in the logs
+# TODO(gmagolan): Hide progress again once build performance improves
+# Presently, CircleCI can timeout during bazel test ... with the following
+# 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
+
+# We have seen some flakiness in using TS workers on CircleCI
+# https://angular-team.slack.com/archives/C07DT5M6V/p1562693245183400
+# > failures like `ERROR: /home/circleci/ng/packages/core/test/BUILD.bazel:5:1:
+# > Compiling TypeScript (devmode) //packages/core/test:test_lib failed: Worker process did not return a WorkResponse:`
+# > I saw that issue a couple times today.
+# > Example job: https://circleci.com/gh/angular/angular/385517
+# We expect that TypeScript compilations will parallelize wider than the number of local cores anyway
+# so we should saturate remote workers with TS compilations
+build --strategy=AngularTemplateCompile=local
+build --strategy=TypeScriptCompile=local

.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

@@ -19,20 +19,16 @@ setPublicVar PROJECT_ROOT "$projectDir";
 setPublicVar CI_AIO_MIN_PWA_SCORE "95";
 # This is the branch being built; e.g. `pull/12345` for PR builds.
 setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
-setPublicVar CI_BUILD_URL "$CIRCLE_BUILD_URL";
 # ChromeDriver version compatible with the Chrome version included in the docker image used in
 # `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
 # This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
 # `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
 setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 75.0.3770.90";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
-# `CI_COMMIT_RANGE` is only used on push builds (a.k.a. non-PR, non-scheduled builds and rerun
-# workflows of such builds).
-# NOTE: With [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) enabled,
-#       `CIRCLE_COMPARE_URL` is no longer available and the commit range cannot be reliably
-#       detected. Fall back to only considering the last commit (which is accurate in the majority
-#       of cases for push builds).
-setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || echo "$CIRCLE_SHA1~1...$CIRCLE_SHA1"`";
+# `CI_COMMIT_RANGE` will only be available when `CIRCLE_COMPARE_URL` is also available (or can be
+# retrieved via `get-compare-url.js`), i.e. on push builds (a.k.a. non-PR, non-scheduled builds and
+# rerun workflows of such builds). That is fine, since we only need it in push builds.
+setPublicVar CI_COMMIT_RANGE "`[[ ${CIRCLE_PR_NUMBER:-false} != false ]] && echo "" || node $getCommitRangePath "$CIRCLE_BUILD_NUM" "$CIRCLE_COMPARE_URL"`";
 setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
 setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
@@ -84,7 +80,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/get-commit-range.js

@@ -10,13 +10,6 @@
  * format of the `CIRCLE_COMPARE_URL` environment variable, or by retrieving the equivalent of
  * `CIRCLE_COMPARE_URL` for jobs that are part of a rerun workflow and extracting it from there.
  *
- * > !!! WARNING !!!
- * > !!
- * > !! When [CircleCI Pipelines](https://circleci.com/docs/2.0/build-processing) is enabled, the
- * > !! `CIRCLE_COMPARE_URL` environment variable is not available at all and this script does not
- * > !! work.
- * > !!!!!!!!!!!!!!!
- *
  * **Context:**
  * CircleCI sets the `CIRCLE_COMPARE_URL` environment variable (from which we can extract the commit
  * range) on push builds (a.k.a. non-PR, non-scheduled builds). Yet, when a workflow is rerun
@@ -28,7 +21,7 @@
  * (undocumented) fact that the workspace ID happens to be the same as the workflow ID that first
  * created it.
  *
- * For example, for a job on push build workflows, the CircleCI API will return data that look like:
+ * For example, for a job on push build workflow, the CircleCI API will return data that look like:
  * ```js
  * {
  *   compare: 'THE_COMPARE_URL_WE_ARE_LOOKING_FOR',

.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

@@ -44,19 +44,23 @@
 #  alxhub - Alex Rickabaugh
 #  AndrewKushnir - Andrew Kushnir
 #  andrewseguin - Andrew Seguin
-#  atscott - Andrew Scott
+#  benlesh - Ben Lesh
+#  brandonroberts - Brandon Roberts
 #  devversion - Paul Gschwendtner
 #  filipesilva - Filipe Silva
 #  gkalpak - George Kalpakas
+#  hansl - Hans Larsen
 #  IgorMinar - Igor Minar
+#  jasonaden - Jason Aden
+#  jenniferfell - Jennifer Fell
 #  JiaLiPassion - Jia Li
 #  josephperrott - Joey Perrott
-#  kapunahelewong - Kapunahele Wong
 #  kara - Kara Erickson
 #  kyliau - Keen Yee Liau
 #  matsko - Matias Niemelä
 #  mgechev - Minko Gechev
 #  mhevery - Misko Hevery
+#  ocombe - Olivier Combe
 #  petebacondarwin - Pete Bacon Darwin
 #  pkozlowski-opensource - Pawel Kozlowski
 #  robwormald - Rob Wormald
@@ -84,9 +88,9 @@
 #  (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
 #
 #   - IgorMinar
-#   - josephperrott
 #   - kara
 #   - mhevery
+#   - alexeagle
 
 
 # ===========================================================
@@ -95,8 +99,8 @@
 #  Used for approving minor documentation-only changes that don't require engineering review.
 #  (secret team to avoid review requests, it also doesn't inherit from @angular/framework because nested teams can't be secret)
 #
+#   - brandonroberts
 #   - gkalpak
-#   - kapunahelewong
 #   - petebacondarwin
 
 
@@ -121,9 +125,10 @@
 #  @angular/tools-cli
 # ===========================================================
 #
+#   - alexeagle
 #   - filipesilva
+#   - hansl
 #   - mgechev
-#   - vikerman
 
 
 # ===========================================================
@@ -174,7 +179,8 @@
 #  @angular/fw-forms
 # ===========================================================
 #
-#   - AndrewKushnir
+#   - kara
+#   - jasonaden
 
 
 # ===========================================================
@@ -196,7 +202,7 @@
 #  @angular/fw-router
 # ===========================================================
 #
-#   - atscott
+#   - jasonaden
 
 
 # ===========================================================
@@ -214,6 +220,7 @@
 #
 #   - gkalpak
 #   - petebacondarwin
+#   - jasonaden
 
 
 # ===========================================================
@@ -229,7 +236,7 @@
 #
 #   - AndrewKushnir
 #   - mhevery
-#   - petebacondarwin
+#   - ocombe
 #   - vikerman
 
 
@@ -261,8 +268,8 @@
 #  @angular/fw-integration
 # ===========================================================
 #
+#   - alexeagle
 #   - IgorMinar
-#   - josephperrott
 #   - mhevery
 
 
@@ -270,6 +277,7 @@
 #  @angular/docs-infra
 # ===========================================================
 #
+#   - brandonroberts
 #   - gkalpak
 #   - IgorMinar
 #   - petebacondarwin
@@ -279,6 +287,8 @@
 #  @angular/fw-docs-intro
 # ===========================================================
 #
+#   - jenniferfell
+#   - brandonroberts
 #   - IgorMinar
 #   - stephenfluin
 
@@ -287,15 +297,16 @@
 #  @angular/fw-docs-observables
 # ===========================================================
 #
-#   - alxhub
+#   - benlesh
+#   - jasonaden
 
 
 # ===========================================================
 #  @angular/fw-docs-packaging
 # ===========================================================
 #
+#   - alexeagle
 #   - IgorMinar
-#   - vikerman
 
 
 # ===========================================================
@@ -303,9 +314,10 @@
 # ===========================================================
 #
 #   - alan-agius4
+#   - alexeagle
+#   - hansl
 #   - IgorMinar
 #   - mgechev
-#   - vikerman
 
 
 # ===========================================================
@@ -313,9 +325,11 @@
 # ===========================================================
 #
 #   - alan-agius4
+#   - alexeagle
+#   - hansl
 #   - IgorMinar
 #   - mgechev
-#   - vikerman
+
 
 
 # ===========================================================
@@ -334,9 +348,10 @@
 
 
 # ===========================================================
-#  @angular/dev-infra-framework
+#  @angular/fw-dev-infra
 # ===========================================================
 #
+#   - alexeagle
 #   - devversion
 #   - filipesilva
 #   - gkalpak
@@ -368,44 +383,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
 # ================================================
@@ -432,7 +409,6 @@
 # ================================================
 
 /packages/bazel/**                                              @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/bazel.md                                     @angular/tools-bazel @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -442,12 +418,8 @@
 # ================================================
 
 /packages/compiler/**                                           @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/compiler/**                                  @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/compiler-cli/**                                       @angular/fw-compiler @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/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 +428,6 @@
 # ================================================
 
 /packages/compiler-cli/ngcc/**                                  @angular/fw-ngcc @angular/framework-global-approvers
-/aio/content/guide/ngcc.md                                      @angular/fw-ngcc @angular/framework-global-approvers
 
 
 
@@ -467,11 +438,11 @@
 # ================================================
 
 /packages/compiler-cli/src/ngtools/**                           @angular/tools-cli @angular/framework-global-approvers
-/aio/content/guide/cli-builder.md                               @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/ivy.md                                       @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /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)
@@ -482,18 +453,12 @@
 # ================================================
 
 /packages/core/**                                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/core/**                                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/common/**                                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser/**                                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/platform-browser/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser-dynamic/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker/**                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker-dynamic/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/examples/common/**                                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/docs/**                                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-
-/aio/content/guide/accessibility.md                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/accessibility/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/architecture-components.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/architecture-modules.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -550,8 +515,6 @@
 
 /aio/content/guide/hierarchical-dependency-injection.md         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/hierarchical-dependency-injection/**      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/providers-viewproviders/**                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/resolution-modifiers/**                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/lazy-loading-ngmodules.md                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/lazy-loading-ngmodules/**                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -586,12 +549,11 @@
 /aio/content/examples/attribute-binding/**                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/two-way-binding/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/built-in-directives/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/built-in-directives/**                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-reference-variables/**           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/inputs-outputs/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/inputs-outputs/**                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-expression-operators/**          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+
 /aio/content/guide/pipes.md                                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/pipes/**                                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/pipes/**                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -624,7 +586,6 @@
 
 /packages/common/http/**                                        @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/http/**                                               @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/http/**                                      @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/http.md                                      @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/http/**                                   @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/http/**                               @angular/fw-http @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -647,7 +608,6 @@
 # ================================================
 
 /packages/forms/**                                              @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/forms/**                                     @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/forms.md                                     @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/forms/**                                  @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/forms/**                              @angular/fw-forms @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -691,7 +651,6 @@
 # ================================================
 
 /packages/router/**                                             @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/router/**                                    @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/router.md                                    @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/router/**                                 @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/router/**                             @angular/fw-router @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -703,7 +662,6 @@
 # ================================================
 
 /packages/service-worker/**                                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/packages/examples/service-worker/**                            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-getting-started.md            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/service-worker-getting-started/**         @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/app-shell.md                                 @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -730,7 +688,6 @@
 /aio/content/examples/upgrade-phonecat-2-hybrid/**              @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/upgrade-phonecat-3-final/**               @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/upgrade-performance.md                       @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/upgrade-setup.md                             @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/ajs-quick-reference.md                       @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/ajs-quick-reference/**                    @angular/fw-upgrade @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -764,11 +721,11 @@ 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
 
 
+
 # ================================================
 #  @angular security
 # ================================================
@@ -819,6 +776,7 @@ testing/**                                                      @angular/fw-test
 /aio/tools/**                                                   @angular/docs-infra @angular/framework-global-approvers
 
 # Hidden docs
+/aio/content/guide/change-log.md                                @angular/docs-infra @angular/framework-global-approvers
 /aio/content/guide/docs-style-guide.md                          @angular/docs-infra @angular/framework-global-approvers
 /aio/content/examples/docs-style-guide/**                       @angular/docs-infra @angular/framework-global-approvers
 /aio/content/images/guide/docs-style-guide/**                   @angular/docs-infra @angular/framework-global-approvers
@@ -831,8 +789,9 @@ testing/**                                                      @angular/fw-test
 #  Docs: getting started & tutorial
 # ================================================
 
-/aio/content/guide/setup-local.md                               @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/setup-local/**                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/quickstart.md                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/cli-quickstart/**                         @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/cli-quickstart/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/tutorial/**                                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/toh/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/toh-pt0/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -844,8 +803,8 @@ testing/**                                                      @angular/fw-test
 /aio/content/examples/toh-pt6/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/getting-started-v0/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/getting-started/**                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/start/**                                           @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/start/**                              @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/getting-started/**                                 @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/getting-started/**                    @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 # ================================================
@@ -871,25 +830,17 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/npm-packages.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/browser-support.md                           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/typescript-configuration.md                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/setup.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/setup/**                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/build.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/build/**                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/deployment.md                                @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/deployment/**                         @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/file-structure.md                            @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/releases.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/updating.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/workspace-config.md                          @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /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 +877,36 @@ testing/**                                                      @angular/fw-test
 
 
 # ================================================
-#  Material CI
+#  Build & CI Owners
 # ================================================
 
-/tools/material-ci/**                                           @angular/fw-core @angular/framework-global-approvers
+/*                                                              @angular/fw-dev-infra
+/.buildkite/**                                                  @angular/fw-dev-infra
+/.circleci/**                                                   @angular/fw-dev-infra
+/.devcontainer/**                                               @angular/fw-dev-infra
+/.github/**                                                     @angular/fw-dev-infra
+/.vscode/**                                                     @angular/fw-dev-infra
+/docs/BAZEL.md                                                  @angular/fw-dev-infra
+/packages/*                                                     @angular/fw-dev-infra
+/scripts/**                                                     @angular/fw-dev-infra
+/third_party/**                                                 @angular/fw-dev-infra
+/tools/build/**                                                 @angular/fw-dev-infra
+/tools/cjs-jasmine/**                                           @angular/fw-dev-infra
+/tools/gulp-tasks/**                                            @angular/fw-dev-infra
+/tools/ngcontainer/**                                           @angular/fw-dev-infra
+/tools/npm/**                                                   @angular/fw-dev-infra
+/tools/npm_workspace/**                                         @angular/fw-dev-infra
+/tools/public_api_guard/**                                      @angular/fw-dev-infra
+/tools/rxjs/**                                                  @angular/fw-dev-infra
+/tools/source-map-test/**                                       @angular/fw-dev-infra
+/tools/symbol-extractor/**                                      @angular/fw-dev-infra
+/tools/testing/**                                               @angular/fw-dev-infra
+/tools/ts-api-guardian/**                                       @angular/fw-dev-infra
+/tools/tslint/**                                                @angular/fw-dev-infra
+/tools/validate-commit-message/**                               @angular/fw-dev-infra
+/tools/yarn/**                                                  @angular/fw-dev-infra
+/tools/*
+*.bzl                                                           @angular/fw-dev-infra
 
 
 
@@ -945,14 +922,6 @@ testing/**                                                      @angular/fw-test
 
 
 
-# ================================================
-#  Special cases
-# ================================================
-
-/aio/content/guide/static-query-migration.md                    @kara @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-
-
-
 # ================================================
 #  CODEOWNERS Owners owners ...
 # ================================================

.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(
@@ -68,9 +65,6 @@ node_repositories(
     },
     node_version = "10.16.0",
     package_json = ["//:package.json"],
-    yarn_repositories = {
-        "1.17.3": ("yarn-v1.17.3.tar.gz", "yarn-v1.17.3", "e3835194409f1b3afa1c62ca82f561f1c29d26580c9e220c36866317e043c6f3"),
-    },
     # yarn 1.13.0 under Bazel has a regression on Windows that causes build errors on rebuilds:
     # ```
     # ERROR: Source forest creation failed: C:/.../fyuc5c3n/execroot/angular/external (Directory not empty)
@@ -79,7 +73,7 @@ node_repositories(
     # It possible that versions of yarn past 1.13.0 do not have this issue, however, before
     # advancing this version we need to test manually on Windows that the above error does not
     # happen as the issue is not caught by CI.
-    yarn_version = "1.17.3",
+    yarn_version = "1.12.1",
 )
 
 yarn_install(
@@ -104,21 +98,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,28 +34,18 @@ 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**
->
-> Setting up the examples involves creating some [symbolic links](https://en.wikipedia.org/wiki/Symbolic_link) (see [here](./tools/examples/README.md#symlinked-node_modules) for details). On Windows, this requires to either have [Developer Mode enabled](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (supported on Windows 10 or newer) or run the setup commands as administrator.
->
-> The affected commands are:
-> - `yarn setup` / `yarn setup-*`
-> - `yarn build` / `yarn build-*`
-> - `yarn boilerplate:add`
-> - `yarn example-e2e --setup`
 
 ## Using ServiceWorker locally
 

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/accessibility/e2e/src/app.e2e-spec.ts

@@ -1,21 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('Accessibility example e2e tests', () => {
-
-  beforeEach(() => {
-    browser.get('');
-  });
-
-  it('should display Accessibility Example', function () {
-    expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
-  });
-
-  it('should take a number and change progressbar width', function () {
-    element(by.css('input')).sendKeys('16');
-    expect(element(by.css('input')).getAttribute('value')).toEqual('016');
-    expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
-  });
-
-});

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

@@ -1,13 +0,0 @@
-<h1>Accessibility Example</h1>
-<!-- #docregion template -->
-<label>
-  Enter an example progress value
-  <input type="number" min="0" max="100"
-      [value]="progress" (input)="progress = $event.target.value">
-</label>
-
-<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
-<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
-</app-example-progressbar>
-<!-- #enddocregion template -->
-

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
-})
-export class AppComponent  {
-  progress = 0;
-}

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

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

aio/content/examples/accessibility/src/app/progress-bar.component.css

@@ -1,12 +0,0 @@
-    :host { 
-      display: block; 
-      width: 300px; 
-      height: 25px; 
-      border: 1px solid black; 
-      margin-top: 16px;
-    }
-    
-    .bar { 
-      background: blue; 
-      height: 100%; 
-    }

aio/content/examples/accessibility/src/app/progress-bar.component.ts

@@ -1,28 +0,0 @@
-// #docregion progressbar-component
-import { Component, Input } from '@angular/core';
-
-/**
- * Example progressbar component.
- */
-@Component({
-  selector: 'app-example-progressbar',
-  template: `<div class="bar" [style.width.%]="value"></div>`,
-  styleUrls: ['./progress-bar.component.css'],
-  host: {
-    // Sets the role for this component to "progressbar"
-    role: 'progressbar',
-
-    // Sets the minimum and maximum values for the progressbar role.
-    'aria-valuemin': '0',
-    'aria-valuemax': '100',
-
-    // Binding that updates the current value of the progressbar.
-    '[attr.aria-valuenow]': 'value',
-  }
-})
-export class ExampleProgressbarComponent  {
-  /** Current value of the progressbar. */
-  @Input() value = 0;
-}
-
-// #enddocregion progressbar-component

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

@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Accessibility Example</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root>Loading...</app-root>
-</body>
-</html>

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

@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/accessibility/stackblitz.json

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

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/getting-started/src/app/cart/cart.component.3.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { CartService } from '../cart.service';
 // #enddocregion imports
 
@@ -10,14 +10,12 @@ import { CartService } from '../cart.service';
   styleUrls: ['./cart.component.css']
 })
 // #docregion props-services, submit
-export class CartComponent implements OnInit {
+export class CartComponent {
   items;
 
   constructor(
     private cartService: CartService
-  ) { }
-
-  ngOnInit() {
+  ) {
     this.items = this.cartService.getItems();
   }
 }

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CartService } from '../cart.service';
 // #enddocregion
@@ -11,7 +11,7 @@ import { CartService } from '../cart.service';
   styleUrls: ['./shipping.component.css']
 })
 // #docregion props, ctor
-export class ShippingComponent implements OnInit {
+export class ShippingComponent {
   shippingCosts;
 // #enddocregion props
 
@@ -19,12 +19,10 @@ export class ShippingComponent implements OnInit {
   constructor(
     private cartService: CartService
   ) {
+// #enddocregion inject-cart-service
+    this.shippingCosts = this.cartService.getShippingPrices();
+// #docregion inject-cart-service
   }
 // #enddocregion inject-cart-service
-
-  ngOnInit() {
-    this.shippingCosts = this.cartService.getShippingPrices();
-  }
-
 // #docregion props
 }

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

@@ -1,6 +1,6 @@
 <h1>HTTP Sample</h1>
 <div>
-  <input type="checkbox" id="heroes" [checked]="showHeroes" (click)="toggleHeroes()">
+  <input type="checkbox" id="heroes" [checked]="toggleHeroes" (click)="toggleHeroes()">
   <label for="heroes">Heroes</label>
 
   <input type="checkbox" id="config" [checked]="showConfig" (click)="toggleConfig()">

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/i18n/doc-files/main.2.ts

@@ -12,7 +12,7 @@ if (environment.production) {
 // use the require method provided by webpack
 declare const require;
 // we use the webpack raw-loader to return the content as a string
-const translations = require('raw-loader!./locale/messages.fr.xlf').default;
+const translations = require(`raw-loader!./locale/messages.fr.xlf`);
 
 platformBrowserDynamic().bootstrapModule(AppModule, {
   providers: [

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/providers-viewproviders/src/app/app.component.ts

@@ -13,19 +13,3 @@ export class AppComponent  {
   constructor(public flower: FlowerService, public animal: AnimalService) {}
 }
 // #enddocregion inject-animal-service
-
-// When using @Host() together with @SkipSelf() in
-// child.component.ts for the AnimalService, add the
-// following viewProviders array to the @Component metadata:
-
-// viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
-
-// So, the entire @ChildComponent() decorator and its
-// metadata should be as follows:
-
-// @Component({
-//   selector: 'app-root',
-//   templateUrl: './app.component.html',
-//   styleUrls: [ './app.component.css' ],
-//   viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
-// })

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/structural-directives/src/app/unless.directive.ts

@@ -12,7 +12,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * then the templated elements are removed removed from the DOM,
  * the templated elements are (re)inserted into the DOM.
  *
- * <div *appUnless="errorCount" class="success">
+ * <div *ngUnless="errorCount" class="success">
  *   Congrats! Everything is great!
  * </div>
  *

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) => {
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
+
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+
+// #docregion ngExpressEngine
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));
+// #enddocregion ngExpressEngine
+
+app.set('view engine', 'html');
+app.set('views', join(DIST_FOLDER, 'browser'));
+
+// #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
+});
+// #enddocregion data-request
 
-  // #docregion static
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
-  // #enddocregion static
+// #docregion static
+// Server static files from /browser
+app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
+// #enddocregion static
 
-  // #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 navigation-request
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+// #enddocregion navigation-request
 
-  return server;
-}
-
-function run() {
-  const port = process.env.PORT || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// 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();
-}
-
-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/accessibility.md

@@ -84,15 +84,48 @@ The following example shows how to make a simple progress bar accessible by usin
 
 * The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
 
-   <code-example path="accessibility/src/app/progress-bar.component.ts" header="src/app/progress-bar.component.ts" region="progressbar-component"></code-example>
+   ```ts
+  import { Component, Input } from '@angular/core';
+   /**
+    * Example progressbar component.
+    */
+   @Component({
+     selector: 'example-progressbar',
+     template: `<div class="bar" [style.width.%]="value"></div>`,
+     styleUrls: ['./progress-bar.css'],
+     host: {
+       // Sets the role for this component to "progressbar"
+       role: 'progressbar',
 
+      // Sets the minimum and maximum values for the progressbar role.
+       'aria-valuemin': '0',
+       'aria-valuemax': '0',
+
+       // Binding that updates the current value of the progressbar.
+       '[attr.aria-valuenow]': 'value',
+     }
+   })
+   export class ExampleProgressbar  {
+     /** Current value of the progressbar. */
+     @Input() value: number = 0;
+   }
+   ```
 
 * In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
 
-   <code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
+   ```html
+   <label>
+      Enter an example progress value
+      <input type="number" min="0" max="100"
+         [value]="progress" (input)="progress = $event.target.value">
+   </label>
 
+   <!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
+   <example-progressbar [value]="progress" aria-label="Example of a progress bar">
+   </example-progressbar>
+   ```
 
-To see the progress bar in a working example app, refer to the <live-example></live-example>.
+[See the full example in StackBlitz](https://stackblitz.com/edit/angular-kn5jdi?file=src%2Fapp%2Fapp.component.html).
 
 ## Routing and focus management
 

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

@@ -1,6 +1,6 @@
 # Angular compiler options
 
-When you use [AoT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
+When you use [AOT compilation](guide/aot-compiler), you can control how your application is compiled by specifying *template* compiler options in the `tsconfig.json` [TypeScript configuration file](guide/typescript-configuration).
 
 The template options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
 
@@ -17,38 +17,7 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
       }
   }
   ```
-
-{@a tsconfig-extends}
-## Configuration inheritance with extends
-
-Like the TypeScript compiler, The Angular AoT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file, `tsconfig.json`.
-The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
-
-A TypeScript configuration can inherit settings from another file using the `extends` property.
-The configuration options from the base file are loaded first, then overridden by those in the inheriting `tsconfig` file.
-
-For example:
-
-```json
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    ...
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "preserveWhitespaces": true,
-    ...
-  }
-}
-```
-
-For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
-
-## Template options
-
-The following options are available for configuring the AoT template compiler.
+This page describes the available Angular template compiler options.
 
 ### `allowEmptyCodegenFiles`
 
@@ -60,7 +29,7 @@ Modifies how Angular-specific annotations are emitted to improve tree-shaking. N
 
 * By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes.
 
-* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note that the resulting code will not properly tree-shake.
+* The `decorators` value leaves the decorators in place, which makes compilation faster. TypeScript emits calls to the` __decorate` helper. Use `--emitDecoratorMetadata` for runtime reflection (but note taht the resulting code will not properly tree-shake.
 
 ### `annotateForClosureCompiler`
 
@@ -77,26 +46,18 @@ 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}
 
 ### `enableLegacyTemplate`
 
-When true, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is false. Might be required by some third-party Angular libraries.
+When true, enables use of the `<template>` element, which was deprecated in Angular 4.0, in favor of `<ng-template>` (to avoid colliding with the DOM's element of the same name). Default is false. Might be required by some third-party Angular libraries. |
 
 ### `flatModuleId`
 
@@ -126,9 +87,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 +123,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 +139,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">
@@ -264,7 +260,7 @@ What it does
 </tr>
 
 <tr>
-<td><code><a href="api/animations/state" class="code-anchor">state()</a></code></td>
+<td><code>state()</code></td>
 <td>Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.</td>
 </tr>
 
@@ -284,7 +280,7 @@ What it does
 </tr>
 
 <tr>
-<td><code><a href="api/animations/group" class="code-anchor">group()</a></code></td>
+<td><code>group()</code></td>
 <td>Specifies a group of animation steps (<em>inner animations</em>) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within <code>sequence()</code> or <code>transition().</code></td>
 </tr>
 

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

@@ -1,540 +0,0 @@
-# AoT metadata errors
-
-The following are metadata errors you may encounter, with explanations and suggested corrections.
-
-[Expression form not supported](#expression-form-not-supported)<br>
-[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)<br>
-[Only initialized variables and constants](#only-initialized-variables)<br>
-[Reference to a non-exported class](#reference-to-a-non-exported-class)<br>
-[Reference to a non-exported function](#reference-to-a-non-exported-function)<br>
-[Function calls are not supported](#function-calls-not-supported)<br>
-[Destructured variable or constant not supported](#destructured-variable-not-supported)<br>
-[Could not resolve type](#could-not-resolve-type)<br>
-[Name expected](#name-expected)<br>
-[Unsupported enum member name](#unsupported-enum-member-name)<br>
-[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
-[Symbol reference expected](#symbol-reference-expected)<br>
-
-<hr>
-
-{@a expression-form-not-supported}
-## Expression form not supported
-
-<div class="alert is-helpful">
-
-*The compiler encountered an expression it didn't understand while evaluating Angular metadata.*
-
-</div>
-
-Language features outside of the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
-can produce this error, as seen in the following example:
-
-```ts
-// ERROR
-export class Fooish { ... }
-...
-const prop = typeof Fooish; // typeof is not valid in metadata
-  ...
-  // bracket notation is not valid in metadata
-  { provide: 'token', useValue: { [prop]: 'value' } };
-  ...
-```
-
-You can use `typeof` and bracket notation in normal application code.
-You just can't use those features within expressions that define Angular metadata.
-
-Avoid this error by sticking to the compiler's [restricted expression syntax](guide/aot-compiler#expression-syntax)
-when writing Angular metadata
-and be wary of new or unusual TypeScript features.
-
-<hr>
-
-{@a reference-to-a-local-symbol}
-## Reference to a local (non-exported) symbol
-
-<div class="alert is-helpful">
-
-_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
-
-</div>
-
-The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
-
-Here's a `provider` example of the problem.
-
-```ts
-// ERROR
-let foo: number; // neither exported nor initialized
-
-@Component({
-  selector: 'my-component',
-  template: ... ,
-  providers: [
-    { provide: Foo, useValue: foo }
-  ]
-})
-export class MyComponent {}
-```
-The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
-
-You could fix the problem by initializing `foo`.
-
-```ts
-let foo = 42; // initialized
-```
-
-The compiler will [fold](guide/aot-compiler#code-folding) the expression into the provider as if you had written this.
-
-```ts
-  providers: [
-    { provide: Foo, useValue: 42 }
-  ]
-```
-
-Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
-
-```ts
-// CORRECTED
-export let foo: number; // exported
-
-@Component({
-  selector: 'my-component',
-  template: ... ,
-  providers: [
-    { provide: Foo, useValue: foo }
-  ]
-})
-export class MyComponent {}
-```
-
-Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
-
-Adding `export` doesn't work when the compiler needs the _actual value_
-in order to generate code.
-For example, it doesn't work for the `template` property.
-
-```ts
-// ERROR
-export let someTemplate: string; // exported but not initialized
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-The compiler needs the value of the `template` property _right now_ to generate the component factory.
-The variable reference alone is insufficient.
-Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
-
-<hr>
-
-{@a only-initialized-variables}
-## Only initialized variables and constants
-
-<div class="alert is-helpful">
-
-_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
-
-</div>
-
-The compiler found a reference to an exported variable or static field that wasn't initialized.
-It needs the value of that variable to generate code.
-
-The following example tries to set the component's `template` property to the value of
-the exported `someTemplate` variable which is declared but _unassigned_.
-
-```ts
-// ERROR
-export let someTemplate: string;
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
-
-```ts
-// ERROR - not initialized there either
-import { someTemplate } from './config';
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-The compiler cannot wait until runtime to get the template information.
-It must statically derive the value of the `someTemplate` variable from the source code
-so that it can generate the component factory, which includes
-instructions for building the element based on the template.
-
-To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
-
-```ts
-// CORRECTED
-export let someTemplate = '<h1>Greetings from Angular</h1>';
-
-@Component({
-  selector: 'my-component',
-  template: someTemplate
-})
-export class MyComponent {}
-```
-
-<hr>
-
-{@a reference-to-a-non-exported-class}
-## Reference to a non-exported class
-
-<div class="alert is-helpful">
-
-_Reference to a non-exported class <class name>. Consider exporting the class._
-
-</div>
-
-Metadata referenced a class that wasn't exported.
-
-For example, you may have defined a class and used it as an injection token in a providers array
-but neglected to export that class.
-
-```ts
-// ERROR
-abstract class MyStrategy { }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useValue: ... }
-  ]
-  ...
-```
-
-Angular generates a class factory in a separate module and that
-factory [can only access exported classes](guide/aot-compiler#exported-symbols).
-To correct this error, export the referenced class.
-
-```ts
-// CORRECTED
-export abstract class MyStrategy { }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useValue: ... }
-  ]
-  ...
-```
-<hr>
-
-{@a reference-to-a-non-exported-function}
-## Reference to a non-exported function
-
-<div class="alert is-helpful">
-
-*Metadata referenced a function that wasn't exported.*
-
-</div>
-
-For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
-
-```ts
-// ERROR
-function myStrategy() { ... }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy }
-  ]
-  ...
-```
-
-Angular generates a class factory in a separate module and that
-factory [can only access exported functions](guide/aot-compiler#exported-symbols).
-To correct this error, export the function.
-
-```ts
-// CORRECTED
-export function myStrategy() { ... }
-
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy }
-  ]
-  ...
-```
-<hr>
-
-{@a function-calls-not-supported}
-## Function calls are not supported
-
-<div class="alert is-helpful">
-
-_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
-
-</div>
-
-The compiler does not currently support [function expressions or lambda functions](guide/aot-compiler#function-expression).
-For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
-
-```ts
-// ERROR
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: function() { ... } },
-    { provide: OtherStrategy, useFactory: () => { ... } }
-  ]
-  ...
-```
-You also get this error if you call a function or method in a provider's `useValue`.
-
-```ts
-// ERROR
-import { calculateValue } from './utilities';
-
-  ...
-  providers: [
-    { provide: SomeValue, useValue: calculateValue() }
-  ]
-  ...
-```
-
-To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
-
-```ts
-// CORRECTED
-import { calculateValue } from './utilities';
-
-export function myStrategy() { ... }
-export function otherStrategy() { ... }
-export function someValueFactory() {
-  return calculateValue();
-}
-  ...
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy },
-    { provide: OtherStrategy, useFactory: otherStrategy },
-    { provide: SomeValue, useFactory: someValueFactory }
-  ]
-  ...
-```
-
-<hr>
-
-{@a destructured-variable-not-supported}
-## Destructured variable or constant not supported
-
-<div class="alert is-helpful">
-
-_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
-
-</div>
-
-The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
-
-For example, you cannot write something like this:
-
-```ts
-// ERROR
-import { configuration } from './configuration';
-
-// destructured assignment to foo and bar
-const {foo, bar} = configuration;
-  ...
-  providers: [
-    {provide: Foo, useValue: foo},
-    {provide: Bar, useValue: bar},
-  ]
-  ...
-```
-
-To correct this error, refer to non-destructured values.
-
-```ts
-// CORRECTED
-import { configuration } from './configuration';
-  ...
-  providers: [
-    {provide: Foo, useValue: configuration.foo},
-    {provide: Bar, useValue: configuration.bar},
-  ]
-  ...
-```
-
-<hr>
-
-{@a could-not-resolve-type}
-## Could not resolve type
-
-<div class="alert is-helpful">
-
-*The compiler encountered a type and can't determine which module exports that type.*
-
-</div>
-
-This can happen if you refer to an ambient type.
-For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
-
-You'll get an error if you reference it in the component constructor,
-which the compiler must statically analyze.
-
-```ts
-// ERROR
-@Component({ })
-export class MyComponent {
-  constructor (private win: Window) { ... }
-}
-```
-TypeScript understands ambient types so you don't import them.
-The Angular compiler does not understand a type that you neglect to export or import.
-
-In this case, the compiler doesn't understand how to inject something with the `Window` token.
-
-Do not refer to ambient types in metadata expressions.
-
-If you must inject an instance of an ambient type,
-you can finesse the problem in four steps:
-
-1. Create an injection token for an instance of the ambient type.
-1. Create a factory function that returns that instance.
-1. Add a `useFactory` provider with that factory function.
-1. Use `@Inject` to inject the instance.
-
-Here's an illustrative example.
-
-```ts
-// CORRECTED
-import { Inject } from '@angular/core';
-
-export const WINDOW = new InjectionToken('Window');
-export function _window() { return window; }
-
-@Component({
-  ...
-  providers: [
-    { provide: WINDOW, useFactory: _window }
-  ]
-})
-export class MyComponent {
-  constructor (@Inject(WINDOW) private win: Window) { ... }
-}
-```
-
-The `Window` type in the constructor is no longer a problem for the compiler because it
-uses the `@Inject(WINDOW)` to generate the injection code.
-
-Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
-
-```ts
-import { Inject }   from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
-
-@Component({ ... })
-export class MyComponent {
-  constructor (@Inject(DOCUMENT) private doc: Document) { ... }
-}
-```
-<hr>
-
-{@a name-expected}
-## Name expected
-
-<div class="alert is-helpful">
-
-*The compiler expected a name in an expression it was evaluating.*
-
-</div>
-
-This can happen if you use a number as a property name as in the following example.
-
-```ts
-// ERROR
-provider: [{ provide: Foo, useValue: { 0: 'test' } }]
-```
-
-Change the name of the property to something non-numeric.
-
-```ts
-// CORRECTED
-provider: [{ provide: Foo, useValue: { '0': 'test' } }]
-```
-
-<hr>
-
-{@a unsupported-enum-member-name}
-## Unsupported enum member name
-
-<div class="alert is-helpful">
-
-*Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata.*
-
-</div>
-
-The compiler can understand simple enum values but not complex values such as those derived from computed properties.
-
-```ts
-// ERROR
-enum Colors {
-  Red = 1,
-  White,
-  Blue = "Blue".length // computed
-}
-
-  ...
-  providers: [
-    { provide: BaseColor,   useValue: Colors.White } // ok
-    { provide: DangerColor, useValue: Colors.Red }   // ok
-    { provide: StrongColor, useValue: Colors.Blue }  // bad
-  ]
-  ...
-```
-
-Avoid referring to enums with complicated initializers or computed properties.
-
-<hr>
-
-{@a tagged-template-expressions-not-supported}
-## Tagged template expressions are not supported
-
-<div class="alert is-helpful">
-
-_Tagged template expressions are not supported in metadata._
-
-</div>
-
-The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as the following.
-
-```ts
-// ERROR
-const expression = 'funky';
-const raw = String.raw`A tagged template ${expression} string`;
- ...
- template: '<div>' + raw + '</div>'
- ...
-```
-[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
-is a _tag function_ native to JavaScript ES2015.
-
-The AoT compiler does not support tagged template expressions; avoid them in metadata expressions.
-
-<hr>
-
-{@a symbol-reference-expected}
-## Symbol reference expected
-
-<div class="alert is-helpful">
-
-*The compiler expected a reference to a symbol at the location specified in the error message.*
-
-</div>
-
-This error can occur if you use an expression in the `extends` clause of a class.
-
-<!--
-
-Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
-
--->