release: cut the v9.0.3 release

This commit updates AIO payload size limit that is triggering a problem after merging 0bc35a71e2. That commit added some payload size, but all checks were "green" for the original PR (#34574), so it looks like it's an accumulated payload size increase from multiple changes. The goal of this commit is to bring the master branch back to "green" state.

PR Close #35702

.bazelignore

@@ -1,10 +1,97 @@
+# Bazel does not yet support wildcards or other .gitignore semantics for
+# .bazelignore. Two issues for this feature request are outstanding:
+# https://github.com/bazelbuild/bazel/issues/7093
+# https://github.com/bazelbuild/bazel/issues/8106
 .git
 node_modules
 dist
 aio/content
 aio/node_modules
 aio/tools/examples/shared/node_modules
-integration/bazel
-integration/bazel-schematics/demo
-integration/platform-server/node_modules
 packages/bazel/node_modules
+integration/bazel/bazel-bazel
+integration/bazel/bazel-bin
+integration/bazel/bazel-out
+integration/bazel/bazel-testlogs
+integration/bazel-schematics/demo
+# All integration test node_modules folders
+integration/bazel/node_modules
+integration/bazel-schematics/node_modules
+integration/cli-hello-world/node_modules
+integration/cli-hello-world-ivy-compat/node_modules
+integration/cli-hello-world-ivy-i18n/node_modules
+integration/cli-hello-world-ivy-minimal/node_modules
+integration/cli-hello-world-lazy/node_modules
+integration/cli-hello-world-lazy-rollup/node_modules
+integration/dynamic-compiler/node_modules
+integration/hello_world__closure/node_modules
+integration/hello_world__systemjs_umd/node_modules
+integration/i18n/node_modules
+integration/injectable-def/node_modules
+integration/ivy-i18n/node_modules
+integration/language_service_plugin/node_modules
+integration/ng_elements/node_modules
+integration/ng_elements_schematics/node_modules
+integration/ng_update/node_modules
+integration/ng_update_migrations/node_modules
+integration/ngcc/node_modules
+integration/platform-server/node_modules
+integration/service-worker-schema/node_modules
+integration/side-effects/node_modules
+integration/terser/node_modules
+integration/typings_test_ts36/node_modules
+integration/typings_test_ts37/node_modules
+# All integration test .yarn_local_cache folders
+integration/bazel/.yarn_local_cache
+integration/bazel-schematics/.yarn_local_cache
+integration/cli-hello-world/.yarn_local_cache
+integration/cli-hello-world-ivy-compat/.yarn_local_cache
+integration/cli-hello-world-ivy-i18n/.yarn_local_cache
+integration/cli-hello-world-ivy-minimal/.yarn_local_cache
+integration/cli-hello-world-lazy/.yarn_local_cache
+integration/cli-hello-world-lazy-rollup/.yarn_local_cache
+integration/dynamic-compiler/.yarn_local_cache
+integration/hello_world__closure/.yarn_local_cache
+integration/hello_world__systemjs_umd/.yarn_local_cache
+integration/i18n/.yarn_local_cache
+integration/injectable-def/.yarn_local_cache
+integration/ivy-i18n/.yarn_local_cache
+integration/language_service_plugin/.yarn_local_cache
+integration/ng_elements/.yarn_local_cache
+integration/ng_elements_schematics/.yarn_local_cache
+integration/ng_update/.yarn_local_cache
+integration/ng_update_migrations/.yarn_local_cache
+integration/ngcc/.yarn_local_cache
+integration/platform-server/.yarn_local_cache
+integration/service-worker-schema/.yarn_local_cache
+integration/side-effects/.yarn_local_cache
+integration/terser/.yarn_local_cache
+integration/typings_test_ts36/.yarn_local_cache
+integration/typings_test_ts37/.yarn_local_cache
+# All integration test NPM_PACKAGE_MANIFEST.json folders
+integration/bazel/NPM_PACKAGE_MANIFEST.json
+integration/bazel-schematics/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-compat/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-i18n/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-ivy-minimal/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-lazy/NPM_PACKAGE_MANIFEST.json
+integration/cli-hello-world-lazy-rollup/NPM_PACKAGE_MANIFEST.json
+integration/dynamic-compiler/NPM_PACKAGE_MANIFEST.json
+integration/hello_world__closure/NPM_PACKAGE_MANIFEST.json
+integration/hello_world__systemjs_umd/NPM_PACKAGE_MANIFEST.json
+integration/i18n/NPM_PACKAGE_MANIFEST.json
+integration/injectable-def/NPM_PACKAGE_MANIFEST.json
+integration/ivy-i18n/NPM_PACKAGE_MANIFEST.json
+integration/language_service_plugin/NPM_PACKAGE_MANIFEST.json
+integration/ng_elements/NPM_PACKAGE_MANIFEST.json
+integration/ng_elements_schematics/NPM_PACKAGE_MANIFEST.json
+integration/ng_update/NPM_PACKAGE_MANIFEST.json
+integration/ng_update_migrations/NPM_PACKAGE_MANIFEST.json
+integration/ngcc/NPM_PACKAGE_MANIFEST.json
+integration/platform-server/NPM_PACKAGE_MANIFEST.json
+integration/service-worker-schema/NPM_PACKAGE_MANIFEST.json
+integration/side-effects/NPM_PACKAGE_MANIFEST.json
+integration/terser/NPM_PACKAGE_MANIFEST.json
+integration/typings_test_ts36/NPM_PACKAGE_MANIFEST.json
+integration/typings_test_ts37/NPM_PACKAGE_MANIFEST.json

.bazelrc

@@ -62,6 +62,16 @@ test --test_output=errors
 
 # Bazel flags for CircleCI are in /.circleci/bazel.linux.rc and /.circleci/bazel.windows.rc
 
+##################################
+# Settings for integration tests #
+##################################
+
+# Trick bazel into treating BUILD files under integration/bazel as being regular files
+# This lets us glob() up all the files inside this integration test to make them inputs to tests
+# (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
+build --deleted_packages=integration/bazel,integration/bazel/src,integration/bazel/src/hello-world,integration/bazel/test,integration/bazel/test/e2e
+query --deleted_packages=integration/bazel,integration/bazel/src,integration/bazel/src/hello-world,integration/bazel/test,integration/bazel/test/e2e
+
 ################################
 # Temporary Settings for Ivy   #
 ################################
@@ -100,7 +110,6 @@ build:remote --javabase=@rbe_ubuntu1604_angular//java:jdk
 build:remote --host_java_toolchain=@bazel_tools//tools/jdk:toolchain_hostjdk8
 build:remote --java_toolchain=@bazel_tools//tools/jdk:toolchain_hostjdk8
 build:remote --crosstool_top=@rbe_ubuntu1604_angular//cc:toolchain
-build:remote --action_env=BAZEL_DO_NOT_DETECT_CPP_TOOLCHAIN=1
 build:remote --extra_toolchains=@rbe_ubuntu1604_angular//config:cc-toolchain
 build:remote --extra_execution_platforms=//tools:rbe_ubuntu1604-angular
 build:remote --host_platform=//tools:rbe_ubuntu1604-angular

.circleci/config.yml

@@ -78,20 +78,6 @@ executors:
     resource_class: << parameters.resource_class >>
     working_directory: ~/ng
 
-  browsers-executor:
-    parameters:
-      resource_class:
-        type: string
-        default: medium
-    docker:
-      # The browser docker image comes with Chrome and Firefox preinstalled. This is just
-      # needed for jobs that run tests without Bazel. Bazel runs tests with browsers that will be
-      # fetched by the Webtesting rules. Therefore for jobs that run tests with Bazel, we don't need a
-      # docker image with browsers pre-installed.
-      - image: circleci/node:12.14.1-browsers@sha256:792797ab9be3179be7c9fc38a0931a3349288e699467c8d646d7c54e148ae46c
-    resource_class: << parameters.resource_class >>
-    working_directory: ~/ng
-
   windows-executor:
     working_directory: ~/ng
     resource_class: windows.medium
@@ -136,6 +122,19 @@ commands:
             # circleci/node:x.x.x-browsers image.
             sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1
 
+  # Install java runtime which is required by some integration tests such as
+  # //integration:hello_world__closure_test, //integration:i18n_test and
+  # //integration:ng_elements_test to run the closure compiler
+  install_java:
+    description: Install java
+    steps:
+      - run:
+          name: Install java
+          command: |
+            sudo apt-get update
+            # Install java runtime
+            sudo apt-get install default-jre
+
   # Initializes the CI environment by setting up common environment variables.
   init_environment:
     description: Initializing environment (setting up variables)
@@ -281,10 +280,16 @@ jobs:
   test:
     executor:
       name: default-executor
-      resource_class: xlarge
+      # Now that large integration tests are running locally in parallel (they can't run on RBE yet
+      # as they require network access for yarn install), this test is running out of memory
+      # consistently with the xlarge machine.
+      # TODO: switch back to xlarge once integration tests are running on remote-exec
+      resource_class: 2xlarge+
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
+      - install_java
       - run:
           command: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
           no_output_timeout: 20m
@@ -297,6 +302,7 @@ jobs:
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
       # We need to explicitly specify the --symlink_prefix option because otherwise we would
       # not be able to easily find the output bin directory when uploading artifacts for size
       # measurements.
@@ -323,11 +329,7 @@ jobs:
           path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
           destination: core/todo/bundle.br
 
-  # This job is currently a PoC for running tests on SauceLabs via bazel. It runs a subset of the
-  # tests in `legacy-unit-tests-saucelabs` (see
-  # [BUILD.bazel](https://github.com/angular/angular/blob/ef44f51d5/BUILD.bazel#L66-L92)).
-  #
-  # NOTE: This is currently limited to master builds only. See the `default_workflow` configuration.
+  # NOTE: This is currently limited to master builds only. See the `monitoring` configuration.
   saucelabs_view_engine:
     executor:
       name: default-executor
@@ -340,16 +342,18 @@ jobs:
       - init_environment
       - init_saucelabs_environment
       - run:
-          name: Run Bazel tests on Saucelabs
+          name: Run Bazel tests on Saucelabs with ViewEngine
           # See /tools/saucelabs/README.md for more info
           command: |
             yarn bazel run //tools/saucelabs:sauce_service_setup
-            yarn bazel test //:saucelabs_unit_tests_poc_suite --config=saucelabs
+            TESTS=$(./node_modules/.bin/bazel query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "ivy-only", ...) except attr("tags", "fixme-saucelabs-ve", ...)')
+            yarn bazel test --config=saucelabs ${TESTS}
             yarn bazel run //tools/saucelabs:sauce_service_stop
-          no_output_timeout: 20m
+          no_output_timeout: 40m
       - notify_webhook_on_fail:
           webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
 
+  # NOTE: This is currently limited to master builds only. See the `monitoring` configuration.
   saucelabs_ivy:
     executor:
       name: default-executor
@@ -362,13 +366,16 @@ jobs:
       - init_environment
       - init_saucelabs_environment
       - run:
-          name: Run Bazel tests on Saucelabs
+          name: Run Bazel tests on Saucelabs with Ivy
           # See /tools/saucelabs/README.md for more info
           command: |
             yarn bazel run //tools/saucelabs:sauce_service_setup
-            yarn bazel test //:saucelabs_unit_tests --config=saucelabs --config=ivy
+            TESTS=$(./node_modules/.bin/bazel query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "no-ivy-aot", ...) except attr("tags", "fixme-saucelabs-ivy", ...)')
+            yarn bazel test --config=saucelabs --config=ivy ${TESTS}
             yarn bazel run //tools/saucelabs:sauce_service_stop
-          no_output_timeout: 20m
+          no_output_timeout: 40m
+      - notify_webhook_on_fail:
+          webhook_url_env_var: SLACK_DEV_INFRA_CI_FAILURES_WEBHOOK_URL
 
   test_aio:
     executor: default-executor
@@ -546,25 +553,18 @@ jobs:
           paths:
             - ng/dist/packages-dist-ivy-aot
 
-  # We run the integration tests outside of Bazel for now.
-  # They are a separate workflow job so that they can be easily re-run.
-  # When the tests are ported to bazel test targets, they should move to the "test"
-  # job above, as part of the bazel test command. That has flaky_test_attempts so the
-  # need to re-run manually should be alleviated.
+  # We run a subset of the integration tests outside of Bazel that track
+  # payload size.
   # See comments inside the integration/run_tests.sh script.
+  # TODO(gregmagolan): move payload size tracking to Bazel and remove this job.
   integration_test:
-    executor:
-      # Needed because the integration/bazel-schematics test expects Chrome to be installed
-      # TODO(gregmagolan): remove the dependency on local chrome from that test
-      name: browsers-executor
-      # Note: we run Bazel in one of the integration tests, and it can consume >2G
-      # of memory. Together with the system under test, this can exhaust the RAM
-      # on a 4G worker so we use a larger machine here too.
-      resource_class: xlarge
-    parallelism: 4
+    executor: default-executor
+    parallelism: 3
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
+      - install_java
       # Runs the integration tests in parallel across multiple CircleCI container instances. The
       # amount of container nodes for this job is controlled by the "parallelism" option.
       - run: ./integration/run_tests.sh ${CIRCLE_NODE_INDEX} ${CIRCLE_NODE_TOTAL}
@@ -818,17 +818,6 @@ workflows:
       - legacy-unit-tests-saucelabs:
           requires:
             - setup
-      - saucelabs_ivy:
-          requires:
-            - test_ivy_aot
-      - saucelabs_view_engine:
-          # This job is currently a PoC and a subset of `legacy-unit-tests-saucelabs`. Running on
-          # master only to avoid wasting resources.
-          # TODO: Run this job on all branches (including PRs) as soon as it is not a PoC and
-          # we can remove the legacy saucelabs job.
-          <<: *only_on_master
-          requires:
-            - setup
       - test_aio:
           requires:
             - setup
@@ -878,7 +867,6 @@ workflows:
             - test
             - test_ivy_aot
             - integration_test
-            - saucelabs_ivy
             # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
             - test_aio_local
             - test_aio_local_viewengine
@@ -910,7 +898,7 @@ workflows:
           requires:
             - test_ivy_aot
 
-  aio_monitoring:
+  monitoring:
     jobs:
       - setup
       - aio_monitoring_stable:
@@ -919,8 +907,26 @@ workflows:
       - aio_monitoring_next:
           requires:
             - setup
+      - saucelabs_ivy:
+          # Testing saucelabs via Bazel currently taking longer than the legacy saucelabs job as it
+          # each karma_web_test target is provisioning and tearing down browsers which is adding
+          # a lot of overhead. Running once daily on master only to avoid wasting resources and
+          # slowing down CI for PRs.
+          # TODO: Run this job on all branches (including PRs) once karma_web_test targets can
+          # share provisioned browsers and we can remove the legacy saucelabs job.
+          requires:
+            - setup
+      - saucelabs_view_engine:
+          # Testing saucelabs via Bazel currently taking longer than the legacy saucelabs job as it
+          # each karma_web_test target is provisioning and tearing down browsers which is adding
+          # a lot of overhead. Running once daily on master only to avoid wasting resources and
+          # slowing down CI for PRs.
+          # TODO: Run this job on all branches (including PRs) once karma_web_test targets can
+          # share provisioned browsers and we can remove the legacy saucelabs job.
+          requires:
+            - setup
     triggers:
       - schedule:
           <<: *only_on_master
-          # Runs AIO monitoring jobs at 10:00AM every day.
+          # Runs monitoring jobs at 10:00AM every day.
           cron: "0 10 * * *"

.pullapprove.yml

@@ -40,6 +40,7 @@
 #  AndrewKushnir - Andrew Kushnir
 #  andrewseguin - Andrew Seguin
 #  atscott - Andrew Scott
+#  ayazhafiz - Ayaz Hafiz
 #  clydin - Charles Lyding
 #  crisbeto - Kristiyan Kostadinov
 #  dennispbrown - Denny Brown
@@ -630,6 +631,7 @@ groups:
           ])
     reviewers:
       users:
+        - ayazhafiz
         - kyliau
       teams:
         - ~framework-global-approvers
@@ -643,7 +645,8 @@ groups:
     conditions:
       - >
         contains_any_globs(files, [
-          'packages/zone.js/**'
+          'packages/zone.js/**',
+          'aio/content/guide/zone.md'
           ])
     reviewers:
       users:
@@ -953,6 +956,7 @@ groups:
           'tools/ng_rollup_bundle/**',
           'tools/ngcontainer/**',
           'tools/npm/**',
+          'tools/npm_integration_test/**',
           'tools/public_api_guard/BUILD.bazel',
           'tools/public_api_guard/public_api_guard.bzl',
           'tools/pullapprove/**',

BUILD.bazel

@@ -1,7 +1,5 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "karma_web_test")
-
 exports_files([
     "LICENSE",
     "protractor-perf.conf.js",
@@ -46,76 +44,3 @@ filegroup(
         "@npm//:node_modules/angular-mocks-1.6/angular-mocks.js",
     ],
 )
-
-# To run manually:
-# Setup your SAUCE_USERNAME, SAUCE_ACCESS_KEY & SAUCE_TUNNEL_IDENTIFIER.
-# If on OSX, also set SAUCE_CONNECT to the path of your `sc` binary.
-# environment variables and run:
-# ```
-# yarn bazel run //tools/saucelabs:sauce_service_setup
-# yarn bazel test //:saucelabs_unit_tests --config=saucelabs --config=ivy
-# ```
-# See /tools/saucelabs/README.md for more info on karma Saucelabs tests under Bazel.
-karma_web_test(
-    name = "saucelabs_unit_tests",
-    # Default timeout is moderate (5min). This causes the test to be terminated while
-    # Saucelabs browsers keep running. Ultimately resulting in failing tests and browsers
-    # unnecessarily being acquired. Our specified Saucelabs idle timeout is 10min, so we use
-    # Bazel's long timeout (15min). This ensures that Karma can shut down properly.
-    timeout = "long",
-    karma = "//tools/saucelabs:karma-saucelabs",
-    tags = [
-        "manual",
-        "no-remote-exec",
-        "saucelabs",
-    ],
-    deps = [
-        "//packages/core/test/acceptance:acceptance_lib",
-    ],
-)
-
-SAUCE_TEST_SUITE_TARGETS = [
-    "packages/common/http/test:test_lib",
-    "packages/common/http/testing/test:test_lib",
-    "packages/common/test:test_lib",
-    "packages/core/test:test_lib",
-    "packages/forms/test:test_lib",
-    "packages/http/test:test_lib",
-]
-
-[
-    # These target runs in CI with View Engine as a Saucelabs and Bazel proof-of-concept. It's a
-    # subset of the legacy saucelabs tests.
-    karma_web_test(
-        name = "saucelabs_unit_tests_poc_%s" % test.replace("/", "_").replace(":", "_").replace(".", "_"),
-        # Default timeout is moderate (5min). This causes the test to be terminated while
-        # Saucelabs browsers keep running. Ultimately resulting in failing tests and browsers
-        # unnecessarily being acquired. Our specified Saucelabs idle timeout is 10min, so we use
-        # Bazel's long timeout (15min). This ensures that Karma can shut down properly.
-        timeout = "long",
-        karma = "//tools/saucelabs:karma-saucelabs",
-        tags = [
-            "exclusive",
-            "manual",
-            "no-remote-exec",
-            "saucelabs",
-        ],
-        deps = ["//%s" % test],
-    )
-    for test in SAUCE_TEST_SUITE_TARGETS
-]
-
-# To run manually:
-# Setup your SAUCE_USERNAME, SAUCE_ACCESS_KEY & SAUCE_TUNNEL_IDENTIFIER.
-# If on OSX, also set SAUCE_CONNECT to the path of your `sc` binary.
-# environment variables and run:
-# ```
-# yarn bazel run //tools/saucelabs:sauce_service_setup
-# yarn bazel test //:saucelabs_unit_tests_poc_suite --config=saucelabs
-# ```
-# See /tools/saucelabs/README.md for more info on karma Saucelabs tests under Bazel.
-test_suite(
-    name = "saucelabs_unit_tests_poc_suite",
-    tags = ["manual"],
-    tests = ["//:saucelabs_unit_tests_poc_%s" % test.replace("/", "_").replace(":", "_").replace(".", "_") for test in SAUCE_TEST_SUITE_TARGETS],
-)

CHANGELOG.md

@@ -1,3 +1,50 @@
+<a name="9.0.3"></a>
+## [9.0.3](https://github.com/angular/angular/compare/9.0.2...9.0.3) (2020-02-27)
+
+
+### Bug Fixes
+
+* **animations:** false positive when detecting Node in Webpack builds ([#35134](https://github.com/angular/angular/issues/35134)) ([224aaae](https://github.com/angular/angular/commit/224aaae)), closes [#35117](https://github.com/angular/angular/issues/35117)
+* **animations:** Remove ɵAnimationDriver from private exports ([#35690](https://github.com/angular/angular/issues/35690)) ([c2dbcd3](https://github.com/angular/angular/commit/c2dbcd3))
+* **compiler:** use FatalDiagnosticError to generate better error messages ([#35244](https://github.com/angular/angular/issues/35244)) ([72664ca](https://github.com/angular/angular/commit/72664ca))
+* **core:** make subclass inherit developer-defined data ([#35105](https://github.com/angular/angular/issues/35105)) ([f5e1faa](https://github.com/angular/angular/commit/f5e1faa))
+* **core:** support sanitizer value in the [style] bindings ([#35564](https://github.com/angular/angular/issues/35564)) ([36dc1c7](https://github.com/angular/angular/commit/36dc1c7)), closes [#35476](https://github.com/angular/angular/issues/35476)
+* **core:** Add `style="{{exp}}"` based interpolation ([#34202](https://github.com/angular/angular/issues/34202)) ([d63ba9c](https://github.com/angular/angular/commit/d63ba9c)), closes [#33575](https://github.com/angular/angular/issues/33575)
+* **core:** add strictLiteralTypes to align core + VE checking of literals ([#35462](https://github.com/angular/angular/issues/35462)) ([628f957](https://github.com/angular/angular/commit/628f957))
+* **core:** better inference for circularly referenced directive types ([#35622](https://github.com/angular/angular/issues/35622)) ([4c2bd64](https://github.com/angular/angular/commit/4c2bd64)), closes [#35372](https://github.com/angular/angular/issues/35372) [#35603](https://github.com/angular/angular/issues/35603) [#35522](https://github.com/angular/angular/issues/35522)
+* **core:** emulate a View Engine type-checking bug with safe navigation ([#35462](https://github.com/angular/angular/issues/35462)) ([02599e4](https://github.com/angular/angular/commit/02599e4))
+* **core:** error in AOT when pipe inherits constructor from injectable that uses DI ([#35468](https://github.com/angular/angular/issues/35468)) ([bb09cd0](https://github.com/angular/angular/commit/bb09cd0)), closes [#35277](https://github.com/angular/angular/issues/35277)
+* **core:** error when accessing NgModuleRef.componentFactoryResolver in constructor ([#35637](https://github.com/angular/angular/issues/35637)) ([d690488](https://github.com/angular/angular/commit/d690488)), closes [#35580](https://github.com/angular/angular/issues/35580)
+* **core:** incorrectly generating shared pure function between null and object literal ([#35481](https://github.com/angular/angular/issues/35481)) ([8a531e2](https://github.com/angular/angular/commit/8a531e2)), closes [#33705](https://github.com/angular/angular/issues/33705) [#35298](https://github.com/angular/angular/issues/35298)
+* **core:** injecting incorrect provider when re-providing injectable with useClass ([#34574](https://github.com/angular/angular/issues/34574)) ([79aaaa3](https://github.com/angular/angular/commit/79aaaa3)), closes [#34110](https://github.com/angular/angular/issues/34110)
+* **core:** provide a more detailed error message for NG6002/NG6003 ([#35620](https://github.com/angular/angular/issues/35620)) ([e6c416f](https://github.com/angular/angular/commit/e6c416f))
+* **language-service:** get the right 'ElementAst' in the nested HTML tag ([#35317](https://github.com/angular/angular/issues/35317)) ([7403ba1](https://github.com/angular/angular/commit/7403ba1))
+* **language-service:** infer context type of structural directives ([#35537](https://github.com/angular/angular/issues/35537)) ([#35561](https://github.com/angular/angular/issues/35561)) ([a491f7e](https://github.com/angular/angular/commit/a491f7e))
+* **language-service:** provide hover for interpolation in attribute value ([#35494](https://github.com/angular/angular/issues/35494)) ([0700279](https://github.com/angular/angular/commit/0700279)), closes [PR#34847](https://github.com/PR/issues/34847)
+* **localize:** improve placeholder mismatch error message ([#35593](https://github.com/angular/angular/issues/35593)) ([1112875](https://github.com/angular/angular/commit/1112875))
+* **localize:** support minified ES5 `$localize` calls ([#35562](https://github.com/angular/angular/issues/35562)) ([bc7a8a8](https://github.com/angular/angular/commit/bc7a8a8)), closes [#35376](https://github.com/angular/angular/issues/35376)
+* **ngcc:** add default config for `angular2-highcharts` ([#35527](https://github.com/angular/angular/issues/35527)) ([aebd662](https://github.com/angular/angular/commit/aebd662)), closes [#35399](https://github.com/angular/angular/issues/35399)
+* **ngcc:** capture path-mapped entry-points that start with same string ([#35592](https://github.com/angular/angular/issues/35592)) ([d83f62d](https://github.com/angular/angular/commit/d83f62d)), closes [#35536](https://github.com/angular/angular/issues/35536)
+* **ngcc:** correctly detect emitted TS helpers in ES5 ([#35191](https://github.com/angular/angular/issues/35191)) ([af4fe3a](https://github.com/angular/angular/commit/af4fe3a))
+* **ngcc:** correctly detect outer aliased class identifiers in ES5 ([#35527](https://github.com/angular/angular/issues/35527)) ([39bd9a7](https://github.com/angular/angular/commit/39bd9a7)), closes [#35399](https://github.com/angular/angular/issues/35399)
+* **ngcc:** handle imports in dts files when processing CommonJS ([#35191](https://github.com/angular/angular/issues/35191)) ([12e3db8](https://github.com/angular/angular/commit/12e3db8)), closes [#34356](https://github.com/angular/angular/issues/34356)
+* **router:** removed unused ApplicationRef dependency ([#35642](https://github.com/angular/angular/issues/35642)) ([2f140f5](https://github.com/angular/angular/commit/2f140f5)), closes [/github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97#diff-c0baae5e1df628e1a217e8dc38557](https://github.com//github.com/angular/angular/commit/5a849829c42330d7e88e83e916e6e36380c97a97/issues/diff-c0baae5e1df628e1a217e8dc38557)
+* **service-worker:** treat 503 as offline ([#35595](https://github.com/angular/angular/issues/35595)) ([64a415b](https://github.com/angular/angular/commit/64a415b)), closes [#35571](https://github.com/angular/angular/issues/35571)
+
+
+### Features
+
+* **ngcc:** implement source-map flattening ([#35132](https://github.com/angular/angular/issues/35132)) ([0a8e8cd](https://github.com/angular/angular/commit/0a8e8cd))
+* **zone.js** add an tickOptions parameter with property processNewMacroTasksSynchronously. ([#33838](https://github.com/angular/angular/issues/33838)) ([7d2ea93](https://github.com/angular/angular/commit/7d2ea93)), closes [#33799](https://github.com/angular/angular/issues/33799)
+
+
+### Performance Improvements
+
+* **core:** avoid recursive scope recalculation when TestBed.overrideModule is used ([#35454](https://github.com/angular/angular/issues/35454)) ([349539e](https://github.com/angular/angular/commit/349539e))
+* **core:** remove unused event argument in listener instructions ([#35097](https://github.com/angular/angular/issues/35097)) ([afc5b3e](https://github.com/angular/angular/commit/afc5b3e))
+
+
+
 <a name="9.0.2"></a>
 ## [9.0.2](https://github.com/angular/angular/compare/9.0.1...9.0.2) (2020-02-19)
 

WORKSPACE

@@ -43,8 +43,11 @@ node_repositories(
     package_json = ["//:package.json"],
 )
 
+load("//integration:angular_integration_test.bzl", "npm_package_archives")
+
 yarn_install(
     name = "npm",
+    manual_build_file_contents = npm_package_archives(),
     package_json = "//:package.json",
     yarn_lock = "//:yarn.lock",
 )

aio/content/examples/router/src/app/auth/login/login.component.1.ts

@@ -1,6 +1,6 @@
 // #docregion
-import { Component }   from '@angular/core';
-import { Router }      from '@angular/router';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
 @Component({
@@ -25,12 +25,12 @@ export class LoginComponent {
     this.authService.login().subscribe(() => {
       this.setMessage();
       if (this.authService.isLoggedIn) {
-        // Get the redirect URL from our auth service
-        // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
+        // Usually you would use the redirect URL from the auth service.
+        // However to keep the example simple, we will always redirect to `/admin`.
+        const redirectUrl = '/admin';
 
         // Redirect the user
-        this.router.navigateByUrl(redirect);
+        this.router.navigate([redirectUrl]);
       }
     });
   }

aio/content/examples/router/src/app/auth/login/login.component.ts

@@ -1,8 +1,7 @@
 // #docregion
-import { Component }        from '@angular/core';
-import { Router,
-         NavigationExtras } from '@angular/router';
-import { AuthService }      from '../auth.service';
+import { Component } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-login',
@@ -26,9 +25,9 @@ export class LoginComponent {
     this.authService.login().subscribe(() => {
       this.setMessage();
       if (this.authService.isLoggedIn) {
-        // Get the redirect URL from our auth service
-        // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
+        // Usually you would use the redirect URL from the auth service.
+        // However to keep the example simple, we will always redirect to `/admin`.
+        const redirectUrl = '/admin';
 
         // #docregion preserve
         // Set our navigation extras object
@@ -39,7 +38,7 @@ export class LoginComponent {
         };
 
         // Redirect the user
-        this.router.navigateByUrl(redirect, navigationExtras);
+        this.router.navigate([redirectUrl], navigationExtras);
         // #enddocregion preserve
       }
     });

aio/content/examples/testing/src/app/demo/async-helper.spec.ts

@@ -25,21 +25,21 @@ describe('Angular async helper', () => {
        async(() => { setTimeout(() => { actuallyDone = true; }, 0); }));
 
     it('should run async test with task', async(() => {
-      const id = setInterval(() => {
-        actuallyDone = true;
-        clearInterval(id);
-      }, 100);
-    }));
+         const id = setInterval(() => {
+           actuallyDone = true;
+           clearInterval(id);
+         }, 100);
+       }));
 
     it('should run async test with successful promise', async(() => {
-      const p = new Promise(resolve => { setTimeout(resolve, 10); });
-      p.then(() => { actuallyDone = true; });
-    }));
+         const p = new Promise(resolve => { setTimeout(resolve, 10); });
+         p.then(() => { actuallyDone = true; });
+       }));
 
     it('should run async test with failed promise', async(() => {
-      const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
-      p.catch(() => { actuallyDone = true; });
-    }));
+         const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
+         p.catch(() => { actuallyDone = true; });
+       }));
 
     // Use done. Can also use async or fakeAsync.
     it('should run async test with successful delayed Observable', (done: DoneFn) => {
@@ -48,56 +48,84 @@ describe('Angular async helper', () => {
     });
 
     it('should run async test with successful delayed Observable', async(() => {
-      const source = of (true).pipe(delay(10));
-      source.subscribe(val => actuallyDone = true, err => fail(err));
-    }));
+         const source = of (true).pipe(delay(10));
+         source.subscribe(val => actuallyDone = true, err => fail(err));
+       }));
 
     it('should run async test with successful delayed Observable', fakeAsync(() => {
-      const source = of (true).pipe(delay(10));
-      source.subscribe(val => actuallyDone = true, err => fail(err));
+         const source = of (true).pipe(delay(10));
+         source.subscribe(val => actuallyDone = true, err => fail(err));
 
-      tick(10);
-    }));
+         tick(10);
+       }));
   });
 
   describe('fakeAsync', () => {
     // #docregion fake-async-test-tick
     it('should run timeout callback with delay after call tick with millis', fakeAsync(() => {
-        let called = false;
-        setTimeout(() => { called = true; }, 100);
-        tick(100);
-        expect(called).toBe(true);
-      }));
+         let called = false;
+         setTimeout(() => { called = true; }, 100);
+         tick(100);
+         expect(called).toBe(true);
+       }));
     // #enddocregion fake-async-test-tick
 
+    // #docregion fake-async-test-tick-new-macro-task-sync
+    it('should run new macro task callback with delay after call tick with millis',
+       fakeAsync(() => {
+         function nestedTimer(cb: () => any): void { setTimeout(() => setTimeout(() => cb())); }
+         const callback = jasmine.createSpy('callback');
+         nestedTimer(callback);
+         expect(callback).not.toHaveBeenCalled();
+         tick(0);
+         // the nested timeout will also be triggered
+         expect(callback).toHaveBeenCalled();
+       }));
+    // #enddocregion fake-async-test-tick-new-macro-task-sync
+
+    // #docregion fake-async-test-tick-new-macro-task-async
+    it('should not run new macro task callback with delay after call tick with millis',
+       fakeAsync(() => {
+         function nestedTimer(cb: () => any): void { setTimeout(() => setTimeout(() => cb())); }
+         const callback = jasmine.createSpy('callback');
+         nestedTimer(callback);
+         expect(callback).not.toHaveBeenCalled();
+         tick(0, {processNewMacroTasksSynchronously: false});
+         // the nested timeout will not be triggered
+         expect(callback).not.toHaveBeenCalled();
+         tick(0);
+         expect(callback).toHaveBeenCalled();
+       }));
+    // #enddocregion fake-async-test-tick-new-macro-task-async
+
     // #docregion fake-async-test-date
     it('should get Date diff correctly in fakeAsync', fakeAsync(() => {
-        const start = Date.now();
-        tick(100);
-        const end = Date.now();
-        expect(end - start).toBe(100);
-      }));
+         const start = Date.now();
+         tick(100);
+         const end = Date.now();
+         expect(end - start).toBe(100);
+       }));
     // #enddocregion fake-async-test-date
 
     // #docregion fake-async-test-rxjs
     it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
-        // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
-        // to patch rxjs scheduler
-        let result = null;
-        of ('hello').pipe(delay(1000)).subscribe(v => { result = v; });
-        expect(result).toBeNull();
-        tick(1000);
-        expect(result).toBe('hello');
+         // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
+         // to patch rxjs scheduler
+         let result = null;
+         of ('hello').pipe(delay(1000)).subscribe(v => { result = v; });
+         expect(result).toBeNull();
+         tick(1000);
+         expect(result).toBe('hello');
 
-        const start = new Date().getTime();
-        let dateDiff = 0;
-        interval(1000).pipe(take(2)).subscribe(() => dateDiff = (new Date().getTime() - start));
+         const start = new Date().getTime();
+         let dateDiff = 0;
+         interval(1000).pipe(take(2)).subscribe(() => dateDiff = (new Date().getTime() - start));
 
-        tick(1000);
-        expect(dateDiff).toBe(1000);
-        tick(1000);
-        expect(dateDiff).toBe(2000);
-      }));
+         tick(1000);
+         expect(dateDiff).toBe(1000);
+         tick(1000);
+         expect(dateDiff).toBe(2000);
+       }));
     // #enddocregion fake-async-test-rxjs
   });
 

aio/content/guide/architecture-next-steps.md

@@ -11,6 +11,8 @@ about the features and tools that can help you develop and deliver Angular appli
 
 ## Application architecture
 
+* The [Components and templates](guide/displaying-data) guide explains how to connect the application data in your [components](guide/glossary#component) to your page-display [templates](guide/glossary#template), to create a complete interactive application.
+
 * The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
 
 * The [Routing and navigation](guide/router) guide provides in-depth information on how to construct applications that allow a user to navigate to different [views](guide/glossary#view) within your single-page app.

aio/content/guide/deployment.md

@@ -80,6 +80,7 @@ In the table below, you can find a list of packages which implement deployment f
 | [Netlify](https://www.netlify.com/)                           | [`@netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy) |
 | [GitHub pages](https://pages.github.com/)                     | [`angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)         |
 | [NPM](https://npmjs.com/)                                     | [`ngx-deploy-npm`](https://npmjs.org/package/ngx-deploy-npm)                   |
+| [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`@jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |
 
 If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your app.
 

aio/content/guide/displaying-data.md

@@ -1,11 +1,20 @@
-# Displaying data
+# Displaying data in views
 
-You can display data by binding controls in an HTML template to properties of an Angular component.
+Angular [components](guide/glossary#component) form the data structure of your application.
+The HTML [template](guide/glossary#template) associated with a component provides the means to display that data in the context of a web page.
+Together, a component's class and template form a [view](guide/glossary#view) of your application data.
 
-In this page, you'll create a component with a list of heroes.
-You'll display the list of hero names and
-conditionally show a message below the list.
+The process of combining data values with their representation on the page is called [data binding](guide/glossary#data-binding).
+You display your data to a user (and collect data from the user) by *binding* controls in the HTML template to the data properties of the component class.
 
+In addition, you can add logic to the template by including [directives](guide/glossary#directive), which tell Angular how to modify the page as it is rendered.
+
+Angular defines a *template language* that expands HTML notation with syntax that allows you to define various kinds of data binding and logical directives.
+When the page is rendered, Angular interprets the template syntax to update the HTML according to your logic and current data state.
+Before you read the complete [template syntax guide](guide/template-syntax), the exercises on this page give you a quick demonstration of how template syntax works.
+
+In this demo, you'll create a component with a list of heroes.
+You'll display the list of hero names and conditionally show a message below the list.
 The final UI looks like this:
 
 <div class="lightbox">
@@ -14,20 +23,14 @@ The final UI looks like this:
 
 <div class="alert is-helpful">
 
-
-
-The <live-example></live-example> demonstrates all of the syntax and code
-snippets described in this page.
-
+The <live-example></live-example> demonstrates all of the syntax and code snippets described in this page.
 
 </div>
 
-
 {@a interpolation}
 
 ## Showing component properties with interpolation
-The easiest way to display a component property
-is to bind the property name through interpolation.
+The easiest way to display a component property is to bind the property name through interpolation.
 With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
 
 Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`.
@@ -39,63 +42,43 @@ changing the template and the body of the component.
 
 When you're done, it should look like this:
 
-
 <code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts"></code-example>
 
-
-
 You added two properties to the formerly empty component: `title` and `myHero`.
 
 The template displays the two component properties using double curly brace
 interpolation:
 
-
 <code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts (template)" region="template"></code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
 The template is a multi-line string within ECMAScript 2015 backticks (<code>\`</code>).
 The backtick (<code>\`</code>)&mdash;which is *not* the same character as a single
 quote (`'`)&mdash;allows you to compose a string over several lines, which makes the
 HTML more readable.
 
-
 </div>
 
-
-
 Angular automatically pulls the value of the `title` and `myHero` properties from the component and
 inserts those values into the browser. Angular updates the display
 when these properties change.
 
-
 <div class="alert is-helpful">
 
-
-
 More precisely, the redisplay occurs after some kind of asynchronous event related to
 the view, such as a keystroke, a timer completion, or a response to an HTTP request.
 
-
 </div>
 
-
-
 Notice that you don't call **new** to create an instance of the `AppComponent` class.
 Angular is creating an instance for you. How?
 
 The CSS `selector` in the `@Component` decorator specifies an element named `<app-root>`.
 That element is a placeholder in the body of your `index.html` file:
 
-
 <code-example path="displaying-data/src/index.html" header="src/index.html (body)" region="body"></code-example>
 
-
-
 When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<app-root>`
 in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
 inside the `<app-root>` tag.
@@ -109,45 +92,44 @@ Now run the app. It should display the title and hero name:
 The next few sections review some of the coding choices in the app.
 
 
-## Template inline or template file?
+## Choosing the template source
 
+The `@Component` metadata tells Angular where to find the component's template.
 You can store your component's template in one of two places.
-You can define it *inline* using the `template` property, or you can define
-the template in a separate HTML file and link to it in
-the component metadata using the `@Component` decorator's `templateUrl` property.
 
-The choice between inline and separate HTML is a matter of taste,
-circumstances, and organization policy.
-Here the app uses inline HTML because the template is small and the demo
-is simpler without the additional HTML file.
+* You can define the template *inline* using the `template` property of the `@Component` decorator. An inline template is useful for a small demo or test.
+* Alternatively, you can define the template in a separate HTML file and link to that file in the `templateUrl` property of the `@Component` decorator. This configuration is typical for anything more complex than a small test or demo, and is the default when you generate a new component.
 
 In either style, the template data bindings have the same access to the component's properties.
+Here the app uses inline HTML because the template is small and the demo is simpler without the additional HTML file.
 
 <div class="alert is-helpful">
 
-  By default, the Angular CLI command [`ng generate component`](cli/generate) generates components with a template file. You can override that with:
+  By default, the Angular CLI command [`ng generate component`](cli/generate) generates components with a template file.
+  You can override that by adding the "-t" (short for `inlineTemplate=true`) option:
 
   <code-example hideCopy language="sh" class="code-shell">
-    ng generate component hero -it
+    ng generate component hero -t
   </code-example>
 
 </div>
 
 
-## Constructor or variable initialization?
-
-Although this example uses variable assignment to initialize the components, you could instead declare and initialize the properties using a constructor:
+## Initialization
 
+The following example uses variable assignment to initialize the components.
 
 <code-example path="displaying-data/src/app/app-ctor.component.1.ts" region="class"></code-example>
 
+ You could instead declare and initialize the properties using a constructor.
+ This app uses more terse "variable assignment" style simply for brevity.
 
 
-This app uses more terse "variable assignment" style simply for brevity.
-
 {@a ngFor}
 
-## Showing an array property with ***ngFor**
+## Add logic to loop through data
+
+The `*ngFor` directive (predefined by Angular) lets you loop through data. The following example uses the directive to show all of the values in an array property.
 
 To display a list of heroes, begin by adding an array of hero names to the component and redefine `myHero` to be the first name in the array.
 
@@ -155,15 +137,12 @@ To display a list of heroes, begin by adding an array of hero names to the compo
 <code-example path="displaying-data/src/app/app.component.2.ts" header="src/app/app.component.ts (class)" region="class"></code-example>
 
 
-
-Now use the Angular `ngFor` directive in the template to display
-each item in the `heroes` list.
+Now use the Angular `ngFor` directive in the template to display each item in the `heroes` list.
 
 
 <code-example path="displaying-data/src/app/app.component.2.ts" header="src/app/app.component.ts (template)" region="template"></code-example>
 
 
-
 This UI uses the HTML unordered list with `<ul>` and `<li>` tags. The `*ngFor`
 in the `<li>` element is the Angular "repeater" directive.
 It marks that `<li>` element (and its children) as the "repeater template":
@@ -171,20 +150,13 @@ It marks that `<li>` element (and its children) as the "repeater template":
 
 <code-example path="displaying-data/src/app/app.component.2.ts" header="src/app/app.component.ts (li)" region="li"></code-example>
 
-
-
 <div class="alert is-important">
 
-
-
 Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
 For more information, see the [Template Syntax](guide/template-syntax#ngFor) page.
 
-
 </div>
 
-
-
 Notice the `hero` in the `ngFor` double-quoted instruction;
 it is an example of a template input variable. Read
 more about template input variables in the [microsyntax](guide/template-syntax#microsyntax) section of
@@ -194,18 +166,13 @@ Angular duplicates the `<li>` for each item in the list, setting the `hero` vari
 to the item (the hero) in the current iteration. Angular uses that variable as the
 context for the interpolation in the double curly braces.
 
-
 <div class="alert is-helpful">
 
-
-
 In this case, `ngFor` is displaying an array, but `ngFor` can
 repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
 
 </div>
 
-
-
 Now the heroes appear in an unordered list.
 
 <div class="lightbox">
@@ -228,13 +195,11 @@ of hero names into an array of `Hero` objects. For that you'll need a `Hero` cla
   ng generate class hero
 </code-example>
 
-With the following code:
+This command creates the following code.
 
 
 <code-example path="displaying-data/src/app/hero.ts" header="src/app/hero.ts"></code-example>
 
-
-
 You've defined a class with a constructor and two properties: `id` and `name`.
 
 It might not look like the class has properties, but it does.
@@ -245,8 +210,6 @@ Consider the first parameter:
 
 <code-example path="displaying-data/src/app/hero.ts" header="src/app/hero.ts (id)" region="id"></code-example>
 
-
-
 That brief syntax does a lot:
 
 * Declares a constructor parameter and its type.
@@ -254,7 +217,6 @@ That brief syntax does a lot:
 * Initializes that property with the corresponding argument when creating an instance of the class.
 
 
-
 ### Using the Hero class
 
 After importing the `Hero` class, the `AppComponent.heroes` property can return a _typed_ array
@@ -273,7 +235,6 @@ Fix that to display only the hero's `name` property.
 <code-example path="displaying-data/src/app/app.component.3.ts" header="src/app/app.component.ts (template)" region="template"></code-example>
 
 
-
 The display looks the same, but the code is clearer.
 
 {@a ngIf}
@@ -291,46 +252,35 @@ To see it in action, add the following paragraph at the bottom of the template:
 <code-example path="displaying-data/src/app/app.component.ts" header="src/app/app.component.ts (message)" region="message"></code-example>
 
 
-
 <div class="alert is-important">
 
-
-
 Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
 Read more about `ngIf` and `*` in the [ngIf section](guide/template-syntax#ngIf) of the [Template Syntax](guide/template-syntax) page.
 
-
 </div>
 
 
-
 The template expression inside the double quotes,
 `*ngIf="heroes.length > 3"`, looks and behaves much like TypeScript.
 When the component's list of heroes has more than three items, Angular adds the paragraph
-to the DOM and the message appears. If there are three or fewer items, Angular omits the
-paragraph, so no message appears. For more information,
-see the [template expressions](guide/template-syntax#template-expressions) section of the
-[Template Syntax](guide/template-syntax) page.
+to the DOM and the message appears.
+If there are three or fewer items, Angular omits the paragraph, so no message appears.
+
+For more information, see [template expressions](guide/template-syntax#template-expressions).
 
 
 <div class="alert is-helpful">
 
-
-
 Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in larger projects when conditionally including or excluding
 big chunks of HTML with many data bindings.
 
-
 </div>
 
-
-
 Try it out. Because the array has four items, the message should appear.
 Go back into <code>app.component.ts</code> and delete or comment out one of the elements from the heroes array.
 The browser should refresh automatically and the message should disappear.
 
 
-
 ## Summary
 Now you know how to use:
 
@@ -341,7 +291,6 @@ Now you know how to use:
 
 Here's the final code:
 
-
 <code-tabs>
 
   <code-pane header="src/app/app.component.ts" path="displaying-data/src/app/app.component.ts" region="final">

aio/content/guide/router.md

@@ -3302,7 +3302,13 @@ Although it doesn't actually log in, it has what you need for this discussion.
 It has an `isLoggedIn` flag to tell you whether the user is authenticated.
 Its `login` method simulates an API call to an external service by returning an
 observable that resolves successfully after a short pause.
-The `redirectUrl` property will store the attempted URL so you can navigate to it after authenticating.
+The `redirectUrl` property stores the URL that the user wanted to access so you can navigate to it after authentication.
+
+<div class="alert is-helpful">
+
+To keep things simple, this example redirects unauthenticated users to `/admin`. 
+
+</div>
 
 Revise the `AuthGuard` to call it.
 

aio/content/guide/setup-local.md

@@ -117,7 +117,7 @@ You will see:
   <div class="alert is-helpful">
 
   Getting Started assumes the [StackBlitz](https://stackblitz.com/) online development environment.
-  To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/deployment "Getting Started: Deployment") section.
+  To learn how to export an app from StackBlitz to your local environment, skip ahead to the [Deployment](start/start-deployment "Getting Started: Deployment") section.
 
   </div>
 

aio/content/guide/template-syntax.md

@@ -237,16 +237,15 @@ You're free to change anything, anywhere, during this turn of the event loop.
 
 Like template expressions, template *statements* use a language that looks like JavaScript.
 The template statement parser differs from the template expression parser and
-specifically supports both basic assignment (`=`) and chaining expressions
-(with <code>;</code> or <code>,</code>).
+specifically supports both basic assignment (`=`) and chaining expressions with <code>;</code>.
 
-However, certain JavaScript syntax is not allowed:
+However, certain JavaScript and template expression syntax is not allowed:
 
 * <code>new</code>
 * increment and decrement operators, `++` and `--`
 * operator assignment, such as `+=` and `-=`
-* the bitwise operators `|` and `&`
-* the [template expression operators](guide/template-syntax#expression-operators)
+* the bitwise operators, such as `|` and `&`
+* the [pipe operator](guide/template-syntax#pipe)
 
 ### Statement context
 

aio/content/guide/template-typecheck.md

@@ -121,6 +121,7 @@ In case of a false positive like these, there are a few options:
 |`strictOutputEventTypes`|Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.|
 |`strictDomEventTypes`|Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.|
 |`strictContextGenerics`|Whether the type parameters of generic components will be inferred correctly (including any generic bounds). If disabled, any type parameters will be `any`.|
+|`strictLiteralTypes`|Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`.|
 
 
 If you still have issues after troubleshooting with these flags, you can fall back to full mode by disabling `strictTemplates`.

aio/content/guide/testing.md

@@ -1266,7 +1266,8 @@ You do have to call [tick()](api/core/testing/tick) to advance the (virtual) clo
 Calling [tick()](api/core/testing/tick) simulates the passage of time until all pending asynchronous activities finish.
 In this case, it waits for the error handler's `setTimeout()`.
 
-The [tick()](api/core/testing/tick) function accepts milliseconds as a parameter (defaults to 0 if not provided). The parameter represents how much the virtual clock advances. For example, if you have a `setTimeout(fn, 100)` in a `fakeAsync()` test, you need to use tick(100) to trigger the fn callback.
+The [tick()](api/core/testing/tick) function accepts milliseconds and tickOptions as parameters, the millisecond (defaults to 0 if not provided) parameter represents how much the virtual clock advances. For example, if you have a `setTimeout(fn, 100)` in a `fakeAsync()` test, you need to use tick(100) to trigger the fn callback. The tickOptions is an optional parameter with a property called processNewMacroTasksSynchronously (defaults is true) represents whether to invoke
+new generated macro tasks when ticking.
 
 <code-example
   path="testing/src/app/demo/async-helper.spec.ts"
@@ -1276,6 +1277,22 @@ The [tick()](api/core/testing/tick) function accepts milliseconds as a parameter
 The [tick()](api/core/testing/tick) function is one of the Angular testing utilities that you import with `TestBed`.
 It's a companion to `fakeAsync()` and you can only call it within a `fakeAsync()` body.
 
+#### tickOptions
+
+<code-example
+  path="testing/src/app/demo/async-helper.spec.ts"
+  region="fake-async-test-tick-new-macro-task-sync">
+</code-example>
+
+In this example, we have a new macro task (nested setTimeout), by default, when we `tick`, the setTimeout `outside` and `nested` will both be triggered.
+
+<code-example
+  path="testing/src/app/demo/async-helper.spec.ts"
+  region="fake-async-test-tick-new-macro-task-async">
+</code-example>
+
+And in some case, we don't want to trigger the new maco task when ticking, we can use `tick(milliseconds, {processNewMacroTasksSynchronously: false})` to not invoke new maco task.
+
 #### Comparing dates inside fakeAsync()
 
 `fakeAsync()` simulates passage of time, which allows you to calculate the difference between dates inside `fakeAsync()`.

aio/content/guide/universal.md

@@ -127,8 +127,7 @@ people who otherwise couldn't use the app at all.
 ### Show the first page quickly
 
 Displaying the first page quickly can be critical for user engagement.
-[53 percent of mobile site visits are abandoned](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/)
-if pages take longer than 3 seconds to load.
+Pages that load faster perform better, [even with changes as small as 100ms](https://web.dev/shopping-for-speed-on-ebay/).
 Your app may have to launch faster to engage these users before they decide to do something else.
 
 With Angular Universal, you can generate landing pages for the app that look like the complete app.

aio/content/guide/upgrade.md

@@ -539,12 +539,14 @@ of multiple words. In Angular, you would bind these attributes using camelCase:
 
 <code-example format="">
   [myHero]="hero"
+  (heroDeleted)="handleHeroDeleted($event)"
 </code-example>
 
 But when using them from AngularJS templates, you must use kebab-case:
 
 <code-example format="">
   [my-hero]="hero"
+  (hero-deleted)="handleHeroDeleted($event)"
 </code-example>
 
 </div>

aio/content/guide/zone.md

@@ -0,0 +1,418 @@
+# NgZone
+
+A zone is an execution context that persists across async tasks. You can think of it as [thread-local storage](http://en.wikipedia.org/wiki/Thread-local_storage) for JavaScript VMs.
+This guide describes how to use Angular's NgZone to automatically detect changes in the component to update HTML.
+
+## Fundamentals of change detection
+
+To understand the benefits of `NgZone`, it is important to have a clear grasp of what change detection is and how it works.
+
+### Displaying and updating data in Angular
+
+In Angular, you can [display data](guide/displaying-data) by binding controls in an HTML template to the properties of an Angular component.
+
+<code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts"></code-example>
+
+In addition, you can bind DOM events to a method of an Angular component. In such methods, you can also update a property of the Angular component, which updates the corresponding data displayed in the template.
+
+<code-example path="user-input/src/app/click-me.component.ts" region="click-me-component" header="src/app/click-me.component.ts"></code-example>
+
+In both of the above examples, the component's code updates only the property of the component.
+However, the HTML is also updated automatically.
+This guide describes how and when Angular renders the HTML based on the data from the Angular component.
+
+
+### Detecting changes with plain JavaScript
+
+To clarify how changes are detected and values updated, consider the following code written in plain JavaScript.
+
+```javascript
+<html>
+  <div id="dataDiv"></div>
+  <button id="btn">updateData<btn>
+  <canvas id="canvas"><canvas>
+  <script>
+    let value = 'initialValue';
+    // initial rendering
+    detectChange();
+
+    function renderHTML() {
+      document.getElementById('dataDiv').innerText = value;
+    }
+
+    function detectChange() {
+      const currentValue = document.getElementById('dataDiv').innerText;
+      if (currentValue !== value) {
+        renderHTML();
+      }
+    }
+
+    // example 1: update data inside button click event handler
+    document.getElementById('btn').addEventListener('click', () => {
+      // update value
+      value = 'button update value';
+      // call detectChange manually
+      detectChange();
+    });
+
+    // example 2: Http Request
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', function() {
+      // get response from server
+      value = this.responseText;
+      // call detectChange manually
+      detectChange();
+    });
+    xhr.open('GET', serverUrl);
+    xhr.send();
+
+    // example 3: setTimeout
+    setTimeout(() => {
+      // update value inside setTimeout callback
+      value = 'timeout update value';
+      // call detectChange manually
+      detectChange();
+    }, 100);
+
+    // example 4: Promise.then
+    Promise.resolve('promise resolved a value').then((v) => {
+      // update value inside Promise thenCallback
+      value = v;
+      // call detectChange manually
+      detectChange();
+    }, 100);
+
+    // example 5: some other asynchronous APIs
+    document.getElementById('canvas').toBlob(blob => {
+      // update value when blob data is created from the canvas
+      value = `value updated by canvas, size is ${blog.size}`;
+      // call detectChange manually
+      detectChange();
+    });
+  </script>
+</html>
+```
+
+After you update the data, you need to call `detectChange()` manually to check whether the data changed.
+If the data changed, you render the HTML to reflect the updated data.
+
+In Angular, this step is unnecessary. Whenever you update the data, your HTML is updated automatically.
+
+### When apps update HTML
+
+To understand how change detection works, first consider when the application needs to update the HTML. Typically, updates occur for one of the following reasons:
+
+1. Component initialization. For example, when bootstrapping an Angular application, Angular loads the bootstrap component and triggers the [ApplicationRef.tick()](api/core/ApplicationRef#tick) to call change detection and View Rendering. Just as in the [displaying data](guide/displaying-data) sample, the `AppComponent` is the bootstrap component. This component has the properties `title` and `myHero`, which the application renders in the HTML.
+
+2. Event listener. The DOM event listener can update the data in an Angular component and also trigger change detection, as in the following example.
+
+<code-example path="user-input/src/app/click-me.component.ts" region="click-me-component" header="src/app/click-me.component.ts"></code-example>
+
+3. Http Data Request. You can also get data from a server through an Http request. For example:
+
+```typescript
+@Component({
+  selector: 'app-root',
+  template: '<div>{{data}}</div>';
+})
+export class AppComponent implements OnInit {
+  data = 'initial value';
+  constructor(private httpClient: HttpClient) {}
+
+  ngOnInit() {
+    this.httpClient.get(serverUrl).subscribe(response => {
+      // user does not need to trigger change detection manually
+      data = response.data;
+    });
+  }
+}
+```
+
+4. MacroTasks, such as `setTimeout()`/`setInterval()`. You can also update the data in the callback function of `macroTask` such as `setTimeout()`. For example:
+
+```typescript
+@Component({
+  selector: 'app-root',
+  template: '<div>{{data}}</div>';
+})
+export class AppComponent implements OnInit {
+  data = 'initial value';
+
+  ngOnInit() {
+    setTimeout(() => {
+      // user does not need to trigger change detection manually
+      data = 'value updated';
+    });
+  }
+}
+```
+
+5. MicroTask, such as `Promise.then()`. Other asynchronous APIs return a Promise object (such as `fetch`), so the `then()` callback function can also update the data. For example:
+
+```typescript
+@Component({
+  selector: 'app-root',
+  template: '<div>{{data}}</div>';
+})
+export class AppComponent implements OnInit {
+  data = 'initial value';
+
+  ngOnInit() {
+    Promise.resolve(1).then(v => {
+      // user does not need to trigger change detection manually
+      data = v;
+    });
+  }
+}
+```
+
+6. Other async operations. In addition to `addEventListener()`/`setTimeout()`/`Promise.then()`, there are other operations that can update the data asynchronously. Some examples include `WebSocket.onmessage()` and `Canvas.toBlob()`.
+
+The preceding list contains most common scenarios in which the application might change the data. Angular runs change detection whenever it detects that data could have changed.
+The result of change detection is that DOM is updated with new data. Angular detects the changes in different ways. For component initialization, Angular calls change detection explicitly. For [asynchronous operations](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous), Angular uses a Zone to detect changes in places where the data could have possibly mutated and it runs change detection automatically.
+
+
+## Zones and execution contexts
+
+A zone provides an execution context that persists across async tasks. [Execution Context](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) is an abstract concept that holds information about the environment within the current code being executed. Consider the following example.
+
+```javascript
+const callback = function() {
+  console.log('setTimeout callback context is', this);
+}
+
+const ctx1 = {
+  name: 'ctx1'
+};
+const ctx2 = {
+  name: 'ctx2'
+};
+
+const func = function() {
+  console.log('caller context is', this);
+  setTimeout(callback);
+}
+
+func.apply(ctx1);
+func.apply(ctx2);
+```
+
+The value of `this` in the callback of `setTimeout` might differ depending on when `setTimeout` is called.
+Thus you can lose the context in asynchronous operations.
+
+A zone provides a new zone context other than `this`, the zone context persists across asynchronous operations.
+In the following example, the new zone context is called `zoneThis`.
+
+```javascript
+zone.run(() => {
+  // now you are in a zone
+  expect(zoneThis).toBe(zone);
+  setTimeout(function() {
+    // the zoneThis context will be the same zone
+    // when the setTimeout is scheduled
+    expect(zoneThis).toBe(zone);
+  });
+});
+```
+
+This new context, `zoneThis`, can be retrieved from the `setTimeout()` callback function, and this context is the same when the `setTimeout()` is scheduled.
+To get the context, you can call [`Zone.current`](https://github.com/angular/angular/blob/master/packages/zone.js/lib/zone.ts).
+
+### Zones and async lifecycle hooks
+
+Zone.js can create contexts that persist across asynchronous operations as well as provide lifecycle hooks for asynchronous operations.
+
+```javascript
+const zone = Zone.current.fork({
+  name: 'zone',
+  onScheduleTask: function(delegate, curr, target, task) {
+    console.log('new task is scheduled: ', task.type, task.source);
+    return delegate.scheduleTask(target, task);
+  },
+  onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
+    console.log('task will be invoked', task.type, task.source);
+    return delegate.invokeTask(target, task, applyThis, applyArgs);
+  },
+  onHasTask: function(delegate, curr, target, hasTaskState) {
+    console.log('task state changed in the zone', hasTaskState);
+    return delegate.hasTask(target, hasTaskState);
+  },
+  onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
+    console.log('the callback will be invoked', callback);
+    return delegate.invoke(target, callback, applyThis, applyArgs);
+  }
+});
+zone.run(() => {
+  setTimeout(() => {
+    console.log('timeout callback is invoked.');
+  });
+});
+```
+
+The above example creates a zone with several hooks.
+
+`onXXXTask` hooks trigger when the status of Task changes.
+The Zone Task concept is very similar to the Javascript VM Task concept.
+- `macroTask`: such as `setTimeout()`.
+- `microTask`: such as `Promise.then()`.
+- `eventTask`: such as `element.addEventListener()`.
+
+The `onInvoke` hook triggers when a synchronize function is executed in a Zone.
+
+These hooks trigger under the following circumstances:
+
+- `onScheduleTask`: triggers when a new asynchronous task is scheduled, such as when you call `setTimeout()`.
+- `onInvokeTask`: triggers when an asynchronous task is about to execute, such as when the callback of `setTimeout()` is about to execute.
+- `onHasTask`: triggers when the status of one kind of task inside a zone changes from stable to unstable or from unstable to stable. A status of stable means there are no tasks inside the Zone, while unstable means a new task is scheduled in the zone.
+- `onInvoke`: triggers when a synchronize function is going to execute in the zone.
+
+With these hooks, `Zone` can monitor the status of all synchronize and asynchronous operations inside a zone.
+
+The above example returns the following output.
+
+```
+the callback will be invoked () => {
+  setTimeout(() => {
+    console.log('timeout callback is invoked.');
+  });
+}
+new task is scheduled:  macroTask setTimeout
+task state changed in the zone { microTask: false,
+  macroTask: true,
+  eventTask: false,
+  change: 'macroTask' }
+task will be invoked macroTask setTimeout
+timeout callback is invoked.
+task state changed in the zone { microTask: false,
+  macroTask: false,
+  eventTask: false,
+  change: 'macroTask' }
+```
+
+All of the functions of Zone are provided by a library called [zone.js](https://github.com/angular/angular/tree/master/packages/zone.js/README.md).
+This library implements those features by intercepting asynchronous APIs through monkey patching.
+Monkey patching is a technique to add or modify the default behavior of a function at runtime without changing the source code.
+
+## NgZone
+
+While Zone.js can monitor all the states of synchronous and asynchronous operations, Angular additionally provides a service called NgZone.
+This service creates a zone named `angular` to automatically trigger change detction when the following conditions are satisfied:
+
+1. When a sync or async function is executed.
+1. When there is no `microTask` scheduled.
+
+### NgZone `run()`/`runOutsideOfAngular()`
+
+`Zone` handles most asynchronous APIs such as `setTimeout()`, `Promise.then(),and `addEventListener()`.
+For the full list, see the [Zone Module document](https://github.com/angular/angular/blob/master/packages/zone.js/MODULE.md).
+Therefore in those asynchronous APIs, you don't need to trigger change detection manually.
+
+There are still some third party APIs that Zone does not handle.
+In those cases, the NgZone service provides a [`run()`](api/core/NgZone#run) method that allows you to execute a function inside the angular zone.
+This function, and all asynchronous operations in that function, trigger change detection automatically at the correct time.
+
+```typescript
+export class AppComponent implements OnInit {
+  constructor(private ngZone: NgZone) {}
+  ngOnInit() {
+    // new async API is not handled by Zone, so you need to
+    // use ngZone.run to make the asynchronous operation in angular zone
+    // and trigger change detection automatically
+    this.ngZone.run(() => {
+      someNewAsyncAPI(() => {
+        // update data of component
+      });
+    });
+  }
+}
+```
+
+By default, all asynchronous operations are inside the angular zone, which triggers change detection automatically.
+Another common case is when you don't want to trigger change detection.
+In that situation, you can use another NgZone method: [runOutsideAngular()](api/core/NgZone#runoutsideangular).
+
+```typescript
+export class AppComponent implements OnInit {
+  constructor(private ngZone: NgZone) {}
+  ngOnInit() {
+    // you know no data will be updated
+    // you don't want to do change detection in this
+    // specified operation, you can call runOutsideAngular
+    this.ngZone.runOutsideAngular(() => {
+      setTimeout(() => {
+        // do something will not update component data
+      });
+    });
+  }
+}
+```
+
+### Seting up Zone.js
+
+To make Zone.js available in Angular, you need to import the zone.js package.
+If you are using the Angular CLI, this step is done automatically, and you will see the following line in the `src/polyfills.ts`:
+
+```typescript
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+```
+
+Before importing the  `zone.js` package, you can set the following configurations:
+
+- You can disable some asynchronous API monkey patching for better performance.
+For example, you can disable the `requestAnimationFrame()` monkey patch, so the callback of `requestAnimationFrame()` will not trigger change detection.
+This is useful if, in your application, the callback of the `requestAnimationFrame()` will not update any data.
+- You can specify that certain DOM events not run inside the angular zone; for example, to prevent a `mousemove` or `scroll` event to trigger change detection.
+
+There are several other settings you can change.
+To make these changes, you need to create a `zone-flags.ts` file, such as the following.
+
+```typescript
+ (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+```
+
+Next, import `zone-flags` before you import `zone` in the `polyfills.ts`.
+
+```typescript
+/***************************************************************************************************
+ * Zone JS is required by default for Angular.
+ */
+import `./zone-flags`;
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+```
+
+For more information of what you can configure, see the [zone.js](https://github.com/angular/angular/tree/master/packages/zone.js) documentation.
+
+### NoopZone
+
+`Zone` helps Angular know when to trigger change detection and let the developers focus on the application development.
+By default, `Zone` is loaded and works without additional configuration. However, you don't have to use `Zone` to make Angular work, instead opting to trigger change detection on your own.
+
+<div class="alert is-helpful">
+
+<h4>Disabling <code>Zone</code></h4>
+
+**If you disable `Zone`, you will need to trigger all change detection at the correct timing yourself, which requires comprehensive knowledge of change detection**.
+
+</div>
+
+To remove `zone.js`, make the following changes.
+
+1. Remove the `zone.js` import from `polyfills.ts`.
+
+  ```typescript
+  /***************************************************************************************************
+   * Zone JS is required by default for Angular itself.
+   */
+  // import 'zone.js/dist/zone';  // Included with Angular CLI.
+  ```
+
+2. Bootstrap Angular with `noop zone` in `src/main.ts`.
+
+  ```typescript
+  platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})
+    .catch(err => console.error(err));
+  ```

aio/content/navigation.json

@@ -67,22 +67,22 @@
           "tooltip": "Introduction to Angular's component model, template syntax, and component communication."
         },
         {
-          "url": "start/routing",
+          "url": "start/start-routing",
           "title": "Routing",
           "tooltip": "Introduction to routing between components using the browser's URL."
         },
         {
-          "url": "start/data",
+          "url": "start/start-data",
           "title": "Managing Data",
           "tooltip": "Introduction to services and accessing external data via HTTP."
         },
         {
-          "url": "start/forms",
+          "url": "start/start-forms",
           "title": "Forms",
           "tooltip": "Learn about fetching and managing data from users with forms."
         },
         {
-          "url": "start/deployment",
+          "url": "start/start-deployment",
           "title": "Deployment",
           "tooltip": "Move to local development, or deploy your application to Firebase or your own server."
         }
@@ -439,6 +439,11 @@
               "tooltip": "Animate route transitions."
             }
           ]
+        },
+        {
+	        "url": "guide/zone",
+          "title": "NgZone",
+          "tooltip": "How NgZone works"
         }
       ]
     },

aio/content/start/index.md

@@ -358,5 +358,5 @@ You've learned about the foundation of Angular: components and template syntax.
 You've also learned how the component class and template interact, and how components communicate with each other.
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern.
-* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
+* [Continue to the "Routing" section](start/start-routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern.
+* [Skip ahead to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.

aio/content/start/start-data.md

@@ -1,6 +1,6 @@
-# Managing Data
+# Getting Started with Angular: Managing Data
 
-At the end of [Routing](start/routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details.
+At the end of [Routing](start/start-routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details.
 Users can click on a product name from the list to see details in a new view, with a distinct URL, or route.
 
 This page guides you through creating the shopping cart in three phases:
@@ -29,7 +29,7 @@ about products in the cart.
 
 <div class="alert is-helpful">
 
-Later, the [Forms](start/forms "Getting Started: Forms") part of
+Later, the [Forms](start/start-forms "Getting Started: Forms") part of
 this tutorial guides you through accessing this cart service
 from the page where the user checks out.
 
@@ -362,5 +362,5 @@ Now that your app can retrieve shipping data, create a shipping component and  t
 Congratulations! You have an online store application with a product catalog and shopping cart. You can also look up and display shipping prices.
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Forms" section](start/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a checkout form.
-* [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
+* [Continue to the "Forms" section](start/start-forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a checkout form.
+* [Skip ahead to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.

aio/content/start/start-deployment.md

@@ -1,4 +1,4 @@
-# Deployment
+# Getting Started with Angular: Deployment
 
 
 To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.
@@ -6,13 +6,11 @@ To deploy your application, you have to compile it, and then host the JavaScript
 <div class="alert is-helpful">
 
 
-Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/routing "Getting Started: Routing"), [Managing Data](start/data "Getting Started: Managing Data"), and [Forms](start/forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section. 
+Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/start-routing "Getting Started: Routing"), [Managing Data](start/start-data "Getting Started: Managing Data"), and [Forms](start/start-forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section.
 
 
 </div>
 
-
-
 ## Share your application
 
 StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.
@@ -24,9 +22,9 @@ StackBlitz projects are public by default, allowing you to share your Angular ap
 
 ## Building locally
 
-To build your application locally or for production, you will need to download the source code from your StackBlitz project. Click the `Download Project` icon in the left menu across from `Project` to download your files.
+To build your application locally or for production, download the source code from your StackBlitz project by clicking the `Download Project` icon in the left menu across from `Project` to download your files.
 
-Once you have the source code downloaded and unzipped, use the [Angular Console](https://angularconsole.com "Angular Console web site") to serve the application, or you install `Node.js` and have the Angular CLI installed.
+Once you have the source code downloaded and unzipped, use the [Angular Console](https://angularconsole.com "Angular Console web site") to serve the application, or install `Node.js` and serve your app with the Angular CLI.
 
 From the terminal, install the Angular CLI globally with:
 
@@ -34,7 +32,7 @@ From the terminal, install the Angular CLI globally with:
 npm install -g @angular/cli
 ```
 
-This will install the command `ng` into your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds that can be shared or distributed.
+This installs the command `ng` on your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.
 
 Create a new Angular CLI workspace using the [`ng new`](cli/new "CLI ng new command reference") command:
 
@@ -42,7 +40,7 @@ Create a new Angular CLI workspace using the [`ng new`](cli/new "CLI ng new comm
 ng new my-project-name
 ```
 
-From there you replace the `/src` folder with the one from your `StackBlitz` download, and then perform a build.
+In your new CLI generated app, replace the `/src` folder with the one from your `StackBlitz` download, and then perform a build.
 
 ```sh
 ng build --prod
@@ -58,7 +56,7 @@ If the above `ng build` command throws an error about missing packages, append t
 
 #### Hosting the built project
 
-The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (`Node.js`, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).
+The files in the `dist/my-project-name` folder are static. This means you can host them on any web server capable of serving files (such as `Node.js`, Java, .NET), or any backend (such as Firebase, Google Cloud, or App Engine).
 
 ### Hosting an Angular app on Firebase
 
@@ -77,22 +75,22 @@ One of the easiest ways to get your site live is to host it using Firebase.
 
 ### Hosting an Angular app anywhere else
 
-To host an Angular app on another web host, you'll need to upload or send the files to the host. 
-Because you are building a Single Page Application, you'll also need to make sure you redirect any invalid URLs to your `index.html` file. 
-Learn more about development and distribution of your application in the [Building & Serving](guide/build "Building and Serving Angular Apps") and [Deployment](guide/deployment "Deployment guide") guides.
+To host an Angular app on another web host, upload or send the files to the host.
+Because you are building a single page application, you'll also need to make sure you redirect any invalid URLs to your `index.html` file.
+Read more about development and distribution of your application in the [Building & Serving](guide/build "Building and Serving Angular Apps") and [Deployment](guide/deployment "Deployment guide") guides.
 
-## Join our community
+## Join the Angular community
 
-You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form"). 
+You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form").
 
 Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
 
-* Angular provides advanced capabilities for mobile apps, animation, internationalization, server-side rendering, and more. 
-* [Angular Material](https://material.angular.io/ "Angular Material web site") offers an extensive library of Material Design components. 
-* [Angular Protractor](https://protractor.angular.io/ "Angular Protractor web site") offers an end-to-end testing framework for Angular apps. 
-* Angular also has an extensive [network of 3rd-party tools and libraries](https://angular.io/resources "Angular resources list"). 
+* Angular provides advanced capabilities for mobile apps, animation, internationalization, server-side rendering, and more.
+* [Angular Material](https://material.angular.io/ "Angular Material web site") offers an extensive library of Material Design components.
+* [Angular Protractor](https://protractor.angular.io/ "Angular Protractor web site") offers an end-to-end testing framework for Angular apps.
+* Angular also has an extensive [network of 3rd-party tools and libraries](https://angular.io/resources "Angular resources list").
 
-Keep current by following the [Angular blog](https://blog.angular.io/ "Angular blog"). 
+Keep current by following the [Angular blog](https://blog.angular.io/ "Angular blog").
 
 
 

aio/content/start/start-forms.md

@@ -1,6 +1,6 @@
-# Forms
+# Getting Started with Angular: Forms
 
-At the end of [Managing Data](start/data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
+At the end of [Managing Data](start/start-data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
 
 This section walks you through adding a form-based checkout feature to collect user information as part of checkout.
 
@@ -82,4 +82,4 @@ To confirm submission, open the console where you should see an object containin
 
 Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function.
 
-[Continue to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
+[Continue to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.

aio/content/start/start-routing.md

@@ -1,4 +1,4 @@
-# Routing
+# Getting Started with Angular: Routing
 
 At the end of [Your First App](start "Getting Started: Your First App"), the online store application has a basic product catalog.
 The app doesn't have any variable states or navigation.
@@ -73,7 +73,7 @@ The product details component handles the display of each product. The Angular R
         The `ActivatedRoute` is specific to each routed component that the Angular Router loads. It contains information about the
         route, its parameters, and additional data associated with the route.
 
-        By injecting the `ActivatedRoute`, you are configuring the component to use a service. While this part of the Getting Started tutorial uses this syntax briefly, the [Managing Data](start/data "Getting Started: Managing Data") page covers services in more detail.
+        By injecting the `ActivatedRoute`, you are configuring the component to use a service. While this part of the Getting Started tutorial uses this syntax briefly, the [Managing Data](start/start-data "Getting Started: Managing Data") page covers services in more detail.
 
 
 1. In the `ngOnInit()` method, subscribe to route parameters and fetch the product based on the `productId`.
@@ -111,5 +111,5 @@ Congratulations! You have integrated routing into your online store.
 * Users can click on a product name from the list to see details in a new view, with a distinct URL/route.
 
 To continue exploring Angular, choose either of the following options:
-* [Continue to the "Managing Data" section](start/data "Getting Started: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices.
-* [Skip ahead to the Deployment section](start/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.
+* [Continue to the "Managing Data" section](start/start-data "Getting Started: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices.
+* [Skip ahead to the Deployment section](start/start-deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.

aio/firebase.json

@@ -30,6 +30,12 @@
       {"type": 301, "source": "/getting-started", "destination": "/start"},
       {"type": 301, "source": "/getting-started/:rest*", "destination": "/start/:rest*"},
 
+      // Renaming of Getting Started topics
+      {"type": 301, "source": "/start/data", "destination": "/start/start-data"},
+      {"type": 301, "source": "/start/deployment", "destination": "/start/start-deployment"},
+      {"type": 301, "source": "/start/forms", "destination": "/start/start-forms"},
+      {"type": 301, "source": "/start/routing", "destination": "/start/start-routing"},
+
       // some top level guide pages on old site were moved below the guide folder
       {"type": 301, "source": "/styleguide", "destination": "/guide/styleguide"},
       {"type": 301, "source": "/docs/styleguide", "destination": "/guide/styleguide"},

aio/ngsw-config.json

@@ -131,6 +131,18 @@
     "!/news",
     "!/news.html",
     "!/news/",
+    "!/start/data",
+    "!/start/data/",
+    "!/start/data.html",
+    "!/start/deployment",
+    "!/start/deployment/",
+    "!/start/deployment.html",
+    "!/start/forms",
+    "!/start/forms/",
+    "!/start/forms.html",
+    "!/start/routing",
+    "!/start/routing/",
+    "!/start/routing.html",
     "!/styleguide",
     "!/styleguide/**",
     "!/testing",

aio/scripts/_payload-limits.json

@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 450017,
+        "main-es2015": 450541,
         "polyfills-es2015": 52195
       }
     }

aio/src/app/app.component.html

@@ -22,7 +22,7 @@
       <img *ngSwitchCase="true" src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home">
       <img *ngSwitchDefault src="assets/images/logos/angular/shield-large.svg" width="37" height="40" title="Home" alt="Home">
     </a>
-    <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
+    <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes" [currentNode]="currentNodes?.TopBar"></aio-top-menu>
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
     <div class="toolbar-external-icons-container">
       <a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">

aio/src/app/layout/notification/notification.component.spec.ts

@@ -111,6 +111,22 @@ describe('NotificationComponent', () => {
     expect(getItemSpy).toHaveBeenCalledWith('aio-notification/survey-january-2018');
     expect(component.showNotification).toBe('hide');
   });
+
+  it('should not break when cookies are disabled in the browser', () => {
+    configTestingModule();
+
+    // Simulate `window.localStorage` being inaccessible, when cookies are disabled.
+    const mockWindow: MockWindow = TestBed.inject(WindowToken);
+    Object.defineProperty(mockWindow, 'localStorage', {
+      get() { throw new Error('The operation is insecure'); },
+    });
+
+    expect(() => createComponent()).not.toThrow();
+    expect(component.showNotification).toBe('show');
+
+    component.dismiss();
+    expect(component.showNotification).toBe('hide');
+  });
 });
 
 @Component({

aio/src/app/layout/notification/notification.component.ts

@@ -20,7 +20,7 @@ const LOCAL_STORAGE_NAMESPACE = 'aio-notification/';
   ]
 })
 export class NotificationComponent implements OnInit {
-  private get localStorage() { return this.window.localStorage; }
+  private storage: Storage;
 
   @Input() dismissOnContentClick: boolean;
   @Input() notificationId: string;
@@ -31,12 +31,27 @@ export class NotificationComponent implements OnInit {
   showNotification: 'show'|'hide';
 
   constructor(
-    @Inject(WindowToken) private window: Window,
+    @Inject(WindowToken) window: Window,
     @Inject(CurrentDateToken) private currentDate: Date
-  ) {}
+  ) {
+    try {
+      this.storage = window.localStorage;
+    } catch {
+      // When cookies are disabled in the browser, even trying to access
+      // `window.localStorage` throws an error. Use a no-op storage.
+      this.storage = {
+        length: 0,
+        clear: () => undefined,
+        getItem: () => null,
+        key: () => null,
+        removeItem: () => undefined,
+        setItem: () => undefined
+      };
+    }
+  }
 
   ngOnInit() {
-    const previouslyHidden = this.localStorage.getItem(LOCAL_STORAGE_NAMESPACE + this.notificationId) === 'hide';
+    const previouslyHidden = this.storage.getItem(LOCAL_STORAGE_NAMESPACE + this.notificationId) === 'hide';
     const expired = this.currentDate > new Date(this.expirationDate);
     this.showNotification = previouslyHidden || expired ? 'hide' : 'show';
   }
@@ -48,7 +63,7 @@ export class NotificationComponent implements OnInit {
   }
 
   dismiss() {
-    this.localStorage.setItem(LOCAL_STORAGE_NAMESPACE + this.notificationId, 'hide');
+    this.storage.setItem(LOCAL_STORAGE_NAMESPACE + this.notificationId, 'hide');
     this.showNotification = 'hide';
     this.dismissed.next();
   }

aio/src/app/layout/top-menu/top-menu.component.spec.ts

@@ -1,42 +1,86 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BehaviorSubject } from 'rxjs';
-
 import { TopMenuComponent } from './top-menu.component';
-import { NavigationService, NavigationViews } from 'app/navigation/navigation.service';
 
 describe('TopMenuComponent', () => {
   let component: TopMenuComponent;
   let fixture: ComponentFixture<TopMenuComponent>;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TopMenuComponent ],
-      providers: [
-        { provide: NavigationService, useClass: TestNavigationService }
-      ]
-    });
-  });
+  // Helpers
+  const getListItems = () => {
+    const list: HTMLUListElement = fixture.debugElement.nativeElement.querySelector('ul');
+    return Array.from(list.querySelectorAll('li'));
+  };
+  const getSelected = (items: HTMLLIElement[]) =>
+    items.filter(item => item.classList.contains('selected'));
 
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        TopMenuComponent,
+      ],
+    });
+
     fixture = TestBed.createComponent(TopMenuComponent);
     component = fixture.componentInstance;
+
+    component.nodes = [
+      {url: 'api', title: 'API', tooltip: 'API docs'},
+      {url: 'features', title: 'Features', tooltip: 'Angular features overview'},
+    ];
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create an item for each navigation node', () => {
+    const items = getListItems();
+    const links = items.map(item => item.querySelector('a'))
+                      .filter((link): link is NonNullable<typeof link> => link !== null);
+
+    expect(links.length).toBe(2);
+    expect(links.map(link => link.pathname)).toEqual(['/api', '/features']);
+    expect(links.map(link => link.textContent)).toEqual(['API', 'Features']);
+    expect(links.map(link => link.title)).toEqual(['API docs', 'Angular features overview']);
+  });
+
+  it('should mark the currently selected node with `.selected`', () => {
+    const items = getListItems();
+    expect(getSelected(items)).toEqual([]);
+
+    component.currentNode = {url: 'api', view: 'foo', nodes: []};
+    fixture.detectChanges();
+    expect(getSelected(items)).toEqual([items[0]]);
+
+    component.currentNode = {url: 'features', view: 'foo', nodes: []};
+    fixture.detectChanges();
+    expect(getSelected(items)).toEqual([items[1]]);
+
+    component.currentNode = {url: 'something/else', view: 'foo', nodes: []};
+    fixture.detectChanges();
+    expect(getSelected(items)).toEqual([]);
+  });
+
+  it('should not mark any node with `.selected` if the current URL is undefined', () => {
+    component.nodes = [
+      {url: '', title: 'API', tooltip: 'API docs'},
+      {url: undefined, title: 'Features', tooltip: 'Angular features overview'},
+    ];
+    fixture.detectChanges();
+    const items = getListItems();
+
+    component.currentNode = undefined;
+    fixture.detectChanges();
+    expect(getSelected(items)).toEqual([]);
+  });
+
+  it('should correctly mark a node with `.selected` even if its URL is empty', () => {
+    component.nodes = [
+      {url: '', title: 'API', tooltip: 'API docs'},
+      {url: undefined, title: 'Features', tooltip: 'Angular features overview'},
+    ];
+    fixture.detectChanges();
+    const items = getListItems();
+
+    component.currentNode = {url: '', view: 'Empty url', nodes: []};
+    fixture.detectChanges();
+    expect(getSelected(items)).toEqual([items[0]]);
   });
 });
-
-//// Test Helpers ////
-class TestNavigationService {
-  navJson = {
-    TopBar: [
-      {url: 'api', title: 'API' },
-      {url: 'features', title: 'Features' }
-    ],
-  };
-
-  navigationViews = new BehaviorSubject<NavigationViews>(this.navJson);
-}

aio/src/app/layout/top-menu/top-menu.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input } from '@angular/core';
-import { NavigationNode } from 'app/navigation/navigation.service';
+import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
 
 @Component({
   selector: 'aio-top-menu',
   template: `
     <ul role="navigation">
-      <li *ngFor="let node of nodes">
-        <a class="nav-link" [href]="node.url" [title]="node.title">
+      <li *ngFor="let node of nodes" [ngClass]="{selected: node.url === currentUrl}">
+        <a class="nav-link" [href]="node.url" [title]="node.tooltip">
           <span class="nav-link-inner">{{ node.title }}</span>
         </a>
       </li>
@@ -14,5 +14,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 })
 export class TopMenuComponent {
   @Input() nodes: NavigationNode[];
+  @Input() currentNode: CurrentNode | undefined;
 
+  get currentUrl(): string | null { return this.currentNode ? this.currentNode.url : null; }
 }

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

@@ -138,7 +138,6 @@ a {
   color: $white;
   font-family: $main-font;
   text-transform: uppercase;
-  padding: 21px 0;
 }
 
 strong {

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

@@ -22,20 +22,30 @@ footer {
   }
 
   a {
-      color: $white;
+    color: $white;
+    text-decoration: none;
+    z-index: 20;
+    position: relative;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:visited {
       text-decoration: none;
-      z-index: 20;
-      position: relative;
-      &:hover {
-        text-decoration: underline;
-      }
-      &:visited {
-        text-decoration: none;
-      }
+    }
+
+    &:focus {
+      // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+      outline: 1px solid rgba($white, 0.8);
+      outline-offset: 2px;
+    }
   }
+
   a.action {
     cursor: pointer;
   }
+
   h3 {
     @include font-size(16);
     text-transform: uppercase;
@@ -43,6 +53,7 @@ footer {
     margin: 8px 0 12px;
     color: $white;
   }
+
   p {
     text-align: center;
     margin: 10px 0px 5px;
@@ -56,9 +67,7 @@ footer {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-
     justify-content: center;
-
     text-align: left;
     margin: 0 0 40px;
 
@@ -76,6 +85,7 @@ footer {
 
     @media (max-width: 480px) {
       flex-direction: column;
+
       .footer-block {
         margin: 8px 24px;
       }
@@ -90,16 +100,17 @@ footer {
 }
 
 footer::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background:
-        url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,
-        url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;
-    opacity: 0.05;
-    background-size: 320px auto;
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
+      top 0 left 0 repeat,
+    url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
+      top 80px left 160px repeat;
+  opacity: 0.05;
+  background-size: 320px auto;
 }

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

@@ -132,7 +132,7 @@ section#intro {
   box-sizing: border-box;
   transition: all 0.3s ease-in;
 
-  @media (max-width: 992px) {
+  @media (max-width: 991px) {
     flex-direction: column;
     text-align: center;
     padding: 32px 16px;
@@ -441,4 +441,4 @@ div[layout=row]{
 
 .events-container{
   overflow-x: auto;
-}
+}

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

@@ -79,7 +79,7 @@ mat-sidenav-container div.mat-sidenav-content {
   }
 
   &:focus {
-    outline: $accentblue auto 2px;
+    outline: $focus-outline-onlight auto 2px;
   }
 
   &.selected {

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

@@ -87,7 +87,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
   }
 
   & .mat-icon {
-    color: white;
+    color: $white;
     position: inherit;
   }
 }
@@ -96,7 +96,17 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
 .nav-link.home {
   cursor: pointer;
   margin: 0 16px 0 0;
-  padding: 21px 0;
+  padding: 8px 0;
+
+  &:focus {
+    // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+    outline: 1px solid $focus-outline-ondark;
+    outline-offset: 4px;
+  }
+
+  @media screen and (max-width: 991px) {
+    padding: 4px 0;
+  }
 
   @media screen and (max-width: 480px) {
     margin-right: 8px;
@@ -108,7 +118,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
     top: 12px;
     height: 40px;
 
-    @media (max-width: 992px) {
+    @media (max-width: 991px) {
       &:hover {
         transform: scale(1.1);
       }
@@ -136,32 +146,47 @@ aio-top-menu {
       list-style-type: none;
       cursor: pointer;
 
-      &:hover {
-        opacity: 0.7;
-      }
-
       &:focus {
-        background-color: $accentblue;
         outline: none;
       }
-    }
-  }
 
-  a.nav-link {
-    margin: 0;
-    padding: 24px 0px;
-    cursor: pointer;
+      a.nav-link {
+        margin: 0 4px;
+        padding: 0px;
+        cursor: pointer;
 
-    .nav-link-inner {
-      padding: 8px 16px;
-    }
+        .nav-link-inner {
+          border-radius: 4px;
+          padding: 8px 16px;
 
-    &:focus {
-      outline: none;
+          &:hover {
+            background: rgba($white, 0.15);
+          }
+        }
 
-      .nav-link-inner {
-        background: rgba($white, 0.15);
-        border-radius: 4px;
+        &:focus {
+          outline: none;
+
+          .nav-link-inner {
+            background: rgba($white, 0.15);
+            border-radius: 1px;
+            box-shadow: 0 0 1px 2px $focus-outline-ondark;
+          }
+        }
+
+        &:active {
+          .nav-link-inner {
+            background: rgba($white, 0.15);
+          }
+        }
+      }
+
+      &.selected {
+        a.nav-link {
+          .nav-link-inner {
+            background: rgba($white, 0.15);
+          }
+        }
       }
     }
   }
@@ -175,6 +200,7 @@ aio-search-box.search-container {
   width: 100%;
   min-width: 150px;
   height: 100%;
+  margin-right: 16px;
 
   input {
     color: $darkgray;
@@ -220,10 +246,18 @@ aio-search-box.search-container {
     a {
       display: flex;
       align-items: center;
-      margin-left: 16px;
+      padding: 24px;
+      margin: 0 -16px;
+
+      &:focus {
+        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+        outline: 1px solid $focus-outline-ondark;
+        outline-offset: -16px;
+      }
 
       @media screen and (max-width: 480px) {
-        margin-left: 8px;
+        margin: 0 0 0 8px;
+        padding: 0;
       }
 
       &:hover {

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

@@ -1,12 +1,12 @@
 aio-contributor-list {
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
-    .grid-fluid{
+    .grid-fluid {
       width: auto;
     }
   }
 
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
-    .grid-fluid{
+    .grid-fluid {
       margin-left: 20px;
       margin-right: 20px;
       float: none;

aio/src/styles/_constants.scss

@@ -54,8 +54,12 @@ $purple-600: #8E24AA;
 $teal-500: #009688;
 $lightgrey: #F5F6F7;
 
+// STATE COLORS
+$focus-outline-ondark: rgba($white, 0.8);
+$focus-outline-onlight: $accentblue;
+
 // GRADIENTS
-$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
+$bluegradient: linear-gradient(145deg,$blue-900,$blue-400);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
 
 // API LABEL COLOR AND SYMBOLS MAP

aio/tests/deployment/shared/URLS_TO_REDIRECT.txt

@@ -172,10 +172,10 @@
 /docs/ts/latest/api/testing/fakeAsync-function.html	/api/core/testing/fakeAsync
 /docs/ts/latest/cookbook/ts-to-js.html	https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html
 /getting-started	/start
-/getting-started/routing	/start/routing
-/getting-started/data	/start/data
-/getting-started/forms	/start/forms
-/getting-started/deployment	/start/deployment
+/getting-started/routing	/start/start-routing
+/getting-started/data	/start/start-data
+/getting-started/forms	/start/start-forms
+/getting-started/deployment	/start/start-deployment
 /guide/cli-quickstart	/start
 /guide/learning-angular	/start
 /guide/learning-angular.html	/start
@@ -187,5 +187,9 @@
 /guide/webpack	https://v5.angular.io/guide/webpack
 /news	https://blog.angular.io/
 /news.html	https://blog.angular.io/
+/start/data	/start/start-data
+/start/deployment	/start/start-deployment
+/start/forms	/start/start-forms
+/start/routing	/start/start-routing
 /testing	/guide/testing
 /testing/first-app-tests.html	/guide/testing

aio/tests/e2e/src/scroll.e2e-spec.ts

@@ -40,7 +40,8 @@ describe('site auto-scrolling', () => {
     expect(await page.getScrollTop()).not.toBe(0);
 
     await page.docsMenuLink.click();
-    expect(await page.getScrollTop()).toBe(0);
+    // On some environments (e.g. CI) it takes some time for the page to load (and scroll to top).
+    await browser.wait(async () => await page.getScrollTop() === 0, 1000);
   });
 
   it('should scroll to top when navigating to the same page via a link', async () => {

aio/tools/transforms/templates/api/package.template.html

@@ -23,7 +23,7 @@
 {% block header %}
 <header class="api-header">
   <h1>{$ doc.name $}</h1>
-  <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+  {% if doc.isPrimaryPackage %}<label class="api-type-label package">package</label>{% else %}<label class="api-type-label {$ entry-point $}">entry-point</label>{% endif %}
   {% if doc.packageDeprecated or (not doc.isPrimaryPackage and doc.deprecated !== undefined) %}<label class="api-status-label deprecated">deprecated</label>{% endif %}
   {% if doc.security !== undefined %}<label class="api-status-label security">security</label>{% endif %}
   {% if doc.pipeOptions.pure === 'false' %}<label class="api-status-label impure-pipe">impure</label>{% endif %}

integration/.gitignore

@@ -9,3 +9,4 @@ tmp/
 **/*.ngsummary.json
 **/*.ngsummary.ts
 **/.yarn_local_cache*
+**/NPM_PACKAGE_MANIFEST.json

integration/BUILD.bazel

@@ -0,0 +1,99 @@
+load(":angular_integration_test.bzl", "angular_integration_test")
+
+# Some integration ports must be managed manually to be unique and in other
+# cases the tests are able to select a random free port.
+#
+# Where `ng e2e` is used we pass `ng e2e --port 0` which prompts the cli
+# to select a random free port for the the e2e test. The protractor.conf is
+# automaticaly updated to use this port.
+#
+# Karma automatically finds a free port so no effort is needed there.
+#
+# The manually configured ports are as follows:
+#
+#   TEST                                PORT        CONFIGURATION
+#   ====                                ====        =============
+#   dynamic-compiler                    4201        /e2e/browser.config.json: "port": 4201
+#   hello_world__closure                4202        /e2e/browser.config.json: "port": 4202
+#   hello_world__systemjs_umd           4203        /bs-config.e2e.json: "port": 4203
+#   i18n                                4204        /e2e/browser.config.json: "port": 4204
+#   ng_elements                         4205        /e2e/browser.config.json: "port": 4205
+#   platform-server                     4206        /src/server.ts: app.listen(4206,...
+
+# Map of integration tests to tags.
+# A subset of these tests fail or are not meant to be run with ivy bundles. These are tagged
+# "no-ivy-aot".
+INTEGRATION_TESTS = {
+    "bazel": [
+        # Bazel-in-bazel tests are resource intensive and should not be over-parallized
+        # as they will compete for the resources of other parallel tests slowing
+        # everything down. Ask Bazel to allocate multiple CPUs for these tests with "cpu:n" tag.
+        "cpu:3",
+        "no-ivy-aot",
+    ],
+    "bazel-schematics": [
+        # Bazel-in-bazel tests are resource intensive and should not be over-parallized
+        # as they will complete for the resources of other parallel tests slowing
+        # everything down. Ask Bazel to allocate multiple CPUs for these tests with "cpu:n" tag.
+        "cpu:3",
+        "no-ivy-aot",
+    ],
+    "cli-hello-world": [],
+    "cli-hello-world-ivy-compat": [],
+    "cli-hello-world-ivy-i18n": ["no-ivy-aot"],
+    "cli-hello-world-ivy-minimal": [],
+    "cli-hello-world-lazy": [],
+    "cli-hello-world-lazy-rollup": [],
+    "dynamic-compiler": ["no-ivy-aot"],
+    "hello_world__closure": ["no-ivy-aot"],
+    "i18n": ["no-ivy-aot"],
+    "injectable-def": ["no-ivy-aot"],
+    "ivy-i18n": ["no-ivy-aot"],
+    "language_service_plugin": [],
+    "ng_elements": ["no-ivy-aot"],
+    "ng_elements_schematics": ["no-ivy-aot"],
+    "ng_update": [],
+    "ng_update_migrations": ["no-ivy-aot"],
+    "ngcc": ["no-ivy-aot"],
+    "platform-server": ["no-ivy-aot"],
+    "service-worker-schema": [],
+    "side-effects": ["no-ivy-aot"],
+    "terser": [],
+}
+
+[
+    angular_integration_test(
+        name = test_folder + "_test",
+        tags = INTEGRATION_TESTS[test_folder],
+        test_folder = test_folder,
+    )
+    for test_folder in INTEGRATION_TESTS
+]
+
+# Special case for `typings_test_ts36` test as we want to pin
+# `typescript` at version 3.6.x for that test and not link to the
+# root @npm//typescript package.
+angular_integration_test(
+    name = "typings_test_ts36_test",
+    pinned_npm_packages = ["typescript"],
+    test_folder = "typings_test_ts36",
+)
+
+# Special case for `typings_test_ts37` test as we want to pin
+# `typescript` at version 3.7.x for that test and not link to the
+# root @npm//typescript package.
+angular_integration_test(
+    name = "typings_test_ts37_test",
+    pinned_npm_packages = ["typescript"],
+    test_folder = "typings_test_ts37",
+)
+
+# Special case for `hello_world__systemjs_umd` test as we want to pin
+# `systems` at version 0.20.2 and not link to the the root @npm//systemjs
+# which is stuck at 0.18.10 and can't be updated to 0.20.2 without
+# breaking the legacy saucelabs job.
+angular_integration_test(
+    name = "hello_world__systemjs_umd_test",
+    pinned_npm_packages = ["systemjs"],
+    test_folder = "hello_world__systemjs_umd",
+)

integration/README.md

@@ -65,6 +65,47 @@ $ ./integration/run_tests.sh
 The test runner will first re-build any stale npm packages, then `cd` into each subdirectory to
 execute the test.
 
+## Running integration tests under Bazel
+
+The PR https://github.com/angular/angular/pull/33927 added the ability to run integration tests with Bazel. These tests can be resource intensive so it is recommended to limit the number of concurrent test jobs with the `--local_test_jobs` bazel flag.
+
+Locally, if Bazel uses all of your cores to run the maximum number of integration tests in parallel then this can lead to test timeouts and flakes and freeze up your machine while these tests are running. You can limit the number of concurrent local integration tests that run with:
+
+```
+yarn bazel test --local_test_jobs=<N> //integration/...
+```
+
+Set a reasonable `local_test_jobs` limit for your local machine to prevent full cpu utilization during local development test runs.
+
+To avoid having to specify this command line flag, you may want to include it in your `.bazelrc.user` file:
+
+```
+test --local_test_jobs=<N>
+```
+
+The downside of this is that this will apply to all tests and not just the resource intensive integration tests.
+
+### Bazel-in-bazel integration tests
+
+Two of the integration tests that run Bazel-in-Bazel are particularly resource intensive and are tagged "manual" and "exclusive". To run these tests use,
+
+```
+yarn bazel test //integration:bazel_test
+yarn bazel test //integration:bazel-schematics_test
+```
+
+## Adding a new integration test
+
+When adding a new integration test, follow the steps below to add a bazel test target for the new test.
+
+1. Add new test to `INTEGRATION_TESTS` object in `/integration/BUILD.bazel` (and tag as `"no-ivy-aot"` if not meant to be run against ivy bundles). *NB: if the test requires any special attribute then make a new angular_integration_test target instead.*
+2. If test requires ports and does not support ethereal ports then make sure the port is unique and add it to the "manually configured ports" comment to document which port it is using
+3. Add at least the following two entries `.bazelignore` (as they may contain BUILD files)
+   1. `integration/new_test/node_modules`
+   2. `integration/new_test/.yarn_local_cache`
+4. Add any other untracked folders to `.bazelignore` that may contain `BUILD` files
+5. If there are tracked BUILD files in the integration test folder (`integration/bazel` has these for example) add those folders to the `build --deleted_packages` and `query --deleted_packages` lines in `.bazelrc`
+
 ## Browser tests
 
 For integration tests we use the puppeteer provisioned version of Chrome. For both Karma and Protractor tests we set a number of browser testing flags. To avoid duplication, they will be listed and explained here and the code will reference this file for more information.

integration/angular_integration_test.bzl

@@ -0,0 +1,155 @@
+# Copyright Google Inc. All Rights Reserved.
+#
+# Use of this source code is governed by an MIT-style license that can be
+# found in the LICENSE file at https://angular.io/license
+"""Angular integration testing
+"""
+
+load("//tools/npm_integration_test:npm_integration_test.bzl", "npm_integration_test")
+
+# The @npm packages at the root node_modules are used by integration tests
+# with `file:../../node_modules/foobar` references
+NPM_PACKAGE_ARCHIVES = [
+    "check-side-effects",
+    "core-js",
+    "jasmine",
+    "typescript",
+    "rxjs",
+    "systemjs",
+    "tsickle",
+    "tslib",
+    "protractor",
+    "puppeteer",
+    "rollup",
+    "rollup-plugin-commonjs",
+    "rollup-plugin-node-resolve",
+    "webdriver-manager",
+    "@angular/cli",
+    "@angular-devkit/build-angular",
+    "@bazel/bazel",
+    "@types/jasmine",
+    "@types/jasminewd2",
+    "@types/node",
+]
+
+# The generated npm packages should ALWAYS be replaced in integration tests
+# so we pass them to the `check_npm_packages` attribute of npm_integration_test
+GENERATED_NPM_PACKAGES = [
+    "@angular/animations",
+    "@angular/bazel",
+    "@angular/benchpress",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/compiler-cli",
+    "@angular/core",
+    "@angular/elements",
+    "@angular/forms",
+    "@angular/http",
+    "@angular/language-service",
+    "@angular/localize",
+    "@angular/platform-browser",
+    "@angular/platform-browser-dynamic",
+    "@angular/platform-server",
+    "@angular/platform-webworker",
+    "@angular/platform-webworker-dynamic",
+    "@angular/router",
+    "@angular/service-worker",
+    "@angular/upgrade",
+    "zone.js",
+]
+
+def npm_package_archives():
+    """Function to generate pkg_tar definitions for WORKSPACE yarn_install manual_build_file_contents"""
+    npm_packages_to_archive = NPM_PACKAGE_ARCHIVES
+    result = """load("@bazel_tools//tools/build_defs/pkg:pkg.bzl", "pkg_tar")
+"""
+    for name in npm_packages_to_archive:
+        label_name = _npm_package_archive_label(name)
+        last_segment_name = name if name.find("/") == -1 else name.split("/")[-1]
+        result += """pkg_tar(
+    name = "{label_name}",
+    srcs = ["//{name}:{last_segment_name}__all_files"],
+    extension = "tar.gz",
+    strip_prefix = "./node_modules/{name}",
+    # should not be built unless it is a dependency of another rule
+    tags = ["manual"],
+)
+""".format(name = name, label_name = label_name, last_segment_name = last_segment_name)
+    return result
+
+def _npm_package_archive_label(package_name):
+    return package_name.replace("/", "_").replace("@", "") + "_archive"
+
+def _angular_integration_test(pinned_npm_packages = [], **kwargs):
+    "Set defaults for the npm_integration_test common to the angular repo"
+    commands = kwargs.pop("commands", None)
+    if not commands:
+        # By default run `yarn install` followed by `yarn test` using
+        # the bazel managed hermetic version of yarn inside
+        commands = [
+            # Workaround https://github.com/yarnpkg/yarn/issues/2165
+            # Yarn will cache file://dist URIs and not update Angular code
+            "rm -rf ./.yarn_local_cache",
+            "mkdir .yarn_local_cache",
+            "patch-package-json",
+            "$(rootpath @nodejs//:yarn_bin) install --cache-folder ./.yarn_local_cache",
+            "$(rootpath @nodejs//:yarn_bin) test",
+            "rm -rf ./.yarn_local_cache",
+        ]
+
+    # Complete list of npm packages to override in the test's package.json file mapped to
+    # tgz archive to use for the replacement. This is the full list for all integration
+    # tests. Any given integration does not need to use all of these packages.
+    npm_packages = {}
+    for name in NPM_PACKAGE_ARCHIVES:
+        if name not in pinned_npm_packages:
+            npm_packages["@npm//:" + _npm_package_archive_label(name)] = name
+    for name in GENERATED_NPM_PACKAGES:
+        last_segment_name = name if name.find("/") == -1 else name.split("/")[-1]
+        npm_packages["//packages/%s:npm_package_archive" % last_segment_name] = name
+
+    npm_integration_test(
+        check_npm_packages = GENERATED_NPM_PACKAGES,
+        commands = commands,
+        npm_packages = npm_packages,
+        tags = kwargs.pop("tags", []) + [
+            # `integration` tag is used for filtering out these tests from the normal
+            # developer workflow
+            "integration",
+            # Integration do not work inside of a sandbox as they may run host applications such
+            # as chrome (which is run by ng) that require access to files outside of the sandbox.
+            "no-sandbox",
+            # Remote doesn't work as it needs network access right now
+            "no-remote-exec",
+        ],
+        data = kwargs.pop("data", []) + [
+            # We need the yarn_bin & yarn_files available at runtime
+            "@nodejs//:yarn_bin",
+            "@nodejs//:yarn_files",
+        ],
+        # 15-minute timeout
+        timeout = "long",
+        # Tells bazel that this test should be allocated a large amount of memory.
+        # See https://docs.bazel.build/versions/2.0.0/be/common-definitions.html#common-attributes-tests.
+        size = "enormous",
+        **kwargs
+    )
+
+def angular_integration_test(name, test_folder, pinned_npm_packages = [], **kwargs):
+    "Sets up the integration test target based on the test folder name"
+    native.filegroup(
+        name = "_%s_sources" % name,
+        srcs = native.glob(
+            include = ["%s/**" % test_folder],
+            exclude = [
+                "%s/node_modules/**" % test_folder,
+                "%s/.yarn_local_cache/**" % test_folder,
+            ],
+        ),
+    )
+    _angular_integration_test(
+        name = name,
+        test_files = kwargs.pop("test_files", "_%s_sources" % name),
+        pinned_npm_packages = pinned_npm_packages,
+        **kwargs
+    )

integration/bazel-schematics/package.json

@@ -4,9 +4,29 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
+    "@angular-devkit/build-angular": "file:../../node_modules/@angular-devkit/build-angular",
+    "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/bazel": "file:../../dist/packages-dist/bazel",
     "@angular/cli": "file:../../node_modules/@angular/cli",
-    "@bazel/bazel": "file:../../node_modules/@bazel/bazel"
+    "@angular/common": "file:../../node_modules/@angular/common",
+    "@angular/compiler": "file:../../node_modules/@angular/compiler",
+    "@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
+    "@angular/core": "file:../../node_modules/@angular/core",
+    "@angular/forms": "file:../../node_modules/@angular/forms",
+    "@angular/language-service": "file:../../node_modules/@angular/language-service",
+    "@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
+    "@angular/router": "file:../../node_modules/@angular/router",
+    "@bazel/bazel": "file:../../node_modules/@bazel/bazel",
+    "@types/node": "file:../../node_modules/@types/node",
+    "protractor": "file:../../node_modules/protractor",
+    "puppeteer": "file:../../node_modules/puppeteer",
+    "typescript": "file:../../node_modules/typescript",
+    "tslib": "file:../../node_modules/tslib"
+  },
+  "//resolutions-comment": "Ensure a single version of webdriver-manager which comes from root node_modules that has already run webdriver-manager update",
+  "resolutions": {
+    "**/webdriver-manager": "file:../../node_modules/webdriver-manager"
   },
   "scripts": {
     "test": "./test.sh"

integration/bazel-schematics/test.sh

@@ -2,6 +2,17 @@
 
 set -eux -o pipefail
 
+# sedi makes `sed -i` work on both OSX & Linux
+# See https://stackoverflow.com/questions/2320564/i-need-my-sed-i-command-for-in-place-editing-to-work-with-both-gnu-sed-and-bsd
+function sedi () {
+  case $(uname) in
+    Darwin*) sedi=('-i' '') ;;
+    *) sedi='-i' ;;
+  esac
+
+  sed "${sedi[@]}" "$@"
+}
+
 function installLocalPackages() {
   # Install Angular packages that are built locally from HEAD.
   # This also gets around the bug whereby yarn caches local `file://` urls.
@@ -13,17 +24,31 @@ function installLocalPackages() {
   )
   local local_packages=()
   for package in "${packages[@]}"; do
-    local_packages+=("@angular/${package}@file:${pwd}/../../../dist/packages-dist/${package}")
+    local_packages+=("@angular/${package}@file:${pwd}/../node_modules/@angular/${package}")
   done
 
-  # keep typescript, tslib, and @types/node versions in sync with the ones used in this repo
-  local_packages+=("typescript@file:${pwd}/../../../node_modules/typescript")
-  local_packages+=("tslib@file:${pwd}/../../../node_modules/tslib")
-  local_packages+=("@types/node@file:${pwd}/../../../node_modules/@types/node")
+  # keep protractor, typescript, tslib, and @types/node versions in sync with the ones used in this repo
+  local_packages+=("protractor@file:${pwd}/../node_modules/protractor")
+  local_packages+=("typescript@file:${pwd}/../node_modules/typescript")
+  local_packages+=("tslib@file:${pwd}/../node_modules/tslib")
+  local_packages+=("@types/node@file:${pwd}/../node_modules/@types/node")
+
+  # add protractor, puppeteer & webdriver-manager so we get the chrome & chromedriver binaries
+  # that have already been downloaded at the root
+  local_packages+=("puppeteer@file:${pwd}/../node_modules/puppeteer")
+  local_packages+=("webdriver-manager@file:${pwd}/../node_modules/webdriver-manager")
 
   yarn add --ignore-scripts --silent "${local_packages[@]}"
 }
 
+function patchKarmaConf() {
+  sedi "s#module.exports#process.env.CHROME_BIN = require\('puppeteer'\).executablePath\(\); module.exports#" ./karma.conf.js
+  sedi "s#browsers\: \['Chrome'\],#customLaunchers\: \{ ChromeHeadlessNoSandbox\: \{ base\: 'ChromeHeadless', flags\: \['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'\] \} \}, browsers\: \['ChromeHeadlessNoSandbox'\],#" ./karma.conf.js
+}
+
+function patchProtractorConf() {
+  sedi "s#browserName\: 'chrome'#browserName\: 'chrome', chromeOptions\: \{ binary: require\('puppeteer'\).executablePath\(\), args: \['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'\] \},#" ./e2e/protractor.conf.js
+}
 
 function testBazel() {
   # Set up
@@ -33,6 +58,8 @@ function testBazel() {
   # Create project
   ng new demo --collection=@angular/bazel --routing --skip-git --skip-install --style=scss
   cd demo
+  patchKarmaConf
+  patchProtractorConf
   installLocalPackages
   ng generate component widget --style=css
   ng build
@@ -52,13 +79,10 @@ function testNonBazel() {
   # disable CLI's version check (if version is 0.0.0, then no version check happens)
   yarn --cwd node_modules/@angular/cli version --new-version 0.0.0 --no-git-tag-version
   # re-add build-angular
-  yarn add --dev file:../../../node_modules/@angular-devkit/build-angular
-  # TODO: Find a way to use the Chrome version provided by `puppeteer` as the rest of the
-  #       integration projects. See https://github.com/angular/angular/pull/35049 for details.
-  yarn webdriver-manager update --gecko=false --standalone=false --versions.chrome=79.0.3945.130;
+  yarn add --dev file:../node_modules/@angular-devkit/build-angular
   ng build --progress=false
   ng test --progress=false --watch=false
-  ng e2e --configuration=production --webdriver-update=false
+  ng e2e --port 0 --configuration=production --webdriver-update=false
 }
 
 testBazel

integration/cli-hello-world-ivy-compat/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --port 0",
     "lint": "ng lint",
     "ng": "ng",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
@@ -31,8 +31,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.4.6",
-    "@types/jasminewd2": "2.0.6",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "codelyzer": "5.2.0",
     "jasmine-core": "3.5.0",

integration/cli-hello-world-ivy-i18n/package.json

@@ -4,13 +4,13 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --port 0",
     "lint": "ng lint",
     "ng": "ng",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "start": "ng serve",
     "pretest": "ng version",
-    "test": "ng e2e --prod && ng xi18n && yarn translate && ng e2e --configuration fr && ng e2e --configuration de",
+    "test": "ng e2e --port 0 --prod && ng xi18n && yarn translate && ng e2e --port 0 --configuration fr && ng e2e --port 0 --configuration de",
     "translate": "cp src/locale/messages.xlf src/locale/messages.fr.xlf && cp src/locale/messages.xlf src/locale/messages.de.xlf && sed -i.bak -e 's/source>/target>/g' -e 's/Hello/Bonjour/' src/locale/messages.fr.xlf && sed -i.bak -e 's/source>/target>/g' -e 's/Hello/Hallo/' src/locale/messages.de.xlf",
     "serve": "serve --no-clipboard --listen 4200"
   },
@@ -35,8 +35,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.4.4",
-    "@types/jasminewd2": "2.0.8",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "codelyzer": "5.2.0",
     "jasmine-core": "3.5.0",

integration/cli-hello-world-ivy-minimal/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --port 0",
     "lint": "ng lint",
     "ng": "ng",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
@@ -31,8 +31,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.4.6",
-    "@types/jasminewd2": "2.0.6",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "codelyzer": "5.2.0",
     "jasmine-core": "3.5.0",

integration/cli-hello-world-lazy-rollup/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e --prod",
+    "e2e": "ng e2e --port 0 --prod",
     "test": "yarn e2e && yarn build && node check-output-for-ngdevmode.js",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
   },
@@ -18,7 +18,7 @@
     "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
     "@angular/router": "file:../../dist/packages-dist/router",
     "rxjs": "file:../../node_modules/rxjs",
-    "tslib": "1.10.0",
+    "tslib": "file:../../node_modules/tslib",
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
@@ -26,9 +26,9 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/node": "10.14.21",
-    "@types/jasmine": "3.4.4",
-    "@types/jasminewd2": "2.0.8",
+    "@types/node": "file:../../node_modules/@types/node",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "codelyzer": "5.1.2",
     "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",

integration/cli-hello-world-lazy/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e --prod",
+    "e2e": "ng e2e --port 0 --prod",
     "test": "yarn e2e && yarn build && node check-output-for-ngdevmode.js",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
   },
@@ -18,7 +18,7 @@
     "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
     "@angular/router": "file:../../dist/packages-dist/router",
     "rxjs": "file:../../node_modules/rxjs",
-    "tslib": "1.10.0",
+    "tslib": "file:../../node_modules/tslib",
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
@@ -26,9 +26,9 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/node": "10.14.21",
-    "@types/jasmine": "3.4.4",
-    "@types/jasminewd2": "2.0.8",
+    "@types/node": "file:../../node_modules/@types/node",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "codelyzer": "5.1.2",
     "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",

integration/cli-hello-world/package.json

@@ -8,7 +8,7 @@
     "pretest": "ng version",
     "test": "ng test && yarn e2e --configuration=ci && yarn e2e --configuration=ci-production",
     "lint": "ng lint",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --port 0",
     "postinstall": "ngcc --properties es2015 --create-ivy-entry-points"
   },
   "private": true,
@@ -30,8 +30,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.4.6",
-    "@types/jasminewd2": "2.0.8",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "codelyzer": "5.2.0",
     "jasmine-core": "3.5.0",

integration/dynamic-compiler/e2e/browser.config.json

@@ -1,7 +1,7 @@
 {
   "open": false,
   "logLevel": "silent",
-  "port": 8080,
+  "port": 4201,
   "server": {
     "baseDir": ".",
     "routes": {

integration/dynamic-compiler/e2e/protractor.config.js

@@ -13,7 +13,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:8080/',
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4201`
+  baseUrl: 'http://localhost:4201/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true
 };

integration/get-sharded-tests.js

@@ -24,7 +24,7 @@ const path = require('path');
 const minimist = require('minimist');
 
 // Parsed command line arguments.
-const {shardIndex, maxShards} = minimist(process.argv.slice(2));
+const {_, shardIndex, maxShards} = minimist(process.argv.slice(2));
 
 // Ensure that all CLI options are set properly.
 if (shardIndex == null) {
@@ -32,46 +32,11 @@ if (shardIndex == null) {
 } else if (maxShards == null) {
   throw new Error('The "--maxShards" option has not been specified.');
 }
-
-// List of all integration tests that are available.
-const integrationTests = fs.readdirSync(__dirname).filter(
-    testName => fs.statSync(path.join(__dirname, testName)).isDirectory());
-
-// Manual test shards which aren't computed automatically. This is helpful when a specific
-// set of integration test takes up *way* more time than all other tests, and we want to
-// balance out the duration for all specific shards.
-const manualTestShards = [
-  // The first shard should only run the bazel integration tests because these take up
-  // a lot of time and shouldn't be split up automatically.
-  ['bazel', 'bazel-schematics']
-];
-
-// Tests which haven't been assigned manually to a shard. These tests will be automatically
-// split across the remaining available shards.
-const unassignedTests = stripManualOverrides(integrationTests, manualTestShards);
-
-if (manualTestShards.length === maxShards && unassignedTests.length) {
-  throw new Error(
-      `Tests have been specified manually for all available shards, but there were ` +
-      `integration tests which haven't been specified and won't run right now. Missing ` +
-      `tests: ${unassignedTests.join(', ')}`)
-} else if (manualTestShards.length > maxShards) {
-  throw new Error(
-      `Too many manual shards have been specified. Increase the amount of maximum shards.`);
+if (shardIndex >= maxShards) {
+  throw new Error('shardIndex out of bounds');
 }
 
-// In case the shard for the current index has been specified manually, we just output
-// the tests for the manual shard.
-if (manualTestShards[shardIndex]) {
-  printTestNames(manualTestShards[shardIndex]);
-} else {
-  const amountManualShards = manualTestShards.length;
-  // In case there isn't a manual shard specified for this shard index, we just compute the
-  // tests for this shard. Note that we need to subtract the amount of manual shards because
-  // we need to split up the unassigned tests across the remaining available shards.
-  printTestNames(getTestsForShardIndex(
-      unassignedTests, shardIndex - amountManualShards, maxShards - amountManualShards));
-}
+printTestNames(getTestsForShardIndex(_, shardIndex, maxShards));
 
 /**
  * Splits the specified tests into a limited amount of shards and returns the tests that should
@@ -82,16 +47,6 @@ function getTestsForShardIndex(tests, shardIndex, maxShards) {
   return tests.filter((n, index) => index % maxShards === shardIndex);
 }
 
-/**
- * Strips all manual tests from the list of integration tests. This is necessary because
- * when computing the shards automatically we don't want to include manual tests again. This
- * would mean that CircleCI runs some integration tests multiple times.
- */
-function stripManualOverrides(integrationTests, manualShards) {
-  const allManualTests = manualShards.reduce((res, manualTests) => res.concat(manualTests), []);
-  return integrationTests.filter(testName => !allManualTests.includes(testName))
-}
-
 /** Prints the specified test names to the stdout. */
 function printTestNames(testNames) {
   // Print the test names joined with spaces because this allows Bash to easily convert the output

integration/hello_world__closure/e2e/browser.config.json

@@ -1,7 +1,7 @@
 {
   "open": false,
   "logLevel": "silent",
-  "port": 8080,
+  "port": 4202,
   "server": {
     "baseDir": "src",
     "routes": {

integration/hello_world__closure/e2e/protractor.config.js

@@ -13,7 +13,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:8080/',
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4202`
+  baseUrl: 'http://localhost:4202/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true
 };

integration/hello_world__closure/e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "../built/e2e",
-    "types": ["jasmine"],
+    "types": ["jasmine", "jasminewd2"],
     // TODO(alexeagle): was required for Protractor 4.0.11
     "skipLibCheck": true
   }

integration/hello_world__closure/package.json

@@ -16,11 +16,13 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor",
-    "puppeteer": "file:../../node_modules/puppeteer"
+    "puppeteer": "file:../../node_modules/puppeteer",
+    "tsickle": "file:../../node_modules/tsickle"
   },
   "//resolutions-comment": "Ensure a single version of webdriver-manager which comes from root node_modules that has already run webdriver-manager update",
   "resolutions": {

integration/hello_world__systemjs_umd/bs-config.e2e.json

@@ -1,7 +1,7 @@
 {
   "open": false,
   "logLevel": "silent",
-  "port": 8000,
+  "port": 4203,
   "server": {
     "baseDir": "src",
     "routes": {

integration/hello_world__systemjs_umd/e2e/tsconfig.json

@@ -4,8 +4,6 @@
     "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
     "skipLibCheck": true,
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine", "jasminewd2"]
   }
 }

integration/hello_world__systemjs_umd/package.json

@@ -23,7 +23,8 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor",

integration/hello_world__systemjs_umd/protractor.config.js

@@ -13,7 +13,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:8000/',
+  // Port comes from lite-serve config `/bs-config.e2e.json` `"port": 4203`
+  baseUrl: 'http://localhost:4203/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true,
 };

integration/i18n/e2e/browser.config.json

@@ -1,7 +1,7 @@
 {
   "open": false,
   "logLevel": "silent",
-  "port": 8080,
+  "port": 4204,
   "server": {
     "baseDir": "src",
     "routes": {

integration/i18n/e2e/protractor.config.js

@@ -13,7 +13,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:8080/',
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4204`
+  baseUrl: 'http://localhost:4204/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true
 };

integration/i18n/e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "../built/e2e",
-    "types": ["jasmine"],
+    "types": ["jasmine", "jasminewd2"],
     // TODO(alexeagle): was required for Protractor 4.0.11
     "skipLibCheck": true
   }

integration/i18n/package.json

@@ -17,11 +17,13 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor",
-    "puppeteer": "file:../../node_modules/puppeteer"
+    "puppeteer": "file:../../node_modules/puppeteer",
+    "tsickle": "file:../../node_modules/tsickle"
   },
   "//resolutions-comment": "Ensure a single version of webdriver-manager which comes from root node_modules that has already run webdriver-manager update",
   "resolutions": {

integration/injectable-def/package.json

@@ -17,7 +17,7 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor"

integration/ivy-i18n/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build --prod",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --port 0",
     "lint": "ng lint",
     "ng": "ng",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
@@ -49,8 +49,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.4.4",
-    "@types/jasminewd2": "2.0.8",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "codelyzer": "5.2.0",
     "jasmine-core": "3.5.0",

integration/language_service_plugin/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@angular/core": "file:../../dist/packages-dist/core",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
     "@types/node": "file:../../node_modules/@types/node",
     "jasmine": "file:../../node_modules/jasmine",
     "typescript": "file:../../node_modules/typescript"

integration/ng_elements/e2e/browser.config.json

@@ -1,7 +1,7 @@
 {
   "open": false,
   "logLevel": "silent",
-  "port": 8080,
+  "port": 4205,
   "server": {
     "baseDir": "src",
     "routes": {

integration/ng_elements/e2e/protractor.config.js

@@ -13,7 +13,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:8080/',
+  // Port comes from lite-server config `/e2e/browser.config.json` `"port": 4205`
+  baseUrl: 'http://localhost:4205/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true
 };

integration/ng_elements/e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "../built/e2e",
-    "types": ["jasmine"],
+    "types": ["jasmine", "jasminewd2"],
     // TODO(alexeagle): was required for Protractor 4.0.11
     "skipLibCheck": true
   }

integration/ng_elements/package.json

@@ -17,11 +17,13 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor",
-    "puppeteer": "file:../../node_modules/puppeteer"
+    "puppeteer": "file:../../node_modules/puppeteer",
+    "tsickle": "file:../../node_modules/tsickle"
   },
   "//resolutions-comment": "Ensure a single version of webdriver-manager which comes from root node_modules that has already run webdriver-manager update",
   "resolutions": {

integration/ng_elements_schematics/package.json

@@ -5,6 +5,8 @@
   "devDependencies": {
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@types/node": "file:../../node_modules/@types/node",
+    "@types/shelljs": "0.8.6",
+    "shelljs": "0.8.3",
     "typescript": "file:../../node_modules/typescript"
   },
   "scripts": {

integration/ng_elements_schematics/test.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 import {cd, exec, rm, set} from 'shelljs';
+import * as fs from 'fs';
 
 // Fail on first error
 set('-e');
@@ -20,19 +21,29 @@ const ngPackages = [
   'router',
   'compiler-cli',
   'language-service',
-].map(p => `"@angular/${p}@file:${__dirname}/../../dist/packages-dist/${p}"`);
+];
 
 // Keep typescript, tslib, and @types/node versions in sync with the ones used in this repo
 const nodePackages = [
   '@types/node',
   'tslib',
   'typescript',
-].map(p => `"${p}@file:${__dirname}/../../node_modules/${p}"`);
+];
 
-const packages = [
-  ...ngPackages,
-  ...nodePackages,
-].join(' ');
+// Under Bazel integration tests are sand-boxed and cannot reference
+// reference `../../dist/*` packages and should not do so as these are not
+// inputs to the test. The npm_integeration_test rule instead provides a manifest
+// file that contains all of the npm package mappings available to the test.
+const bazelMappings: { [key: string]: string } = fs.existsSync('NPM_PACKAGE_MANIFEST.json') ? require('./NPM_PACKAGE_MANIFEST.json') : {};
+
+const packages: { [key: string]: string } = {};
+for (let p of ngPackages) {
+  const n = `@angular/${p}`;
+  packages[n] = `file:${bazelMappings[n]}` || `file:${__dirname}/../../dist/packages-dist/${p}`;
+}
+for (let p of nodePackages) {
+  packages[p] = `file:${bazelMappings[p]}` || `file:${__dirname}/../../node_modules/${p}`;
+}
 
 // Clean up previously run test
 cd(__dirname);
@@ -43,11 +54,13 @@ exec('ng version');
 exec('ng new demo --skip-git --skip-install --style=css --no-interactive');
 cd('demo');
 
-// Install Angular packages that are built locally from HEAD
-exec(`yarn add --ignore-scripts --silent ${packages}`);
+// Install Angular packages that are built locally from HEAD and npm packages
+// from root node modules that are to be kept in sync
+const packageList = Object.keys(packages).map(p => `${p}@${packages[p]}`).join(' ');
+exec(`yarn add --ignore-scripts --silent ${packageList}`);
 
 // Add @angular/elements
-exec(`ng add "${__dirname}/../../dist/packages-dist/elements"`);
+exec(bazelMappings ? `ng add "${bazelMappings['@angular/elements']}"` : `ng add "${__dirname}/../../dist/packages-dist/elements"`);
 
 // Test that build is successful after adding elements
 exec('ng build --no-source-map');

integration/ng_elements_schematics/yarn.lock

@@ -2,18 +2,18 @@
 # yarn lockfile v1
 
 
-"@angular-devkit/architect@0.900.0-rc.14":
-  version "0.900.0-rc.14"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.900.0-rc.14.tgz#cfdbee7899b9addfd9d43c638b0dbc21188f0a79"
-  integrity sha512-dgEc/zYE0uzv+m8JTdv3FDc7bViJKbxs8FY3zdkArc6MXIXpoMzgvveEEHvhrpO0iu6njW/xRSZYtYnTIY4xlw==
+"@angular-devkit/architect@0.900.3":
+  version "0.900.3"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.900.3.tgz#9c396733abd12fbb1d5bbc4542b2ee52418adb02"
+  integrity sha512-4UHc58Dlc5XHY3eiYSX9gytLyPNYixGSRwLcc/LRwuPgrmUFKPzCN3nwgB+9kc03/HN89CsJ1rS1scid6N6vxQ==
   dependencies:
-    "@angular-devkit/core" "9.0.0-rc.14"
+    "@angular-devkit/core" "9.0.3"
     rxjs "6.5.3"
 
-"@angular-devkit/core@9.0.0-rc.14":
-  version "9.0.0-rc.14"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-9.0.0-rc.14.tgz#5cff058750c0b063a6f5fa1a2e830f1f48ffa56b"
-  integrity sha512-hFiKoAPtnOqqYv97Y22OgyeTFxjNU/6WDhmuXkfbZDKychvuBLDOdgUhL43heEzavSfCCl23E0JmilwCUcepmw==
+"@angular-devkit/core@9.0.3":
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-9.0.3.tgz#a027862d2edd981afcc6245176e9f27768c631c9"
+  integrity sha512-3+abmv9K9d+BVgUAolYgoOqlGAA2Jb1pWo2biapSDG6KjUZHUCJdnsKigLtLorCdv0SrjTp56FFplkcqKsFQgA==
   dependencies:
     ajv "6.10.2"
     fast-json-stable-stringify "2.0.0"
@@ -21,23 +21,23 @@
     rxjs "6.5.3"
     source-map "0.7.3"
 
-"@angular-devkit/schematics@9.0.0-rc.14":
-  version "9.0.0-rc.14"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-9.0.0-rc.14.tgz#4605b1ee9f18b772094697f9b35258fdac76d4b3"
-  integrity sha512-i/XTxo7hTXTFKus51Qry3rRGHL2uS4SgufGqdvOcy2qZbjyh/wt0UDOGJu/w8dcA9pJm+vFBLAbnro5oFyIsVw==
+"@angular-devkit/schematics@9.0.3":
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-9.0.3.tgz#e65fa1ce08a3d5ef0af594b623024439c1110a0d"
+  integrity sha512-BQnZtFQPLZZOijhuEndtzL6cOnhaE8nNxupkRHavWohOMStnLsRyvVJj6JVDkf37wvT5koqTNjHhbdMxcCRc6A==
   dependencies:
-    "@angular-devkit/core" "9.0.0-rc.14"
+    "@angular-devkit/core" "9.0.3"
     ora "4.0.2"
     rxjs "6.5.3"
 
 "@angular/cli@file:../../node_modules/@angular/cli":
-  version "9.0.0-rc.14"
+  version "9.0.3"
   dependencies:
-    "@angular-devkit/architect" "0.900.0-rc.14"
-    "@angular-devkit/core" "9.0.0-rc.14"
-    "@angular-devkit/schematics" "9.0.0-rc.14"
-    "@schematics/angular" "9.0.0-rc.14"
-    "@schematics/update" "0.900.0-rc.14"
+    "@angular-devkit/architect" "0.900.3"
+    "@angular-devkit/core" "9.0.3"
+    "@angular-devkit/schematics" "9.0.3"
+    "@schematics/angular" "9.0.3"
+    "@schematics/update" "0.900.3"
     "@yarnpkg/lockfile" "1.1.0"
     ansi-colors "4.1.1"
     debug "^4.1.1"
@@ -54,21 +54,21 @@
     universal-analytics "^0.4.20"
     uuid "^3.3.2"
 
-"@schematics/angular@9.0.0-rc.14":
-  version "9.0.0-rc.14"
-  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-9.0.0-rc.14.tgz#4112aeb6c76144893d65cab9f53ca8422adc3bbb"
-  integrity sha512-NWxDLym2Sst5lTvV7QYkVUjy3N0CfCohhdWC4DGRtjUyTD2eUepAg1PZCQcq8U2iRtd78Lm1n4obDWO1tW3pXQ==
+"@schematics/angular@9.0.3":
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-9.0.3.tgz#8b0fb91fa18dd909001ac0d888479a96810aa640"
+  integrity sha512-6XSnPW4G7aoKXccg0FTpZ02y/yi9y/bj7swnSL9Z4RRPIvPVapDjB7uJPg8sm8+PTIpcMhEFQrchIqM3LXW4zA==
   dependencies:
-    "@angular-devkit/core" "9.0.0-rc.14"
-    "@angular-devkit/schematics" "9.0.0-rc.14"
+    "@angular-devkit/core" "9.0.3"
+    "@angular-devkit/schematics" "9.0.3"
 
-"@schematics/update@0.900.0-rc.14":
-  version "0.900.0-rc.14"
-  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.900.0-rc.14.tgz#1debea3eb90559d25838e7b256b48bac216e19d9"
-  integrity sha512-ZlsneHwpvrtpt0D10g4S8JftLaSFQtSO+kOD1uP26OxNMg9w54jrlr7xWSwAmT69/ETjNy8BFKXdcU9yvYixPA==
+"@schematics/update@0.900.3":
+  version "0.900.3"
+  resolved "https://registry.yarnpkg.com/@schematics/update/-/update-0.900.3.tgz#9141ee2e1b6356e66f6269b92c284c86e4faf065"
+  integrity sha512-mlRsm3/HM1f/10Wdz4xMYA+mpW3EDCB+whlV5cJ7PGMhjUMaxA9DuWvoP06h05le6XmgnjIEoxL6NJ7CgesHcA==
   dependencies:
-    "@angular-devkit/core" "9.0.0-rc.14"
-    "@angular-devkit/schematics" "9.0.0-rc.14"
+    "@angular-devkit/core" "9.0.3"
+    "@angular-devkit/schematics" "9.0.3"
     "@yarnpkg/lockfile" "1.1.0"
     ini "1.3.5"
     npm-package-arg "^7.0.0"
@@ -77,9 +77,41 @@
     semver "6.3.0"
     semver-intersect "1.4.0"
 
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
+"@types/glob@*":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
+"@types/node@*":
+  version "13.7.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.5.tgz#2da244d764666f85154274cac94a1cb5b88dcb8d"
+  integrity sha512-PfSBCTQhAQg6QBP4UhXgrZ/wQ3pjfwBr4sA7Aul+pC9XwGgm9ezrJF7OiC/I4Kf+7VPu/5ThKngAruqxyctZfA==
+
 "@types/node@file:../../node_modules/@types/node":
   version "12.11.1"
 
+"@types/shelljs@0.8.6":
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.6.tgz#45193a51df99e0f00513c39a2152832399783221"
+  integrity sha512-svx2eQS268awlppL/P8wgDLBrsDXdKznABHJcuqXyWpSKJgE1s2clXlBvAwbO/lehTmG06NtEWJRkAk4tAgenA==
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
 "@yarnpkg/lockfile@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
@@ -635,7 +667,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -797,6 +829,11 @@ inquirer@7.0.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
+interpret@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
 ip@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
@@ -1383,6 +1420,13 @@ readdir-scoped-modules@^1.0.0:
     graceful-fs "^4.1.2"
     once "^1.3.0"
 
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
 request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -1409,7 +1453,7 @@ request@^2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-resolve@^1.10.0:
+resolve@^1.1.6, resolve@^1.10.0:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -1503,6 +1547,15 @@ semver@6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+shelljs@0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
+  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

integration/ng_update_migrations/package.json

@@ -28,8 +28,8 @@
     "@angular/cli": "file:../../node_modules/@angular/cli",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "@angular/language-service": "file:../../dist/packages-dist/language-service",
-    "@types/jasmine": "3.3.16",
-    "@types/jasminewd2": "2.0.6",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "chalk": "2.4.2",
     "diff": "4.0.1",

integration/ngcc/package.json

@@ -21,7 +21,7 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
     "concurrently": "3.4.0",
     "lite-server": "2.2.2",
     "protractor": "file:../../node_modules/protractor"

integration/ngcc/test.sh

@@ -184,6 +184,9 @@ assertSucceeded "Expected 'ngcc' to log 'Compiling'."
 # Can it compile `@angular/platform-server` in UMD + typings without errors?
 # (The CLI prefers the `main` property (which maps to UMD) over `module` when compiling `@angular/platform-server`.
 # See https://github.com/angular/angular-cli/blob/e36853338/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/server.ts#L34)
+  if [[ -z "$cache" ]]; then
+    cache=".yarn_local_cache"
+  fi
   rm -rf node_modules/@angular/platform-server && \
     yarn install --cache-folder $cache --check-files && \
     test -d node_modules/@angular/platform-server

integration/platform-server/e2e/protractor.config.js

@@ -18,7 +18,8 @@ exports.config = {
     }
   },
   directConnect: true,
-  baseUrl: 'http://localhost:9876/',
+  // Port comes from express config `/src/server.ts` `app.listen(4206,...`
+  baseUrl: 'http://localhost:4206/',
   framework: 'jasmine',
   useAllAngular2AppRoots: true
 };

integration/platform-server/e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "../built/e2e",
-    "types": ["jasmine"],
+    "types": ["jasmine", "jasminewd2"],
     // TODO(alexeagle): was required for Protractor 4.0.11
     "skipLibCheck": true
   }

integration/platform-server/package.json

@@ -22,7 +22,8 @@
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.41",
+    "@types/jasmine": "file:../../node_modules/@types/jasmine",
+    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
     "@types/node": "file:../../node_modules/@types/node",
     "babel-core": "6.26.3",
     "babel-loader": "6.4.1",

integration/platform-server/src/server.ts

@@ -41,4 +41,4 @@ app.get('/favicon.ico', (req, res) => { res.send(''); });
 app.get('/helloworld', render(HelloWorldServerModuleNgFactory, helloworld));
 app.get('/transferstate', render(TransferStateServerModuleNgFactory, transferstate));
 
-app.listen(9876, function() { console.log('Server listening on port 9876!'); });
+app.listen(4206, function() { console.log('Server listening on port 4206!'); });

integration/platform-server/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "angularCompilerOptions": {
-    "annotationsAs": "static fields",
-    "annotateForClosureCompiler": true,
     "enableIvy": false,
   },
 

integration/platform-server/yarn.lock

@@ -41,10 +41,18 @@
     domino "^2.1.2"
     xhr2 "^0.1.4"
 
-"@types/jasmine@2.5.41":
-  version "2.5.41"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.41.tgz#d5e86161a0af80d52062b310a33ed65b051a0713"
-  integrity sha1-1ehhYaCvgNUgYrMQoz7WWwUaBxM=
+"@types/jasmine@*":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.5.3.tgz#e41ba279166d3838e68aa34738dd890c846ee3f8"
+  integrity sha512-LRJ21f/BO4QNZ3YDaMP0OEurOfE77x8mi8MfEnUsei5IKfmZL0GKl7juhABMdUIJHhVS9OCLotKHfsFNAuJ+DA==
+
+"@types/jasmine@file:../../node_modules/@types/jasmine":
+  version "2.8.8"
+
+"@types/jasminewd2@file:../../node_modules/@types/jasminewd2":
+  version "2.0.6"
+  dependencies:
+    "@types/jasmine" "*"
 
 "@types/mime-types@^2.1.0":
   version "2.1.0"
@@ -3358,7 +3366,7 @@ punycode@^2.1.0:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 "puppeteer@file:../../node_modules/puppeteer":
-  version "2.1.0"
+  version "2.1.1"
   dependencies:
     "@types/mime-types" "^2.1.0"
     debug "^4.1.0"

integration/run_tests.sh

@@ -9,7 +9,12 @@ cd "$(dirname "$0")"
 
 # basedir is the workspace root
 readonly basedir=$(pwd)/..
-readonly bazel_bin=$(yarn bin)/bazel
+
+# Skip all integration tests that are now handled by angular_integration_test except
+# the tests that are tracked for payload size; these are:
+#   - cli-hello-world*
+#   - hello_world__closure
+readonly TEST_DIRS=$(find $(ls) -maxdepth 0 -type d \( -name "cli-hello-world*" -or -name "hello_world__closure" \))
 
 # When running on the CI, we track the payload size of various integration output files. Also
 # we shard tests across multiple CI job instances. The script needs to be run with a shard index
@@ -18,11 +23,11 @@ readonly bazel_bin=$(yarn bin)/bazel
 if $CI; then
   source ${basedir}/scripts/ci/payload-size.sh
 
-  SHARD_INDEX=${1:?"No shard index has been specified."}
-  MAX_SHARDS=${2:?"The maximum amount of shards has not been specified."}
+  readonly SHARD_INDEX=${1:?"No shard index has been specified."}
+  readonly MAX_SHARDS=${2:?"The maximum amount of shards has not been specified."}
 
   # Determines the tests that need to be run for this shard index.
-  TEST_DIRS=$(node ./get-sharded-tests.js --shardIndex ${SHARD_INDEX} --maxShards ${MAX_SHARDS})
+  readonly RUN_TESTS=$(node ./get-sharded-tests.js --shardIndex ${SHARD_INDEX} --maxShards ${MAX_SHARDS} ${TEST_DIRS})
 
   # NB: we don't run build-packages-dist.js because we expect that it was done
   # by an earlier job in the CircleCI workflow.
@@ -33,9 +38,11 @@ else
 
   # If we aren't running on CircleCI, we do not shard tests because this would be the job of
   # Bazel eventually. For now, we just run all tests sequentially when running locally.
-  TEST_DIRS=$(ls | grep -v node_modules)
+  readonly RUN_TESTS=${TEST_DIRS}
 fi
 
+echo "Running integration tests: ${RUN_TESTS}"
+
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
 export readonly cache=.yarn_local_cache
@@ -46,11 +53,14 @@ rm_cache
 mkdir $cache
 trap rm_cache EXIT
 
-for testDir in ${TEST_DIRS}; do
+for testDir in ${RUN_TESTS}; do
   [[ -d "$testDir" ]] || continue
-  echo "#################################"
+
+  echo ""
+  echo "######################################################################"
   echo "Running integration test $testDir"
-  echo "#################################"
+  echo "######################################################################"
+
   (
     cd $testDir
     rm -rf dist

integration/terser/package.json

@@ -11,6 +11,7 @@
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
     "rxjs": "file:../../node_modules/rxjs",
     "terser": "3.17.0",
+    "typescript": "file:../../node_modules/typescript",
     "zone.js": "file:../../dist/zone.js-dist/zone.js"
   }
 }

integration/typings_test_ts36/tsconfig.json

@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "module": "commonjs",
     "moduleResolution": "node",
-    "outDir": "../../dist/typings_test_ts36/",
+    "outDir": "./dist/out-tsc",
     "rootDir": ".",
     "target": "es5",
     "lib": [

integration/typings_test_ts37/tsconfig.json

@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "module": "commonjs",
     "moduleResolution": "node",
-    "outDir": "../../dist/typings_test_ts37/",
+    "outDir": "./dist/out-tsc",
     "rootDir": ".",
     "target": "es5",
     "lib": [