release: cut the v10.0.0 release

Mostly just adding links to the migrations that were missing, adding the migrations into the navbar,
as well as correcting the @angular/bazel removal in the update guide.

I also added a commented out preamble for the release notes.

PR Close #37705

.bazelrc

@@ -136,6 +136,15 @@ build:remote --remote_executor=remotebuildexecution.googleapis.com
 # retry mechanism and we do not want to retry unnecessarily if Karma already tried multiple times.
 test:saucelabs --flaky_test_attempts=1
 
+###############################
+# NodeJS rules settings
+# These settings are required for rules_nodejs
+###############################
+
+# Turn on managed directories feature in Bazel
+# This allows us to avoid installing a second copy of node_modules
+common --experimental_allow_incremental_repository_updates
+
 ####################################################
 # User bazel configuration
 # NOTE: This needs to be the *last* entry in the config.

.circleci/config.yml

@@ -32,8 +32,8 @@ var_4_win: &cache_key_win_fallback v7-angular-win-node-12-{{ checksum ".bazelver
 
 # Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
 # cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
-var_5: &components_repo_unit_tests_cache_key v9-angular-components-09e68db8ed5b1253f2fe38ff954ef0df019fc25a
+var_5: &components_repo_unit_tests_cache_key v7-angular-components-189d98e8b01b33974328255f085de04251d61567
-var_6: &components_repo_unit_tests_cache_key_fallback v9-angular-components-
+var_6: &components_repo_unit_tests_cache_key_fallback v7-angular-components-
 
 # Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
 # `build-ivy-npm-packages`.
@@ -656,18 +656,6 @@ jobs:
       - run: yarn tsc -p packages
       - run: yarn tsc -p modules
       - run: yarn bazel build //packages/zone.js:npm_package
-      # Build test fixtures for a test that rely on Bazel-generated fixtures. Note that disabling
-      # specific tests which are reliant on such generated fixtures is not an option as SystemJS
-      # in the Saucelabs legacy job always fetches referenced files, even if the imports would be
-      # guarded by an check to skip in the Saucelabs legacy job. We should be good running such
-      # test in all supported browsers on Saucelabs anyway until this job can be removed.
-      - run:
-          name: Preparing Bazel-generated fixtures required in legacy tests
-          command: |
-            yarn bazel build //packages/core/test:downleveled_es5_fixture
-            # Needed for the ES5 downlevel reflector test in `packages/core/test/reflection`.
-            cp dist/bin/packages/core/test/reflection/es5_downleveled_inheritance_fixture.js \
-              dist/all/@angular/core/test/reflection/es5_downleveled_inheritance_fixture.js
       - run:
           # Waiting on ready ensures that we don't run tests too early without Saucelabs not being ready.
           name: Waiting for Saucelabs tunnel to connect
@@ -743,8 +731,8 @@ jobs:
       - run: yarn --cwd packages/zone.js promisetest
       - run: yarn --cwd packages/zone.js promisefinallytest
       - run: yarn bazel build //packages/zone.js:npm_package &&
-             cp dist/bin/packages/zone.js/npm_package/bundles/zone-mix.umd.js ./packages/zone.js/test/extra/ &&
+             cp dist/bin/packages/zone.js/npm_package/dist/zone-mix.js ./packages/zone.js/test/extra/ &&
-             cp dist/bin/packages/zone.js/npm_package/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/ &&
+             cp dist/bin/packages/zone.js/npm_package/dist/zone-patch-electron.js ./packages/zone.js/test/extra/ &&
              yarn --cwd packages/zone.js electrontest
       - run: yarn --cwd packages/zone.js jesttest
 

.circleci/env.sh

@@ -74,7 +74,7 @@ setPublicVar COMPONENTS_REPO_TMP_DIR "/tmp/angular-components-repo"
 setPublicVar COMPONENTS_REPO_URL "https://github.com/angular/components.git"
 setPublicVar COMPONENTS_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
-setPublicVar COMPONENTS_REPO_COMMIT "09e68db8ed5b1253f2fe38ff954ef0df019fc25a"
+setPublicVar COMPONENTS_REPO_COMMIT "189d98e8b01b33974328255f085de04251d61567"
 
 
 ####################################################################################################

.github/angular-robot.yml

@@ -48,7 +48,6 @@ merge:
       - "packages/bazel/src/protractor/**"
       - "packages/bazel/src/schematics/**"
       - "packages/compiler-cli/ngcc/**"
-      - "packages/compiler-cli/src/ngtsc/sourcemaps/**",
       - "packages/docs/**"
       - "packages/elements/schematics/**"
       - "packages/examples/**"
@@ -69,20 +68,20 @@ merge:
       - "packages/**/integrationtest/**"
       - "packages/**/test/**"
       - "packages/zone.js/*"
-      - "packages/zone.js/dist/**"
       - "packages/zone.js/doc/**"
       - "packages/zone.js/example/**"
       - "packages/zone.js/scripts/**"
 
   # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
-  mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.\nPlease help to unblock it by resolving these conflicts. Thanks!"
+  mergeConflictComment: "Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.
+\nPlease help to unblock it by resolving these conflicts. Thanks!"
 
   # label to monitor
-  mergeLabel: "action: merge"
+  mergeLabel: "PR action: merge"
 
   # adding any of these labels will also add the merge label
   mergeLinkedLabels:
-    - "action: merge-assistance"
+    - "PR action: merge-assistance"
 
   # list of checks that will determine if the merge label can be added
   checks:
@@ -95,17 +94,17 @@ merge:
 
     # whether the PR shouldn't have a conflict with the base branch
     noConflict: true
-    # list of labels that a PR needs to have, checked with a regexp (e.g. "target:" will work for the label "target: master")
+    # list of labels that a PR needs to have, checked with a regexp (e.g. "PR target:" will work for the label "PR target: master")
     requiredLabels:
-      - "target: *"
+      - "PR target: *"
       - "cla: yes"
 
     # list of labels that a PR shouldn't have, checked after the required labels with a regexp
     forbiddenLabels:
-      - "target: TBD"
+      - "PR target: TBD"
-      - "action: cleanup"
+      - "PR action: cleanup"
-      - "action: review"
+      - "PR action: review"
-      - "state: blocked"
+      - "PR state: blocked"
       - "cla: no"
 
     # list of PR statuses that need to be successful
@@ -122,7 +121,12 @@ merge:
   # the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
   # {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option
   # {{PLACEHOLDER}} will be replaced by the list of failing checks
-  mergeRemovedComment: "I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:\n{{PLACEHOLDER}}\n\n**If you want your PR to be merged, it has to pass all the CI checks.**\n\nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
+  mergeRemovedComment: "I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:
+\n{{PLACEHOLDER}}
+\n
+\n**If you want your PR to be merged, it has to pass all the CI checks.**
+\n
+\nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
 
 # options for the triage plugin
 triage:
@@ -150,12 +154,6 @@ triage:
     -
       - "type: RFC / Discussion / question"
       - "comp: *"
-    -
-      - "type: confusing"
-      - "comp: *"
-    -
-      - "type: use-case"
-      - "comp: *"
 
 # options for the triage PR plugin
 triagePR:
@@ -182,4 +180,4 @@ rerunCircleCI:
   # set to true to disable
   disabled: false
   # the label which when added triggers a rerun of the default CircleCI workflow
-  triggerRerunLabel: "action: rerun CI at HEAD"
+  triggerRerunLabel: "PR action: rerun CI at HEAD"

.gitignore

@@ -40,11 +40,5 @@ yarn-error.log
 # User specific bazel settings
 .bazelrc.user
 
-# User specific ng-dev settings
-.ng-dev.user*
-
 .notes.md
 baseline.json
-
-# Ignore .history for the xyz.local-history VSCode extension
-.history

.gitmessage

@@ -1,145 +0,0 @@
-<type>(<scope>): <summary>
-
-<Describe the motivation behind this change - explain WHY you are making this change. Wrap all lines
-at 100 characters.>
-
-Fixes #<issue number>
-
-# ────────────────────────────────────────── 100 chars ────────────────────────────────────────────┤
-
-
-# Example Commit Messages
-# =======================
-
-
-# ─── Example: Simple refactor ────────────────────────────────────────────────────────────────────┤
-# refactor(core): rename refreshDynamicEmbeddedViews to refreshEmbeddedViews
-#
-# Improve code readability. The original name no longer matches how the function is used.
-# ─────────────────────────────────────────────────────────────────────────────────────────────────┤
-
-
-# ─── Example: Simple docs change ─────────────────────────────────────────────────────────────────┤
-# docs: clarify the service limitation in providers.md guide
-#
-# Fixes #36332
-# ─────────────────────────────────────────────────────────────────────────────────────────────────┤
-
-
-# ─── Example: A bug fix ──────────────────────────────────────────────────────────────────────────┤
-# fix(ngcc): ensure lockfile is removed when `analyzeFn` fails
-#
-# Previously an error thrown in the `analyzeFn` would cause the ngcc process to exit immediately
-# without removing the lockfile, and potentially before the unlocker process had been successfully
-# spawned resulting in the lockfile being orphaned and left behind.
-#
-# Now we catch these errors and remove the lockfile as needed.
-# ─────────────────────────────────────────────────────────────────────────────────────────────────┤
-
-
-# ─── Example: Breaking change ────────────────────────────────────────────────────────────────────┤
-# feat(bazel): simplify ng_package by dropping esm5 and fesm5
-#
-# esm5 and fesm5 distributions are no longer needed and have been deprecated in the past.
-#
-# https://v9.angular.io/guide/deprecations#esm5-and-fesm5-code-formats-in-angular-npm-packages
-#
-# This commit modifies ng_package to no longer distribute these two formats in npm packages built by
-# ng_package (e.g. @angular/core).
-#
-# This commit intentionally doesn't fully clean up the ng_package rule to remove all traces of esm5
-# and fems5 build artifacts as that is a bigger cleanup and currently we are narrowing down the
-# scope of this change to the MVP needed for v10, which in this case is 'do not put esm5 and fesm5'
-# into the npm packages.
-#
-# More cleanup to follow: https://angular-team.atlassian.net/browse/FW-2143
-#
-# BREAKING CHANGE: esm5 and fesm5 format is no longer distributed in Angular's npm packages e.g.
-# @angular/core
-#
-# Angular CLI will automatically downlevel the code to es5 if differential loading is enabled in the
-# Angular project, so no action is required from Angular CLI users.
-#
-# If you are not using Angular CLI to build your application or library, and you need to be able to
-# build es5 artifacts, then you will need to downlevel the distributed Angular code to es5 on your
-# own.
-#
-#
-# Fixes #1234
-# ─────────────────────────────────────────────────────────────────────────────────────────────────┤
-
-
-
-# Angular Commit Message Format
-# =============================
-#
-# The full specification of the Angular Commit Message Format can be found at
-# https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
-#
-# The following is an excerpt of the specification with the most commonly needed info.
-#
-# Each commit message consists of a *header*, a *body*, and a *footer*.
-#
-# <header>
-# <BLANK LINE>
-# <body>
-# <BLANK LINE>
-# <footer>
-#
-# The header is mandatory.
-#
-# The body is mandatory for all commits except for those of scope "docs". When the body is required
-# it must be at least 20 characters long.
-#
-# The footer is optional.
-#
-# Any line of the commit message cannot be longer than 100 characters.
-#
-#
-# Commit Message Header
-# ---------------------
-#
-# <type>(<scope>): <short summary>
-#   │       │             │
-#   │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
-#   │       │
-#   │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
-#   │                          elements|forms|http|language-service|localize|platform-browser|
-#   │                          platform-browser-dynamic|platform-server|platform-webworker|
-#   │                          platform-webworker-dynamic|router|service-worker|upgrade|zone.js|
-#   │                          packaging|changelog|dev-infra|docs-infra|migrations|ngcc|ve
-#   │                          https://github.com/angular/angular/blob/master/CONTRIBUTING.md#scope
-#   │
-#   └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
-#                     https://github.com/angular/angular/blob/master/CONTRIBUTING.md#type
-#
-#
-# Commit Message Body
-# ---------------------
-#
-# Just as in the summary, use the imperative, present tense: "fix" not "fixed" nor "fixes".
-#
-# Explain the motivation for the change in the commit message body. This commit message should
-# explain WHY you are making the change. You can include a comparison of the previous behavior with
-# the new behavior in order to illustrate the impact of the change.
-#
-#
-# Commit Message Footer
-# ---------------------
-#
-# The footer can contain information about breaking changes and is also the place to reference
-# GitHub issues, Jira tickets, and other PRs that this commit closes or is related to.
-#
-# ```
-# BREAKING CHANGE: <breaking change summary>
-# <BLANK LINE>
-# <breaking change description + migration instructions>
-# <BLANK LINE>
-# <BLANK LINE>
-# Fixes #<issue number>
-# ```
-#
-# Breaking Change section should start with the phrase "BREAKING CHANGE: " followed by a summary of
-# the breaking change, a blank line, and a detailed description of the breaking change that also
-# includes migration instructions.
-#

.ng-dev/caretaker.ts

@@ -1,19 +0,0 @@
-import {CaretakerConfig} from '../dev-infra/caretaker/config';
-
-/** The configuration for `ng-dev caretaker` commands. */
-export const caretaker: CaretakerConfig = {
-  githubQueries: [
-    {
-      name: 'Merge Queue',
-      query: `is:pr is:open status:success label:"action: merge"`,
-    },
-    {
-      name: 'Merge Assistance Queue',
-      query: `is:pr is:open status:success label:"action: merge-assistance"`,
-    },
-    {
-      name: 'Primary Triage Queue',
-      query: `is:open is:issue no:milestone`,
-    }
-  ]
-};

.ng-dev/commit-message.ts

@@ -1,40 +0,0 @@
-import {CommitMessageConfig} from '../dev-infra/commit-message/config';
-
-/**
- * The configuration for `ng-dev commit-message` commands.
- */
-export const commitMessage: CommitMessageConfig = {
-  maxLineLength: 120,
-  minBodyLength: 20,
-  minBodyLengthTypeExcludes: ['docs'],
-  scopes: [
-    'animations',
-    'bazel',
-    'benchpress',
-    'changelog',
-    'common',
-    'compiler',
-    'compiler-cli',
-    'core',
-    'dev-infra',
-    'docs-infra',
-    'elements',
-    'forms',
-    'http',
-    'language-service',
-    'localize',
-    'migrations',
-    'ngcc',
-    'packaging',
-    'platform-browser',
-    'platform-browser-dynamic',
-    'platform-server',
-    'platform-webworker',
-    'platform-webworker-dynamic',
-    'router',
-    'service-worker',
-    'upgrade',
-    've',
-    'zone.js',
-  ]
-};

.ng-dev/config.ts

@@ -1,15 +1,119 @@
-import {caretaker} from './caretaker';
+import {MergeConfig} from '../dev-infra/pr/merge/config';
-import {commitMessage} from './commit-message';
-import {format} from './format';
-import {github} from './github';
-import {merge} from './merge';
-import {release} from './release';
 
+// The configuration for `ng-dev commit-message` commands.
+const commitMessage = {
+  'maxLength': 120,
+  'minBodyLength': 100,
+  'types': [
+    'build',
+    'ci',
+    'docs',
+    'feat',
+    'fix',
+    'perf',
+    'refactor',
+    'release',
+    'style',
+    'test',
+  ],
+  'scopes': [
+    'animations',
+    'bazel',
+    'benchpress',
+    'changelog',
+    'common',
+    'compiler',
+    'compiler-cli',
+    'core',
+    'dev-infra',
+    'docs-infra',
+    'elements',
+    'forms',
+    'http',
+    'language-service',
+    'localize',
+    'migrations',
+    'ngcc',
+    'packaging',
+    'platform-browser',
+    'platform-browser-dynamic',
+    'platform-server',
+    'platform-webworker',
+    'platform-webworker-dynamic',
+    'router',
+    'service-worker',
+    'upgrade',
+    've',
+    'zone.js',
+  ]
+};
+
+// The configuration for `ng-dev format` commands.
+const format = {
+  'clang-format': {
+    'matchers': [
+      '**/*.{js,ts}',
+      // TODO: burn down format failures and remove aio and integration exceptions.
+      '!aio/**',
+      '!integration/**',
+      // TODO: remove this exclusion as part of IE deprecation.
+      '!shims_for_IE.js',
+      // Both third_party and .yarn are directories containing copied code which should
+      // not be modified.
+      '!third_party/**',
+      '!.yarn/**',
+      // Do not format d.ts files as they are generated
+      '!**/*.d.ts',
+    ]
+  },
+  'buildifier': true
+};
+
+/** Github metadata information for `ng-dev` commands. */
+const github = {
+  owner: 'angular',
+  name: 'angular',
+};
+
+// Configuration for the `ng-dev pr merge` command. The command can be used
+// for merging upstream pull requests into branches based on a PR target label.
+const merge = () => {
+  // TODO: resume dynamically determining patch branch
+  const patch = '10.0.x';
+  const config: MergeConfig = {
+    githubApiMerge: false,
+    claSignedLabel: 'cla: yes',
+    mergeReadyLabel: /^PR action: merge(-assistance)?/,
+    commitMessageFixupLabel: 'commit message fixup',
+    labels: [
+      {
+        pattern: 'PR target: master-only',
+        branches: ['master'],
+      },
+      {
+        pattern: 'PR target: patch-only',
+        branches: [patch],
+      },
+      {
+        pattern: 'PR target: master & patch',
+        branches: ['master', patch],
+      },
+    ],
+    requiredBaseCommits: {
+      // PRs that target either `master` or the patch branch, need to be rebased
+      // on top of the latest commit message validation fix.
+      // These SHAs are the commits that update the required license text in the header.
+      'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
+      [patch]: '27b95ba64a5d99757f4042073fd1860e20e3ed24'
+    },
+  };
+  return config;
+};
+
+// Export function to build ng-dev configuration object.
 module.exports = {
   commitMessage,
   format,
   github,
   merge,
-  caretaker,
-  release,
 };

.ng-dev/format.ts

@@ -1,22 +0,0 @@
-import {FormatConfig} from '../dev-infra/format/config';
-
-/**
- * Configuration for the `ng-dev format` command.
- */
-export const format: FormatConfig = {
-  'clang-format': {
-    'matchers': [
-      '**/*.{js,ts}',
-      // TODO: burn down format failures and remove aio and integration exceptions.
-      '!aio/**',
-      '!integration/**',
-      // Both third_party and .yarn are directories containing copied code which should
-      // not be modified.
-      '!third_party/**',
-      '!.yarn/**',
-      // Do not format d.ts files as they are generated
-      '!**/*.d.ts',
-    ]
-  },
-  'buildifier': true
-};

.ng-dev/gitconfig

@@ -1,15 +0,0 @@
-# The file is inert unless it's explicitly included into the local git config via:
-#
-# ```
-# git config --add include.path '../.ng-dev/gitconfig'
-# ```
-#
-# Calling that command will append the following into `.git/config` of the current git workspace
-# (i.e. $GIT_DIR, typically `angular/.git/config`):
-#
-# ```
-# [include]
-#     path = ../.ng-dev/gitconfig
-# ```
-[commit]
-  template = .gitmessage

.ng-dev/github.ts

@@ -1,11 +0,0 @@
-import {GithubConfig} from '../dev-infra/utils/config';
-
-/**
- * Github configuration for the `ng-dev` command. This repository is used as
- * remote for the merge script and other utilities like `ng-dev pr rebase`.
- */
-
-export const github: GithubConfig = {
-  owner: 'angular',
-  name: 'angular'
-};

.ng-dev/merge.ts

@@ -1,28 +0,0 @@
-import {DevInfraMergeConfig} from '../dev-infra/pr/merge/config';
-import {getDefaultTargetLabelConfiguration} from '../dev-infra/pr/merge/defaults';
-import {github} from './github';
-import {release} from './release';
-
-/**
- * Configuration for the merge tool in `ng-dev`. This sets up the labels which
- * are respected by the merge script (e.g. the target labels).
- */
-export const merge: DevInfraMergeConfig['merge'] = async api => {
-  return {
-    githubApiMerge: false,
-    claSignedLabel: 'cla: yes',
-    mergeReadyLabel: /^action: merge(-assistance)?/,
-    caretakerNoteLabel: 'action: merge-assistance',
-    commitMessageFixupLabel: 'commit message fixup',
-    // We can pick any of the NPM packages as we are in a monorepo where all packages are
-    // published together with the same version and branching.
-    labels: await getDefaultTargetLabelConfiguration(api, github, release),
-    requiredBaseCommits: {
-      // PRs that target either `master` or the patch branch, need to be rebased
-      // on top of the latest commit message validation fix.
-      // These SHAs are the commits that update the required license text in the header.
-      'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
-      '10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
-    },
-  };
-};

.ng-dev/release.ts

@@ -1,33 +0,0 @@
-import {join} from 'path';
-import {exec} from 'shelljs';
-import {ReleaseConfig} from '../dev-infra/release/config';
-
-/** Configuration for the `ng-dev release` command. */
-export const release: ReleaseConfig = {
-  npmPackages: [
-    '@angular/animations',
-    '@angular/bazel',
-    '@angular/common',
-    '@angular/compiler',
-    '@angular/compiler-cli',
-    '@angular/core',
-    '@angular/elements',
-    '@angular/forms',
-    '@angular/language-service',
-    '@angular/localize',
-    '@angular/platform-browser',
-    '@angular/platform-browser-dynamic',
-    '@angular/platform-server',
-    '@angular/platform-webworker',
-    '@angular/platform-webworker-dynamic',
-    '@angular/router',
-    '@angular/service-worker',
-    '@angular/upgrade',
-  ],
-  // TODO: Implement release package building here.
-  buildPackages: async () => [],
-  // TODO: This can be removed once there is a org-wide tool for changelog generation.
-  generateReleaseNotesForHead: async () => {
-    exec('yarn -s gulp changelog', {cwd: join(__dirname, '../')});
-  },
-};

.pullapprove.yml

@@ -67,25 +67,6 @@ version: 3
 # Meta field that goes unused by PullApprove to allow for defining aliases to be
 # used throughout the config.
 meta:
-  # The following groups have no file based conditions and will be initially `active` on all PRs
-  # - `global-approvers`
-  # - `global-docs-approvers`
-  # - `required-minimum-review`
-  #
-  # By checking the number of active/pending/rejected groups when these are excluded, we can determine
-  # if any other groups are matched.
-  #
-  # Note: Because all inactive groups start as pending, we are only checking pending and rejected active groups.
-  #
-  # Also note that the ordering of groups matters in this file. The only groups visible to the current
-  # one are those that appear above it.
-  no-groups-above-this-pending: &no-groups-above-this-pending
-    len(groups.active.pending.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
-  no-groups-above-this-rejected: &no-groups-above-this-rejected
-    len(groups.active.rejected.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
-  no-groups-above-this-active: &no-groups-above-this-active
-    len(groups.active.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0
-
   can-be-global-approved: &can-be-global-approved "\"global-approvers\" not in groups.approved"
   can-be-global-docs-approved: &can-be-global-docs-approved "\"global-docs-approvers\" not in groups.approved"
   defaults: &defaults
@@ -115,6 +96,55 @@ pullapprove_conditions:
 
 
 groups:
+  # =========================================================
+  # Require review on all PRs
+  #
+  # All PRs require at least one review.  This rule will not
+  # request any reviewers, however will require that at least
+  # one review is provided before the group is satisfied.
+  # =========================================================
+  required-minimum-review:
+    reviews:
+      request: 0 # Do not request any reviews from the reviewer group
+      required: 1 # Require that all PRs have approval from at least one of the users in the group
+      author_value: 0 # The author of the PR cannot provide an approval for themself
+    reviewers:
+      users:
+         - aikidave                # Dave Shevitz
+         - alan-agius4             # Alan Agius
+         - alxhub                  # Alex Rickabaugh
+         - AndrewKushnir           # Andrew Kushnir
+         - andrewseguin            # Andrew Seguin
+         - atscott                 # Andrew Scott
+         - ayazhafiz               # Ayaz Hafiz
+         - clydin                  # Charles Lyding
+         - crisbeto                # Kristiyan Kostadinov
+         - dennispbrown            # Denny Brown
+         - devversion              # Paul Gschwendtner
+         - dgp1130                 # Doug Parker
+         - filipesilva             # Filipe Silva
+         - gkalpak                 # Georgios Kalpakas
+         - gregmagolan             # Greg Magolan
+         - IgorMinar               # Igor Minar
+         - jbogarthyde             # Judy Bogart
+         - jelbourn                # Jeremy Elbourn
+         - JiaLiPassion            # Jia Li
+         - JoostK                  # Joost Koehoorn
+         - josephperrott           # Joey Perrott
+         - juleskremer             # Jules Kremer
+         - kapunahelewong          # Kapunahele Wong
+         - kara                    # Kara Erickson
+         - kyliau                  # Keen Yee Liau
+         - manughub                # Manu Murthy
+         - matsko                  # Matias Niemela
+         - mgechev                 # Minko Gechev
+         - mhevery                 # Miško Hevery
+         - michaelprentice         # Michael Prentice
+         - mmalerba                # Miles Malerba
+         - petebacondarwin         # Pete Bacon Darwin
+         - pkozlowski-opensource   # Pawel Kozlowski
+         - StephenFluin            # Stephen Fluin
+
   # =========================================================
   #  Global Approvers
   #
@@ -151,57 +181,6 @@ groups:
       required: 1
       reviewed_for: required
 
-  # =========================================================
-  # Require review on all PRs
-  #
-  # All PRs require at least one review.  This rule will not
-  # request any reviewers, however will require that at least
-  # one review is provided before the group is satisfied.
-  # =========================================================
-  required-minimum-review:
-    conditions:
-      - *can-be-global-approved
-      - *can-be-global-docs-approved
-    reviews:
-      request: 0 # Do not request any reviews from the reviewer group
-      required: 1 # Require that all PRs have approval from at least one of the users in the group
-      author_value: 0 # The author of the PR cannot provide an approval for themself
-    reviewers:
-      users:
-         - aikidave                # Dave Shevitz
-         - alan-agius4             # Alan Agius
-         - alxhub                  # Alex Rickabaugh
-         - AndrewKushnir           # Andrew Kushnir
-         - andrewseguin            # Andrew Seguin
-         - atscott                 # Andrew Scott
-         - ayazhafiz               # Ayaz Hafiz
-         - clydin                  # Charles Lyding
-         - crisbeto                # Kristiyan Kostadinov
-         - dennispbrown            # Denny Brown
-         - devversion              # Paul Gschwendtner
-         - dgp1130                 # Doug Parker
-         - filipesilva             # Filipe Silva
-         - gkalpak                 # Georgios Kalpakas
-         - gregmagolan             # Greg Magolan
-         - IgorMinar               # Igor Minar
-         - jbogarthyde             # Judy Bogart
-         - jelbourn                # Jeremy Elbourn
-         - JiaLiPassion            # Jia Li
-         - JoostK                  # Joost Koehoorn
-         - josephperrott           # Joey Perrott
-         - juleskremer             # Jules Kremer
-         - kapunahelewong          # Kapunahele Wong
-         - kara                    # Kara Erickson
-         - kyliau                  # Keen Yee Liau
-         - manughub                # Manu Murthy
-         - mgechev                 # Minko Gechev
-         - mhevery                 # Miško Hevery
-         - mmalerba                # Miles Malerba
-         - petebacondarwin         # Pete Bacon Darwin
-         - pkozlowski-opensource   # Pawel Kozlowski
-         - Splaktar                # Michael Prentice
-         - StephenFluin            # Stephen Fluin
-
   # =========================================================
   #  Framework: Animations
   # =========================================================
@@ -224,9 +203,7 @@ groups:
           ])
     reviewers:
       users:
-        - crisbeto
+        - matsko
-        - IgorMinar
-        - jelbourn
 
 
   # =========================================================
@@ -284,7 +261,7 @@ groups:
       users:
         - alxhub
         - crisbeto
-        # OOO as of 2020-09-28 - devversion
+        - devversion
 
 
   # =========================================================
@@ -335,7 +312,6 @@ groups:
           'aio/content/images/guide/dependency-injection-in-action/**',
           'aio/content/guide/dependency-injection-navtree.md',
           'aio/content/guide/dependency-injection-providers.md',
-          'aio/content/guide/lightweight-injection-tokens.md',
           'aio/content/guide/displaying-data.md',
           'aio/content/examples/displaying-data/**',
           'aio/content/images/guide/displaying-data/**',
@@ -366,38 +342,26 @@ groups:
           'aio/content/guide/ngmodule-vs-jsmodule.md',
           'aio/content/guide/module-types.md',
           'aio/content/guide/template-syntax.md',
-          'aio/content/guide/built-in-template-functions.md',
           'aio/content/examples/built-in-template-functions/**',
-          'aio/content/guide/event-binding.md',
           'aio/content/examples/event-binding/**',
-          'aio/content/guide/interpolation.md',
           'aio/content/examples/interpolation/**',
           'aio/content/examples/template-syntax/**',
           'aio/content/images/guide/template-syntax/**',
-          'aio/content/guide/binding-syntax.md',
           'aio/content/examples/binding-syntax/**',
-          'aio/content/guide/property-binding.md',
           'aio/content/examples/property-binding/**',
-          'aio/content/guide/attribute-binding.md',
           'aio/content/examples/attribute-binding/**',
-          'aio/content/guide/two-way-binding.md',
           'aio/content/examples/two-way-binding/**',
-          'aio/content/guide/built-in-directives.md',
           'aio/content/examples/built-in-directives/**',
           'aio/content/images/guide/built-in-directives/**',
-          'aio/content/guide/template-reference-variables.md',
           'aio/content/examples/template-reference-variables/**',
-          'aio/content/guide/inputs-outputs.md',
           'aio/content/examples/inputs-outputs/**',
           'aio/content/images/guide/inputs-outputs/**',
-          'aio/content/guide/template-expression-operators.md',
           'aio/content/examples/template-expression-operators/**',
           'aio/content/guide/pipes.md',
           'aio/content/examples/pipes/**',
           'aio/content/images/guide/pipes/**',
           'aio/content/guide/providers.md',
           'aio/content/examples/providers/**',
-          'aio/content/images/guide/providers/**',
           'aio/content/guide/singleton-services.md',
           'aio/content/guide/set-document-title.md',
           'aio/content/examples/set-document-title/**',
@@ -405,9 +369,7 @@ groups:
           'aio/content/guide/sharing-ngmodules.md',
           'aio/content/guide/structural-directives.md',
           'aio/content/examples/structural-directives/**',
-          'aio/content/guide/svg-in-templates.md',
           'aio/content/images/guide/structural-directives/**',
-          'aio/content/guide/template-statements.md',
           'aio/content/guide/user-input.md',
           'aio/content/examples/user-input/**',
           'aio/content/images/guide/user-input/**'
@@ -419,7 +381,7 @@ groups:
         - atscott
         - ~kara  # do not request reviews from Kara, but allow her to approve PRs
         - mhevery
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
 
 
   # =========================================================
@@ -509,8 +471,8 @@ groups:
       - >
         contains_any_globs(files, [
           'packages/core/src/i18n/**',
-          'packages/core/src/render3/i18n/**',
+          'packages/core/src/render3/i18n.ts',
-          'packages/core/src/render3/instructions/i18n.ts',
+          'packages/core/src/render3/i18n.md',
           'packages/core/src/render3/interfaces/i18n.ts',
           'packages/common/locales/**',
           'packages/common/src/i18n/**',
@@ -566,7 +528,6 @@ groups:
           'packages/examples/router/**',
           'aio/content/guide/router.md',
           'aio/content/guide/router-tutorial.md',
-          'aio/content/guide/router-tutorial-toh.md',
           'aio/content/examples/router-tutorial/**',
           'aio/content/examples/router/**',
           'aio/content/images/guide/router/**'
@@ -647,14 +608,6 @@ groups:
         contains_any_globs(files.exclude('packages/compiler-cli/**'), [
           '**/testing/**',
           'aio/content/guide/testing.md',
-          'aio/content/guide/test-debugging.md',
-          'aio/content/guide/testing-attribute-directives.md',
-          'aio/content/guide/testing-code-coverage.md',
-          'aio/content/guide/testing-components-basics.md',
-          'aio/content/guide/testing-components-scenarios.md',
-          'aio/content/guide/testing-pipes.md',
-          'aio/content/guide/testing-services.md',
-          'aio/content/guide/testing-utility-apis.md',
           'aio/content/examples/testing/**',
           'aio/content/images/guide/testing/**'
           ])
@@ -662,7 +615,7 @@ groups:
       users:
         - AndrewKushnir
         - IgorMinar
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
 
 
   # =========================================================
@@ -679,7 +632,7 @@ groups:
     reviewers:
       users:
         - IgorMinar
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
 
 
   # =========================================================
@@ -697,7 +650,7 @@ groups:
       users:
         - IgorMinar
         - jelbourn
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
 
 
   # =========================================================
@@ -723,7 +676,7 @@ groups:
         - IgorMinar
         - mhevery
         - jelbourn
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
     reviews:
       request: -1   # request reviews from everyone
       required: 2   # require at least 2 approvals
@@ -787,21 +740,6 @@ groups:
         - JiaLiPassion
         - mhevery
 
-  # =========================================================
-  #  in-memory-web-api
-  # =========================================================
-  in-memory-web-api:
-    conditions:
-      - *can-be-global-approved
-      - *can-be-global-docs-approved
-      - >
-        contains_any_globs(files, [
-          'packages/misc/angular-in-memory-web-api/**',
-          ])
-    reviewers:
-      users:
-        - IgorMinar
-        - crisbeto
 
   # =========================================================
   #  Benchpress
@@ -882,7 +820,6 @@ groups:
       - *can-be-global-docs-approved
       - >
         contains_any_globs(files, [
-          'aio/content/guide/roadmap.md',
           'aio/content/marketing/**',
           'aio/content/images/bios/**',
           'aio/content/images/marketing/**',
@@ -1099,7 +1036,7 @@ groups:
     conditions:
       - *can-be-global-approved
       - >
-        contains_any_globs(files.exclude("CHANGELOG.md").exclude("packages/compiler-cli/**/BUILD.bazel"), [
+        contains_any_globs(files.exclude("CHANGELOG.md"), [
           '*',
           '.circleci/**',
           '.devcontainer/**',
@@ -1110,7 +1047,6 @@ groups:
           'dev-infra/**',
           'docs/BAZEL.md',
           'docs/CARETAKER.md',
-          'docs/CODING_STANDARDS.md',
           'docs/COMMITTER.md',
           'docs/DEBUG.md',
           'docs/DEBUG_COMPONENTS_REPO_IVY.md',
@@ -1150,7 +1086,7 @@ groups:
           ])
     reviewers:
       users:
-        # OOO as of 2020-09-28 - devversion
+        - devversion
         - filipesilva
         - gkalpak
         - IgorMinar
@@ -1163,8 +1099,6 @@ groups:
   public-api:
     <<: *defaults
     conditions:
-      - *no-groups-above-this-pending
-      - *no-groups-above-this-rejected
       - *can-be-global-approved
       - >
         contains_any_globs(files, [
@@ -1178,16 +1112,13 @@ groups:
           ])
     reviewers:
       users:
-        - AndrewKushnir
-        - IgorMinar
         - alxhub
-        - atscott
+        - IgorMinar
         - jelbourn
-        - petebacondarwin
+        - pkozlowski-opensource
-        # OOO as of 2020-09-28 - pkozlowski-opensource
     reviews:
-      request: 4 # Request reviews from four people
+      request: -1   # request reviews from everyone
-      required: 3 # Require that three people approve
+      required: 3   # require at least 3 approvals
       reviewed_for: required
 
 
@@ -1197,8 +1128,6 @@ groups:
   size-tracking:
     <<: *defaults
     conditions:
-      - *no-groups-above-this-pending
-      - *no-groups-above-this-rejected
       - *can-be-global-approved
       - >
         contains_any_globs(files, [
@@ -1206,16 +1135,13 @@ groups:
           ])
     reviewers:
       users:
-        - AndrewKushnir
-        - IgorMinar
         - alxhub
-        - atscott
+        - IgorMinar
         - jelbourn
-        - petebacondarwin
+        - pkozlowski-opensource
-        # OOO as of 2020-09-28 - pkozlowski-opensource
     reviews:
-      request: 4 # Request reviews from four people
+      request: -1   # request reviews from everyone
-      required: 2 # Require that two people approve
+      required: 2   # require at least 2 approvals
       reviewed_for: required
 
 
@@ -1225,8 +1151,6 @@ groups:
   circular-dependencies:
     <<: *defaults
     conditions:
-      - *no-groups-above-this-pending
-      - *no-groups-above-this-rejected
       - *can-be-global-approved
       - >
         contains_any_globs(files, [
@@ -1234,13 +1158,10 @@ groups:
         ])
     reviewers:
       users:
-        - AndrewKushnir
         - IgorMinar
-        - alxhub
-        - atscott
         - jelbourn
-        - petebacondarwin
+        - josephperrott
-        # OOO as of 2020-09-28 - pkozlowski-opensource
+        - pkozlowski-opensource
 
 
 ####################################################################################
@@ -1260,13 +1181,7 @@ groups:
           ])
     reviewers:
       users:
-        - AndrewKushnir
         - IgorMinar
-        - alxhub
-        - atscott
-        - jelbourn
-        - josephperrott
-        - mhevery
 
 
   # ====================================================
@@ -1293,10 +1208,13 @@ groups:
     # `global-approvers` can still approve PRs that match this `fallback` rule,
     # but that should be an exception and not an expectation.
     conditions:
-      - *no-groups-above-this-active
-      # When any of the `global-*` groups is approved, they cause other groups to deactivate.
-      # In those cases, the condition above would evaluate to `true` while in reality, only a global
-      # approval has been provided. To ensure we don't activate the fallback group in such cases,
-      # ensure that no explicit global approval has been provided.
       - *can-be-global-approved
-      - *can-be-global-docs-approved
+      # The following groups have no conditions and will be `active` on all PRs
+      # - `global-approvers`
+      # - `global-docs-approvers`
+      #
+      # Since this means the minimum number of active groups a PR can have is 2, this
+      # `fallback` group should be matched anytime the number of active groups is at or
+      # below this minimum.  This work as a protection to ensure that pullapprove does
+      # not incidently mark a PR as passing without meeting the review criteria.
+      - len(groups.active) <= 2

.vscode/recommended-settings.json

@@ -26,7 +26,6 @@
     "**/bazel-out": true,
     "**/dist": true,
     "**/aio/src/generated": true,
-    ".history": true,
   },
   "git.ignoreLimitWarning": true,
-}
+}

.yarn/releases/yarn-1.22.4.js

@@ -44654,7 +44654,7 @@ const FOLDERS_IGNORE = [
 const DEFAULT_IGNORE = (0, (_filter || _load_filter()).ignoreLinesToRegex)([...FOLDERS_IGNORE,
 
 // ignore cruft
-'yarn.lock', '.lock-wscript', '.wafpickle-{0..9}', '*.swp', '._*', 'npm-debug.log', 'yarn-error.log', '.npmrc', '.yarnrc', '.yarnrc.yml', '.npmignore', '.gitignore', '.DS_Store']);
+'yarn.lock', '.lock-wscript', '.wafpickle-{0..9}', '*.swp', '._*', 'npm-debug.log', 'yarn-error.log', '.npmrc', '.yarnrc', '.npmignore', '.gitignore', '.DS_Store']);
 
 const NEVER_IGNORE = (0, (_filter || _load_filter()).ignoreLinesToRegex)([
 // never ignore these files
@@ -44663,7 +44663,6 @@ const NEVER_IGNORE = (0, (_filter || _load_filter()).ignoreLinesToRegex)([
 function packWithIgnoreAndHeaders(cwd, ignoreFunction, { mapHeader } = {}) {
   return tar.pack(cwd, {
     ignore: ignoreFunction,
-    sort: true,
     map: header => {
       const suffix = header.name === '.' ? '' : `/${header.name}`;
       header.name = `package${suffix}`;
@@ -46679,7 +46678,7 @@ function mkdirfix (name, opts, cb) {
 /* 194 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"yarn","installationMethod":"unknown","version":"1.22.5","license":"BSD-2-Clause","preferGlobal":true,"description":"📦🐈 Fast, reliable, and secure dependency management.","dependencies":{"@zkochan/cmd-shim":"^3.1.0","babel-runtime":"^6.26.0","bytes":"^3.0.0","camelcase":"^4.0.0","chalk":"^2.1.0","cli-table3":"^0.4.0","commander":"^2.9.0","death":"^1.0.0","debug":"^3.0.0","deep-equal":"^1.0.1","detect-indent":"^5.0.0","dnscache":"^1.0.1","glob":"^7.1.1","gunzip-maybe":"^1.4.0","hash-for-dep":"^1.2.3","imports-loader":"^0.8.0","ini":"^1.3.4","inquirer":"^6.2.0","invariant":"^2.2.0","is-builtin-module":"^2.0.0","is-ci":"^1.0.10","is-webpack-bundle":"^1.0.0","js-yaml":"^3.13.1","leven":"^2.0.0","loud-rejection":"^1.2.0","micromatch":"^2.3.11","mkdirp":"^0.5.1","node-emoji":"^1.6.1","normalize-url":"^2.0.0","npm-logical-tree":"^1.2.1","object-path":"^0.11.2","proper-lockfile":"^2.0.0","puka":"^1.0.0","read":"^1.0.7","request":"^2.87.0","request-capture-har":"^1.2.2","rimraf":"^2.5.0","semver":"^5.1.0","ssri":"^5.3.0","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","tar-fs":"^1.16.0","tar-stream":"^1.6.1","uuid":"^3.0.1","v8-compile-cache":"^2.0.0","validate-npm-package-license":"^3.0.4","yn":"^2.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.2.3","babel-loader":"^6.2.5","babel-plugin-array-includes":"^2.0.3","babel-plugin-inline-import":"^3.0.0","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-inline-imports-commonjs":"^1.0.0","babel-plugin-transform-runtime":"^6.4.3","babel-preset-env":"^1.6.0","babel-preset-flow":"^6.23.0","babel-preset-stage-0":"^6.0.0","babylon":"^6.5.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","eslint":"^4.3.0","eslint-config-fb-strict":"^22.0.0","eslint-plugin-babel":"^5.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-jasmine":"^2.6.2","eslint-plugin-jest":"^21.0.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-prettier":"^2.1.2","eslint-plugin-react":"^7.1.0","eslint-plugin-relay":"^0.0.28","eslint-plugin-yarn-internal":"file:scripts/eslint-rules","execa":"^0.11.0","fancy-log":"^1.3.2","flow-bin":"^0.66.0","git-release-notes":"^3.0.0","gulp":"^4.0.0","gulp-babel":"^7.0.0","gulp-if":"^2.0.1","gulp-newer":"^1.0.0","gulp-plumber":"^1.0.1","gulp-sourcemaps":"^2.2.0","jest":"^22.4.4","jsinspect":"^0.12.6","minimatch":"^3.0.4","mock-stdin":"^0.3.0","prettier":"^1.5.2","string-replace-loader":"^2.1.1","temp":"^0.8.3","webpack":"^2.1.0-beta.25","yargs":"^6.3.0"},"resolutions":{"sshpk":"^1.14.2"},"engines":{"node":">=4.0.0"},"repository":"yarnpkg/yarn","bin":{"yarn":"./bin/yarn.js","yarnpkg":"./bin/yarn.js"},"scripts":{"build":"gulp build","build-bundle":"node ./scripts/build-webpack.js","build-chocolatey":"powershell ./scripts/build-chocolatey.ps1","build-deb":"./scripts/build-deb.sh","build-dist":"bash ./scripts/build-dist.sh","build-win-installer":"scripts\\build-windows-installer.bat","changelog":"git-release-notes $(git describe --tags --abbrev=0 $(git describe --tags --abbrev=0)^)..$(git describe --tags --abbrev=0) scripts/changelog.md","dupe-check":"yarn jsinspect ./src","lint":"eslint . && flow check","pkg-tests":"yarn --cwd packages/pkg-tests jest yarn.test.js","prettier":"eslint src __tests__ --fix","release-branch":"./scripts/release-branch.sh","test":"yarn lint && yarn test-only","test-only":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --verbose","test-only-debug":"node --inspect-brk --max_old_space_size=4096 node_modules/jest/bin/jest.js --runInBand --verbose","test-coverage":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --coverage --verbose","watch":"gulp watch","commit":"git-cz"},"jest":{"collectCoverageFrom":["src/**/*.js"],"testEnvironment":"node","modulePathIgnorePatterns":["__tests__/fixtures/","packages/pkg-tests/pkg-tests-fixtures","dist/"],"testPathIgnorePatterns":["__tests__/(fixtures|__mocks__)/","updates/","_(temp|mock|install|init|helpers).js$","packages/pkg-tests"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}}
+module.exports = {"name":"yarn","installationMethod":"unknown","version":"1.22.4","license":"BSD-2-Clause","preferGlobal":true,"description":"📦🐈 Fast, reliable, and secure dependency management.","dependencies":{"@zkochan/cmd-shim":"^3.1.0","babel-runtime":"^6.26.0","bytes":"^3.0.0","camelcase":"^4.0.0","chalk":"^2.1.0","cli-table3":"^0.4.0","commander":"^2.9.0","death":"^1.0.0","debug":"^3.0.0","deep-equal":"^1.0.1","detect-indent":"^5.0.0","dnscache":"^1.0.1","glob":"^7.1.1","gunzip-maybe":"^1.4.0","hash-for-dep":"^1.2.3","imports-loader":"^0.8.0","ini":"^1.3.4","inquirer":"^6.2.0","invariant":"^2.2.0","is-builtin-module":"^2.0.0","is-ci":"^1.0.10","is-webpack-bundle":"^1.0.0","js-yaml":"^3.13.1","leven":"^2.0.0","loud-rejection":"^1.2.0","micromatch":"^2.3.11","mkdirp":"^0.5.1","node-emoji":"^1.6.1","normalize-url":"^2.0.0","npm-logical-tree":"^1.2.1","object-path":"^0.11.2","proper-lockfile":"^2.0.0","puka":"^1.0.0","read":"^1.0.7","request":"^2.87.0","request-capture-har":"^1.2.2","rimraf":"^2.5.0","semver":"^5.1.0","ssri":"^5.3.0","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","tar-fs":"^1.16.0","tar-stream":"^1.6.1","uuid":"^3.0.1","v8-compile-cache":"^2.0.0","validate-npm-package-license":"^3.0.4","yn":"^2.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.2.3","babel-loader":"^6.2.5","babel-plugin-array-includes":"^2.0.3","babel-plugin-inline-import":"^3.0.0","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-inline-imports-commonjs":"^1.0.0","babel-plugin-transform-runtime":"^6.4.3","babel-preset-env":"^1.6.0","babel-preset-flow":"^6.23.0","babel-preset-stage-0":"^6.0.0","babylon":"^6.5.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","eslint":"^4.3.0","eslint-config-fb-strict":"^22.0.0","eslint-plugin-babel":"^5.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-jasmine":"^2.6.2","eslint-plugin-jest":"^21.0.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-prettier":"^2.1.2","eslint-plugin-react":"^7.1.0","eslint-plugin-relay":"^0.0.28","eslint-plugin-yarn-internal":"file:scripts/eslint-rules","execa":"^0.11.0","fancy-log":"^1.3.2","flow-bin":"^0.66.0","git-release-notes":"^3.0.0","gulp":"^4.0.0","gulp-babel":"^7.0.0","gulp-if":"^2.0.1","gulp-newer":"^1.0.0","gulp-plumber":"^1.0.1","gulp-sourcemaps":"^2.2.0","jest":"^22.4.4","jsinspect":"^0.12.6","minimatch":"^3.0.4","mock-stdin":"^0.3.0","prettier":"^1.5.2","string-replace-loader":"^2.1.1","temp":"^0.8.3","webpack":"^2.1.0-beta.25","yargs":"^6.3.0"},"resolutions":{"sshpk":"^1.14.2"},"engines":{"node":">=4.0.0"},"repository":"yarnpkg/yarn","bin":{"yarn":"./bin/yarn.js","yarnpkg":"./bin/yarn.js"},"scripts":{"build":"gulp build","build-bundle":"node ./scripts/build-webpack.js","build-chocolatey":"powershell ./scripts/build-chocolatey.ps1","build-deb":"./scripts/build-deb.sh","build-dist":"bash ./scripts/build-dist.sh","build-win-installer":"scripts\\build-windows-installer.bat","changelog":"git-release-notes $(git describe --tags --abbrev=0 $(git describe --tags --abbrev=0)^)..$(git describe --tags --abbrev=0) scripts/changelog.md","dupe-check":"yarn jsinspect ./src","lint":"eslint . && flow check","pkg-tests":"yarn --cwd packages/pkg-tests jest yarn.test.js","prettier":"eslint src __tests__ --fix","release-branch":"./scripts/release-branch.sh","test":"yarn lint && yarn test-only","test-only":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --verbose","test-only-debug":"node --inspect-brk --max_old_space_size=4096 node_modules/jest/bin/jest.js --runInBand --verbose","test-coverage":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --coverage --verbose","watch":"gulp watch","commit":"git-cz"},"jest":{"collectCoverageFrom":["src/**/*.js"],"testEnvironment":"node","modulePathIgnorePatterns":["__tests__/fixtures/","packages/pkg-tests/pkg-tests-fixtures","dist/"],"testPathIgnorePatterns":["__tests__/(fixtures|__mocks__)/","updates/","_(temp|mock|install|init|helpers).js$","packages/pkg-tests"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}}
 
 /***/ }),
 /* 195 */
@@ -98339,7 +98338,7 @@ var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).def
 
       const bundle = yield fetchBundle(config, bundleUrl);
 
-      const yarnPath = path.resolve(config.lockfileFolder, `.yarn/releases/yarn-${bundleVersion}.cjs`);
+      const yarnPath = path.resolve(config.lockfileFolder, `.yarn/releases/yarn-${bundleVersion}.js`);
       reporter.log(`Saving it into ${chalk.magenta(yarnPath)}...`);
       yield (_fs || _load_fs()).mkdirp(path.dirname(yarnPath));
       yield (_fs || _load_fs()).writeFile(yarnPath, bundle);
@@ -100191,7 +100190,7 @@ let main = exports.main = (() => {
 
     const config = new (_config || _load_config()).default(reporter);
     const outputWrapperEnabled = (0, (_conversion || _load_conversion()).boolifyWithDefault)(process.env.YARN_WRAP_OUTPUT, true);
-    const shouldWrapOutput = outputWrapperEnabled && !(_commander || _load_commander()).default.json && command.hasWrapper((_commander || _load_commander()).default, (_commander || _load_commander()).default.args) && !(commandName === 'init' && (_commander || _load_commander()).default[`2`]);
+    const shouldWrapOutput = outputWrapperEnabled && !(_commander || _load_commander()).default.json && command.hasWrapper((_commander || _load_commander()).default, (_commander || _load_commander()).default.args);
 
     if (shouldWrapOutput) {
       reporter.header(commandName, { name: 'yarn', version: (_yarnVersion || _load_yarnVersion()).version });
@@ -100605,7 +100604,7 @@ let start = (() => {
       });
 
       try {
-        if (/\.[cm]?js$/.test(yarnPath)) {
+        if (yarnPath.endsWith(`.js`)) {
           exitCode = yield (0, (_child || _load_child()).spawnp)(process.execPath, [yarnPath, ...argv], opts);
         } else {
           exitCode = yield (0, (_child || _load_child()).spawnp)(yarnPath, argv, opts);

.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.22.5.js"
+yarn-path ".yarn/releases/yarn-1.22.4.js"

BUILD.bazel

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

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 # Contributing to Angular
 
-We would love for you to contribute to Angular and help make it even better than it is today!
+We would love for you to contribute to Angular and help make it even better than it is
-As a contributor, here are the guidelines we would like you to follow:
+today! As a contributor, here are the guidelines we would like you to follow:
 
  - [Code of Conduct](#coc)
  - [Question or Problem?](#question)
@@ -12,17 +12,12 @@ As a contributor, here are the guidelines we would like you to follow:
  - [Commit Message Guidelines](#commit)
  - [Signing the CLA](#cla)
 
-
 ## <a name="coc"></a> Code of Conduct
-
+Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][coc].
-Help us keep Angular open and inclusive.
-Please read and follow our [Code of Conduct][coc].
-
 
 ## <a name="question"></a> Got a Question or Problem?
 
-Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests.
+Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
-Instead, we recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) to ask support-related questions. When creating a new question on Stack Overflow, make sure to add the `angular` tag.
 
 Stack Overflow is a much better place to ask questions since:
 
@@ -34,41 +29,35 @@ To save your and our time, we will systematically close all issues that are requ
 
 If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter].
 
-
 ## <a name="issue"></a> Found a Bug?
-
+If you find a bug in the source code, you can help us by
-If you find a bug in the source code, you can help us by [submitting an issue](#submit-issue) to our [GitHub Repository][github].
+[submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can
-Even better, you can [submit a Pull Request](#submit-pr) with a fix.
+[submit a Pull Request](#submit-pr) with a fix.
-
 
 ## <a name="feature"></a> Missing a Feature?
-You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub Repository.
+You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub
-If you would like to *implement* a new feature, please consider the size of the change in order to determine the right steps to proceed:
+Repository. If you would like to *implement* a new feature, please submit an issue with
-
+a proposal for your work first, to be sure that we can use it.
-* For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed.
+Please consider what kind of change it is:
-  This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
-
-  **Note**: Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature.
 
+* For a **Major Feature**, first open an issue and outline your proposal so that it can be
+discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
+and help you to craft the change so that it is successfully accepted into the project. **Note**:
+Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major
+feature.
 * **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
 
-
 ## <a name="submit"></a> Submission Guidelines
 
-
 ### <a name="submit-issue"></a> Submitting an Issue
 
 Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
 
-We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it.
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction. Having a minimal reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions.
-In order to reproduce bugs, we require that you provide a minimal reproduction.
-Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions.
 
 A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
 
-We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs.
+We will be insisting on a minimal reproduction scenario in order to save maintainers' time and ultimately be able to fix more bugs. Interestingly, from our experience, users often find coding problems themselves while preparing a minimal reproduction. We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it.
-Often, developers find coding problems themselves while preparing a minimal reproduction.
-We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it.
 
 Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced.
 
@@ -76,66 +65,56 @@ You can file new issues by selecting from our [new issue templates](https://gith
 
 
 ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
-
 Before you submit your Pull Request (PR) consider the following guidelines:
 
-1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR that relates to your submission.
+1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
-   You don't want to duplicate existing efforts.
+  that relates to your submission. You don't want to duplicate effort.
-
+1. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add.
-2. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add.
+  Discussing the design upfront helps to ensure that we're ready to accept your work.
-   Discussing the design upfront helps to ensure that we're ready to accept your work.
+1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
-
+  We cannot accept code without this. Make sure you sign with the primary email address of the Git identity that has been granted access to the Angular repository.
-3. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
+1. Fork the angular/angular repo.
-   We cannot accept code without a signed CLA.
+1. Make your changes in a new git branch:
-   Make sure you author all contributed Git commits with email address associated with your CLA signature.
-
-4. Fork the angular/angular repo.
-
-5. Make your changes in a new git branch:
 
      ```shell
      git checkout -b my-fix-branch master
      ```
 
-6. Create your patch, **including appropriate test cases**.
+1. Create your patch, **including appropriate test cases**.
-
+1. Follow our [Coding Rules](#rules).
-7. Follow our [Coding Rules](#rules).
+1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
-
+  and ensure that all tests pass.
-8. Run the full Angular test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass.
+1. Commit your changes using a descriptive commit message that follows our
-
+  [commit message conventions](#commit). Adherence to these conventions is necessary because release notes are automatically generated from these messages.
-9. Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit).
-   Adherence to these conventions is necessary because release notes are automatically generated from these messages.
 
      ```shell
      git commit -a
      ```
     Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
 
-10. Push your branch to GitHub:
+1. Push your branch to GitHub:
 
     ```shell
     git push origin my-fix-branch
     ```
 
-11. In GitHub, send a pull request to `angular:master`.
+1. In GitHub, send a pull request to `angular:master`.
+* If we suggest changes then:
+  * Make the required updates.
+  * Re-run the Angular test suites to ensure tests are still passing.
+  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
 
-   If we ask for changes via code reviews then:
+    ```shell
-
+    git rebase master -i
-   * Make the required updates.
+    git push -f
-   * Re-run the Angular test suites to ensure tests are still passing.
+    ```
-   * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
-
-      ```shell
-      git rebase master -i
-      git push -f
-      ```
 
 That's it! Thank you for your contribution!
 
-
 #### After your pull request is merged
 
-After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository:
+After your pull request is merged, you can safely delete your branch and pull the changes
+from the main (upstream) repository:
 
 * Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
 
@@ -161,66 +140,55 @@ After your pull request is merged, you can safely delete your branch and pull th
     git pull --ff upstream master
     ```
 
-
 ## <a name="rules"></a> Coding Rules
 To ensure consistency throughout the source code, keep these rules in mind as you are working:
 
 * All features or bug fixes **must be tested** by one or more specs (unit-tests).
-* All public API methods **must be documented**.
+* All public API methods **must be documented**. (Details TBC).
-* We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at **100 characters**.
+* We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at
+  **100 characters**. An automated formatter is available, see
+  [DEVELOPER.md](docs/DEVELOPER.md#clang-format).
 
-   An automated formatter is available, see [DEVELOPER.md](docs/DEVELOPER.md#clang-format).
+## <a name="commit"></a> Commit Message Guidelines
 
+We have very precise rules over how our git commit messages can be formatted.  This leads to **more
+readable messages** that are easy to follow when looking through the **project history**.  But also,
+we use the git commit messages to **generate the Angular change log**.
 
-## <a name="commit"></a> Commit Message Format
+### Commit Message Format
-
+Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special
-*This specification is inspired and supersedes the [AngularJS commit message format][commit-message-format].*
+format that includes a **type**, a **scope** and a **subject**:
-
-We have very precise rules over how our Git commit messages must be formatted.
-This format leads to **easier to read commit history**.
-
-Each commit message consists of a **header**, a **body**, and a **footer**.
-
 
 ```
-<header>
+<type>(<scope>): <subject>
 <BLANK LINE>
 <body>
 <BLANK LINE>
 <footer>
 ```
 
-The `header` is mandatory and must conform to the [Commit Message Header](#commit-header) format.
+The **header** is mandatory and the **scope** of the header is optional.
 
-The `body` is mandatory for all commits except for those of scope "docs".
+Any line of the commit message cannot be longer than 100 characters! This allows the message to be easier
-When the body is required it must be at least 20 characters long.
+to read on GitHub as well as in various git tools.
 
-The `footer` is optional.
+The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
 
-Any line of the commit message cannot be longer than 100 characters.
+Samples: (even more [samples](https://github.com/angular/angular/commits/master))
-
-
-#### <a href="commit-header"></a>Commit Message Header
 
 ```
-<type>(<scope>): <short summary>
+docs(changelog): update changelog to beta.5
-  │       │             │
+```
-  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
+```
-  │       │
+fix(release): need to depend on the latest rxjs and zone.js
-  │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
+
-  │                          elements|forms|http|language-service|localize|platform-browser|
+The version in our package.json gets copied to the one we publish, and users need the latest of these.
-  │                          platform-browser-dynamic|platform-server|platform-webworker|
-  │                          platform-webworker-dynamic|router|service-worker|upgrade|zone.js|
-  │                          packaging|changelog|dev-infra|docs-infra|migrations|ngcc|ve
-  │
-  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
 ```
 
-The `<type>` and `<summary>` fields are mandatory, the `(<scope>)` field is optional.
+### Revert
-
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-##### Type
 
+### Type
 Must be one of the following:
 
 * **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
@@ -230,97 +198,70 @@ Must be one of the following:
 * **fix**: A bug fix
 * **perf**: A code change that improves performance
 * **refactor**: A code change that neither fixes a bug nor adds a feature
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 * **test**: Adding missing tests or correcting existing tests
 
-
+### Scope
-##### Scope
 The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages).
 
 The following is the list of supported scopes:
 
-* `animations`
+* **animations**
-* `bazel`
+* **bazel**
-* `benchpress`
+* **benchpress**
-* `common`
+* **common**
-* `compiler`
+* **compiler**
-* `compiler-cli`
+* **compiler-cli**
-* `core`
+* **core**
-* `elements`
+* **elements**
-* `forms`
+* **forms**
-* `http`
+* **http**
-* `language-service`
+* **language-service**
-* `localize`
+* **localize**
-* `platform-browser`
+* **platform-browser**
-* `platform-browser-dynamic`
+* **platform-browser-dynamic**
-* `platform-server`
+* **platform-server**
-* `platform-webworker`
+* **platform-webworker**
-* `platform-webworker-dynamic`
+* **platform-webworker-dynamic**
-* `router`
+* **router**
-* `service-worker`
+* **service-worker**
-* `upgrade`
+* **upgrade**
-* `zone.js`
+* **zone.js**
 
 There are currently a few exceptions to the "use package name" rule:
 
-* `packaging`: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.
+* **packaging**: used for changes that change the npm package layout in all of our packages, e.g.
+  public path changes, package.json changes done to all packages, d.ts file/format changes, changes
+  to bundles, etc.
+* **changelog**: used for updating the release notes in CHANGELOG.md
+* **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
+  repo
+* **dev-infra**: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
+* **migrations**: used for changes to the `ng update` migrations.
+* **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
+* **ve**: used for changes specific to ViewEngine (legacy compiler/renderer).
+* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
+  packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
+  specific package (e.g. `docs: fix typo in tutorial`).
 
-* `changelog`: used for updating the release notes in CHANGELOG.md
+### Subject
-
+The subject contains a succinct description of the change:
-* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
-
-* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo
-
-* `migrations`: used for changes to the `ng update` migrations.
-
-* `ngcc`: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
-
-* `ve`: used for changes specific to ViewEngine (legacy compiler/renderer).
-
-* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
-
-
-##### Summary
-
-Use the summary field to provide a succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
 * don't capitalize the first letter
 * no dot (.) at the end
 
+### Body
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
 
-#### Commit Message Body
+### Footer
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
 
-Just as in the summary, use the imperative, present tense: "fix" not "fixed" nor "fixes".
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-Explain the motivation for the change in the commit message body. This commit message should explain _why_ you are making the change.
-You can include a comparison of the previous behavior with the new behavior in order to illustrate the impact of the change.
-
-
-#### Commit Message Footer
-
-The footer can contain information about breaking changes and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to.
-
-```
-BREAKING CHANGE: <breaking change summary>
-<BLANK LINE>
-<breaking change description + migration instructions>
-<BLANK LINE>
-<BLANK LINE>
-Fixes #<issue number>
-```
-
-Breaking Change section should start with the phrase "BREAKING CHANGE: " followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions.
-
-
-### Revert commits
-
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit.
-
-The content of the commit message body should contain:
-
-- information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
-- a clear description of the reason for reverting the commit message.
 
+A detailed explanation can be found in this [document][commit-message-format].
 
 ## <a name="cla"></a> Signing the CLA
 
@@ -331,17 +272,18 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 * For corporations, we'll need you to
   [print, sign and one of scan+email, fax or mail the form][corporate-cla].
 
-If you have more than one GitHub accounts, or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests.
+<hr>
 
-The following documents can help you sort out issues with GitHub accounts and multiple email addresses:
+  If you have more than one Git identity, you must make sure that you sign the CLA using the primary email address associated with the ID that has been granted access to the Angular repository. Git identities can be associated with more than one email address, and only one is primary. Here are some links to help you sort out multiple Git identities and email addresses:
 
   * https://help.github.com/articles/setting-your-commit-email-address-in-git/
   * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean
   * https://help.github.com/articles/about-commit-email-addresses/
   * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
 
+  Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA before you commit changes. If not, your PR will fail the CLA check.
 
-
+<hr>
 
 [angular-group]: https://groups.google.com/forum/#!forum/angular
 [coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md

aio/README.md

@@ -6,7 +6,6 @@ Everything in this folder is part of the documentation project. This includes
 * the dgeni configuration for converting source files to rendered files that can be viewed in the web site.
 * the tooling for setting up examples for development; and generating live-example and zip files from the examples.
 
-<a name="developer-tasks"></a>
 ## Developer tasks
 
 We use [Yarn](https://yarnpkg.com) to manage the dependencies and to run build tasks.

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/mock-external-apis.ts

@@ -16,6 +16,13 @@ import {BuildNums, PrNums, SHA} from './constants';
 
 const logger = new Logger('mock-external-apis');
 
+const log = (...args: any[]) => {
+  // Filter out non-matching URL checks
+  if (!/^matching.+: false$/.test(args[0])) {
+    logger.log(...args);
+  }
+};
+
 const AIO_CIRCLE_CI_TOKEN = getEnvVar('AIO_CIRCLE_CI_TOKEN');
 const AIO_GITHUB_TOKEN = getEnvVar('AIO_GITHUB_TOKEN');
 
@@ -84,8 +91,8 @@ const createArchive = (buildNum: number, prNum: number, sha: string) => {
 };
 
 // Create request scopes
-const circleCiApi = nock(CIRCLE_CI_API_HOST).persist();
+const circleCiApi = nock(CIRCLE_CI_API_HOST).log(log).persist();
-const githubApi = nock(GITHUB_API_HOST).persist().matchHeader('Authorization', `token ${AIO_GITHUB_TOKEN}`);
+const githubApi = nock(GITHUB_API_HOST).log(log).persist().matchHeader('Authorization', `token ${AIO_GITHUB_TOKEN}`);
 
 //////////////////////////////
 

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

@@ -27,28 +27,28 @@
     "body-parser": "^1.19.0",
     "delete-empty": "^3.0.0",
     "express": "^4.17.1",
-    "jasmine": "^3.6.1",
+    "jasmine": "^3.5.0",
-    "nock": "^13.0.4",
+    "nock": "^12.0.3",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.0",
     "shelljs": "^0.8.4",
     "source-map-support": "^0.5.19",
-    "tar-stream": "^2.1.3",
+    "tar-stream": "^2.1.2",
-    "tslib": "^2.0.1"
+    "tslib": "^1.11.1"
   },
   "devDependencies": {
     "@types/body-parser": "^1.19.0",
-    "@types/express": "^4.17.8",
+    "@types/express": "^4.17.6",
-    "@types/jasmine": "^3.5.14",
+    "@types/jasmine": "^3.5.10",
     "@types/nock": "^11.1.0",
-    "@types/node": "^14.6.4",
+    "@types/node": "^13.13.2",
     "@types/node-fetch": "^2.5.7",
-    "@types/shelljs": "^0.8.8",
+    "@types/shelljs": "^0.8.7",
-    "@types/supertest": "^2.0.10",
+    "@types/supertest": "^2.0.8",
-    "nodemon": "^2.0.4",
+    "nodemon": "^2.0.3",
     "npm-run-all": "^4.1.5",
     "supertest": "^4.0.2",
-    "tslint": "^6.1.3",
+    "tslint": "^6.1.1",
     "tslint-jasmine-noSkipOrFocus": "^1.0.9",
-    "typescript": "^4.0.2"
+    "typescript": "^3.8.3"
   }
 }

aio/aio-builds-setup/dockerbuild/scripts-js/test/common/github-api.spec.ts

@@ -214,24 +214,23 @@ describe('GithubApi', () => {
     });
 
 
-    it('should call \'https.request()\' with the correct options', async () => {
+    it('should call \'https.request()\' with the correct options', () => {
       const requestHandler = nock('https://api.github.com')
         .intercept('/path', 'method')
         .reply(200);
 
-      await (api as any).request('method', '/path');
+      (api as any).request('method', '/path');
       requestHandler.done();
     });
 
 
-    it('should add the \'Authorization\' header containing the \'githubToken\'', async () => {
+    it('should add the \'Authorization\' header containing the \'githubToken\'', () => {
       const requestHandler = nock('https://api.github.com')
         .intercept('/path', 'method', undefined, {
           reqheaders: {Authorization: 'token 12345'},
         })
         .reply(200);
-
+      (api as any).request('method', '/path');
-      await (api as any).request('method', '/path');
       requestHandler.done();
     });
 
@@ -245,13 +244,12 @@ describe('GithubApi', () => {
     });
 
 
-    it('should \'JSON.stringify\' and send the data along with the request', async () => {
+    it('should \'JSON.stringify\' and send the data along with the request', () => {
       const data = {key: 'value'};
       const requestHandler = nock('https://api.github.com')
         .intercept('/path', 'method', JSON.stringify(data))
         .reply(200);
-
+      (api as any).request('method', '/path', data);
-      await (api as any).request('method', '/path', data);
       requestHandler.done();
     });
 

aio/aio-builds-setup/docs/image-config--environment-variables.md

@@ -22,7 +22,7 @@ you don't need to specify values for those.
   The domain name of the server.
 
 - `AIO_GITHUB_ORGANIZATION`:
-  The GitHub organization whose teams are trusted for accepting build artifacts.
+  The GitHub organization whose teams are whitelisted for accepting build artifacts.
   See also `AIO_GITHUB_TEAM_SLUGS`.
 
 - `AIO_GITHUB_REPO`:

aio/aio-builds-setup/docs/overview--security-model.md

@@ -98,7 +98,7 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
       Such a label can only have been added by a maintainer (with the necessary rights) and
       designates that they have manually verified the PR contents.
    2. We can verify (again using the GitHub API) the author's membership in one of the
-      trusted GitHub teams. For this operation, we need a Personal Access Token with the
+      whitelisted/trusted GitHub teams. For this operation, we need a Personal Access Token with the
       `read:org` scope issued by a user that can "see" the specified GitHub organization.
       Here too, we use the token by @mary-poppins.
 

aio/angular.json

@@ -58,7 +58,7 @@
               }
             ],
             "styles": [
-              "src/styles/main.scss"
+              "src/styles.scss"
             ],
             "scripts": [],
             "budgets": [
@@ -158,7 +158,7 @@
               }
             ],
             "styles": [
-              "src/styles/main.scss"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -193,4 +193,4 @@
     }
   },
   "defaultProject": "site"
-}
+}

aio/content/cli/index.md

@@ -1,6 +1,6 @@
 # CLI Overview and Command Reference
 
-The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.
+The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as [Angular Console](https://angularconsole.com).
 
 ## Installing Angular CLI
 

aio/content/examples/.gitignore

@@ -17,9 +17,7 @@
 **/e2e/tsconfig.e2e.json
 **/src/karma.conf.js
 **/.angular-cli.json
-**/.browserslistrc
 **/.editorconfig
-**/.gitignore
 **/angular.json
 **/tsconfig.json
 **/bs-config.e2e.json
@@ -31,6 +29,7 @@
 **/tslint.json
 **/karma-test-shim.js
 **/browser-test-shim.js
+**/browserslist
 **/node_modules
 
 # built files

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

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

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

@@ -1,4 +1,3 @@
-// tslint:disable: no-host-metadata-property
 // #docregion progressbar-component
 import { Component, Input } from '@angular/core';
 

aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -1,18 +1,20 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by } from 'protractor';
 
-describe('AngularJS to Angular Quick Reference Tests', () => {
+describe('AngularJS to Angular Quick Reference Tests', function () {
 
-  beforeAll(() => {
+  beforeAll(function () {
     browser.get('');
   });
 
-  it('should display no poster images after bootstrap', () => {
+  it('should display no poster images after bootstrap', function () {
     testImagesAreDisplayed(false);
   });
 
-  it('should display proper movie data', () => {
+  it('should display proper movie data', function () {
     // We check only a few samples
-    const expectedSamples: any[] = [
+    let expectedSamples: any[] = [
       {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
       {row: 0, column: 2, value: 'Celeritas'},
       {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format
@@ -23,17 +25,18 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     ];
 
     // Go through the samples
-    const movieRows = getMovieRows();
+    let movieRows = getMovieRows();
-    for (const sample of expectedSamples) {
+    for (let i = 0; i < expectedSamples.length; i++) {
-      const tableCell = movieRows.get(sample.row)
+      let sample = expectedSamples[i];
+      let tableCell = movieRows.get(sample.row)
         .all(by.tagName('td')).get(sample.column);
       // Check the cell or its nested element
-      const elementToCheck = sample.element
+      let elementToCheck = sample.element
         ? tableCell.element(by.tagName(sample.element))
         : tableCell;
 
       // Check element attribute or text
-      const valueToCheck = sample.attr
+      let valueToCheck = sample.attr
         ? elementToCheck.getAttribute(sample.attr)
         : elementToCheck.getText();
 
@@ -48,42 +51,42 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     }
   });
 
-  it('should display images after Show Poster', () => {
+  it('should display images after Show Poster', function () {
     testPosterButtonClick('Show Poster', true);
   });
 
-  it('should hide images after Hide Poster', () => {
+  it('should hide images after Hide Poster', function () {
     testPosterButtonClick('Hide Poster', false);
   });
 
-  it('should display no movie when no favorite hero is specified', () => {
+  it('should display no movie when no favorite hero is specified', function () {
     testFavoriteHero(null, 'Please enter your favorite hero.');
   });
 
-  it('should display no movie for Magneta', () => {
+  it('should display no movie for Magneta', function () {
     testFavoriteHero('Magneta', 'No movie, sorry!');
   });
 
-  it('should display a movie for Dr Nice', () => {
+  it('should display a movie for Dr Nice', function () {
     testFavoriteHero('Dr Nice', 'Excellent choice!');
   });
 
   function testImagesAreDisplayed(isDisplayed: boolean) {
-    const expectedMovieCount = 3;
+    let expectedMovieCount = 3;
 
-    const movieRows = getMovieRows();
+    let movieRows = getMovieRows();
     expect(movieRows.count()).toBe(expectedMovieCount);
     for (let i = 0; i < expectedMovieCount; i++) {
-      const movieImage = movieRows.get(i).element(by.css('td > img'));
+      let movieImage = movieRows.get(i).element(by.css('td > img'));
       expect(movieImage.isDisplayed()).toBe(isDisplayed);
     }
   }
 
   function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    const posterButton = element(by.css('app-movie-list tr > th > button'));
+    let posterButton = element(by.css('app-movie-list tr > th > button'));
     expect(posterButton.getText()).toBe(expectedButtonText);
 
-    posterButton.click().then(() => {
+    posterButton.click().then(function () {
       testImagesAreDisplayed(isDisplayed);
     });
   }
@@ -93,12 +96,12 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
   }
 
   function testFavoriteHero(heroName: string, expectedLabel: string) {
-    const movieListComp = element(by.tagName('app-movie-list'));
+    let movieListComp = element(by.tagName('app-movie-list'));
-    const heroInput = movieListComp.element(by.tagName('input'));
+    let heroInput = movieListComp.element(by.tagName('input'));
-    const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
+    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
-    const resultLabel = movieListComp.element(by.css('span > p'));
+    let resultLabel = movieListComp.element(by.css('span > p'));
 
-    heroInput.clear().then(() => {
+    heroInput.clear().then(function () {
       heroInput.sendKeys(heroName || '');
       expect(resultLabel.getText()).toBe(expectedLabel);
       if (heroName) {

aio/content/examples/ajs-quick-reference/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule }  from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
 

aio/content/examples/ajs-quick-reference/src/app/app.module.1.ts

@@ -1,8 +1,8 @@
 // #docregion
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent } from './app.component';
+import { AppComponent }  from './app.component';
 
 @NgModule({
   imports: [ BrowserModule ],

aio/content/examples/ajs-quick-reference/src/app/app.module.ts

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule }   from '@angular/forms';
 
-import { AppComponent } from './app.component';
+import { AppComponent }  from './app.component';
 import { MovieListComponent } from './movie-list.component';
 import { AppRoutingModule } from './app-routing.module';
 

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

@@ -1,3 +1,5 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, ExpectedConditions as EC } from 'protractor';
 import { logging } from 'selenium-webdriver';
 import * as openClose from './open-close.po';

aio/content/examples/animations/src/app/animations.ts

@@ -32,15 +32,15 @@ export const slideInAnimation =
 // #enddocregion style-view
 // #docregion query
       query(':enter', [
-        style({ left: '-100%' })
+        style({ left: '-100%'})
       ]),
       query(':leave', animateChild()),
       group([
         query(':leave', [
-          animate('300ms ease-out', style({ left: '100%' }))
+          animate('300ms ease-out', style({ left: '100%'}))
         ]),
         query(':enter', [
-          animate('300ms ease-out', style({ left: '0%' }))
+          animate('300ms ease-out', style({ left: '0%'}))
         ])
       ]),
       query(':enter', animateChild()),
@@ -56,15 +56,15 @@ export const slideInAnimation =
         })
       ]),
       query(':enter', [
-        style({ left: '-100%' })
+        style({ left: '-100%'})
       ]),
       query(':leave', animateChild()),
       group([
         query(':leave', [
-          animate('200ms ease-out', style({ left: '100%' }))
+          animate('200ms ease-out', style({ left: '100%'}))
         ]),
         query(':enter', [
-          animate('300ms ease-out', style({ left: '0%' }))
+          animate('300ms ease-out', style({ left: '0%'}))
         ])
       ]),
       query(':enter', animateChild()),

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

@@ -17,7 +17,7 @@ Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (cl
 </nav>
 
 <!-- #docregion route-animations-outlet -->
-<div [@routeAnimations]="prepareRoute(outlet)">
+<div [@routeAnimations]="prepareRoute(outlet)" >
   <router-outlet #outlet="outlet"></router-outlet>
 </div>
 <!-- #enddocregion route-animations-outlet -->

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

@@ -34,7 +34,7 @@ export class AppComponent {
 
 // #docregion prepare-router-outlet
   prepareRoute(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
   }
 
 // #enddocregion prepare-router-outlet

aio/content/examples/animations/src/app/hero-list-page.component.ts

@@ -1,6 +1,4 @@
-// tslint:disable: variable-name
 // #docplaster
-// #docregion
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
@@ -54,11 +52,13 @@ export class HeroListPageComponent implements OnInit {
   @HostBinding('@pageAnimations')
   public animatePage = true;
 
+  _heroes = [];
 // #docregion filter-animations
   heroTotal = -1;
 // #enddocregion filter-animations
-  get heroes() { return this._heroes; }
+  get heroes() {
-  private _heroes = [];
+    return this._heroes;
+  }
 
   ngOnInit() {
     this._heroes = HEROES;

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

@@ -8,7 +8,8 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 // #docregion trigger, trigger-wildcard1, trigger-transition
   animations: [
     trigger('openClose', [
-// #docregion state1
+// #enddocregion events1
+// #docregion state1, events1
       // ...
 // #enddocregion events1
       state('open', style({
@@ -33,7 +34,8 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
       transition('closed => open', [
         animate('0.5s')
       ]),
-// #enddocregion transition2, trigger, component
+// #enddocregion trigger, component
+// #enddocregion transition2
 // #docregion trigger-wildcard1
       transition('* => closed', [
         animate('1s')
@@ -68,9 +70,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 })
 // #docregion events
 export class OpenCloseComponent {
-// #enddocregion events1, events, component
+// #enddocregion events1, events
-  @Input() logging = false;
-// #docregion component
   isOpen = true;
 
   toggle() {
@@ -78,8 +78,9 @@ export class OpenCloseComponent {
   }
 
 // #enddocregion component
+  @Input() logging = false;
 // #docregion events1, events
-  onAnimationEvent( event: AnimationEvent ) {
+  onAnimationEvent ( event: AnimationEvent ) {
 // #enddocregion events1, events
     if (!this.logging) {
       return;

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

@@ -1,3 +1,5 @@
+'use strict'; // necessary for es6 output in node
+
 import { protractor, browser, element, by, ElementFinder } from 'protractor';
 
 const nameSuffix = 'X';
@@ -19,7 +21,7 @@ describe('Architecture', () => {
   });
 
   it(`has h2 '${expectedH2}'`, () => {
-    const h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
     expect(h2).toEqual(expectedH2);
   });
 
@@ -32,42 +34,42 @@ function heroTests() {
   const targetHero: Hero = { id: 2, name: 'Dr Nice' };
 
   it('has the right number of heroes', () => {
-    const page = getPageElts();
+    let page = getPageElts();
     expect(page.heroes.count()).toEqual(3);
   });
 
-  it('has no hero details initially', () => {
+  it('has no hero details initially', function () {
-    const page = getPageElts();
+    let page = getPageElts();
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 
   it('shows selected hero details', async () => {
     await element(by.cssContainingText('li', targetHero.name)).click();
-    const page = getPageElts();
+    let page = getPageElts();
-    const hero = await heroFromDetail(page.heroDetail);
+    let hero = await heroFromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name);
   });
 
   it(`shows updated hero name in details`, async () => {
-    const input = element.all(by.css('input')).first();
+    let input = element.all(by.css('input')).first();
     input.sendKeys(nameSuffix);
-    const page = getPageElts();
+    let page = getPageElts();
-    const hero = await heroFromDetail(page.heroDetail);
+    let hero = await heroFromDetail(page.heroDetail);
-    const newName = targetHero.name + nameSuffix;
+    let newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
   });
 }
 
 function salesTaxTests() {
-  it('has no sales tax initially', () => {
+  it('has no sales tax initially', function () {
-    const page = getPageElts();
+    let page = getPageElts();
     expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
   });
 
-  it('shows sales tax', async () => {
+  it('shows sales tax', async function () {
-    const page = getPageElts();
+    let page = getPageElts();
     page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
     expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
   });
@@ -86,11 +88,13 @@ function getPageElts() {
 
 async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
-  const id = await detail.all(by.css('div')).first().getText();
+  // let _id = await detail.all(by.css('div')).first().getText();
+  let _id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
-  const name = await detail.element(by.css('h4')).getText();
+  // let _name = await detail.element(by.css('h4')).getText();
+  let _name = await detail.element(by.css('h4')).getText();
   return {
-    id: +id.substr(id.indexOf(' ') + 1),
+    id: +_id.substr(_id.indexOf(' ') + 1),
-    name: name.substr(0, name.lastIndexOf(' ')),
+    name: _name.substr(0, _name.lastIndexOf(' '))
   };
 }

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

@@ -1,15 +1,15 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule }       from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule }         from '@angular/forms';
 // #docregion imports
-import { NgModule } from '@angular/core';
+import { NgModule }     from '@angular/core';
 import { AppComponent } from './app.component';
 // #enddocregion imports
 import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent } from './hero-list.component';
+import { HeroListComponent }   from './hero-list.component';
-import { SalesTaxComponent } from './sales-tax.component';
+import { SalesTaxComponent }   from './sales-tax.component';
-import { HeroService } from './hero.service';
+import { HeroService }         from './hero.service';
-import { BackendService } from './backend.service';
+import { BackendService }      from './backend.service';
-import { Logger } from './logger.service';
+import { Logger }              from './logger.service';
 
 @NgModule({
   imports: [

aio/content/examples/architecture/src/app/backend.service.ts

@@ -18,7 +18,7 @@ export class BackendService {
       // TODO: get from the database
       return Promise.resolve<Hero[]>(HEROES);
     }
-    const err = new Error('Cannot get object of this type');
+    let err = new Error('Cannot get object of this type');
     this.logger.error(err);
     throw err;
   }

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

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit }   from '@angular/core';
 
-import { Hero } from './hero';
+import { Hero }                from './hero';
-import { HeroService } from './hero.service';
+import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({

aio/content/examples/architecture/src/app/mini-app.ts

@@ -22,7 +22,7 @@ export class AppComponent {
 }
 
 // #docregion module
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 // #docregion import-browser-module
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion import-browser-module

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component }       from '@angular/core';
 
 import { SalesTaxService } from './sales-tax.service';
-import { TaxRateService } from './tax-rate.service';
+import { TaxRateService }  from './tax-rate.service';
 
 @Component({
   selector:    'app-sales-tax',

aio/content/examples/architecture/src/app/sales-tax.service.ts

@@ -7,7 +7,7 @@ export class SalesTaxService {
   constructor(private rateService: TaxRateService) { }
 
   getVAT(value: string | number) {
-    const amount = (typeof value === 'string') ?
+    let amount = (typeof value === 'string') ?
       parseFloat(value) : value;
     return (amount || 0) * this.rateService.getRate('VAT');
   }

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

@@ -1,32 +1,34 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by } from 'protractor';
 
-describe('Attribute binding example', () => {
+describe('Attribute binding example', function () {
 
-  beforeEach(() => {
+  beforeEach(function () {
     browser.get('');
   });
 
-  it('should display Property Binding with Angular', () => {
+  it('should display Property Binding with Angular', function () {
     expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
   });
 
-  it('should display a table', () => {
+  it('should display a table', function() {
     expect(element.all(by.css('table')).isPresent()).toBe(true);
   });
 
-  it('should display an Aria button', () => {
+  it('should display an Aria button', function () {
     expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
   });
 
-  it('should display a blue background on div', () => {
+  it('should display a blue background on div', function () {
     expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
   });
 
-  it('should display a blue div with a red border', () => {
+  it('should display a blue div with a red border', function () {
     expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
   });
 
-  it('should display a div with many classes', () => {
+  it('should display a div with many classes', function () {
     expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
     expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
   });

aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts

@@ -1,16 +1,16 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'comp-with-host-binding',
   template: 'I am a component!',
+  host: {
+    '[class.special]': 'isSpecial',
+    '[style.color]': 'color',
+    '[style.width]': 'width'
+  }
 })
 export class CompWithHostBindingComponent {
-  @HostBinding('class.special')
   isSpecial = false;
-
-  @HostBinding('style.color')
   color = 'green';
-
-  @HostBinding('style.width')
   width = '200px';
 }

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

@@ -1,15 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by } from 'protractor';
 
 describe('Attribute directives', () => {
 
-  const title = 'My First Attribute Directive';
+  let _title = 'My First Attribute Directive';
 
   beforeAll(() => {
     browser.get('');
   });
 
-  it(`should display correct title: ${title}`, () => {
+  it(`should display correct title: ${_title}`, () => {
-    expect(element(by.css('h1')).getText()).toEqual(title);
+    expect(element(by.css('h1')).getText()).toEqual(_title);
   });
 
   it('should be able to select green highlight', () => {

aio/content/examples/attribute-directives/src/app/dummy.module.1.ts

@@ -3,7 +3,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent } from './app.component.1';
+import { AppComponent }               from './app.component.1';
 import { HighlightDirective as HLD1 } from './highlight.directive.1';
 import { HighlightDirective as HLD2 } from './highlight.directive.2';
 import { HighlightDirective as HLD3 } from './highlight.directive.3';

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

@@ -3,55 +3,57 @@ import { logging } from 'selenium-webdriver';
 
 describe('Binding syntax e2e tests', () => {
 
-  beforeEach(() => browser.get(''));
+  beforeEach(function () {
+    browser.get('');
+  });
 
 
-  // helper function used to test what's logged to the console
+    // helper function used to test what's logged to the console
-  async function logChecker(button, contents) {
+    async function logChecker(button, contents) {
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+      const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
+      const message = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
-    expect(messages.length).toBeGreaterThan(0);
+      expect(message.length).toBeGreaterThan(0);
-  }
+    }
 
 
-  it('should display Binding syntax', () => {
+  it('should display Binding syntax', function () {
     expect(element(by.css('h1')).getText()).toEqual('Binding syntax');
   });
 
-  it('should display Save button', () => {
+  it('should display Save button', function () {
     expect(element.all(by.css('button')).get(0).getText()).toBe('Save');
   });
 
-  it('should display HTML attributes and DOM properties', () => {
+  it('should display HTML attributes and DOM properties', function () {
     expect(element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties');
   });
 
-  it('should display 1. Use the inspector...', () => {
+  it('should display 1. Use the inspector...', function () {
     expect(element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector');
   });
 
-  it('should display Disabled property vs. attribute', () => {
+  it('should display Disabled property vs. attribute', function () {
     expect(element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute');
   });
 
 
   it('should log a message including Sarah', async () => {
-    const attributeButton = element.all(by.css('button')).get(1);
+    let attributeButton = element.all(by.css('button')).get(1);
     await attributeButton.click();
     const contents = 'Sarah';
     logChecker(attributeButton, contents);
   });
 
   it('should log a message including Sarah for DOM property', async () => {
-    const DOMPropertyButton = element.all(by.css('button')).get(2);
+    let DOMPropertyButton = element.all(by.css('button')).get(2);
     await DOMPropertyButton.click();
     const contents = 'Sarah';
     logChecker(DOMPropertyButton, contents);
   });
 
   it('should log a message including Sally for DOM property', async () => {
-    const DOMPropertyButton = element.all(by.css('button')).get(2);
+    let DOMPropertyButton = element.all(by.css('button')).get(2);
-    const input = element(by.css('input'));
+    let input = element(by.css('input'));
     input.sendKeys('Sally');
     await DOMPropertyButton.click();
     const contents = 'Sally';
@@ -59,14 +61,14 @@ describe('Binding syntax e2e tests', () => {
   });
 
   it('should log a message that Test Button works', async () => {
-    const testButton = element.all(by.css('button')).get(3);
+    let testButton = element.all(by.css('button')).get(3);
     await testButton.click();
     const contents = 'Test';
     logChecker(testButton, contents);
   });
 
   it('should toggle Test Button disabled', async () => {
-    const toggleButton = element.all(by.css('button')).get(4);
+    let toggleButton = element.all(by.css('button')).get(4);
     await toggleButton.click();
     const contents = 'true';
     logChecker(toggleButton, contents);

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

@@ -26,7 +26,7 @@ export class AppComponent {
 
   toggleDisabled(): any {
 
-    const testButton = document.getElementById('testButton') as HTMLInputElement;
+    let testButton = <HTMLInputElement> document.getElementById('testButton');
     testButton.disabled = !testButton.disabled;
     console.warn(testButton.disabled);
   }

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

@@ -21,13 +21,11 @@ import { ItemDirective } from './item.directive';
     ItemDirective
   ],
   // #enddocregion declarations
-  // #docregion imports
   imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule
   ],
-  // #enddocregion imports
   providers: [],
   bootstrap: [AppComponent]
 })

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

@@ -1,19 +1,21 @@
+'use strict';
+
 import { browser, element, by } from 'protractor';
 
-describe('Built-in Directives', () => {
+describe('Built-in Directives', function () {
 
-  beforeAll(() => {
+  beforeAll(function () {
     browser.get('');
   });
 
-  it('should have title Built-in Directives', () => {
+  it('should have title Built-in Directives', function () {
-    const title = element.all(by.css('h1')).get(0);
+    let title = element.all(by.css('h1')).get(0);
     expect(title.getText()).toEqual('Built-in Directives');
   });
 
   it('should change first Teapot header', async () => {
-    const firstLabel = element.all(by.css('p')).get(0);
+    let firstLabel = element.all(by.css('p')).get(0);
-    const firstInput = element.all(by.css('input')).get(0);
+    let firstInput = element.all(by.css('input')).get(0);
 
     expect(firstLabel.getText()).toEqual('Current item name: Teapot');
     firstInput.sendKeys('abc');
@@ -21,49 +23,49 @@ describe('Built-in Directives', () => {
   });
 
 
-  it('should modify sentence when modified checkbox checked', () => {
+  it('should modify sentence when modified checkbox checked', function () {
-    const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
+    let modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
-    const modifiedSentence = element.all(by.css('div')).get(1);
+    let modifiedSentence = element.all(by.css('div')).get(1);
 
     modifiedChkbxLabel.click();
     expect(modifiedSentence.getText()).toContain('modified');
   });
 
-  it('should modify sentence when normal checkbox checked', () => {
+  it('should modify sentence when normal checkbox checked', function () {
-    const normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
+    let normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
-    const normalSentence = element.all(by.css('div')).get(7);
+    let normalSentence = element.all(by.css('div')).get(7);
 
     normalChkbxLabel.click();
     expect(normalSentence.getText()).toContain('normal weight and, extra large');
   });
 
-  it('should toggle app-item-detail', () => {
+  it('should toggle app-item-detail', function () {
-    const toggleButton = element.all(by.css('button')).get(3);
+    let toggleButton = element.all(by.css('button')).get(3);
-    const toggledDiv = element.all(by.css('app-item-detail')).get(0);
+    let toggledDiv = element.all(by.css('app-item-detail')).get(0);
 
     toggleButton.click();
     expect(toggledDiv.isDisplayed()).toBe(true);
   });
 
-  it('should hide app-item-detail', () => {
+  it('should hide app-item-detail', function () {
-    const hiddenMessage = element.all(by.css('p')).get(11);
+    let hiddenMessage = element.all(by.css('p')).get(11);
-    const hiddenDiv = element.all(by.css('app-item-detail')).get(2);
+    let hiddenDiv = element.all(by.css('app-item-detail')).get(2);
 
     expect(hiddenMessage.getText()).toContain('in the DOM');
     expect(hiddenDiv.isDisplayed()).toBe(true);
   });
 
-  it('should have 10 lists each containing the string Teapot', () => {
+  it('should have 10 lists each containing the string Teapot', function () {
-    const listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
+    let listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
     expect(listDiv.count()).toBe(10);
   });
 
-  it('should switch case', () => {
+  it('should switch case', function () {
-    const tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
+    let tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
-    const tvDiv = element(by.css('app-lost-item'));
+    let tvDiv = element(by.css('app-lost-item'));
 
-    const fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
+    let fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
-    const fishbowlDiv = element(by.css('app-unknown-item'));
+    let fishbowlDiv = element(by.css('app-unknown-item'));
 
     tvRadioButton.click();
     expect(tvDiv.getText()).toContain('Television');

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

@@ -30,14 +30,6 @@ export class AppComponent implements OnInit {
   itemsWithTrackByCountReset = 0;
   itemIdIncrement = 1;
 
-  // #docregion setClasses
-  currentClasses: {};
-  // #enddocregion setClasses
-
-  // #docregion setStyles
-  currentStyles: {};
-  // #enddocregion setStyles
-
   ngOnInit() {
     this.resetItems();
     this.setCurrentClasses();
@@ -49,18 +41,20 @@ export class AppComponent implements OnInit {
     this.currentItem.name = name.toUpperCase();
   }
 
-  // #docregion setClasses
+// #docregion setClasses
+  currentClasses: {};
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      saveable: this.canSave,
+      'saveable': this.canSave,
-      modified: !this.isUnchanged,
+      'modified': !this.isUnchanged,
-      special:  this.isSpecial
+      'special':  this.isSpecial
     };
   }
   // #enddocregion setClasses
 
   // #docregion setStyles
+  currentStyles: {};
   setCurrentStyles() {
     // CSS styles: set per current state of component properties
     this.currentStyles = {
@@ -76,7 +70,11 @@ export class AppComponent implements OnInit {
   }
 
   giveNullCustomerValue() {
-    this.nullCustomer = 'Kelly';
+    !(this.nullCustomer = null) ? (this.nullCustomer = 'Kelly') : (this.nullCustomer = null);
+  }
+
+  resetNullItem() {
+    this.nullCustomer = null;
   }
 
   resetItems() {
@@ -86,7 +84,7 @@ export class AppComponent implements OnInit {
   }
 
   resetList() {
-    this.resetItems();
+    this.resetItems()
     this.itemsWithTrackByCountReset = 0;
     this.itemsNoTrackByCount = ++this.itemsNoTrackByCount;
   }
@@ -109,7 +107,7 @@ export class AppComponent implements OnInit {
   trackByItems(index: number, item: Item): number { return item.id; }
 // #enddocregion trackByItems
 
-  trackById(index: number, item: any): number { return item.id; }
+  trackById(index: number, item: any): number { return item['id']; }
 
 }
 

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

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

aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts

@@ -1,236 +1,229 @@
-import { browser, by, element } from 'protractor';
+'use strict'; // necessary for es6 output in node
 
-describe('Component Communication Cookbook Tests', () => {
+import { browser, element, by } from 'protractor';
 
-  beforeEach(() => browser.get(browser.baseUrl));
+describe('Component Communication Cookbook Tests', function () {
 
-  describe('Parent-to-child communication', () => {
+  // Note: '?e2e' which app can read to know it is running in protractor
+  // e.g. `if (!/e2e/.test(location.search)) { ...`
+  beforeAll(function () {
+    browser.get('?e2e');
+  });
+
+  describe('Parent-to-child communication', function() {
     // #docregion parent-to-child
     // ...
-    const heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
+    let _heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
-    const masterName = 'Master';
+    let _masterName = 'Master';
 
-    it('should pass properties to children properly', () => {
+    it('should pass properties to children properly', function () {
-      const parent = element(by.tagName('app-hero-parent'));
+      let parent = element.all(by.tagName('app-hero-parent')).get(0);
-      const heroes = parent.all(by.tagName('app-hero-child'));
+      let heroes = parent.all(by.tagName('app-hero-child'));
 
-      for (let i = 0; i < heroNames.length; i++) {
+      for (let i = 0; i < _heroNames.length; i++) {
-        const childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+        let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
-        const childDetail = heroes.get(i).element(by.tagName('p')).getText();
+        let childDetail = heroes.get(i).element(by.tagName('p')).getText();
-        expect(childTitle).toEqual(heroNames[i] + ' says:');
+        expect(childTitle).toEqual(_heroNames[i] + ' says:');
-        expect(childDetail).toContain(masterName);
+        expect(childDetail).toContain(_masterName);
       }
     });
     // ...
     // #enddocregion parent-to-child
   });
 
-  describe('Parent-to-child communication with setter', () => {
+  describe('Parent-to-child communication with setter', function() {
     // #docregion parent-to-child-setter
     // ...
-    it('should display trimmed, non-empty names', () => {
+    it('should display trimmed, non-empty names', function () {
-      const nonEmptyNameIndex = 0;
+      let _nonEmptyNameIndex = 0;
-      const nonEmptyName = '"Dr IQ"';
+      let _nonEmptyName = '"Dr IQ"';
-      const parent = element(by.tagName('app-name-parent'));
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
+      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
 
-      const displayName = hero.element(by.tagName('h3')).getText();
+      let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(nonEmptyName);
+      expect(displayName).toEqual(_nonEmptyName);
     });
 
-    it('should replace empty name with default name', () => {
+    it('should replace empty name with default name', function () {
-      const emptyNameIndex = 1;
+      let _emptyNameIndex = 1;
-      const defaultName = '"<no name set>"';
+      let _defaultName = '"<no name set>"';
-      const parent = element(by.tagName('app-name-parent'));
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
-      const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
+      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
 
-      const displayName = hero.element(by.tagName('h3')).getText();
+      let displayName = hero.element(by.tagName('h3')).getText();
-      expect(displayName).toEqual(defaultName);
+      expect(displayName).toEqual(_defaultName);
     });
     // ...
     // #enddocregion parent-to-child-setter
   });
 
-  describe('Parent-to-child communication with ngOnChanges', () => {
+  describe('Parent-to-child communication with ngOnChanges', function() {
     // #docregion parent-to-child-onchanges
     // ...
     // Test must all execute in this exact order
-    it('should set expected initial values', () => {
+    it('should set expected initial values', function () {
-      const actual = getActual();
+      let actual = getActual();
 
-      const initialLabel = 'Version 1.23';
+      let initialLabel = 'Version 1.23';
-      const initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
+      let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
 
       expect(actual.label).toBe(initialLabel);
       expect(actual.count).toBe(1);
       expect(actual.logs.get(0).getText()).toBe(initialLog);
     });
 
-    it('should set expected values after clicking \'Minor\' twice', async () => {
+    it('should set expected values after clicking \'Minor\' twice', function () {
-      const repoTag = element(by.tagName('app-version-parent'));
+      let repoTag = element(by.tagName('app-version-parent'));
-      const newMinorButton = repoTag.all(by.tagName('button')).get(0);
+      let newMinorButton = repoTag.all(by.tagName('button')).get(0);
 
-      await newMinorButton.click();
+      newMinorButton.click().then(function() {
-      await newMinorButton.click();
+        newMinorButton.click().then(function() {
+          let actual = getActual();
 
-      const actual = getActual();
+          let labelAfter2Minor = 'Version 1.25';
+          let logAfter2Minor = 'minor changed from 24 to 25';
 
-      const labelAfter2Minor = 'Version 1.25';
+          expect(actual.label).toBe(labelAfter2Minor);
-      const logAfter2Minor = 'minor changed from 24 to 25';
+          expect(actual.count).toBe(3);
-
+          expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
-      expect(actual.label).toBe(labelAfter2Minor);
+        });
-      expect(actual.count).toBe(3);
+      });
-      expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
     });
 
-    it('should set expected values after clicking \'Major\' once', async () => {
+    it('should set expected values after clicking \'Major\' once', function () {
-      const repoTag = element(by.tagName('app-version-parent'));
+      let repoTag = element(by.tagName('app-version-parent'));
-      const newMajorButton = repoTag.all(by.tagName('button')).get(1);
+      let newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
-      await newMajorButton.click();
+      newMajorButton.click().then(function() {
-      const actual = getActual();
+        let actual = getActual();
 
-      const labelAfterMajor = 'Version 2.0';
+        let labelAfterMajor = 'Version 2.0';
-      const logAfterMajor = 'major changed from 1 to 2, minor changed from 23 to 0';
+        let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0';
 
-      expect(actual.label).toBe(labelAfterMajor);
+        expect(actual.label).toBe(labelAfterMajor);
-      expect(actual.count).toBe(2);
+        expect(actual.count).toBe(4);
-      expect(actual.logs.get(1).getText()).toBe(logAfterMajor);
+        expect(actual.logs.get(3).getText()).toBe(logAfterMajor);
+      });
     });
 
     function getActual() {
-      const versionTag = element(by.tagName('app-version-child'));
+      let versionTag = element(by.tagName('app-version-child'));
-      const label = versionTag.element(by.tagName('h3')).getText();
+      let label = versionTag.element(by.tagName('h3')).getText();
-      const ul = versionTag.element((by.tagName('ul')));
+      let ul = versionTag.element((by.tagName('ul')));
-      const logs = ul.all(by.tagName('li'));
+      let logs = ul.all(by.tagName('li'));
 
       return {
-        label,
+        label: label,
-        logs,
+        logs: logs,
         count: logs.count()
       };
     }
     // ...
     // #enddocregion parent-to-child-onchanges
+
   });
 
-  describe('Child-to-parent communication', () => {
+  describe('Child-to-parent communication', function() {
     // #docregion child-to-parent
     // ...
-    it('should not emit the event initially', () => {
+    it('should not emit the event initially', function () {
-      const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
+      let voteLabel = element(by.tagName('app-vote-taker'))
-      expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 0');
+        .element(by.tagName('h3')).getText();
+      expect(voteLabel).toBe('Agree: 0, Disagree: 0');
     });
 
-    it('should process Agree vote', async () => {
+    it('should process Agree vote', function () {
-      const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
-      const agreeButton1 = element.all(by.tagName('app-voter')).get(0)
         .all(by.tagName('button')).get(0);
-
+      agreeButton1.click().then(function() {
-      await agreeButton1.click();
+        let voteLabel = element(by.tagName('app-vote-taker'))
-
+          .element(by.tagName('h3')).getText();
-      expect(voteLabel.getText()).toBe('Agree: 1, Disagree: 0');
+        expect(voteLabel).toBe('Agree: 1, Disagree: 0');
+      });
     });
 
-    it('should process Disagree vote', async () => {
+    it('should process Disagree vote', function () {
-      const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
-      const agreeButton1 = element.all(by.tagName('app-voter')).get(1)
         .all(by.tagName('button')).get(1);
-
+      agreeButton1.click().then(function() {
-      await agreeButton1.click();
+        let voteLabel = element(by.tagName('app-vote-taker'))
-
+          .element(by.tagName('h3')).getText();
-      expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 1');
+        expect(voteLabel).toBe('Agree: 1, Disagree: 1');
+      });
     });
     // ...
     // #enddocregion child-to-parent
   });
 
-  describe('Parent calls child via local var', () => {
+  // Can't run timer tests in protractor because
-    countDownTimerTests('app-countdown-parent-lv');
+  // interaction w/ zones causes all tests to freeze & timeout.
+  xdescribe('Parent calls child via local var', function() {
+    countDownTimerTests('countdown-parent-lv');
   });
 
-  describe('Parent calls ViewChild', () => {
+  xdescribe('Parent calls ViewChild', function() {
-    countDownTimerTests('app-countdown-parent-vc');
+    countDownTimerTests('countdown-parent-vc');
   });
 
   function countDownTimerTests(parentTag: string) {
     // #docregion countdown-timer-tests
     // ...
-    // The tests trigger periodic asynchronous operations (via `setInterval()`), which will prevent
+    it('timer and parent seconds should match', function () {
-    // the app from stabilizing. See https://angular.io/api/core/ApplicationRef#is-stable-examples
+      let parent = element(by.tagName(parentTag));
-    // for more details.
+      let message = parent.element(by.tagName('app-countdown-timer')).getText();
-    // To allow the tests to complete, we will disable automatically waiting for the Angular app to
+      browser.sleep(10); // give `seconds` a chance to catchup with `message`
-    // stabilize.
+      let seconds = parent.element(by.className('seconds')).getText();
-    beforeEach(() => browser.waitForAngularEnabled(false));
+      expect(message).toContain(seconds);
-    afterEach(() => browser.waitForAngularEnabled(true));
-
-    it('timer and parent seconds should match', async () => {
-      const parent = element(by.tagName(parentTag));
-      const startButton = parent.element(by.buttonText('Start'));
-      const seconds = parent.element(by.className('seconds'));
-      const timer = parent.element(by.tagName('app-countdown-timer'));
-
-      await startButton.click();
-
-      // Wait for `<app-countdown-timer>` to be populated with any text.
-      await browser.wait(() => timer.getText(), 2000);
-
-      expect(await timer.getText()).toContain(await seconds.getText());
     });
 
-    it('should stop the countdown', async () => {
+    it('should stop the countdown', function () {
-      const parent = element(by.tagName(parentTag));
+      let parent = element(by.tagName(parentTag));
-      const startButton = parent.element(by.buttonText('Start'));
+      let stopButton = parent.all(by.tagName('button')).get(1);
-      const stopButton = parent.element(by.buttonText('Stop'));
-      const timer = parent.element(by.tagName('app-countdown-timer'));
 
-      await startButton.click();
+      stopButton.click().then(function() {
-      expect(await timer.getText()).not.toContain('Holding');
+        let message = parent.element(by.tagName('app-countdown-timer')).getText();
-
+        expect(message).toContain('Holding');
-      await stopButton.click();
+      });
-      expect(await timer.getText()).toContain('Holding');
     });
     // ...
     // #enddocregion countdown-timer-tests
   }
 
-  describe('Parent and children communicate via a service', () => {
+
+  describe('Parent and children communicate via a service', function() {
     // #docregion bidirectional-service
     // ...
-    it('should announce a mission', async () => {
+    it('should announce a mission', function () {
-      const missionControl = element(by.tagName('app-mission-control'));
+      let missionControl = element(by.tagName('app-mission-control'));
-      const announceButton = missionControl.all(by.tagName('button')).get(0);
+      let announceButton = missionControl.all(by.tagName('button')).get(0);
-      const history = missionControl.all(by.tagName('li'));
+      announceButton.click().then(function () {
-
+        let history = missionControl.all(by.tagName('li'));
-      await announceButton.click();
+        expect(history.count()).toBe(1);
-
+        expect(history.get(0).getText()).toMatch(/Mission.* announced/);
-      expect(history.count()).toBe(1);
+      });
-      expect(history.get(0).getText()).toMatch(/Mission.* announced/);
     });
 
-    it('should confirm the mission by Lovell', async () => {
+    it('should confirm the mission by Lovell', function () {
-      await testConfirmMission(1, 'Lovell');
+      testConfirmMission(1, 2, 'Lovell');
     });
 
-    it('should confirm the mission by Haise', async () => {
+    it('should confirm the mission by Haise', function () {
-      await testConfirmMission(3, 'Haise');
+      testConfirmMission(3, 3, 'Haise');
     });
 
-    it('should confirm the mission by Swigert', async () => {
+    it('should confirm the mission by Swigert', function () {
-      await testConfirmMission(2, 'Swigert');
+      testConfirmMission(2, 4, 'Swigert');
     });
 
-    async function testConfirmMission(buttonIndex: number, astronaut: string) {
+    function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
-      const missionControl = element(by.tagName('app-mission-control'));
+      let _confirmedLog = ' confirmed the mission';
-      const announceButton = missionControl.all(by.tagName('button')).get(0);
+      let missionControl = element(by.tagName('app-mission-control'));
-      const confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
+      let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
-      const history = missionControl.all(by.tagName('li'));
+      confirmButton.click().then(function () {
-
+        let history = missionControl.all(by.tagName('li'));
-      await announceButton.click();
+        expect(history.count()).toBe(expectedLogCount);
-      await confirmButton.click();
+        expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog);
-
+      });
-      expect(history.count()).toBe(2);
-      expect(history.get(1).getText()).toBe(`${astronaut} confirmed the mission`);
     }
     // ...
     // #enddocregion bidirectional-service

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

@@ -0,0 +1,13 @@
+{
+  "tests": [
+    {
+      "cmd": "yarn",
+      "args": [
+        "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
+        "--no-webdriver-update",
+        "--port={PORT}"
+      ]
+    }
+  ]
+}

aio/content/examples/component-interaction/src/app/app.component.html

@@ -30,21 +30,22 @@
   <app-vote-taker></app-vote-taker>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
-
 <hr>
+
 <div id="parent-to-child-local-var">
   <app-countdown-parent-lv></app-countdown-parent-lv>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
-
 <hr>
+
 <div id="parent-to-view-child">
   <app-countdown-parent-vc></app-countdown-parent-vc>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
-
 <hr>
+
 <div id="bidirectional-service">
   <app-mission-control></app-mission-control>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
+<hr>

aio/content/examples/component-interaction/src/app/app.module.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule }  from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { AstronautComponent } from './astronaut.component';
@@ -15,17 +15,10 @@ import { VersionParentComponent } from './version-parent.component';
 import { VoterComponent } from './voter.component';
 import { VoteTakerComponent } from './votetaker.component';
 
-
+let directives: any[] = [
-@NgModule({
-  imports: [
-    BrowserModule,
-  ],
-  declarations: [
     AppComponent,
     AstronautComponent,
-    CountdownLocalVarParentComponent,
     CountdownTimerComponent,
-    CountdownViewChildParentComponent,
     HeroChildComponent,
     HeroParentComponent,
     MissionControlComponent,
@@ -34,8 +27,28 @@ import { VoteTakerComponent } from './votetaker.component';
     VersionChildComponent,
     VersionParentComponent,
     VoterComponent,
-    VoteTakerComponent,
+    VoteTakerComponent
+  ];
+
+let schemas: any[] = [];
+
+// Include Countdown examples
+// unless in e2e tests which they break.
+if (!/e2e/.test(location.search)) {
+  console.log('adding countdown timer examples');
+  directives.push(CountdownLocalVarParentComponent);
+  directives.push(CountdownViewChildParentComponent);
+} else {
+  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors
+  schemas.push(CUSTOM_ELEMENTS_SCHEMA);
+}
+
+@NgModule({
+  imports: [
+    BrowserModule
   ],
+  declarations: directives,
   bootstrap: [ AppComponent ],
+  schemas: schemas
 })
 export class AppModule { }

aio/content/examples/component-interaction/src/app/astronaut.component.ts

@@ -2,7 +2,7 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 
 import { MissionService } from './mission.service';
-import { Subscription } from 'rxjs';
+import { Subscription }   from 'rxjs';
 
 @Component({
   selector: 'app-astronaut',

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

@@ -2,8 +2,8 @@
 // #docregion vc
 import { AfterViewInit, ViewChild } from '@angular/core';
 // #docregion lv
-import { Component } from '@angular/core';
+import { Component }                from '@angular/core';
-import { CountdownTimerComponent } from './countdown-timer.component';
+import { CountdownTimerComponent }  from './countdown-timer.component';
 
 // #enddocregion lv
 // #enddocregion vc

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

@@ -1,16 +1,19 @@
 // #docregion
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-countdown-timer',
   template: '<p>{{message}}</p>'
 })
-export class CountdownTimerComponent implements OnDestroy {
+export class CountdownTimerComponent implements OnInit, OnDestroy {
 
   intervalId = 0;
   message = '';
   seconds = 11;
 
+  clearTimer() { clearInterval(this.intervalId); }
+
+  ngOnInit()    { this.start(); }
   ngOnDestroy() { this.clearTimer(); }
 
   start() { this.countDown(); }
@@ -19,8 +22,6 @@ export class CountdownTimerComponent implements OnDestroy {
     this.message = `Holding at T-${this.seconds} seconds`;
   }
 
-  private clearTimer() { clearInterval(this.intervalId); }
-
   private countDown() {
     this.clearTimer();
     this.intervalId = window.setInterval(() => {

aio/content/examples/component-interaction/src/app/hero-child.component.ts

@@ -12,6 +12,6 @@ import { Hero } from './hero';
 })
 export class HeroChildComponent {
   @Input() hero: Hero;
-  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
+  @Input('master') masterName: string;
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/mission.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject }    from 'rxjs';
 
 @Injectable()
 export class MissionService {

aio/content/examples/component-interaction/src/app/missioncontrol.component.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { Component } from '@angular/core';
+import { Component }          from '@angular/core';
 
-import { MissionService } from './mission.service';
+import { MissionService }     from './mission.service';
 
 @Component({
   selector: 'app-mission-control',
@@ -34,7 +34,7 @@ export class MissionControlComponent {
   }
 
   announce() {
-    const mission = this.missions[this.nextMission++];
+    let mission = this.missions[this.nextMission++];
     this.missionService.announceMission(mission);
     this.history.push(`Mission "${mission}" announced`);
     if (this.nextMission >= this.missions.length) { this.nextMission = 0; }

aio/content/examples/component-interaction/src/app/name-child.component.ts

@@ -1,4 +1,3 @@
-// tslint:disable: variable-name
 // #docregion
 import { Component, Input } from '@angular/core';
 
@@ -7,11 +6,13 @@ import { Component, Input } from '@angular/core';
   template: '<h3>"{{name}}"</h3>'
 })
 export class NameChildComponent {
+  private _name = '';
+
   @Input()
-  get name(): string { return this._name; }
   set name(name: string) {
     this._name = (name && name.trim()) || '<no name set>';
   }
-  private _name = '';
+
+  get name(): string { return this._name; }
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/version-child.component.ts

@@ -18,14 +18,14 @@ export class VersionChildComponent implements OnChanges {
   changeLog: string[] = [];
 
   ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
-    const log: string[] = [];
+    let log: string[] = [];
-    for (const propName in changes) {
+    for (let propName in changes) {
-      const changedProp = changes[propName];
+      let changedProp = changes[propName];
-      const to = JSON.stringify(changedProp.currentValue);
+      let to = JSON.stringify(changedProp.currentValue);
       if (changedProp.isFirstChange()) {
         log.push(`Initial value of ${propName} set to ${to}`);
       } else {
-        const from = JSON.stringify(changedProp.previousValue);
+        let from = JSON.stringify(changedProp.previousValue);
         log.push(`${propName} changed from ${from} to ${to}`);
       }
     }

aio/content/examples/component-interaction/src/app/votetaker.component.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { Component } from '@angular/core';
+import { Component }      from '@angular/core';
 
 @Component({
   selector: 'app-vote-taker',

aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts

@@ -1,14 +1,16 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by } from 'protractor';
 
-describe('Component Style Tests', () => {
+describe('Component Style Tests', function () {
 
-  beforeAll(() => {
+  beforeAll(function () {
     browser.get('');
   });
 
-  it('scopes component styles to component view', () => {
+  it('scopes component styles to component view', function() {
-    const componentH1 = element(by.css('app-root > h1'));
+    let componentH1 = element(by.css('app-root > h1'));
-    const externalH1 = element(by.css('body > h1'));
+    let externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
     // other times as "400", both of which are equal in CSS terms.
@@ -17,49 +19,49 @@ describe('Component Style Tests', () => {
   });
 
 
-  it('allows styling :host element', () => {
+  it('allows styling :host element', function() {
-    const host = element(by.css('app-hero-details'));
+    let host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('borderWidth')).toEqual('1px');
   });
 
-  it('supports :host() in function form', () => {
+  it('supports :host() in function form', function() {
-    const host = element(by.css('app-hero-details'));
+    let host = element(by.css('app-hero-details'));
 
     host.element(by.buttonText('Activate')).click();
     expect(host.getCssValue('borderWidth')).toEqual('3px');
   });
 
-  it('allows conditional :host-context() styling', () => {
+  it('allows conditional :host-context() styling', function() {
-    const h2 = element(by.css('app-hero-details h2'));
+    let h2 = element(by.css('app-hero-details h2'));
 
     expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
   });
 
-  it('styles both view and content children with /deep/', () => {
+  it('styles both view and content children with /deep/', function() {
-    const viewH3 = element(by.css('app-hero-team h3'));
+    let viewH3 = element(by.css('app-hero-team h3'));
-    const contentH3 = element(by.css('app-hero-controls h3'));
+    let contentH3 = element(by.css('app-hero-controls h3'));
 
     expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
     expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
   });
 
-  it('includes styles loaded with CSS @import', () => {
+  it('includes styles loaded with CSS @import', function() {
-    const host = element(by.css('app-hero-details'));
+    let host = element(by.css('app-hero-details'));
 
     expect(host.getCssValue('padding')).toEqual('10px');
   });
 
-  it('processes template inline styles', () => {
+  it('processes template inline styles', function() {
-    const button = element(by.css('app-hero-controls button'));
+    let button = element(by.css('app-hero-controls button'));
-    const externalButton = element(by.css('body > button'));
+    let externalButton = element(by.css('body > button'));
     expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
     expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
   });
 
-  it('processes template <link>s', () => {
+  it('processes template <link>s', function() {
-    const li = element(by.css('app-hero-team li:first-child'));
+    let li = element(by.css('app-hero-team li:first-child'));
-    const externalLi = element(by.css('body > ul li'));
+    let externalLi = element(by.css('body > ul li'));
 
     expect(li.getCssValue('listStyleType')).toEqual('square');
     expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');

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

@@ -1,74 +1,76 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by } from 'protractor';
 
-describe('Dependency Injection Cookbook', () => {
+describe('Dependency Injection Cookbook', function () {
 
-    beforeAll(() => {
+    beforeAll(function () {
         browser.get('');
     });
 
-    it('should render Logged in User example', () => {
+    it('should render Logged in User example', function () {
-      const loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
+      let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0);
       expect(loggedInUser).toBeDefined();
     });
 
-    it('"Bombasto" should be the logged in user', () => {
+    it('"Bombasto" should be the logged in user', function () {
-      const loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
+      let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0);
       expect(loggedInUser).toBeDefined();
     });
 
-    it('should render sorted heroes', () => {
+    it('should render sorted heroes', function () {
-      const sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
+      let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0);
       expect(sortedHeroes).toBeDefined();
     });
 
-    it('Dr Nice should be in sorted heroes', () => {
+    it('Dr Nice should be in sorted heroes', function () {
-      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Dr Nice" and position()=2]')).get(0);
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Dr Nice" and position()=2]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('RubberMan should be in sorted heroes', () => {
+    it('RubberMan should be in sorted heroes', function () {
-      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('Magma should be in sorted heroes', () => {
+    it('Magma should be in sorted heroes', function () {
-      const sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
+      let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0);
       expect(sortedHero).toBeDefined();
     });
 
-    it('should render Hero of the Month', () => {
+    it('should render Hero of the Month', function () {
-      const heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
+      let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
     });
 
-    it('should render Hero Bios', () => {
+    it('should render Hero Bios', function () {
-      const heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
+      let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
     });
 
-    it('should render Magma\'s description in Hero Bios', () => {
+    it('should render Magma\'s description in Hero Bios', function () {
-      const magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
+      let magmaText =  element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0);
       expect(magmaText).toBeDefined();
     });
 
-    it('should render Magma\'s phone in Hero Bios and Contacts', () => {
+    it('should render Magma\'s phone in Hero Bios and Contacts', function () {
-      const magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
+      let magmaPhone =  element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0);
       expect(magmaPhone).toBeDefined();
     });
 
-    it('should render Hero-of-the-Month runner-ups', () => {
+    it('should render Hero-of-the-Month runner-ups', function () {
-      const runnersUp =  element(by.id('rups1')).getText();
+      let runnersUp =  element(by.id('rups1')).getText();
       expect(runnersUp).toContain('RubberMan, Dr Nice');
     });
 
-    it('should render DateLogger log entry in Hero-of-the-Month', () => {
+    it('should render DateLogger log entry in Hero-of-the-Month', function () {
-      const logs =  element.all(by.id('logs')).get(0).getText();
+      let logs =  element.all(by.id('logs')).get(0).getText();
       expect(logs).toContain('INFO: starting up at');
     });
 
-    it('should highlight Hero Bios and Contacts container when mouseover', () => {
+    it('should highlight Hero Bios and Contacts container when mouseover', function () {
-      const target = element(by.css('div[appHighlight="yellow"]'));
+      let target = element(by.css('div[appHighlight="yellow"]'));
-      const yellow = 'rgba(255, 255, 0, 1)';
+      let yellow = 'rgba(255, 255, 0, 1)';
 
       expect(target.getCssValue('background-color')).not.toEqual(yellow);
 
@@ -79,25 +81,25 @@ describe('Dependency Injection Cookbook', () => {
       browser.wait(() => target.getCssValue('background-color').then(c => c === yellow), 2000);
     });
 
-    describe('in Parent Finder', () => {
+    describe('in Parent Finder', function () {
-      const cathy1 = element(by.css('alex cathy'));
+      let cathy1 = element(by.css('alex cathy'));
-      const craig1 = element(by.css('alex craig'));
+      let craig1 = element(by.css('alex craig'));
-      const carol1 = element(by.css('alex carol p'));
+      let carol1 = element(by.css('alex carol p'));
-      const carol2 = element(by.css('barry carol p'));
+      let carol2 = element(by.css('barry carol p'));
 
-      it('"Cathy" should find "Alex" via the component class', () => {
+      it('"Cathy" should find "Alex" via the component class', function () {
         expect(cathy1.getText()).toContain('Found Alex via the component');
       });
 
-      it('"Craig" should not find "Alex" via the base class', () => {
+      it('"Craig" should not find "Alex" via the base class', function () {
         expect(craig1.getText()).toContain('Did not find Alex via the base');
       });
 
-      it('"Carol" within "Alex" should have "Alex" parent', () => {
+      it('"Carol" within "Alex" should have "Alex" parent', function () {
         expect(carol1.getText()).toContain('Alex');
       });
 
-      it('"Carol" within "Barry" should have "Barry" parent', () => {
+      it('"Carol" within "Barry" should have "Barry" parent', function () {
         expect(carol2.getText()).toContain('Barry');
       });
     });

aio/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule }  from '@angular/router';
 
 const routes: Routes = [];
 

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

@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 
 // #docregion import-services
-import { LoggerService } from './logger.service';
+import { LoggerService }      from './logger.service';
 import { UserContextService } from './user-context.service';
-import { UserService } from './user.service';
+import { UserService }        from './user.service';
 
 @Component({
   selector: 'app-root',

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

@@ -1,26 +1,26 @@
 // #docregion
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule }                from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule }                  from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule }             from '@angular/common/http';
 
-// import { AppRoutingModule } from './app-routing.module';
+// import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
-         HashLocationStrategy } from '@angular/common';
+         HashLocationStrategy }         from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule }                     from '@angular/core';
 
-import { HeroData } from './hero-data';
+import { HeroData }                     from './hero-data';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryWebApiModule }         from 'angular-in-memory-web-api';
 
 
-import { AppComponent } from './app.component';
+import { AppComponent }                 from './app.component';
-import { HeroBioComponent } from './hero-bio.component';
+import { HeroBioComponent }             from './hero-bio.component';
 import { HeroBiosComponent,
          HeroBiosAndContactsComponent } from './hero-bios.component';
-import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
+import { HeroOfTheMonthComponent }      from './hero-of-the-month.component';
-import { HeroContactComponent } from './hero-contact.component';
+import { HeroContactComponent }         from './hero-contact.component';
 import { HeroesBaseComponent,
-         SortedHeroesComponent } from './sorted-heroes.component';
+         SortedHeroesComponent }        from './sorted-heroes.component';
-import { HighlightDirective } from './highlight.directive';
+import { HighlightDirective }           from './highlight.directive';
 import { ParentFinderComponent,
          AlexComponent,
          AliceComponent,
@@ -30,8 +30,8 @@ import { ParentFinderComponent,
          CathyComponent,
          BarryComponent,
          BethComponent,
-         BobComponent } from './parent-finder.component';
+         BobComponent }                 from './parent-finder.component';
-import { StorageComponent } from './storage.component';
+import { StorageComponent }             from './storage.component';
 
 const declarations = [
     AppComponent,
@@ -42,11 +42,11 @@ const declarations = [
     ParentFinderComponent,
 ];
 
-const componentListA = [ AliceComponent, AlexComponent ];
+const a_components = [AliceComponent, AlexComponent ];
 
-const componentListB = [ BarryComponent, BethComponent, BobComponent ];
+const b_components = [ BarryComponent, BethComponent, BobComponent ];
 
-const componentListC = [
+const c_components = [
   CarolComponent, ChrisComponent, CraigComponent,
   CathyComponent
 ];
@@ -61,9 +61,9 @@ const componentListC = [
   ],
   declarations: [
     declarations,
-    componentListA,
+    a_components,
-    componentListB,
+    b_components,
-    componentListC,
+    c_components,
     StorageComponent,
   ],
   bootstrap: [ AppComponent ],

aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:one-line*/
 // #docregion
-import { Injectable } from '@angular/core';
+import { Injectable }    from '@angular/core';
 
 import { LoggerService } from './logger.service';
 

aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component, Input, OnInit } from '@angular/core';
 
-import { HeroCacheService } from './hero-cache.service';
+import { HeroCacheService }         from './hero-cache.service';
 
 // #docregion component
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion
-import { Component } from '@angular/core';
+import { Component }             from '@angular/core';
 
-import { HeroService } from './hero.service';
+import { HeroService }          from './hero.service';
-import { LoggerService } from './logger.service';
+import { LoggerService }        from './logger.service';
 
 //////// HeroBiosComponent ////
 // #docregion simple

aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts

@@ -1,7 +1,7 @@
 // #docregion
-import { Injectable } from '@angular/core';
+import { Injectable }  from '@angular/core';
 
-import { Hero } from './hero';
+import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 // #docregion service

aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts

@@ -3,7 +3,7 @@
 import { Component, Host, Optional } from '@angular/core';
 
 import { HeroCacheService } from './hero-cache.service';
-import { LoggerService } from './logger.service';
+import { LoggerService }    from './logger.service';
 
 // #docregion component
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-data.ts

@@ -3,7 +3,7 @@ import { Hero } from './hero';
 
 export class HeroData {
   createDb() {
-    const heroes = [
+    let heroes = [
       new Hero(1, 'Windstorm'),
       new Hero(2, 'Bombasto'),
       new Hero(3, 'Magneta'),

aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts

@@ -1,8 +1,8 @@
 // Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
 // Injecting with the MinimalLogger "interface-class"
 import { Component, NgModule } from '@angular/core';
-import { LoggerService } from './logger.service';
+import { LoggerService }       from './logger.service';
-import { MinimalLogger } from './minimal-logger.service';
+import { MinimalLogger }       from './minimal-logger.service';
 
 // #docregion
 @Component({

aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts

@@ -10,12 +10,12 @@ export const TITLE = new InjectionToken<string>('title');
 import { Component, Inject } from '@angular/core';
 
 import { DateLoggerService } from './date-logger.service';
-import { Hero } from './hero';
+import { Hero }              from './hero';
-import { HeroService } from './hero.service';
+import { HeroService }       from './hero.service';
-import { LoggerService } from './logger.service';
+import { LoggerService }     from './logger.service';
-import { MinimalLogger } from './minimal-logger.service';
+import { MinimalLogger }     from './minimal-logger.service';
 import { RUNNERS_UP,
-         runnersUpFactory } from './runners-up';
+         runnersUpFactory }  from './runners-up';
 
 // #enddocregion hero-of-the-month
 // #docregion some-hero

aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Hero } from './hero';
+import { Hero }       from './hero';
 
 @Injectable({
   providedIn: 'root'

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -1,4 +1,5 @@
-// tslint:disable: component-selector space-before-function-paren
+/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */
+/* tslint:disable:*/
 // #docplaster
 // #docregion
 import { Component, forwardRef, Optional, SkipSelf } from '@angular/core';
@@ -19,7 +20,8 @@ const DifferentParent = Parent;
 // The `parentType` defaults to `Parent` when omitting the second parameter.
 // #docregion provide-the-parent
 export function provideParent
-// #enddocregion provide-the-parent
+// #enddocregion provide-parent, provide-the-parent
+// #docregion provide-parent
   (component: any, parentType?: any) {
     return { provide: parentType || Parent, useExisting: forwardRef(() => component) };
   }

aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { InjectionToken } from '@angular/core';
 
-import { Hero } from './hero';
+import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 // #docregion runners-up
@@ -22,5 +22,5 @@ export function runnersUpFactory(take: number) {
           .join(', ');
 // #docregion factory-synopsis
   };
-}
+};
 // #enddocregion factory-synopsis

aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts

@@ -2,8 +2,8 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
-import { Hero } from './hero';
+import { Hero }              from './hero';
-import { HeroService } from './hero.service';
+import { HeroService }       from './hero.service';
 
 /////// HeroesBaseComponent /////
 // #docregion heroes-base, injection

aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion
-import { Injectable } from '@angular/core';
+import { Injectable }    from '@angular/core';
 
 import { LoggerService } from './logger.service';
-import { UserService } from './user.service';
+import { UserService }   from './user.service';
 
 // #docregion injectables, injectable
 @Injectable({
@@ -24,7 +24,7 @@ export class UserContextService {
   // #enddocregion ctor, injectables
 
   loadUser(userId: number) {
-    const user = this.userService.getUserById(userId);
+    let user = this.userService.getUserById(userId);
     this.name = user.name;
     this.role = user.role;
 

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

@@ -1,196 +1,202 @@
+'use strict'; // necessary for es6 output in node
+
 import { browser, element, by, ElementFinder } from 'protractor';
 
-describe('Dependency Injection Tests', () => {
+describe('Dependency Injection Tests', function () {
 
   let expectedMsg: string;
   let expectedMsgRx: RegExp;
 
-  beforeAll(() => {
+  beforeAll(function () {
     browser.get('');
   });
 
-  describe('Cars:', () => {
+  describe('Cars:', function() {
 
-    it('DI car displays as expected', () => {
+    it('DI car displays as expected', function () {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
     });
 
-    it('No DI car displays as expected', () => {
+    it('No DI car displays as expected', function () {
       expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
     });
 
-    it('Injector car displays as expected', () => {
+    it('Injector car displays as expected', function () {
       expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
     });
 
-    it('Factory car displays as expected', () => {
+    it('Factory car displays as expected', function () {
       expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
     });
 
-    it('Simple car displays as expected', () => {
+    it('Simple car displays as expected', function () {
       expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
     });
 
-    it('Super car displays as expected', () => {
+    it('Super car displays as expected', function () {
       expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
       expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
     });
 
-    it('Test car displays as expected', () => {
+    it('Test car displays as expected', function () {
       expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
       expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('Other Injections:', () => {
+  describe('Other Injections:', function() {
-    it('DI car displays as expected', () => {
+    it('DI car displays as expected', function () {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
       expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
     });
 
-    it('Hero displays as expected', () => {
+    it('Hero displays as expected', function () {
       expectedMsg = 'Dr Nice';
       expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
     });
 
-    it('Optional injection displays as expected', () => {
+    it('Optional injection displays as expected', function () {
       expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
       expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('Tests:', () => {
+  describe('Tests:', function() {
 
-    it('Tests display as expected', () => {
+    it('Tests display as expected', function () {
       expectedMsgRx = /Tests passed/;
       expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
     });
 
   });
 
-  describe('Provider variations:', () => {
+  describe('Provider variations:', function() {
 
-    it('P1 (class) displays as expected', () => {
+    it('P1 (class) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with Logger class';
       expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
     });
 
-    it('P3 (provide) displays as expected', () => {
+    it('P3 (provide) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with useClass:Logger';
       expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
 
-    it('P4 (useClass:BetterLogger) displays as expected', () => {
+    it('P4 (useClass:BetterLogger) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
       expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
     });
 
-    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', () => {
+    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', function () {
       expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
       expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6a (no alias) displays as expected', () => {
+    it('P6a (no alias) displays as expected', function () {
       expectedMsg = 'Hello OldLogger (but we want NewLogger)';
       expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6b (alias) displays as expected', () => {
+    it('P6b (alias) displays as expected', function () {
       expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
       expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
     });
 
-    it('P7 (useValue) displays as expected', () => {
+    it('P7 (useValue) displays as expected', function () {
       expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
       expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
     });
 
-    it('P8 (useFactory) displays as expected', () => {
+    it('P8 (useFactory) displays as expected', function () {
       expectedMsg = 'Hero service injected successfully via heroServiceProvider';
       expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
     });
 
-    it('P9 (InjectionToken) displays as expected', () => {
+    it('P9 (InjectionToken) displays as expected', function () {
       expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
       expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
     });
 
-    it('P10 (optional dependency) displays as expected', () => {
+    it('P10 (optional dependency) displays as expected', function () {
       expectedMsg = 'Optional logger was not available';
       expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
     });
   });
 
-  describe('User/Heroes:', () => {
+  describe('User/Heroes:', function() {
-    it('User is Bob - unauthorized', () => {
+    it('User is Bob - unauthorized', function () {
       expectedMsgRx = /Bob, is not authorized/;
       expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
     });
 
-    it('should have button', () => {
+    it('should have button', function () {
       expect(element.all(by.cssContainingText('button', 'Next User'))
         .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
     });
 
-    it('unauthorized user should have multiple unauthorized heroes', () => {
+    it('unauthorized user should have multiple unauthorized heroes', function () {
-      const heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
     });
 
-    it('unauthorized user should have no secret heroes', () => {
+    it('unauthorized user should have no secret heroes', function () {
-      const heroes = element.all(by.css('#unauthorized app-hero-list div'));
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
 
-      const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
-        return elem.getText().then((text: string) => /secret/.test(text));
+        return elem.getText().then((text: string) => {
+          return /secret/.test(text);
+        });
       });
 
       expect(filteredHeroes.count()).toEqual(0);
     });
 
-    it('unauthorized user should have no authorized heroes listed', () => {
+    it('unauthorized user should have no authorized heroes listed', function () {
       expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
     });
 
-    describe('after button click', () => {
+    describe('after button click', function() {
 
-      beforeAll((done: any) => {
+      beforeAll(function (done: any) {
-        const buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
+        let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
         buttonEle.click().then(done, done);
       });
 
-      it('User is Alice  - authorized', () => {
+      it('User is Alice  - authorized', function () {
         expectedMsgRx = /Alice, is authorized/;
         expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
       });
 
-      it('authorized user should have multiple authorized heroes ', () => {
+      it('authorized user should have multiple authorized heroes ', function () {
-        const heroes = element.all(by.css('#authorized app-hero-list div'));
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', () => {
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () {
-        const heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
+        let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have secret heroes', () => {
+      it('authorized user should have secret heroes', function () {
-        const heroes = element.all(by.css('#authorized app-hero-list div'));
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
 
-        const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) {
-         return elem.getText().then((text: string) => /secret/.test(text));
+         return elem.getText().then(function(text: string) {
+            return /secret/.test(text);
+          });
         });
 
         expect(filteredHeroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have no unauthorized heroes listed', () => {
+      it('authorized user should have no unauthorized heroes listed', function () {
         expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
       });
     });

aio/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -2,7 +2,7 @@
 // #docregion imports
 import { Component, Inject } from '@angular/core';
 
-import { APP_CONFIG, AppConfig } from './app.config';
+import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
 
 @Component({

aio/content/examples/dependency-injection/src/app/app.module.ts

@@ -1,8 +1,8 @@
 // #docplaster
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule }  from '@angular/platform-browser';
 
-import { APP_CONFIG, HERO_DI_CONFIG } from './app.config';
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
 import { AppComponent } from './app.component';
 import { CarComponent } from './car/car.component';
 import { HeroesComponent } from './heroes/heroes.component';

aio/content/examples/dependency-injection/src/app/car/car-creations.ts

@@ -7,7 +7,7 @@ import { Car, Engine, Tires } from './car';
 export function simpleCar() {
   // #docregion car-ctor-instantiation
   // Simple car with 4 cylinders and Flintstone tires.
-  const car = new Car(new Engine(), new Tires());
+  let car = new Car(new Engine(), new Tires());
   // #enddocregion car-ctor-instantiation
   car.description = 'Simple';
   return car;
@@ -16,31 +16,30 @@ export function simpleCar() {
 
 ///////// example 2 ////////////
 // #docregion car-ctor-instantiation-with-param
-class Engine2 {
+  class Engine2 {
-  constructor(public cylinders: number) { }
+    constructor(public cylinders: number) { }
-}
+  }
 // #enddocregion car-ctor-instantiation-with-param
-
 export function superCar() {
-  // #docregion car-ctor-instantiation-with-param
+// #docregion car-ctor-instantiation-with-param
   // Super car with 12 cylinders and Flintstone tires.
-  const bigCylinders = 12;
+  let bigCylinders = 12;
-  const car = new Car(new Engine2(bigCylinders), new Tires());
+  let car = new Car(new Engine2(bigCylinders), new Tires());
-  // #enddocregion car-ctor-instantiation-with-param
+// #enddocregion car-ctor-instantiation-with-param
   car.description = 'Super';
   return car;
 }
 
 /////////// example 3 //////////
-// #docregion car-ctor-instantiation-with-mocks
+  // #docregion car-ctor-instantiation-with-mocks
-class MockEngine extends Engine { cylinders = 8; }
+  class MockEngine extends Engine { cylinders = 8; }
-class MockTires  extends Tires  { make = 'YokoGoodStone'; }
+  class MockTires  extends Tires  { make = 'YokoGoodStone'; }
 
-// #enddocregion car-ctor-instantiation-with-mocks
+  // #enddocregion car-ctor-instantiation-with-mocks
 export function testCar() {
   // #docregion car-ctor-instantiation-with-mocks
   // Test car with 8 cylinders and YokoGoodStone tires.
-  const car = new Car(new MockEngine(), new MockTires());
+  let car = new Car(new MockEngine(), new MockTires());
   // #enddocregion car-ctor-instantiation-with-mocks
   car.description = 'Test';
   return car;

aio/content/examples/dependency-injection/src/app/car/car-factory.ts

@@ -4,7 +4,7 @@ import { Engine, Tires, Car } from './car';
 // BAD pattern!
 export class CarFactory {
   createCar() {
-    const car = new Car(this.createEngine(), this.createTires());
+    let car = new Car(this.createEngine(), this.createTires());
     car.description = 'Factory';
     return car;
   }

aio/content/examples/dependency-injection/src/app/car/car-injector.ts

@@ -1,7 +1,7 @@
 import { Injector } from '@angular/core';
 
 import { Car, Engine, Tires } from './car';
-import { Logger } from '../logger.service';
+import { Logger }             from '../logger.service';
 
 // #docregion injector
 export function useInjector() {
@@ -26,14 +26,14 @@ export function useInjector() {
     ]
   });
   // #docregion injector-call
-  const car = injector.get(Car);
+  let car = injector.get(Car);
   // #enddocregion injector-call, injector-create-and-call
   car.description = 'Injector';
 
   injector = Injector.create({
     providers: [{ provide: Logger, deps: [] }]
   });
-  const logger = injector.get(Logger);
+  let logger = injector.get(Logger);
   logger.log('Injector car.drive() said: ' + car.drive());
   return car;
 }

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -1,15 +1,15 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { Car, Engine, Tires } from './car';
+import { Car, Engine, Tires }  from './car';
-import { Car as CarNoDi } from './car-no-di';
+import { Car as CarNoDi }      from './car-no-di';
-import { CarFactory } from './car-factory';
+import { CarFactory }          from './car-factory';
 
 import { testCar,
          simpleCar,
-         superCar } from './car-creations';
+         superCar }           from './car-creations';
 
-import { useInjector } from './car-injector';
+import { useInjector }        from './car-injector';
 
 
 @Component({
@@ -27,9 +27,9 @@ import { useInjector } from './car-injector';
   providers: [Car, Engine, Tires]
 })
 export class CarComponent {
-  factoryCar  = (new CarFactory()).createCar();
+  factoryCar  = (new CarFactory).createCar();
   injectorCar = useInjector();
-  noDiCar     = new CarNoDi();
+  noDiCar     = new CarNoDi;
   simpleCar   = simpleCar();
   superCar    = superCar();
   testCar     = testCar();

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts

@@ -1,6 +1,6 @@
 // #docregion
-import { Component } from '@angular/core';
+import { Component }   from '@angular/core';
-import { HEROES } from './mock-heroes';
+import { HEROES }      from './mock-heroes';
 
 @Component({
   selector: 'app-hero-list',

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { Component } from '@angular/core';
+import { Component }   from '@angular/core';
-import { Hero } from './hero';
+import { Hero }        from './hero';
 // #enddocregion
 import { HeroService } from './hero.service.1';
 /*