release: cut the v7.2.16 release

The bazel-schematics integration test in the 7.2.x branch no longer runs
successfully as unpinned dependencies are now being pulled in as newer
versions, which require a newer version of NodeJS than is provisioned on
CI. Since Bazel is a Labs project in 7.x there's no reason to keep these
tests around.

.bazelrc

@@ -1,5 +1,3 @@
-# Load any settings specific to the current user
-try-import .bazelrc.user
 ################################
 # Settings for Angular team members only
 ################################
@@ -33,10 +31,11 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
 # eventually a surprising failure with auto-discovery of the C++ toolchain in
 # MacOS High Sierra.
 # See https://github.com/bazelbuild/bazel/issues/4603
-build --symlink_prefix=/
+build --symlink_prefix=dist/
 
-# Performance: avoid stat'ing input files
-build --watchfs
+# Disable watchfs as it causes tests to be flaky on Windows
+# https://github.com/angular/angular/issues/29541
+build --nowatchfs
 
 # Turn off legacy external runfiles
 run --nolegacy_external_runfiles
@@ -59,7 +58,9 @@ test --incompatible_strict_action_env
 ###############################
 
 # Releases should always be stamped with version control info
-build:release --workspace_status_command=./tools/bazel_stamp_vars.sh
+# This command assumes node on the path and is a workaround for
+# https://github.com/bazelbuild/bazel/issues/4802
+build:release --workspace_status_command="node ./tools/bazel_stamp_vars.js"
 
 ###############################
 # Output                      #
@@ -117,3 +118,7 @@ build:remote --remote_instance_name=projects/internal-200822/instances/default_i
 # Do not accept remote cache.
 # We need to understand the security risks of using prior build artifacts.
 build:remote --remote_accept_cached=false
+
+# Load any settings specific to the current user. Needs to be last statement in this
+# config, as the user configuration should be able to overwrite flags from this file.
+try-import .bazelrc.user

.circleci/config.yml

@@ -63,26 +63,19 @@ var_6: &job_defaults
   docker:
   - image: *default_docker_image
 
-# After checkout, rebase on top of master.
-# Similar to travis behavior, but not quite the same.
-# See https://discuss.circleci.com/t/1662
+# After checkout, rebase on top of target branch.
 var_7: &post_checkout
   run:
-    name: Post checkout step
+    name: Rebase PR on target branch
     command: >
       if [[ -n "${CIRCLE_PR_NUMBER}" ]]; then
-        # Fetch the head and merge commits for this PR.
-        git fetch origin +refs/pull/$CIRCLE_PR_NUMBER/head:pr/$CIRCLE_PR_NUMBER/head
-        git fetch origin +refs/pull/$CIRCLE_PR_NUMBER/merge:pr/$CIRCLE_PR_NUMBER/merge
-        # Checkout the merged PR for testing as CircleCI will just use the PR head otherwise.
-        git checkout -qf pr/$CIRCLE_PR_NUMBER/merge
-        # Reset the merge commit into its PR head.
-        git reset pr/$CIRCLE_PR_NUMBER/head
-        # Commit the merge changes into the head of the PR.
-        # This way we keep the last commit message.
+        # User is required for rebase.
         git config user.name "angular-ci"
         git config user.email "angular-ci"
-        git commit . --amend --no-edit
+        # Rebase PR on top of target branch.
+        node tools/rebase-pr.js angular/angular ${CIRCLE_PR_NUMBER}
+      else
+        echo "This build is not over a PR, nothing to do."
       fi
 
 var_8: &yarn_install
@@ -177,10 +170,7 @@ jobs:
 
       # Setup remote execution and run RBE-compatible tests.
       - *setup_bazel_remote_execution
-      - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only,-local
-      # Now run RBE incompatible tests locally.
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - run: yarn bazel test //... --build_tag_filters=-ivy-only,local --test_tag_filters=-ivy-only,local
+      - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
 
   # Temporary job to test what will happen when we flip the Ivy flag to true
   test_ivy_aot:
@@ -250,7 +240,7 @@ jobs:
       - *attach_workspace
       - *init_environment
         # Deploy angular.io to production (if necessary)
-      - run: setPublicVar CI_STABLE_BRANCH "$(npm info @angular/core dist-tags.latest | sed -r 's/^\s*([0-9]+\.[0-9]+)\.[0-9]+.*$/\1.x/')"
+      - run: setPublicVar_CI_STABLE_BRANCH
       - run: yarn --cwd aio deploy-production
 
   test_aio_local:
@@ -296,7 +286,8 @@ jobs:
     docker:
       # Needed because the example e2e tests depend on Chrome.
       - image: *browsers_docker_image
-    parallelism: 3
+    parallelism: 4
+    resource_class: xlarge
     steps:
       - *attach_workspace
       - *init_environment
@@ -305,23 +296,33 @@ jobs:
         # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+      - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   test_docs_examples_ivy:
     <<: *job_defaults
     docker:
       # Needed because the example e2e tests depend on Chrome.
       - image: *browsers_docker_image
-    parallelism: 3
+    resource_class: xlarge
+    # We increase the parallelism here to five while the "test_docs_examples" job runs with
+    # a parallelism of four. This is necessary because this job also need to run NGCC which
+    # takes up more time and we don't want these jobs to impact the overall CI turnaround.
+    parallelism: 5
     steps:
       - *attach_workspace
       - *init_environment
         # Install aio
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
+        # Rename the Ivy packages dist folder to "dist/packages-dist" as the AIO
+        # package installer picks up the locally built packages from that location.
+        # *Note*: We could also adjust the packages installer, but given we won't have
+        # two different folders of Angular distributions in the future, we should keep
+        # the packages installer unchanged.
+      - run: mv dist/packages-dist-ivy-aot dist/packages-dist
         # Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --ivy --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+      - run: yarn --cwd aio example-e2e --setup --local --ivy --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:
@@ -433,18 +434,20 @@ jobs:
   publish_snapshot:
     <<: *job_defaults
     steps:
-      - *attach_workspace
-      - *init_environment
       # See below - ideally this job should not trigger for non-upstream builds.
       # But since it does, we have to check this condition.
       - run:
           name: Skip this job for Pull Requests and Fork builds
-          # Note, `|| true` on the end makes this step always exit 0
-          command: '[[
-              "$CI_PULL_REQUEST" != "false"
-              || "$CI_REPO_OWNER" != "angular"
-              || "$CI_REPO_NAME" != "angular"
-          ]] && circleci step halt || true'
+          # Note: Using `CIRCLE_*` env variables (instead of those defined in `env.sh` so that this
+          #       step can be run before `init_environment`.
+          command: >
+            if [[ -n "${CIRCLE_PR_NUMBER}" ]] ||
+                [[ "$CIRCLE_PROJECT_USERNAME" != "angular" ]] ||
+                [[ "$CIRCLE_PROJECT_REPONAME" != "angular" ]]; then
+              circleci step halt
+            fi
+      - *attach_workspace
+      - *init_environment
       # CircleCI has a config setting to force SSH for all github connections
       # This is not compatible with our mechanism of using a Personal Access Token
       # Clear the global setting
@@ -454,7 +457,32 @@ jobs:
           command: 'openssl aes-256-cbc -d -in .circleci/github_token -k "${KEY}" -out ~/.git_credentials'
       - run: ./scripts/ci/publish-build-artifacts.sh
 
-  aio_monitoring:
+  aio_monitoring_stable:
+    <<: *job_defaults
+    docker:
+      # This job needs Chrome to be globally installed because the tests run with Protractor
+      # which does not load the browser through the Bazel webtesting rules.
+      - image: *browsers_docker_image
+    steps:
+      - *attach_workspace
+      - *init_environment
+      - run: setPublicVar_CI_STABLE_BRANCH
+      - run:
+          name: Check out `aio/` from the stable branch
+          command: |
+            git fetch origin $CI_STABLE_BRANCH
+            git checkout --force origin/$CI_STABLE_BRANCH -- aio/
+      - run:
+          name: Run tests against https://angular.io/
+          command: ./aio/scripts/test-production.sh https://angular.io/ $CI_AIO_MIN_PWA_SCORE
+      - run:
+          name: Notify caretaker about failure
+          # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
+          # The URL comes from https://angular-team.slack.com/apps/A0F7VRE7N-circleci.
+          command: 'curl --request POST --header "Content-Type: application/json" --data "{\"text\":\":x: \`$CIRCLE_JOB\` job failed on build $CIRCLE_BUILD_NUM: $CIRCLE_BUILD_URL :scream:\"}" $SLACK_CARETAKER_WEBHOOK_URL'
+          when: on_fail
+
+  aio_monitoring_next:
     <<: *job_defaults
     docker:
       # This job needs Chrome to be globally installed because the tests run with Protractor
@@ -464,8 +492,8 @@ jobs:
       - *attach_workspace
       - *init_environment
       - run:
-          name: Run tests against the deployed apps
-          command: ./aio/scripts/test-production.sh $CI_AIO_MIN_PWA_SCORE
+          name: Run tests against https://next.angular.io/
+          command: ./aio/scripts/test-production.sh https://next.angular.io/ $CI_AIO_MIN_PWA_SCORE
       - run:
           name: Notify caretaker about failure
           # `$SLACK_CARETAKER_WEBHOOK_URL` is a secret env var defined in CircleCI project settings.
@@ -529,6 +557,9 @@ workflows:
       - test_aio:
           requires:
           - setup
+      - legacy-unit-tests-saucelabs:
+          requires:
+          - setup
       - deploy_aio:
           requires:
             - test_aio
@@ -549,7 +580,7 @@ workflows:
             - build-npm-packages
       # - test_docs_examples_ivy:
       #     requires:
-      #       - build-npm-packages
+      #       - build-ivy-npm-packages
       - aio_preview:
           requires:
             - setup
@@ -581,30 +612,21 @@ workflows:
             # Get the artifacts to publish from the build-packages-dist job
             # since the publishing script expects the legacy outputs layout.
             - build-npm-packages
+            - legacy-unit-tests-saucelabs
             - legacy-misc-tests
 
-  saucelabs_tests:
+  aio_monitoring:
     jobs:
       - setup
-      - legacy-unit-tests-saucelabs:
+      - aio_monitoring_stable:
+          requires:
+            - setup
+      - aio_monitoring_next:
           requires:
             - setup
     triggers:
       - schedule:
-          # Runs the Saucelabs legacy tests every hour. We still want to run Saucelabs
-          # frequently as the caretaker needs up-to-date results when merging PRs or creating
-          # a new release. Also we primarily moved the Saucelabs job into a cronjob that doesn't
-          # run for PRs, in order to ensure that PRs are not affected by Saucelabs flakiness or
-          # incidents. This is still guaranteed (even if we run the job every hour).
-          cron: "0 * * * *"
-          filters: *publish_branches_filter
-
-  aio_monitoring:
-    jobs:
-      - aio_monitoring
-    triggers:
-      - schedule:
-          # Runs AIO monitoring job at 00:00AM every day.
+          # Runs AIO monitoring jobs at 00:00AM every day.
           cron: "0 0 * * *"
           filters:
             branches:

.circleci/env-helpers.inc.sh

@@ -36,3 +36,38 @@ function setSecretVar() {
   # Restore original shell options.
   eval "$originalShellOptions";
 }
+
+
+# Create a function to set an environment variable, when called.
+#
+# Use this function for creating setter for public environment variables that require expensive or
+# time-consuming computaions and may not be needed. When needed, you can call this function to set
+# the environment variable (which will be available through `$BASH_ENV` from that point onwards).
+#
+# Arguments:
+# - `<name>`: The name of the environment variable. The generated setter function will be
+#   `setPublicVar_<name>`.
+# - `<code>`: The code to run to compute the value for the variable. Since this code should be
+#   executed lazily, it must be properly escaped. For example:
+#   ```sh
+#   # DO NOT do this:
+#   createPublicVarSetter MY_VAR "$(whoami)";  # `whoami` will be evaluated eagerly
+#
+#   # DO this isntead:
+#   createPublicVarSetter MY_VAR "\$(whoami)";  # `whoami` will NOT be evaluated eagerly
+#   ```
+#
+# Usage: `createPublicVarSetter <name> <code>`
+#
+# Example:
+# ```sh
+# createPublicVarSetter MY_VAR 'echo "FOO"';
+# echo $MY_VAR;  # Not defined
+#
+# setPublicVar_MY_VAR;
+# source $BASH_ENV;
+# echo $MY_VAR;  # FOO
+# ```
+function createPublicVarSetter() {
+  echo "setPublicVar_$1() { setPublicVar $1 \"$2\"; }" >> $BASH_ENV;
+}

.circleci/env.sh

@@ -34,6 +34,13 @@ setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
 setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
 
 
+####################################################################################################
+# Define "lazy" PUBLIC environment variables for CircleCI.
+# (I.e. functions to set an environment variable when called.)
+####################################################################################################
+createPublicVarSetter CI_STABLE_BRANCH "\$(npm info @angular/core dist-tags.latest | sed -r 's/^\\s*([0-9]+\\.[0-9]+)\\.[0-9]+.*$/\\1.x/')";
+
+
 ####################################################################################################
 # Define SECRET environment variables for CircleCI.
 ####################################################################################################
@@ -54,6 +61,7 @@ else
   setPublicVar SAUCE_USERNAME "angular-ci";
   setSecretVar SAUCE_ACCESS_KEY "9b988f434ff8-fbca-8aa4-4ae3-35442987";
 fi
+setPublicVar SAUCE_LOG_FILE /tmp/angular/sauce-connect.log
 setPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock
 setPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock
 setPublicVar SAUCE_TUNNEL_IDENTIFIER "angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX}"

.circleci/get-commit-range.js

@@ -141,7 +141,7 @@ function getJson(url) {
     const opts = {headers: {Accept: 'application/json'}};
     const onResponse = res => {
       const statusCode = res.statusCode || -1;
-      const isSuccess = (200 <= statusCode) && (statusCode <= 400);
+      const isSuccess = (200 <= statusCode) && (statusCode < 400);
       let responseText = '';
 
       res.

.github/CODEOWNERS

@@ -39,12 +39,14 @@
 #  (just to make this file easier to understand)
 # ================================================
 
+#  alan-agius4 - Alan Agius
 #  alexeagle - Alex Eagle
 #  alxhub - Alex Rickabaugh
 #  AndrewKushnir - Andrew Kushnir
 #  andrewseguin - Andrew Seguin
 #  benlesh - Ben Lesh
 #  brandonroberts - Brandon Roberts
+#  devversion - Paul Gschwendtner
 #  filipesilva - Filipe Silva
 #  gkalpak - George Kalpakas
 #  hansl - Hans Larsen
@@ -86,6 +88,7 @@
 #   - IgorMinar
 #   - kara
 #   - mhevery
+#   - alexeagle
 
 
 # ===========================================================
@@ -272,6 +275,7 @@
 #  @angular/fw-docs-intro
 # ===========================================================
 #
+#   - jenniferfell
 #   - brandonroberts
 #   - IgorMinar
 #   - stephenfluin
@@ -293,6 +297,29 @@
 #   - IgorMinar
 
 
+# ===========================================================
+#  @angular/tools-docs-libraries
+# ===========================================================
+#
+#   - alan-agius4
+#   - alexeagle
+#   - hansl
+#   - IgorMinar
+#   - mgechev
+
+
+# ===========================================================
+#  @angular/tools-docs-schematics
+# ===========================================================
+#
+#   - alan-agius4
+#   - alexeagle
+#   - hansl
+#   - IgorMinar
+#   - mgechev
+
+
+
 # ===========================================================
 #  @angular/fw-docs-marketing
 # ===========================================================
@@ -313,6 +340,7 @@
 # ===========================================================
 #
 #   - alexeagle
+#   - devversion
 #   - filipesilva
 #   - gkalpak
 #   - IgorMinar
@@ -349,10 +377,19 @@
 
 /packages/animations/**                                         @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser/animations/**                        @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 /aio/content/guide/animations.md                                @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/animations/**                             @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/animations/**                         @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/complex-animation-sequences.md               @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/reusable-animations.md                       @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/route-animations.md                          @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/transition-and-triggers.md                   @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 
 
 # ================================================
@@ -383,12 +420,13 @@
 
 
 # ================================================
-#  @angular/compiler-cli/ngtools
+#  Framework/cli integration
 #
 #  a rule to control API changes between @angular/compiler-cli and @angular/cli
 # ================================================
 
 /packages/compiler-cli/src/ngtools/**                           @angular/tools-cli @angular/framework-global-approvers
+/aio/content/guide/ivy.md                                       @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -407,6 +445,15 @@
 /packages/platform-browser-dynamic/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker/**                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker-dynamic/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/packages/examples/common/**                                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/architecture-components.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-modules.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-next-steps.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-services.md                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/architecture/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/architecture/**                       @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/attribute-directives.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/attribute-directives/**                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -415,6 +462,8 @@
 /aio/content/guide/bootstrapping.md                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/bootstrapping/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/cheatsheet.md                                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 /aio/content/guide/component-interaction.md                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/component-interaction/**                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/component-interaction/**              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -430,7 +479,13 @@
 /aio/content/examples/dependency-injection-in-action/**         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/dependency-injection-in-action/**     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
-/aio/content/guide/dependency-injection-pattern.md              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/dependency-injection-navtree.md              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/dependency-injection-providers.md            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/displaying-data.md                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/displaying-data/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/displaying-data/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/dynamic-component-loader.md                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/dynamic-component-loader/**               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -457,12 +512,9 @@
 /aio/content/images/guide/lifecycle-hooks/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/examples/ngcontainer/**                            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/ngcontainer/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/ngmodules.md                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/ngmodules/**                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/ngmodule/**                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/ngmodule/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/ngmodule-api.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -474,6 +526,9 @@
 /aio/content/guide/module-types.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/template-syntax.md                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/built-in-template-functions/**            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/event-binding/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/interpolation/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-syntax/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/template-syntax/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -496,6 +551,10 @@
 /aio/content/examples/structural-directives/**                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/structural-directives/**              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/user-input.md                                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/user-input/**                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/user-input/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 
 
 # ================================================
@@ -521,6 +580,7 @@
 /aio/content/guide/elements.md                                  @angular/fw-elements @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
+
 # ================================================
 #  @angular/forms
 # ================================================
@@ -582,6 +642,7 @@
 /packages/service-worker/**                                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-getting-started.md            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/service-worker-getting-started/**         @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/app-shell.md                                 @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-communications.md             @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-config.md                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-devops.md                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -651,6 +712,7 @@ testing/**                                                      @angular/fw-test
 /packages/platform-browser/src/security/**                      @angular/fw-security
 /aio/content/guide/security.md                                  @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/security/**                               @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/security/**                           @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -676,11 +738,20 @@ testing/**                                                      @angular/fw-test
 
 /aio/*                                                          @angular/docs-infra @angular/framework-global-approvers
 /aio/aio-builds-setup/**                                        @angular/docs-infra @angular/framework-global-approvers
+/aio/content/examples/*                                         @angular/docs-infra @angular/framework-global-approvers
 /aio/scripts/**                                                 @angular/docs-infra @angular/framework-global-approvers
 /aio/src/**                                                     @angular/docs-infra @angular/framework-global-approvers
 /aio/tests/**                                                   @angular/docs-infra @angular/framework-global-approvers
 /aio/tools/**                                                   @angular/docs-infra @angular/framework-global-approvers
 
+# Hidden docs
+/aio/content/guide/change-log.md                                @angular/docs-infra @angular/framework-global-approvers
+/aio/content/guide/docs-style-guide.md                          @angular/docs-infra @angular/framework-global-approvers
+/aio/content/examples/docs-style-guide/**                       @angular/docs-infra @angular/framework-global-approvers
+/aio/content/images/guide/docs-style-guide/**                   @angular/docs-infra @angular/framework-global-approvers
+/aio/content/guide/visual-studio-2015.md                        @angular/docs-infra @angular/framework-global-approvers
+/aio/content/examples/visual-studio-2015/**                     @angular/docs-infra @angular/framework-global-approvers
+
 
 
 # ================================================
@@ -688,25 +759,32 @@ testing/**                                                      @angular/fw-test
 # ================================================
 
 /aio/content/guide/quickstart.md                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/cli-quickstart/**                         @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/cli-quickstart/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/tutorial/**                                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-
+/aio/content/images/guide/toh/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt0/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt1/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt2/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt3/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt4/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt5/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt6/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 # ================================================
 #  Docs: observables
 # ================================================
 
-/aio/content/examples/observables/**                            @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/observables/**                        @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/observables.md                               @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/observables/**                            @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/comparing-observables.md                     @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/observables-in-angular/**                 @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/observables-in-angular/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/observables-in-angular.md                    @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/practical-observable-usage/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/observables-in-angular/**                 @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/practical-observable-usage.md                @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/rx-library/**                             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/practical-observable-usage/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/rx-library.md                                @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/rx-library/**                             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -717,12 +795,36 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/npm-packages.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/browser-support.md                           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/typescript-configuration.md                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/setup-systemjs-anatomy.md                    @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/setup.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/setup/**                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/build.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/build/**                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/deployment.md                                @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/file-structure.md                            @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/releases.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/updating.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/workspace-config.md                          @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+
+
+# ================================================
+#  Docs: libraries
+# ================================================
+
+/aio/content/guide/creating-libraries.md                        @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/libraries.md                                 @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/using-libraries.md                           @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+
+# ================================================
+#  Docs: schematics
+# ================================================
+
+/aio/content/guide/schematics.md                               @angular/tools-docs-schematics @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/schematics-authoring.md                     @angular/tools-docs-schematics @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/schematics-for-libraries.md                 @angular/tools-docs-schematics @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/schematics/**                        @angular/tools-docs-schematics @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/schematics-for-libraries/**              @angular/tools-docs-schematics @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -745,7 +847,9 @@ testing/**                                                      @angular/fw-test
 /*                                                              @angular/fw-dev-infra
 /.buildkite/**                                                  @angular/fw-dev-infra
 /.circleci/**                                                   @angular/fw-dev-infra
+/.codefresh/**                                                  @angular/fw-dev-infra
 /.github/**                                                     @angular/fw-dev-infra
+/.vscode/**                                                     @angular/fw-dev-infra
 /docs/BAZEL.md                                                  @angular/fw-dev-infra
 /packages/*                                                     @angular/fw-dev-infra
 /scripts/**                                                     @angular/fw-dev-infra
@@ -760,6 +864,10 @@ testing/**                                                      @angular/fw-test
 # ================================================
 
 /tools/public_api_guard/**                                      @angular/fw-public-api
+/aio/content/guide/glossary.md                                  @angular/fw-public-api
+/aio/content/guide/styleguide.md                                @angular/fw-public-api
+/aio/content/examples/styleguide/**                             @angular/fw-public-api
+/aio/content/images/guide/styleguide/**                         @angular/fw-public-api
 
 
 

.github/ISSUE_TEMPLATE/1-bug-report.md

@@ -37,7 +37,9 @@ Please create and share minimal reproduction of the issue starting with this tem
 <!-- ✍️--> https://stackblitz.com/...
 
 <!--
-If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue. Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.
+If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
+A good way to make a minimal reproduction is to create a new app via `ng new repro-app` and add the minimum possible code to show the problem. 
+Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.
 
 Issues that don't have enough info and can't be reproduced will be closed.
 

.gitignore

@@ -14,6 +14,7 @@ pubspec.lock
 .idea/
 .settings/
 .vscode/launch.json
+.vscode/settings.json
 *.swo
 modules/.settings
 modules/.vscode

.vscode/README.md

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

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "devondcarew.bazel-code",
+    "gkalpak.aio-docs-utils",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "xaver.clang-format",
+  ],
+}

.vscode/recommended-settings.json

@@ -0,0 +1,31 @@
+{
+  // Format js and ts files on save with `clang-format.executable`
+  // If `clang-format.executable` is not being used, these two settings should be removed otherwise it will break existing formatting.
+  // You can instead run `yarn gulp format` to manually format your code.
+  "[javascript]": {
+    "editor.formatOnSave": true,
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+  },
+  // Please install https://marketplace.visualstudio.com/items?itemName=xaver.clang-format to take advantage of `clang-format` in VSCode.
+  // (See https://clang.llvm.org/docs/ClangFormat.html for more info `clang-format`.)
+  "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format",
+  // Exclude third party modules and build artifacts from the editor watchers/searches.
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/node_modules/**": true,
+    "**/bazel-out/**": true,
+    "**/dist/**": true,
+    "**/aio/src/generated/**": true,
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/bazel-out": true,
+    "**/dist": true,
+    "**/aio/src/generated": true,
+  },
+  "git.ignoreLimitWarning": true,
+}

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "files.watcherExclude": {
-    "**/.git/objects/**": true,
-    "**/.git/subtree-cache/**": true,
-    "**/node_modules/**": true,
-    "**/bazel-out/**": true,
-    "**/dist/**": true,
-  },
-  "search.exclude": {
-    "**/node_modules": true,
-    "**/bower_components": true,
-    "**/bazel-out": true,
-    "**/dist": true,
-  },
-}

BUILD.bazel

@@ -1,21 +1,23 @@
 package(default_visibility = ["//visibility:public"])
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
-
 exports_files([
-    "tsconfig.json",
     "LICENSE",
     "protractor-perf.conf.js",
 ])
 
+alias(
+    name = "tsconfig.json",
+    actual = "//packages:tsconfig-build.json",
+)
+
 filegroup(
     name = "web_test_bootstrap_scripts",
     # do not sort
     srcs = [
-        "@ngdeps//node_modules/reflect-metadata:Reflect.js",
-        "@ngdeps//node_modules/zone.js:dist/zone.js",
-        "@ngdeps//node_modules/zone.js:dist/zone-testing.js",
-        "@ngdeps//node_modules/zone.js:dist/task-tracking.js",
+        "@npm//node_modules/reflect-metadata:Reflect.js",
+        "@npm//node_modules/zone.js:dist/zone.js",
+        "@npm//node_modules/zone.js:dist/zone-testing.js",
+        "@npm//node_modules/zone.js:dist/task-tracking.js",
         "//:test-events.js",
     ],
 )
@@ -25,32 +27,14 @@ filegroup(
     srcs = [
         # We also declare the unminfied AngularJS files since these can be used for
         # local debugging (e.g. see: packages/upgrade/test/common/test_helpers.ts)
-        "@ngdeps//node_modules/angular:angular.js",
-        "@ngdeps//node_modules/angular:angular.min.js",
-        "@ngdeps//node_modules/angular-1.5:angular.js",
-        "@ngdeps//node_modules/angular-1.5:angular.min.js",
-        "@ngdeps//node_modules/angular-1.6:angular.js",
-        "@ngdeps//node_modules/angular-1.6:angular.min.js",
-        "@ngdeps//node_modules/angular-mocks:angular-mocks.js",
-        "@ngdeps//node_modules/angular-mocks-1.5:angular-mocks.js",
-        "@ngdeps//node_modules/angular-mocks-1.6:angular-mocks.js",
+        "@npm//node_modules/angular:angular.js",
+        "@npm//node_modules/angular:angular.min.js",
+        "@npm//node_modules/angular-1.5:angular.js",
+        "@npm//node_modules/angular-1.5:angular.min.js",
+        "@npm//node_modules/angular-1.6:angular.js",
+        "@npm//node_modules/angular-1.6:angular.min.js",
+        "@npm//node_modules/angular-mocks:angular-mocks.js",
+        "@npm//node_modules/angular-mocks-1.5:angular-mocks.js",
+        "@npm//node_modules/angular-mocks-1.6:angular-mocks.js",
     ],
 )
-
-load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
-
-# A nodejs_binary for @angular/bazel/ngc-wrapped to use by default in
-# ng_module that depends on @npm//@angular/bazel instead of the
-# output of the //packages/bazel/src/ngc-wrapped ts_library rule. This
-# default is for downstream users that depend on the @angular/bazel npm
-# package. The generated @npm//@angular/bazel/ngc-wrapped target
-# does not work because it does not have the node `--expose-gc` flag
-# set which is required to support the call to `global.gc()`.
-nodejs_binary(
-    name = "@angular/bazel/ngc-wrapped",
-    configuration_env_vars = ["compile"],
-    data = ["@npm//@angular/bazel"],
-    entry_point = "@angular/bazel/src/ngc-wrapped/index.js",
-    install_source_map_support = False,
-    templated_args = ["--node_options=--expose-gc"],
-)

CHANGELOG.md

@@ -1,3 +1,91 @@
+<a name="7.2.16"></a>
+## [7.2.16](https://github.com/angular/angular/compare/7.2.15...7.2.16) (2020-01-08)
+
+
+### Security Fixes
+
+*  build: upgrade yargs package to 13.1.0 ([#31457](https://github.com/angular/angular/issues/34157))
+
+This release backports a security patch which fixes a transitive dependency on a vulnerable version of the `mem` package. See [#33933](https://github.com/angular/angular/issues/33933) for details.
+
+<a name="7.2.15"></a>
+## [7.2.15](https://github.com/angular/angular/compare/7.2.14...7.2.15) (2019-05-07)
+
+
+### Bug Fixes
+
+* **upgrade:** do not break if `onMicrotaskEmpty` emits while a `$digest` is in progress ([#29794](https://github.com/angular/angular/issues/29794)) ([#30107](https://github.com/angular/angular/issues/30107)) ([1084c19](https://github.com/angular/angular/commit/1084c19)), closes [#24680](https://github.com/angular/angular/issues/24680) [/github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts#L12](https://github.com//github.com/angular/angular/blob/78146c189/packages/core/src/util/ng_dev_mode.ts/issues/L12) [#24680](https://github.com/angular/angular/issues/24680)
+
+
+
+<a name="7.2.14"></a>
+## [7.2.14](https://github.com/angular/angular/compare/7.2.13...7.2.14) (2019-04-23)
+
+
+### Bug Fixes
+
+* **common:** prevent repeated application of HttpParams mutations ([#29045](https://github.com/angular/angular/issues/29045)) ([ee65d0d](https://github.com/angular/angular/commit/ee65d0d)), closes [#20430](https://github.com/angular/angular/issues/20430)
+
+
+
+<a name="7.2.13"></a>
+## [7.2.13](https://github.com/angular/angular/compare/7.2.12...7.2.13) (2019-04-12)
+
+
+### Bug Fixes
+
+* **bazel:** use //:tsconfig.json as the default for ng_module ([#29670](https://github.com/angular/angular/issues/29670)) ([#29711](https://github.com/angular/angular/issues/29711)) ([9e33dc3](https://github.com/angular/angular/commit/9e33dc3))
+* **platform-browser:** insert APP_ID in styles, contentAttr and hostAttr ([#17745](https://github.com/angular/angular/issues/17745)) ([ca14509](https://github.com/angular/angular/commit/ca14509))
+
+
+
+<a name="7.2.12"></a>
+## [7.2.12](https://github.com/angular/angular/compare/7.2.11...7.2.12) (2019-04-03)
+
+
+### Bug Fixes
+
+* **common:** escape query selector used when anchor scrolling ([#29577](https://github.com/angular/angular/issues/29577)) ([7671c73](https://github.com/angular/angular/commit/7671c73)), closes [#28193](https://github.com/angular/angular/issues/28193)
+* **router:** adjust setting navigationTransition when a new navigation cancels an existing one ([#29636](https://github.com/angular/angular/issues/29636)) ([e884c0c](https://github.com/angular/angular/commit/e884c0c)), closes [#29389](https://github.com/angular/angular/issues/29389) [#29590](https://github.com/angular/angular/issues/29590)
+
+
+
+<a name="7.2.11"></a>
+## [7.2.11](https://github.com/angular/angular/compare/7.2.10...7.2.11) (2019-03-26)
+
+This release contains various API docs improvements.
+
+
+
+
+<a name="7.2.10"></a>
+## [7.2.10](https://github.com/angular/angular/compare/7.2.9...7.2.10) (2019-03-20)
+
+
+### Bug Fixes
+
+* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([cf8d934](https://github.com/angular/angular/commit/cf8d934)), closes [/github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com//github.com/angular/material2/blob/master/tools/package-tools/build-release.ts/issues/L78-L85)
+
+
+
+<a name="7.2.9"></a>
+## [7.2.9](https://github.com/angular/angular/compare/7.2.8...7.2.9) (2019-03-12)
+
+This release contains various API docs improvements.
+
+<a name="7.2.8"></a>
+## [7.2.8](https://github.com/angular/angular/compare/7.2.7...7.2.8) (2019-03-06)
+
+
+### Bug Fixes
+
+* **animations:** ensure `position` and `display` styles are handled outside of keyframes/web-animations ([#28911](https://github.com/angular/angular/issues/28911)) ([86981b3](https://github.com/angular/angular/commit/86981b3)), closes [#24923](https://github.com/angular/angular/issues/24923) [#25635](https://github.com/angular/angular/issues/25635)
+* **router:** removed obsolete TODO comment ([#29085](https://github.com/angular/angular/issues/29085)) ([2a25ac2](https://github.com/angular/angular/commit/2a25ac2))
+* **service-worker:** detect new version even if files are identical to an old one ([#26006](https://github.com/angular/angular/issues/26006)) ([5669333](https://github.com/angular/angular/commit/5669333)), closes [#24338](https://github.com/angular/angular/issues/24338)
+* **service-worker:** ignore passive mixed content requests ([#25994](https://github.com/angular/angular/issues/25994)) ([b598e88](https://github.com/angular/angular/commit/b598e88)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://github.com//github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#23012](https://github.com/angular/angular/issues/23012)
+
+
+
 <a name="7.2.7"></a>
 ## [7.2.7](https://github.com/angular/angular/compare/7.2.6...7.2.7) (2019-02-27)
 

WORKSPACE

@@ -15,49 +15,65 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "1416d03823fed624b49a0abbd9979f7c63bbedfd37890ddecedd2fe25cccebc6",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.18.6/rules_nodejs-0.18.6.tar.gz"],
-)
-
-# Use a mock @npm repository while we are building angular from source
-# downstream. Angular will get its npm dependencies with in @ngdeps which
-# is setup in ng_setup_workspace().
-# TODO(gregmagolan): remove @ngdeps once angular is no longer build from source
-#   downstream and have build use @npm for npm dependencies
-local_repository(
-    name = "npm",
-    path = "tools/npm_workspace",
+    sha256 = "5c86b055c57e15bf32d9009a15bcd6d8e190c41b1ff2fb18037b75e0012e4e7c",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.26.0/rules_nodejs-0.26.0.tar.gz"],
 )
 
 # Check the bazel version and download npm dependencies
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+load("@build_bazel_rules_nodejs//:package.bzl", "check_rules_nodejs_version")
 
 # Bazel version must be at least v0.21.0 because:
 #   - 0.21.0 Using --incompatible_strict_action_env flag fixes cache when running `yarn bazel`
 #            (see https://github.com/angular/angular/issues/27514#issuecomment-451438271)
-check_bazel_version("0.21.0", """
+check_bazel_version(
+    message = """
 You no longer need to install Bazel on your machine.
 Angular has a dependency on the @bazel/bazel package which supplies it.
 Try running `yarn bazel` instead.
     (If you did run that, check that you've got a fresh `yarn install`)
 
-""")
+""",
+    minimum_bazel_version = "0.21.0",
+)
+
+# The NodeJS rules version must be at least v0.15.3 because:
+#   - 0.15.2 Re-introduced the prod_only attribute on yarn_install
+#   - 0.15.3 Includes a fix for the `jasmine_node_test` rule ignoring target tags
+#   - 0.16.8 Supports npm installed bazel workspaces
+#   - 0.26.0 Fix for data files in yarn_install and npm_install
+check_rules_nodejs_version("0.26.0")
 
 # Setup the Node.js toolchain
 node_repositories(
     node_version = "10.9.0",
     package_json = ["//:package.json"],
     preserve_symlinks = True,
-    vendored_yarn = "@angular//third_party/github.com/yarnpkg/yarn/releases/download:v1.13.0",
+    yarn_version = "1.12.1",
 )
 
-# Setup the angular toolchain which installs npm dependencies into @ngdeps
-load("//tools:ng_setup_workspace.bzl", "ng_setup_workspace")
+yarn_install(
+    name = "npm",
+    data = [
+        "//:tools/npm/@angular_bazel/index.js",
+        "//:tools/npm/@angular_bazel/package.json",
+        "//:tools/postinstall-patches.js",
+        "//:tools/yarn/check-yarn.js",
+    ],
+    package_json = "//:package.json",
+    # Don't install devDependencies, they are large and not used under Bazel
+    prod_only = True,
+    yarn_lock = "//:yarn.lock",
+)
 
-ng_setup_workspace()
+yarn_install(
+    name = "ts-api-guardian_deps",
+    package_json = "@angular//tools/ts-api-guardian:package.json",
+    yarn_lock = "@angular//tools/ts-api-guardian:yarn.lock",
+)
 
-# Install all bazel dependencies of the @ngdeps npm packages
-load("@ngdeps//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
+# Install all bazel dependencies of the @npm npm packages
+load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
 
 install_bazel_dependencies()
 
@@ -83,7 +99,7 @@ load("@npm_bazel_karma//:browser_repositories.bzl", "browser_repositories")
 browser_repositories()
 
 # Setup the rules_typescript tooolchain
-load("@npm_bazel_typescript//:defs.bzl", "ts_setup_workspace")
+load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
 

aio/README.md

@@ -41,16 +41,6 @@ Here are the most important tasks you might need to use:
   - `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
   - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
-## Developing on Windows
-The `packages/` directory may contain Linux-specific symlinks, which are not recognized by Windows.
-These unresolved links cause the docs generation process to fail because it cannot locate certain files.
-
-> Hint: The following steps require administration rights or [Windows Developer Mode](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) enabled!
-
-To fix this problem, run `scripts/windows/create-symlinks.sh`. This command creates temporary files where the symlinks used to be. Make sure not to commit those files with your documentation changes.
-When you are done making and testing your documentation changes, you can restore the original symlinks and delete the temporary files by running `scripts/windows/remove-symlinks.sh`.
-
-It's necessary to remove the temporary files, because otherwise they're displayed as local changes in your git working copy and certain operations are blocked.
 
 ## Using ServiceWorker locally
 

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -1,5 +1,5 @@
 # Image metadata and config
-FROM debian:jessie
+FROM debian:stretch
 
 LABEL name="angular.io PR preview" \
       description="This image implements the PR preview functionality for angular.io." \
@@ -26,8 +26,8 @@ ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=test-org
 ARG      AIO_GITHUB_REPO=angular
 ARG TEST_AIO_GITHUB_REPO=test-repo
-ARG      AIO_GITHUB_TEAM_SLUGS=aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=aio-auto-previews,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=test-team-1,test-team-2
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80
@@ -40,7 +40,7 @@ ARG      AIO_TRUSTED_PR_LABEL="aio: preview"
 ARG TEST_AIO_TRUSTED_PR_LABEL="aio: preview"
 ARG      AIO_PREVIEW_SERVER_HOSTNAME=preview.localhost
 ARG TEST_AIO_PREVIEW_SERVER_HOSTNAME=preview.localhost
-ARG      AIO_ARTIFACT_MAX_SIZE=20971520
+ARG      AIO_ARTIFACT_MAX_SIZE=26214400
 ARG TEST_AIO_ARTIFACT_MAX_SIZE=200
 ARG      AIO_PREVIEW_SERVER_PORT=3000
 ARG TEST_AIO_PREVIEW_SERVER_PORT=3001
@@ -76,21 +76,20 @@ RUN apt-get update -y && apt-get install -y curl
 RUN curl --silent --show-error --location https://deb.nodesource.com/setup_10.x | bash -
 RUN curl --silent --show-error https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
-RUN echo "deb http://ftp.debian.org/debian jessie-backports main" | tee /etc/apt/sources.list.d/backports.list
+RUN echo "deb http://ftp.debian.org/debian stretch-backports main" | tee /etc/apt/sources.list.d/backports.list
 
 
 # Install packages
 RUN apt-get update -y && apt-get install -y \
-    chkconfig \
-    cron \
-    dnsmasq \
-    nano \
-    nodejs \
-    openssl \
-    rsyslog \
-    yarn
-RUN apt-get install -t jessie-backports -y nginx
-RUN yarn global add pm2@2
+    cron=3.0pl1-128+deb9u1 \
+    dnsmasq=2.76-5+deb9u2 \
+    nano=2.7.4-1 \
+    nginx=1.10.3-1+deb9u2 \
+    nodejs=10.15.3-1nodesource1 \
+    openssl=1.1.0j-1~deb9u1 \
+    rsyslog=8.24.0-1 \
+    yarn=1.15.2-1
+RUN yarn global add pm2@3.5.0
 
 
 # Set up log rotation
@@ -151,8 +150,7 @@ RUN sed -i "s|{{\$AIO_PREVIEW_SERVER_PORT}}|$TEST_AIO_PREVIEW_SERVER_PORT|g" /et
 
 
 # Set up pm2
-RUN pm2 startup systemv -u root > /dev/null
-RUN chkconfig pm2-root on
+RUN pm2 startup --user root > /dev/null
 
 
 # Set up the shell scripts

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts

@@ -1,7 +1,6 @@
 // Imports
 import * as cp from 'child_process';
 import * as fs from 'fs';
-import * as http from 'http';
 import * as path from 'path';
 import * as shell from 'shelljs';
 import {AIO_DOWNLOADS_DIR, HIDDEN_DIR_PREFIX} from '../common/constants';
@@ -105,18 +104,7 @@ class Helper {
     Object.keys(this.portPerScheme).forEach(scheme => suiteFactory(scheme, this.portPerScheme[scheme]));
   }
 
-  public verifyResponse(status: number | [number, string], regex: string | RegExp = /^/): VerifyCmdResultFn {
-    let statusCode: number;
-    let statusText: string;
-
-    if (Array.isArray(status)) {
-      statusCode = status[0];
-      statusText = status[1];
-    } else {
-      statusCode = status;
-      statusText = http.STATUS_CODES[statusCode] || 'UNKNOWN_STATUS_CODE';
-    }
-
+  public verifyResponse(status: number, regex: string | RegExp = /^/): VerifyCmdResultFn {
     return (result: CmdResult) => {
       const [headers, body] = result.stdout.
         split(/(?:\r?\n){2,}/).
@@ -131,7 +119,7 @@ class Helper {
       }
 
       expect(result.success).toBe(true);
-      expect(headers).toContain(`${statusCode} ${statusText}`);
+      expect(headers).toMatch(new RegExp(`HTTP/(?:1\\.1|2) ${status} `));
       expect(body).toMatch(regex);
     };
   }

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts

@@ -259,10 +259,10 @@ describe(`nginx`, () => {
 
       it('should disallow non-GET requests', async () => {
         await Promise.all([
-          h.runCmd(`curl -iLX POST ${baseUrl}/42`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PUT ${baseUrl}/42`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PATCH ${baseUrl}/42`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX DELETE ${baseUrl}/42`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX POST ${baseUrl}/42`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PUT ${baseUrl}/42`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PATCH ${baseUrl}/42`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX DELETE ${baseUrl}/42`).then(h.verifyResponse(405)),
         ]);
       });
 
@@ -295,10 +295,10 @@ describe(`nginx`, () => {
         const url = `${scheme}://${host}/circle-build`;
 
         Promise.all([
-          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(405)),
         ]).then(done);
       });
 
@@ -334,10 +334,10 @@ describe(`nginx`, () => {
 
       it('should disallow non-POST requests', done => {
         Promise.all([
-          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
-          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(405)),
+          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(405)),
         ]).then(done);
       });
 

aio/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
     "packageManager": "yarn",
@@ -21,6 +21,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
+            "webWorkerTsConfig": "src/tsconfig.worker.json",
             "aot": true,
             "optimization": true,
             "buildOptimizer": true,
@@ -35,7 +36,6 @@
             "assets": [
               "src/assets",
               "src/generated",
-              "src/app/search/search-worker.js",
               "src/pwa-manifest.json",
               "src/google385281288605d160.html",
               {
@@ -123,6 +123,7 @@
             "karmaConfig": "src/karma.conf.js",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
+            "webWorkerTsConfig": "src/tsconfig.worker.json",
             "scripts": [],
             "styles": [
               "src/styles.scss"
@@ -130,7 +131,6 @@
             "assets": [
               "src/assets",
               "src/generated",
-              "src/app/search/search-worker.js",
               "src/pwa-manifest.json",
               "src/google385281288605d160.html",
               {

aio/content/examples/.gitignore

@@ -92,3 +92,6 @@ upgrade-phonecat-3-final/tsconfig-aot.json
 upgrade-phonecat-3-final/rollup-config.js
 !upgrade-phonecat-*/**/karma.conf.js
 !upgrade-phonecat-*/**/karma-test-shim.js
+
+# schematics
+!schematics-for-libraries/projects/my-lib/package.json

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

@@ -2,30 +2,31 @@
 
 import { browser, element, by } from 'protractor';
 
-describe('Attribute directives', function () {
+describe('Attribute directives', () => {
 
   let _title = 'My First Attribute Directive';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it(`should display correct title: ${_title}`, function () {
+  it(`should display correct title: ${_title}`, () => {
     expect(element(by.css('h1')).getText()).toEqual(_title);
   });
 
-  it('should be able to select green highlight', function () {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
-    let lightGreen = 'rgba(144, 238, 144, 1)';
+  it('should be able to select green highlight', () => {
+    const highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
+    const lightGreen = 'rgba(144, 238, 144, 1)';
+    const getBgColor = () => highlightedEle.getCssValue('background-color');
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
-    // let greenRb = element(by.cssContainingText('input', 'Green'));
-    let greenRb = element.all(by.css('input')).get(0);
-    greenRb.click().then(function() {
-      // TypeScript Todo: find the right type for highlightedEle
-      browser.actions().mouseMove(highlightedEle as any).perform();
-      expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
-    });
 
+    const greenRb = element.all(by.css('input')).get(0);
+    greenRb.click();
+    browser.actions().mouseMove(highlightedEle).perform();
+
+    // Wait for up to 2s for the background color to be updated,
+    // to account for slow environments (e.g. CI).
+    browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 2000);
   });
 });

aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,20 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Built Template Functions Example', function () {
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should have title Built-in Template Functions', function () {
+    let title = element.all(by.css('h1')).get(0);
+    expect(title.getText()).toEqual('Built-in Template Functions');
+  });
+
+  it('should display $any( ) in h2', function () {
+    let header = element(by.css('h2'));
+    expect(header.getText()).toContain('$any( )');
+  });
+
+});

aio/content/examples/built-in-template-functions/src/app/app.component.html

@@ -0,0 +1,15 @@
+<h1>{{title}}</h1>
+
+<h2><code>$any( )</code> type cast function and an undeclared member</h2>
+
+<p>There is no such member as <code>bestByDate</code> in the following two examples, so nothing renders:</p>
+<!-- #docregion any-type-cast-function-1 -->
+<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
+<!-- #enddocregion any-type-cast-function-1 -->
+
+<h2>using <code>this</code></h2>
+<!-- #docregion any-type-cast-function-2 -->
+<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
+<!-- #enddocregion any-type-cast-function-2 -->
+
+

aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});

aio/content/examples/built-in-template-functions/src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Built-in Template Functions';
+
+  item = {
+    name : 'Telephone',
+    origin : 'Sweden',
+    price: 98
+  };
+}

aio/content/examples/built-in-template-functions/src/app/app.module.ts

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

aio/content/examples/built-in-template-functions/src/index.html

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

aio/content/examples/built-in-template-functions/src/main.ts

@@ -1,4 +1,3 @@
-// #docregion
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

aio/content/examples/built-in-template-functions/stackblitz.json

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

aio/content/examples/component-interaction/example-config.json

@@ -4,7 +4,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts

@@ -73,8 +73,12 @@ describe('Dependency Injection Cookbook', function () {
       let yellow = 'rgba(255, 255, 0, 1)';
 
       expect(target.getCssValue('background-color')).not.toEqual(yellow);
-      browser.actions().mouseMove(target.getWebElement()).perform();
-      expect(target.getCssValue('background-color')).toEqual(yellow);
+
+      browser.actions().mouseMove(target).perform();
+
+      // Wait for up to 2s for the background color to be updated,
+      // to account for slow environments (e.g. CI).
+      browser.wait(() => target.getCssValue('background-color').then(c => c === yellow), 2000);
     });
 
     describe('in Parent Finder', function () {

aio/content/examples/dependency-injection/example-config.json

@@ -4,7 +4,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
 <head>
+  <meta charset="utf-8">
+  <title>EventBinding</title>
   <base href="/">
-  <title>NgModule Minimal</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
 <body>
   <app-root></app-root>
 </body>
-
 </html>

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

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

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

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

aio/content/examples/i18n/example-config.json

@@ -5,7 +5,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

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

@@ -13,15 +13,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'Featured product:'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('Featured product:');
-  }));
-  it('should render title in a p tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
-  }));
 });

aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts

@@ -1,39 +1,42 @@
 'use strict'; // necessary for es6 output in node
 
-import { browser, element, by } from 'protractor';
+import { browser, element, ElementFinder, by } from 'protractor';
 
-describe('Lifecycle hooks', function () {
+describe('Lifecycle hooks', () => {
+  const sendKeys = (el: ElementFinder, input: string) =>
+    input.split('').reduce((prev, c) => prev.then(() => el.sendKeys(c)), Promise.resolve());
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should open correctly', function () {
+  it('should open correctly', () => {
     expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
   });
 
-  it('should support peek-a-boo', function () {
+  it('should support peek-a-boo', async () => {
     let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
     expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
+
     let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
     let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
     expect(pabButton.getText()).toContain('Create Peek');
-    pabButton.click().then(function () {
-      expect(pabButton.getText()).toContain('Destroy Peek');
-      expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
-      expect(pabComp.getText()).toContain('Windstorm');
-      expect(pabComp.getText()).not.toContain('Windstorm!');
-      expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
-      return updateHeroButton.click();
-    }).then(function () {
-      expect(pabComp.getText()).toContain('Windstorm!');
-      return pabButton.click();
-    }).then(function () {
-      expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
-    });
+
+    await pabButton.click();
+    expect(pabButton.getText()).toContain('Destroy Peek');
+    expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
+    expect(pabComp.getText()).toContain('Windstorm');
+    expect(pabComp.getText()).not.toContain('Windstorm!');
+    expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
+
+    await updateHeroButton.click();
+    expect(pabComp.getText()).toContain('Windstorm!');
+
+    await pabButton.click();
+    expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
   });
 
-  it('should support OnChanges hook', function () {
+  it('should support OnChanges hook', () => {
     let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
     let inputEles = element.all(by.css('on-changes-parent input'));
     let heroNameInputEle = inputEles.get(1);
@@ -52,7 +55,7 @@ describe('Lifecycle hooks', function () {
     expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
   });
 
-  it('should support DoCheck hook', function () {
+  it('should support DoCheck hook', async () => {
     let doCheckViewEle = element.all(by.css('do-check div')).get(0);
     let inputEles = element.all(by.css('do-check-parent input'));
     let heroNameInputEle = inputEles.get(1);
@@ -62,26 +65,25 @@ describe('Lifecycle hooks', function () {
     let logCount: number;
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
-    changeLogEles.count().then(function(count: number) {
-      // 3 messages to start
-      expect(count).toEqual(3, 'should start with 3 messages');
-      logCount = count;
-      return heroNameInputEle.sendKeys('-foo-');
-    }).then(function () {
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
-      return changeLogEles.count();
-    }).then(function(count: number) {
-      // one more for each keystroke
-      expect(count).toEqual(logCount + 5, 'should add 5 more messages');
-      logCount = count;
-      return powerInputEle.sendKeys('-bar-');
-    }).then(function () {
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
-      expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
-    });
+
+    let count = await changeLogEles.count();
+    // 3 messages to start
+    expect(count).toEqual(3, 'should start with 3 messages');
+
+    logCount = count;
+    await sendKeys(heroNameInputEle, '-foo-');
+    count = await changeLogEles.count();
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke');
+
+    logCount = count;
+    await sendKeys(powerInputEle, '-bar-');
+    count = await changeLogEles.count();
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+    expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke');
   });
 
-  it('should support AfterView hooks', function () {
+  it('should support AfterView hooks', async () => {
     let parentEle = element(by.tagName('after-view-parent'));
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
@@ -92,90 +94,81 @@ describe('Lifecycle hooks', function () {
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count: number) {
-      logCount = count;
-      return childViewInputEle.sendKeys('-test-');
-    }).then(function() {
-      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-      expect(commentEle.getText()).toContain('long name');
-      return logEles.count();
-    }).then(function(count: number) {
-      expect(logCount + 7).toBeGreaterThan(count - 3,
-        '7 additional log messages should have been added');
-      expect(logCount + 7).toBeLessThan(count + 3,
-        '7 additional log messages should have been added');
-      logCount = count;
-      return buttonEle.click();
-    }).then(function() {
-      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-    });
+    logCount = await logEles.count();
+    await childViewInputEle.sendKeys('-test-');
+
+    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+    expect(commentEle.getText()).toContain('long name');
+
+    let count = await logEles.count();
+    expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added');
+    expect(logCount + 7).toBeLessThan(count + 3, '7 additional log messages should have been added');
+
+    logCount = count;
+    await buttonEle.click();
+    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
   });
 
-
-  it('should support AfterContent hooks', function () {
+  it('should support AfterContent hooks', async () => {
     let parentEle = element(by.tagName('after-content-parent'));
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
     let logEles = parentEle.all(by.css('h4 ~ div'));
     let childViewInputEle = parentEle.element(by.css('app-child input'));
-    let logCount: number;
+    let logCount = await logEles.count();
 
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count: number) {
-      logCount = count;
-      return childViewInputEle.sendKeys('-test-');
-    }).then(function() {
-      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-      expect(commentEle.getText()).toContain('long name');
-      return logEles.count();
-    }).then(function(count: number) {
-      expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
-      logCount = count;
-      return buttonEle.click();
-    }).then(function() {
-      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-    });
+    await sendKeys(childViewInputEle, '-test-');
+    let count = await logEles.count();
+    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+    expect(commentEle.getText()).toContain('long name');
+    expect(count).toBeGreaterThanOrEqual(logCount + 5, 'additional log messages should have been added');
+
+    logCount = count;
+    await buttonEle.click();
+    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
   });
 
-  it('should support spy\'s OnInit & OnDestroy hooks', function () {
+  it('should support spy\'s OnInit & OnDestroy hooks', async () => {
     let inputEle = element(by.css('spy-parent input'));
     let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
     let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
     let heroEles = element.all(by.css('spy-parent div[mySpy'));
     let logEles = element.all(by.css('spy-parent h4 ~ div'));
+
     expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
     expect(logEles.count()).toBe(2, 'should have two log entries');
-    inputEle.sendKeys('-test-').then(function() {
-      return addHeroButtonEle.click();
-    }).then(function() {
-      expect(heroEles.count()).toBe(3, 'should have added one hero');
-      expect(heroEles.get(2).getText()).toContain('-test-');
-      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
-      return resetHeroesButtonEle.click();
-    }).then(function() {
-      expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
-      expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
-    });
+
+    await inputEle.sendKeys('-test-');
+    await addHeroButtonEle.click();
+    expect(heroEles.count()).toBe(3, 'should have added one hero');
+    expect(heroEles.get(2).getText()).toContain('-test-');
+    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+
+    await resetHeroesButtonEle.click();
+    expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
+    expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
   });
 
-  it('should support "spy counter"', function () {
+  it('should support "spy counter"', async () => {
     let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
     let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
     let textEle = element(by.css('counter-parent app-counter > div'));
     let logEles = element.all(by.css('counter-parent h4 ~ div'));
+
     expect(textEle.getText()).toContain('Counter = 0');
     expect(logEles.count()).toBe(2, 'should start with two log entries');
-    updateCounterButtonEle.click().then(function() {
-      expect(textEle.getText()).toContain('Counter = 1');
-      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
-      return resetCounterButtonEle.click();
-    }).then(function() {
-      expect(textEle.getText()).toContain('Counter = 0');
-      expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
-    });
+
+    await updateCounterButtonEle.click();
+    expect(textEle.getText()).toContain('Counter = 1');
+    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+
+    await resetCounterButtonEle.click();
+    expect(textEle.getText()).toContain('Counter = 0');
+    expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
   });
 });

aio/content/examples/ngmodule-faq/contact.1b.stackblitz.json

@@ -1,24 +0,0 @@
-{
-  "description": "Contact NgModule v.1",
-  "files": [
-    "src/app/app.component.1b.ts",
-    "src/app/app.module.1b.ts",
-    "src/app/highlight.directive.ts",
-    "src/app/title.component.html",
-    "src/app/title.component.ts",
-    "src/app/user.service.ts",
-
-    "src/app/contact/awesome.pipe.ts",
-    "src/app/contact/contact.component.css",
-    "src/app/contact/contact.component.html",
-    "src/app/contact/contact.component.3.ts",
-    "src/app/contact/contact.service.ts",
-    "src/app/contact/contact-highlight.directive.ts",
-
-    "src/main.1b.ts",
-    "src/styles.css",
-    "src/index.1b.html"
-  ],
-  "main": "src/index.1b.html",
-  "tags": ["NgModule"]
-}

aio/content/examples/ngmodule-faq/contact.2.stackblitz.json

@@ -1,26 +0,0 @@
-{
-  "description": "Contact NgModule v.2",
-  "files": [
-    "src/app/app.component.2.ts",
-    "src/app/app.module.2.ts",
-    "src/app/highlight.directive.ts",
-    "src/app/title.component.html",
-    "src/app/title.component.ts",
-    "src/app/user.service.ts",
-
-    "src/app/contact/contact.component.css",
-    "src/app/contact/contact.component.html",
-    "src/app/contact/contact.service.ts",
-
-    "src/app/contact/awesome.pipe.ts",
-    "src/app/contact/contact.component.3.ts",
-    "src/app/contact/contact.module.2.ts",
-    "src/app/contact/contact-highlight.directive.ts",
-
-    "src/main.2.ts",
-    "src/styles.css",
-    "src/index.2.html"
-  ],
-  "main": "src/index.2.html",
-  "tags": ["NgModule"]
-}

aio/content/examples/ngmodule-faq/e2e/src/app.e2e-spec.ts

@@ -1,223 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('NgModule', function () {
-
-  // helpers
-  const gold = 'rgba(255, 215, 0, 1)';
-  const powderblue = 'rgba(176, 224, 230, 1)';
-  const lightgray = 'rgba(211, 211, 211, 1)';
-  const white = 'rgba(0, 0, 0, 0)';
-
-  function getCommonsSectionStruct() {
-    const buttons = element.all(by.css('nav a'));
-
-    return {
-      title: element.all(by.tagName('h1')).get(0),
-      welcome: element.all(by.css('app-title p i')).get(0),
-      contactButton: buttons.get(0),
-      crisisButton: buttons.get(1),
-      heroesButton: buttons.get(2)
-    };
-  }
-
-  function getContactSectionStruct() {
-    const buttons = element.all(by.css('app-contact form button'));
-
-    return {
-      header: element.all(by.css('app-contact h2')).get(0),
-      popupMessage: element.all(by.css('app-contact div')).get(0),
-      contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
-      input: element.all(by.css('app-contact form input')).get(0),
-      validationError: element.all(by.css('app-contact form .alert')).get(0),
-      saveButton: buttons.get(0), // can't be tested
-      nextContactButton: buttons.get(1),
-      newContactButton: buttons.get(2)
-    };
-  }
-
-  function getCrisisSectionStruct() {
-    return {
-      title: element.all(by.css('ng-component h3')).get(0),
-      items: element.all(by.css('ng-component a')),
-      itemId: element.all(by.css('ng-component div')).get(0),
-      listLink: element.all(by.css('ng-component a')).get(0),
-    };
-  }
-
-  function getHeroesSectionStruct() {
-    return {
-      header: element.all(by.css('ng-component h2')).get(0),
-      title: element.all(by.css('ng-component h3')).get(0),
-      items: element.all(by.css('ng-component a')),
-      itemId: element.all(by.css('ng-component ng-component div div')).get(0),
-      itemInput: element.all(by.css('ng-component ng-component input')).get(0),
-      listLink: element.all(by.css('ng-component ng-component a')).get(0),
-    };
-  }
-
-  // tests
-  function appTitleTests(color: string, name?: string) {
-    return function() {
-      it('should have a gray header', function() {
-        const commons = getCommonsSectionStruct();
-        expect(commons.title.getCssValue('backgroundColor')).toBe(color);
-      });
-
-      it('should welcome us', function () {
-        const commons = getCommonsSectionStruct();
-        expect(commons.welcome.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
-      });
-    };
-  }
-
-  function contactTests(color: string, name?: string) {
-    return function() {
-      it('shows the contact\'s owner', function() {
-        const contacts = getContactSectionStruct();
-        expect(contacts.header.getText()).toBe('Contact of ' + (name ||  'Sherlock Holmes'));
-      });
-
-      it('can cycle between contacts', function () {
-        const contacts = getContactSectionStruct();
-        const nextButton = contacts.nextContactButton;
-        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade');
-        expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
-        nextButton.click().then(function () {
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger');
-          return nextButton.click();
-        }).then(function () {
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew');
-        });
-      });
-
-      it('can change an existing contact', function () {
-        const contacts = getContactSectionStruct();
-        contacts.input.sendKeys('a');
-        expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
-        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea');
-      });
-
-      it('can create a new contact', function () {
-        const contacts = getContactSectionStruct();
-        const newContactButton = contacts.newContactButton;
-        newContactButton.click().then(function () {
-          expect(contacts.validationError.getText()).toBe('Name is required');
-          contacts.input.sendKeys('John Doe');
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
-          expect(contacts.validationError.getText()).toBe('');
-        });
-      });
-    };
-  }
-
-  describe('index.html', function () {
-    beforeEach(function () {
-      browser.get('');
-    });
-
-    describe('app-title', appTitleTests(white, 'Miss Marple'));
-
-    describe('contact', contactTests(lightgray, 'Miss Marple'));
-
-    describe('crisis center', function () {
-      beforeEach(function () {
-        getCommonsSectionStruct().crisisButton.click();
-      });
-
-      it('shows a list of crisis', function () {
-        const crisis = getCrisisSectionStruct();
-        expect(crisis.title.getText()).toBe('Crisis List');
-        expect(crisis.items.count()).toBe(4);
-        expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities');
-      });
-
-      it('can navigate to one crisis details', function () {
-        const crisis = getCrisisSectionStruct();
-        crisis.items.get(0).click().then(function() {
-          expect(crisis.itemId.getText()).toBe('Crisis id: 1');
-          return crisis.listLink.click();
-        }).then(function () {
-          // We are back to the list
-          expect(crisis.items.count()).toBe(4);
-        });
-      });
-    });
-
-    describe('heroes', function () {
-      beforeEach(function () {
-        getCommonsSectionStruct().heroesButton.click();
-      });
-
-      it('shows a list of heroes', function() {
-        const heroes = getHeroesSectionStruct();
-        expect(heroes.header.getText()).toBe('Heroes of Miss Marple');
-        expect(heroes.title.getText()).toBe('Hero List');
-        expect(heroes.items.count()).toBe(6);
-        expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice');
-      });
-
-      it('can navigate and edit one hero details', function () {
-        const heroes = getHeroesSectionStruct();
-        heroes.items.get(0).click().then(function () {
-          expect(heroes.itemId.getText()).toBe('Id: 11');
-          heroes.itemInput.sendKeys(' try');
-          return heroes.listLink.click();
-        }).then(function () {
-          // We are back to the list
-          expect(heroes.items.count()).toBe(6);
-          expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try');
-        });
-      });
-    });
-  });
-
-  // describe('index.0.html', function() {
-  //   beforeEach(function () {
-  //     browser.get('index.0.html');
-  //   });
-
-  //   it('has a title', function () {
-  //     const title = element.all(by.tagName('h1')).get(0);
-  //     expect(title.getText()).toBe('Minimal NgModule');
-  //   });
-  // });
-
-  // describe('index.1.html', function () {
-  //   beforeEach(function () {
-  //     browser.get('index.1.html');
-  //   });
-
-  //   describe('app-title', appTitleTests(powderblue));
-  // });
-
-  // describe('index.1b.html', function () {
-  //   beforeEach(function () {
-  //     browser.get('index.1b.html');
-  //   });
-
-  //   describe('app-title', appTitleTests(powderblue));
-
-  //   describe('contact', contactTests(powderblue));
-  // });
-
-  // describe('index.2.html', function () {
-  //   beforeEach(function () {
-  //     browser.get('index.2.html');
-  //   });
-
-  //   describe('app-title', appTitleTests(gold));
-
-  //   describe('contact', contactTests(powderblue));
-  // });
-
-  // describe('index.3.html', function () {
-  //   beforeEach(function () {
-  //     browser.get('index.3.html');
-  //   });
-
-  //   describe('app-title', appTitleTests(gold));
-  // });
-
-});

aio/content/examples/ngmodule-faq/minimal.0.stackblitz.json

@@ -1,12 +0,0 @@
-{
-  "description": "Minimal NgModule",
-  "files": [
-    "src/app/app.component.0.ts",
-    "src/app/app.module.0.ts",
-    "src/main.0.ts",
-    "src/styles.css",
-    "src/index.0.html"
-  ],
-  "main": "src/index.0.html",
-  "tags": ["NgModule"]
-}

aio/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json

@@ -1,40 +0,0 @@
-{
-  "description": "NgModule v.3",
-  "files": [
-    "src/app/app.component.3.ts",
-    "src/app/app.module.3.ts",
-    "src/app/app-routing.module.3.ts",
-
-    "src/app/highlight.directive.ts",
-    "src/app/title.component.html",
-    "src/app/title.component.ts",
-    "src/app/user.service.ts",
-
-    "src/app/contact/contact.component.css",
-    "src/app/contact/contact.component.html",
-    "src/app/contact/contact.service.ts",
-
-    "src/app/contact/awesome.pipe.ts",
-    "src/app/contact/contact.component.3.ts",
-    "src/app/contact/contact.module.3.ts",
-    "src/app/contact/contact-routing.module.3.ts",
-    "src/app/contact/contact-highlight.directive.ts",
-
-    "src/app/crisis/*.ts",
-
-    "src/app/hero/hero-detail.component.ts",
-    "src/app/hero/hero-list.component.ts",
-    "src/app/hero/hero.service.ts",
-
-    "src/app/hero/hero.component.3.ts",
-    "src/app/hero/hero.module.3.ts",
-    "src/app/hero/hero-routing.module.3.ts",
-    "src/app/hero/highlight.directive.ts",
-
-    "src/main.3.ts",
-    "src/styles.css",
-    "src/index.3.html"
-  ],
-  "main": "src/index.3.html",
-  "tags": ["NgModule"]
-}

aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ContactModule } from './contact/contact.module.3';
-
-const routes: Routes = [
-  { path: '', redirectTo: 'contact', pathMatch: 'full'},
-  { path: 'crisis', loadChildren: './crisis/crisis.module#CrisisModule' },
-  { path: 'heroes', loadChildren: './hero/hero.module.3#HeroModule' }
-];
-
-@NgModule({
-  imports: [
-    ContactModule,
-    RouterModule.forRoot(routes)
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/app-routing.module.ts

@@ -1,30 +0,0 @@
-// #docregion
-import { NgModule }             from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ContactModule }    from './contact/contact.module';
-
-// #docregion routes
-const routes: Routes = [
-  { path: '', redirectTo: 'contact', pathMatch: 'full'},
-  // #docregion lazy-routes
-  { path: 'crisis', loadChildren: './crisis/crisis.module#CrisisModule' },
-  { path: 'heroes', loadChildren: './hero/hero.module#HeroModule' }
-  // #enddocregion lazy-routes
-];
-// #enddocregion routes
-
-@NgModule({
-  // #docregion imports
-  imports: [
-    ContactModule,
-    // #docregion forRoot
-    RouterModule.forRoot(routes),
-    // #enddocregion forRoot
-  ],
-  // #enddocregion imports
-  // #docregion exports
-  exports: [RouterModule]
-  // #enddocregion exports
-})
-export class AppRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/app.component.1.ts

@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-// #enddocregion
-  /*
-  // #docregion template
-  template: '<h1 highlight>{{title}}</h1>'
-  // #enddocregion template
-  */
-// #docregion
-  template: '<app-title></app-title>'
-})
-export class AppComponent {}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/app.component.1b.ts

@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  // #docregion template
-  template: `
-    <app-title></app-title>
-    <app-contact></app-contact>
-  `
-  // #enddocregion template
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.2.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <app-title></app-title>
-    <app-contact></app-contact>
-  `
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.3.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  // #docregion template
-  template: `
-    <app-title></app-title>
-    <nav>
-      <a routerLink="contact" routerLinkActive="active">Contact</a>
-      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
-      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `
-  // #enddocregion template
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.ts

@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <app-title></app-title>
-    <nav>
-      <a routerLink="contact" routerLinkActive="active">Contact</a>
-      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
-      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.module.0.ts

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

aio/content/examples/ngmodule-faq/src/app/app.module.1.ts

@@ -1,52 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule }           from '@angular/core';
-import { BrowserModule }      from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent }       from './app.component.1';
-/*
-// #docregion
-import { AppComponent }       from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent }     from './title.component';
-import { UserService }        from './user.service';
-
-/* Contact Related Imports */
-import { FormsModule }        from '@angular/forms';
-
-import { AwesomePipe }        from './contact/awesome.pipe';
-import { ContactComponent }   from './contact/contact.component.3';
-import {
-  ContactHighlightDirective as ContactHighlightDirective
-} from './contact/contact-highlight.directive';
-
-@NgModule({
-// #docregion imports
-  imports: [ BrowserModule, FormsModule ],
-// #enddocregion imports
-// #docregion declarations, directive, component
-  declarations: [
-    AppComponent,
-    HighlightDirective,
-// #enddocregion directive
-    TitleComponent,
-// #enddocregion component
-
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-// #docregion directive, component
-  ],
-// #enddocregion declarations, directive, component
-// #docregion providers
-  providers: [ UserService ],
-// #enddocregion providers
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/ngmodule-faq/src/app/app.module.1b.ts

@@ -1,46 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule }           from '@angular/core';
-import { BrowserModule }      from '@angular/platform-browser';
-import { FormsModule }        from '@angular/forms';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent }       from './app.component.1b';
-/*
-// #docregion
-import { AppComponent }       from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent }     from './title.component';
-import { UserService }        from './user.service';
-
-/* Contact Imports */
-// #enddocregion
-import { ContactComponent } from './contact/contact.component.3';
-/*
-// #docregion
-import { ContactComponent } from './contact/contact.component';
-// #enddocregion
-*/
-// #docregion
-import { AwesomePipe } from './contact/awesome.pipe';
-import { ContactService } from './contact/contact.service';
-import { ContactHighlightDirective } from './contact/contact-highlight.directive';
-
-@NgModule({
-  imports: [ BrowserModule,  FormsModule ],
-// #docregion declarations
-  declarations: [
-    AppComponent, HighlightDirective, TitleComponent,
-    AwesomePipe, ContactComponent, ContactHighlightDirective
-  ],
-// #docregion providers
-  providers: [ ContactService, UserService ],
-// #enddocregion providers
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/ngmodule-faq/src/app/app.module.2.ts

@@ -1,36 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule }           from '@angular/core';
-import { BrowserModule }      from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent }       from './app.component.2';
-/*
-// #docregion
-import { AppComponent }       from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent }     from './title.component';
-import { UserService }        from './user.service';
-
-/* Contact Imports */
-// #enddocregion
-import { ContactModule }      from './contact/contact.module.2';
-/*
-// #docregion
-import { ContactModule }      from './contact/contact.module';
-// #enddocregion
-*/
-// #docregion
-
-@NgModule({
-  imports:      [ BrowserModule, ContactModule ],
-  declarations: [ AppComponent, HighlightDirective, TitleComponent ],
-  providers:    [ UserService ],
-  bootstrap:    [ AppComponent ],
-})
-export class AppModule { }

aio/content/examples/ngmodule-faq/src/app/app.module.ts

@@ -1,39 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v4
-/* Angular Imports */
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-
-/* App Imports */
-import { AppComponent }   from './app.component';
-
-/* Core Modules */
-import { CoreModule }       from './core/core.module';
-
-/* Routing Module */
-import { AppRoutingModule } from './app-routing.module';
-
-@NgModule({
-  // #docregion import-for-root
-  imports: [
-    BrowserModule,
-// #enddocregion v4
-// #enddocregion import-for-root
-/*
-// #docregion v4
-    CoreModule,
-// #enddocregion v4
-*/
-// #docregion import-for-root
-    CoreModule.forRoot({userName: 'Miss Marple'}),
-// #docregion v4
-    AppRoutingModule
-  ],
-  // #enddocregion import-for-root
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion v4
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts

@@ -1,14 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { RouterModule }        from '@angular/router';
-
-import { ContactComponent }    from './contact.component.3';
-
-const routes = [
-  { path: 'contact', component: ContactComponent}
-];
-
-@NgModule({
-  imports: [ RouterModule.forChild(routes) ],
-  exports: [ RouterModule ]
-})
-export class ContactRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts

@@ -1,16 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { RouterModule }        from '@angular/router';
-
-import { ContactComponent }    from './contact.component';
-
-// #docregion routing
-const routes = [
-  { path: 'contact', component: ContactComponent}
-];
-
-@NgModule({
-  imports: [ RouterModule.forChild(routes) ],
-  exports: [ RouterModule ]
-})
-export class ContactRoutingModule {}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts

@@ -1,53 +0,0 @@
-// #docregion
-import { Component, OnInit }      from '@angular/core';
-
-import { Contact, ContactService } from './contact.service';
-import { UserService }    from '../user.service';
-
-@Component({
-  selector: 'app-contact',
-  templateUrl: './contact.component.html',
-  styleUrls: [ './contact.component.css' ]
-})
-export class ContactComponent implements OnInit {
-  contact:  Contact;
-  contacts: Contact[];
-
-  msg = 'Loading contacts ...';
-  userName = '';
-
-  constructor(private contactService: ContactService, userService: UserService) {
-    this.userName = userService.userName;
-  }
-
-  ngOnInit() {
-    this.contactService.getContacts().subscribe(contacts => {
-      this.msg = '';
-      this.contacts = contacts;
-      this.contact = contacts[0];
-    });
-  }
-
-  next() {
-    let ix = 1 + this.contacts.indexOf(this.contact);
-    if (ix >= this.contacts.length) { ix = 0; }
-    this.contact = this.contacts[ix];
-  }
-
-  onSubmit() {
-    // POST-DEMO TODO: do something like save it
-    this.displayMessage('Saved ' + this.contact.name);
-  }
-
-  newContact() {
-    this.displayMessage('New contact');
-    this.contact = {id: 42, name: ''};
-    this.contacts.push(this.contact);
-  }
-
-  /** Display a message briefly, then remove it. */
-  displayMessage(msg: string) {
-    this.msg = msg;
-    setTimeout(() => this.msg = '', 1500);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.css

@@ -1,32 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
-  border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid {
-  border-left: 5px solid #a94442; /* red */
-}
-
-.alert {
-  padding: 15px;
-  margin: 8px 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.alert-danger {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1;
-}
-
-.msg {
-  color: blue;
-  background-color: whitesmoke;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.button-group {
-  padding-top: 12px;
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.html

@@ -1,37 +0,0 @@
-<!-- #docregion -->
-<h2>Contact of {{userName}}</h2>
-<div *ngIf="msg" class="msg">{{msg}}</div>
-
-<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
-  <!-- #docregion awesome -->
-  <h3 highlight>{{ contact.name | awesome }}</h3>
-  <!-- #enddocregion awesome -->
-
-  <div class="form-group">
-    <label for="name">Name</label>
-
-    <!-- #docregion ngModel -->
-    <input type="text" class="form-control" required
-      [(ngModel)]="contact.name"
-      name="name"  #name="ngModel" >
-    <!-- #enddocregion ngModel -->
-
-    <div [hidden]="name.valid" class="alert alert-danger">
-      Name is required
-    </div>
-  </div>
-
-  <div class="button-group">
-    <button type="submit" class="btn btn-default"
-    [disabled]="!contactForm.form.valid">
-    Save</button>
-
-    <button type="button" class="btn" (click)="next()"
-    [disabled]="!contactForm.form.valid">
-    Next Contact</button>
-
-    <button type="button" class="btn" (click)="newContact()">
-    New Contact</button>
-  </div>
-</form>
-<!-- #enddocregion -->

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.ts

@@ -1,54 +0,0 @@
-// Exact copy except import UserService from core
-// #docregion
-import { Component, OnInit }      from '@angular/core';
-
-import { Contact, ContactService } from './contact.service';
-import { UserService }             from '../core/user.service';
-
-@Component({
-  selector: 'app-contact',
-  templateUrl: './contact.component.html',
-  styleUrls: [ './contact.component.css' ]
-})
-export class ContactComponent implements OnInit {
-  contact:  Contact;
-  contacts: Contact[];
-
-  msg = 'Loading contacts ...';
-  userName = '';
-
-  constructor(private contactService: ContactService, userService: UserService) {
-    this.userName = userService.userName;
-  }
-
-  ngOnInit() {
-    this.contactService.getContacts().subscribe(contacts => {
-      this.msg = '';
-      this.contacts = contacts;
-      this.contact = contacts[0];
-    });
-  }
-
-  next() {
-    let ix = 1 + this.contacts.indexOf(this.contact);
-    if (ix >= this.contacts.length) { ix = 0; }
-    this.contact = this.contacts[ix];
-  }
-
-  onSubmit() {
-    // POST-DEMO TODO: do something like save it
-    this.displayMessage('Saved ' + this.contact.name);
-  }
-
-  newContact() {
-    this.displayMessage('New contact');
-    this.contact = {id: 42, name: ''};
-    this.contacts.push(this.contact);
-  }
-
-  /** Display a message briefly, then remove it. */
-  displayMessage(msg: string) {
-    this.msg = msg;
-    setTimeout(() => this.msg = '', 1500);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts

@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: []
-})
-export class ContactModule { }

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts

@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }           from '@angular/core';
-import { CommonModule }       from '@angular/common';
-import { FormsModule }        from '@angular/forms';
-
-import { AwesomePipe }        from './awesome.pipe';
-// #enddocregion
-import { ContactComponent }   from './contact.component.3';
-/*
-// #docregion
-import { ContactComponent }   from './contact.component';
-// #enddocregion
-*/
-// #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
-import { ContactService }     from './contact.service';
-
-// #docregion class
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  declarations: [
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-  ],
-  // #docregion exports
-  exports:   [ ContactComponent ],
-  // #enddocregion exports
-  providers: [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts

@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }           from '@angular/core';
-import { CommonModule }       from '@angular/common';
-import { FormsModule }        from '@angular/forms';
-
-import { AwesomePipe }        from './awesome.pipe';
-// #enddocregion
-import { ContactComponent }   from './contact.component.3';
-/*
-// #docregion
-import { ContactComponent }   from './contact.component';
-// #enddocregion
-*/
-// #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
-import { ContactService }     from './contact.service';
-
-// #enddocregion
-import { ContactRoutingModule }   from './contact-routing.module.3';
-/*
-// #docregion
-import { ContactRoutingModule }   from './contact-routing.module';
-// #enddocregion
-*/
-// #docregion
-
-// #docregion class
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ContactRoutingModule
-  ],
-  declarations: [
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-  ],
-  providers: [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.ts

@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule }           from '@angular/core';
-import { SharedModule }       from '../shared/shared.module';
-
-import { ContactComponent }     from './contact.component';
-import { ContactService }       from './contact.service';
-import { ContactRoutingModule } from './contact-routing.module';
-
-// #docregion class
-@NgModule({
-  imports: [
-    SharedModule,
-    ContactRoutingModule
-  ],
-  declarations: [ ContactComponent ],
-  providers:    [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class

aio/content/examples/ngmodule-faq/src/app/contact/contact.service.ts

@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay }      from 'rxjs/operators';
-
-export class Contact {
-  constructor(public id: number, public name: string) { }
-}
-
-const CONTACTS: Contact[] = [
-  new Contact(21, 'Sam Spade'),
-  new Contact(22, 'Nick Danger'),
-  new Contact(23, 'Nancy Drew')
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves contacts from a server */
-@Injectable()
-export class ContactService implements OnDestroy {
-// #enddocregion
-  constructor() { console.log('ContactService instance created.'); }
-  ngOnDestroy() { console.log('ContactService instance destroyed.'); }
-
-// #docregion
-  getContacts(): Observable<Contact[]> {
-    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
-  }
-
-  getContact(id: number | string): Observable<Contact> {
-    return of(CONTACTS.find(contact => contact.id === +id))
-      .pipe(delay(FETCH_LATENCY));
-  }
-}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/core/core.module.ts

@@ -1,48 +0,0 @@
-/* tslint:disable:member-ordering no-unused-variable */
-// #docplaster
-// #docregion
-// #docregion v4
-import {
-  ModuleWithProviders, NgModule,
-  Optional, SkipSelf }       from '@angular/core';
-
-import { CommonModule }      from '@angular/common';
-
-import { TitleComponent }    from './title.component';
-import { UserService }       from './user.service';
-// #enddocregion
-import { UserServiceConfig } from './user.service';
-
-// #docregion v4
-@NgModule({
-  imports:      [ CommonModule ],
-  declarations: [ TitleComponent ],
-  exports:      [ TitleComponent ],
-  providers:    [ UserService ]
-})
-export class CoreModule {
-// #enddocregion v4
-
-  // #docregion ctor
-  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
-    if (parentModule) {
-      throw new Error(
-        'CoreModule is already loaded. Import it in the AppModule only');
-    }
-  }
-  // #enddocregion ctor
-
-  // #docregion for-root
-  static forRoot(config: UserServiceConfig): ModuleWithProviders {
-    return {
-      ngModule: CoreModule,
-      providers: [
-        {provide: UserServiceConfig, useValue: config }
-      ]
-    };
-  }
-  // #enddocregion for-root
-// #docregion v4
-}
-// #enddocregion v4
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/core/title.component.html

@@ -1,6 +0,0 @@
-<!-- Exact copy from earlier app.component.html -->
-<h1 highlight>{{title}}</h1>
-<p *ngIf="user">
-  <i>Welcome, {{user}}</i>
-<p>
-

aio/content/examples/ngmodule-faq/src/app/core/title.component.ts

@@ -1,16 +0,0 @@
-// Exact copy of app/title.component.ts except import UserService from shared
-import { Component, Input } from '@angular/core';
-import { UserService }      from '../core/user.service';
-
-@Component({
-  selector: 'app-title',
-  templateUrl: './title.component.html',
-})
-export class TitleComponent {
-  title = 'Angular Modules';
-  user = '';
-
-  constructor(userService: UserService) {
-    this.user = userService.userName;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/core/user.service.ts

@@ -1,32 +0,0 @@
-// Crazy copy of the app/user.service
-// Proves that UserService is an app-wide singleton and only instantiated once
-// IFF shared.module follows the `forRoot` pattern
-//
-// If it didn't, a new instance of UserService would be created
-// after each lazy load and the userName would double up.
-
-import { Injectable, Optional } from '@angular/core';
-
-let nextId = 1;
-
-export class UserServiceConfig {
-  userName = 'Philip Marlowe';
-}
-
-@Injectable()
-export class UserService {
-  id = nextId++;
-  private _userName = 'Sherlock Holmes';
-
-  // #docregion ctor
-  constructor(@Optional() config: UserServiceConfig) {
-    if (config) { this._userName = config.userName; }
-  }
-  // #enddocregion ctor
-
-  get userName() {
-    // Demo: add a suffix if this service has been created more than once
-    const suffix = this.id > 1 ? ` times ${this.id}` : '';
-    return this._userName + suffix;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
-
-@Component({
-  template: `
-    <h3 highlight>Crisis Detail</h3>
-    <div>Crisis id: {{id}}</div>
-    <br>
-    <a routerLink="../list">Crisis List</a>
-  `
-})
-export class CrisisDetailComponent implements OnInit {
-  id: number;
-  constructor(private route: ActivatedRoute) {  }
-
-  ngOnInit() {
-    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Crisis,
-         CrisisService } from './crisis.service';
-
-@Component({
-  template: `
-    <h3 highlight>Crisis List</h3>
-    <div *ngFor='let crisis of crises | async'>
-      <a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
-    </div>
-  `
-})
-export class CrisisListComponent {
-  crises: Observable<Crisis[]>;
-
-  constructor(private crisisService: CrisisService) {
-    this.crises = this.crisisService.getCrises();
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts

@@ -1,18 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { Routes,
-         RouterModule }        from '@angular/router';
-
-import { CrisisListComponent }    from './crisis-list.component';
-import { CrisisDetailComponent }  from './crisis-detail.component';
-
-const routes: Routes = [
-  { path: '', redirectTo: 'list', pathMatch: 'full'},
-  { path: 'list',    component: CrisisListComponent },
-  { path: ':id', component: CrisisDetailComponent }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class CrisisRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts

@@ -1,14 +0,0 @@
-import { NgModule }      from '@angular/core';
-import { CommonModule }  from '@angular/common';
-
-import { CrisisListComponent }    from './crisis-list.component';
-import { CrisisDetailComponent }  from './crisis-detail.component';
-import { CrisisService }          from './crisis.service';
-import { CrisisRoutingModule }    from './crisis-routing.module';
-
-@NgModule({
-  imports:      [ CommonModule, CrisisRoutingModule ],
-  declarations: [ CrisisDetailComponent, CrisisListComponent ],
-  providers:    [ CrisisService ]
-})
-export class CrisisModule {}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts

@@ -1,33 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay }      from 'rxjs/operators';
-
-export class Crisis {
-  constructor(public id: number, public name: string) { }
-}
-
-const CRISES: Crisis[] = [
-  new Crisis(1, 'Dragon Burning Cities'),
-  new Crisis(2, 'Sky Rains Great White Sharks'),
-  new Crisis(3, 'Giant Asteroid Heading For Earth'),
-  new Crisis(4, 'Procrastinators Meeting Delayed Again'),
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves crises from a server */
-@Injectable()
-export class CrisisService implements OnDestroy {
-  constructor() { console.log('CrisisService instance created.'); }
-  ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
-
-  getCrises(): Observable<Crisis[]> {
-    return of(CRISES).pipe(delay(FETCH_LATENCY));
-  }
-
-  getCrisis(id: number | string): Observable<Crisis> {
-    return of(CRISES.find(crisis => crisis.id === +id))
-      .pipe(delay(FETCH_LATENCY));
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts

@@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
-
-import { Hero,
-         HeroService }    from './hero.service';
-
-@Component({
-  template: `
-    <h3 highlight>Hero Detail</h3>
-    <div *ngIf="hero">
-      <div>Id: {{hero.id}}</div><br>
-      <label>Name:
-        <input [(ngModel)]="hero.name">
-      </label>
-    </div>
-    <br>
-    <a routerLink="../">Hero List</a>
-  `
-})
-export class HeroDetailComponent implements OnInit {
-  hero: Hero;
-
-  constructor(
-    private route: ActivatedRoute,
-    private heroService: HeroService) { }
-
-  ngOnInit() {
-    let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
-    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts

@@ -1,20 +0,0 @@
-import { Component }  from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero,
-         HeroService } from './hero.service';
-
-@Component({
-  template: `
-    <h3 highlight>Hero List</h3>
-    <div *ngFor='let hero of heroes | async'>
-      <a routerLink="{{hero.id}}">{{hero.id}} - {{hero.name}}</a>
-    </div>
-  `
-})
-export class HeroListComponent {
-  heroes: Observable<Hero[]>;
-  constructor(private heroService: HeroService) {
-    this.heroes = this.heroService.getHeroes();
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts

@@ -1,23 +0,0 @@
-import { NgModule }     from '@angular/core';
-import { Routes,
-         RouterModule } from '@angular/router';
-
-import { HeroComponent }       from './hero.component.3';
-import { HeroListComponent }   from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const routes: Routes = [
-  { path: '',
-    component: HeroComponent,
-    children: [
-      { path: '',    component: HeroListComponent },
-      { path: ':id', component: HeroDetailComponent }
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HeroRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts

@@ -1,23 +0,0 @@
-import { NgModule }     from '@angular/core';
-import { Routes,
-         RouterModule } from '@angular/router';
-
-import { HeroComponent }       from './hero.component';
-import { HeroListComponent }   from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const routes: Routes = [
-  { path: '',
-    component: HeroComponent,
-    children: [
-      { path: '',    component: HeroListComponent },
-      { path: ':id', component: HeroDetailComponent }
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HeroRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts

@@ -1,18 +0,0 @@
-import { Component }   from '@angular/core';
-
-import { HeroService } from './hero.service';
-import { UserService } from '../user.service';
-
-@Component({
-  template: `
-    <h2>Heroes of {{userName}}</h2>
-    <router-outlet></router-outlet>
-  `,
-  providers: [ HeroService ]
-})
-export class HeroComponent {
-  userName = '';
-  constructor(userService: UserService) {
-    this.userName = userService.userName;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero.component.ts

@@ -1,19 +0,0 @@
-// Exact copy except import UserService from core
-import { Component }   from '@angular/core';
-
-import { HeroService } from './hero.service';
-import { UserService } from '../core/user.service';
-
-@Component({
-  template: `
-    <h2>Heroes of {{userName}}</h2>
-    <router-outlet></router-outlet>
-  `,
-  providers: [ HeroService ]
-})
-export class HeroComponent {
-  userName = '';
-  constructor(userService: UserService) {
-    this.userName = userService.userName;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts

@@ -1,21 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-import { HeroComponent }       from './hero.component.3';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent }   from './hero-list.component';
-import { HeroRoutingModule }   from './hero-routing.module.3';
-
-import { HighlightDirective }  from './highlight.directive';
-
-// #docregion class
-@NgModule({
-  imports: [ CommonModule, FormsModule, HeroRoutingModule ],
-  declarations: [
-    HeroComponent, HeroDetailComponent, HeroListComponent,
-    HighlightDirective
-  ]
-})
-export class HeroModule { }
-// #enddocregion class