release: cut the v10.1.6 release

Previously, inline exports of the form `exports.foo = <implementation>;` were
being interpreted (by the ngtsc `PartialInterpeter`) as `Reference` objects.
This is not what is desired since it prevents the value of the export
from being unpacked, such as when analyzing `NgModule` declarations:

```
exports.directives = [Directive1, Directive2];

@NgImport({declarations: [exports.directives]})
class AppModule {}
```

In this example the interpreter would think that `exports.directives`
was a reference rather than an array that needs to be unpacked.

This bug was picked up by the ngcc-validation repository. See
https://github.com/angular/ngcc-validation/pull/1990 and
https://circleci.com/gh/angular/ngcc-validation/17130

PR Close #39272

.circleci/config.yml

@@ -27,6 +27,8 @@ var_3: &cache_key v7-angular-node-12-{{ checksum ".bazelversion" }}-{{ checksum
 # folder will contain all previously used versions and ultimately cause the cache restoring to
 # be slower due to its growing size.
 var_4: &cache_key_fallback v7-angular-node-12-{{ checksum ".bazelversion" }}
+var_3_win: &cache_key_win v7-angular-win-node-12-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "packages/bazel/package.bzl" }}-{{ checksum "aio/yarn.lock" }}
+var_4_win: &cache_key_win_fallback v7-angular-win-node-12-{{ checksum ".bazelversion" }}
 
 # 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.
@@ -181,12 +183,23 @@ commands:
   setup_win:
     description: Setup windows node environment
     steps:
-      - checkout
+      # Use the Linux workspace directly, as it already has checkout, rebased and node modules.
+      - custom_attach_workspace
       # Install Bazel pre-requisites that aren't in the preconfigured CircleCI Windows VM.
       - run: ./.circleci/windows-env.ps1
       - run: node --version
       - run: yarn --version
+      - restore_cache:
+          keys:
+            - *cache_key_win
+            - *cache_key_win_fallback
+      # Reinstall to get windows binaries.
       - run: yarn install --frozen-lockfile --non-interactive
+      # Install @bazel/bazelisk globally and use that for the first run.
+      # Workaround for https://github.com/bazelbuild/rules_nodejs/issues/894
+      # NB: the issue was for @bazel/bazel but the same problem applies to @bazel/bazelisk
+      - run: yarn global add @bazel/bazelisk@$env:BAZELISK_VERSION
+      - run: bazelisk info
 
   notify_webhook_on_fail:
     description: Notify a webhook about failure
@@ -641,10 +654,8 @@ jobs:
           name: Starting Saucelabs tunnel service
           command: ./tools/saucelabs/sauce-service.sh run
           background: true
-      # add module umd tsc compile option so the test can work
-      # properly in the legacy browsers
-      - run: yarn tsc -p packages --module UMD
-      - run: yarn tsc -p modules --module UMD
+      - 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
@@ -736,10 +747,7 @@ jobs:
              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/bundles/zone-patch-electron.umd.js ./packages/zone.js/test/extra/ &&
              yarn --cwd packages/zone.js electrontest
-      - run: yarn --cwd packages/zone.js jest:test
-      - run: yarn --cwd packages/zone.js jest:nodetest
-      - run: yarn --cwd packages/zone.js/test/typings install --frozen-lockfile --non-interactive
-      - run: yarn --cwd packages/zone.js/test/typings test
+      - run: yarn --cwd packages/zone.js jesttest
 
   # Windows jobs
   # Docs: https://circleci.com/docs/2.0/hello-world-windows/
@@ -753,6 +761,12 @@ jobs:
           # Probably a powershell command parsing thing. There's no problem using a yarn script though.
           command: yarn circleci-win-ve
           no_output_timeout: 45m
+      # Save bazel repository cache to use on subsequent runs.
+      # We don't save node_modules because it's faster to use the linux workspace and reinstall.
+      - save_cache:
+          key: *cache_key_win
+          paths:
+            - "C:/Users/circleci/bazel_repository_cache"
 
   test_ivy_aot_win:
     executor: windows-executor
@@ -857,12 +871,20 @@ workflows:
       - test_zonejs:
           requires:
             - setup
+      # Windows Jobs
+      # These are very slow so we run them on non-PRs only for now.
+      # TODO: remove the filter when CircleCI makes Windows FS faster.
+      # The Windows jobs are only run after their non-windows counterparts finish successfully.
+      # This isn't strictly necessary as there is no artifact dependency, but helps economize
+      # CI resources by not attempting to build when we know should fail.
       - test_win:
+          <<: *skip_on_pull_requests
           requires:
-            - setup
+            - test
       - test_ivy_aot_win:
+          <<: *skip_on_pull_requests
           requires:
-            - setup
+            - test_ivy_aot
 
   monitoring:
     jobs:

.circleci/windows-env.ps1

@@ -2,8 +2,8 @@
 # https://docs.bazel.build/versions/master/install-windows.html
 # https://docs.bazel.build/versions/master/windows.html
 # Install MSYS2 and packages
-choco install msys2 --version 20200903.0.0 --no-progress --package-parameters "/NoUpdate"
-C:\tools\msys64\usr\bin\bash.exe -l -c "pacman --needed --noconfirm -S zip unzip patch diffutils"
+choco install msys2 --version 20180531.0.0 --no-progress --package-parameters "/NoUpdate"
+C:\tools\msys64\usr\bin\bash.exe -l -c "pacman --needed --noconfirm -S zip unzip patch diffutils git"
 
 # Add PATH modifications to the Powershell profile. This is the win equivalent of .bash_profile.
 # https://docs.microsoft.com/en-us/previous-versions//bb613488(v=vs.85)

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

@@ -1,5 +1,5 @@
 ---
-name: "\U0001F41E Bug report"
+name: "\U0001F41EBug report"
 about: Report a bug in the Angular Framework
 ---
 <!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

.github/ISSUE_TEMPLATE/2-feature-request.md

@@ -1,5 +1,5 @@
 ---
-name: "\U0001F680 Feature request"
+name: "\U0001F680Feature request"
 about: Suggest a feature for Angular Framework
 
 ---

.github/ISSUE_TEMPLATE/5-support-request.md

@@ -1,5 +1,5 @@
 ---
-name: "❓ Support request"
+name: "❓Support request"
 about: Questions and requests for support
 
 ---

.github/ISSUE_TEMPLATE/6-angular-cli.md

@@ -1,5 +1,5 @@
 ---
-name: "\U0001F6E0️ Angular CLI"
+name: "\U0001F6E0️Angular CLI"
 about: Issues and feature requests for Angular CLI
 
 ---

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

@@ -1,5 +1,5 @@
 ---
-name: "\U0001F48E Angular Components"
+name: "\U0001F48EAngular Components"
 about: Issues and feature requests for Angular Components
 
 ---

.github/workflows/lock-closed.yml

@@ -10,6 +10,6 @@ jobs:
     if: github.repository == 'angular/angular'
     runs-on: ubuntu-latest
     steps:
-      - uses: angular/dev-infra/github-actions/lock-closed@414834b2b24dd2df37c6ed00808387ee6fd91b66
+      - uses: angular/dev-infra/github-actions/lock-closed@66462f6
         with:
           lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}

.gitmessage

@@ -105,9 +105,9 @@ Fixes #<issue number>
 #   │       │
 #   │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
 #   │                          elements|forms|http|language-service|localize|platform-browser|
-#   │                          platform-browser-dynamic|platform-server|router|service-worker|
-#   │                          upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
-#   │                          ngcc|ve
+#   │                          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

.pullapprove.yml

@@ -186,7 +186,6 @@ groups:
          - IgorMinar               # Igor Minar
          - jbogarthyde             # Judy Bogart
          - jelbourn                # Jeremy Elbourn
-         - jessicajaniuk           # Jessica Janiuk
          - JiaLiPassion            # Jia Li
          - JoostK                  # Joost Koehoorn
          - josephperrott           # Joey Perrott
@@ -304,6 +303,8 @@ groups:
           'packages/platform-browser/**',
           'packages/examples/platform-browser/**',
           'packages/platform-browser-dynamic/**',
+          'packages/platform-webworker/**',
+          'packages/platform-webworker-dynamic/**',
           'packages/examples/common/**',
           'packages/docs/**',
           'aio/content/guide/accessibility.md',
@@ -406,7 +407,6 @@ groups:
           'aio/content/guide/structural-directives.md',
           'aio/content/examples/structural-directives/**',
           'aio/content/guide/svg-in-templates.md',
-          'aio/content/guide/style-precedence.md',
           'aio/content/images/guide/structural-directives/**',
           'aio/content/guide/template-statements.md',
           'aio/content/guide/user-input.md',
@@ -1122,7 +1122,6 @@ groups:
           'docs/SAVED_REPLIES.md',
           'docs/TOOLS.md',
           'docs/TRIAGE_AND_LABELS.md',
-          'docs/images/**',
           'goldens/*',
           'modules/*',
           'packages/*',

CHANGELOG.md

@@ -1,55 +1,3 @@
-<a name="11.0.0-next.6"></a>
-# 11.0.0-next.6 (2020-10-14)
-
-
-### Bug Fixes
-
-* **compiler-cli:** type checking of expressions within ICUs ([#39072](https://github.com/angular/angular/issues/39072)) ([0a16e60](https://github.com/angular/angular/commit/0a16e60)), closes [#39064](https://github.com/angular/angular/issues/39064)
-* **core:** migrate relative link resolution with single quotes ([#39102](https://github.com/angular/angular/issues/39102)) ([049b453](https://github.com/angular/angular/commit/049b453)), closes [#39082](https://github.com/angular/angular/issues/39082)
-* **core:** use Trusted Types policy in inert DOM builder ([#39208](https://github.com/angular/angular/issues/39208)) ([7d49299](https://github.com/angular/angular/commit/7d49299))
-* **core:** use Trusted Types policy in named_array_type ([#39209](https://github.com/angular/angular/issues/39209)) ([f6d5cdf](https://github.com/angular/angular/commit/f6d5cdf))
-* **router:** Allow undefined inputs on routerLink ([#39151](https://github.com/angular/angular/issues/39151)) ([b0b4953](https://github.com/angular/angular/commit/b0b4953))
-* **router:** create schematic for preserveQueryParams ([#38762](https://github.com/angular/angular/issues/38762)) ([93ee05d](https://github.com/angular/angular/commit/93ee05d))
-* **router:** remove preserveQueryParams symbol ([#38762](https://github.com/angular/angular/issues/38762)) ([783a5bd](https://github.com/angular/angular/commit/783a5bd))
-
-
-### Features
-
-* **core:** add automated migration to replace async with waitForAsync ([#39212](https://github.com/angular/angular/issues/39212)) ([5ce71e0](https://github.com/angular/angular/commit/5ce71e0))
-* **core:** add automated migration to replace ViewEncapsulation.Native ([#38882](https://github.com/angular/angular/issues/38882)) ([0e733f3](https://github.com/angular/angular/commit/0e733f3))
-* **core:** add initialNavigation schematic ([#36926](https://github.com/angular/angular/issues/36926)) ([0ec7043](https://github.com/angular/angular/commit/0ec7043))
-* **core:** add Trusted Types workaround for Function constructor ([#39209](https://github.com/angular/angular/issues/39209)) ([5913e5c](https://github.com/angular/angular/commit/5913e5c))
-* **core:** create internal Trusted Types module ([#39207](https://github.com/angular/angular/issues/39207)) ([0875fd2](https://github.com/angular/angular/commit/0875fd2))
-* **core:** depend on type definitions for Trusted Types ([#39207](https://github.com/angular/angular/issues/39207)) ([c4266fb](https://github.com/angular/angular/commit/c4266fb))
-* **core:** remove ViewEncapsulation.Native ([#38882](https://github.com/angular/angular/issues/38882)) ([4a1c12c](https://github.com/angular/angular/commit/4a1c12c))
-* **language-service:** [Ivy] getSemanticDiagnostics for external templates ([#39065](https://github.com/angular/angular/issues/39065)) ([63624a2](https://github.com/angular/angular/commit/63624a2))
-* **language-service:** Add getTypeDefinitionAtPosition (go to type definition) ([#39145](https://github.com/angular/angular/issues/39145)) ([a84976f](https://github.com/angular/angular/commit/a84976f))
-* **language-service:** Add module name to directive quick info ([#39121](https://github.com/angular/angular/issues/39121)) ([4604fe9](https://github.com/angular/angular/commit/4604fe9))
-* **router:** add new initialNavigation options to replace legacy ([#37480](https://github.com/angular/angular/issues/37480)) ([c4becca](https://github.com/angular/angular/commit/c4becca))
-
-
-### BREAKING CHANGES
-
-* **router:** * The `initialNavigation` property for the options in
-  `RouterModule.forRoot` no longer supports `legacy_disabled`,
-  `legacy_enabled`, `true`, or `false` as valid values.
-  `legacy_enabled` (the old default) is instead `enabledNonBlocking`
-* `enabled` is deprecated as a valid value for the
-  `RouterModule.forRoot` `initialNavigation` option. `enabledBlocking`
-  has been introduced to replace it
-* **router:** preserveQueryParams has been removed, use
-queryParamsHandling="preserve" instead
-* **router:**  If you were accessing the `RouterLink` values of `queryParams`,
-`fragment` or `queryParamsHandling` you might need to relax the typing to also
-accept `undefined` and `null`. ([#39151](https://github.com/angular/angular/issues/39151))
-* **core:** * `ViewEncapsulation.Native` has been removed. Use `ViewEncapsulation.ShadowDom` instead. Existing
-usages will be updated automatically by `ng update`.
-* **compiler-cli:** Expressions within ICUs are now type-checked again, fixing a regression
-in Ivy. This may cause compilation failures if errors are found in
-expressions that appear within an ICU. Please correct these expressions
-to resolve the type-check errors.
-
-
 <a name="10.1.6"></a>
 ## 10.1.6 (2020-10-14)
 
@@ -75,45 +23,6 @@ to resolve the type-check errors.
 * **ngcc:** do not rescan program source files when referenced from multiple root files ([#39254](https://github.com/angular/angular/issues/39254)) ([5221df8](https://github.com/angular/angular/commit/5221df8)), closes [#39240](https://github.com/angular/angular/issues/39240)
 
 
-<a name="11.0.0-next.5"></a>
-# 11.0.0-next.5 (2020-10-07)
-
-
-### Bug Fixes
-
-* **common:** add boolean to valid json for testing ([#37893](https://github.com/angular/angular/issues/37893)) ([3c474ec](https://github.com/angular/angular/commit/3c474ec)), closes [#20690](https://github.com/angular/angular/issues/20690)
-* **core:** use single quotes for relative link resolution migration to align with style guide ([#39070](https://github.com/angular/angular/issues/39070)) ([8894706](https://github.com/angular/angular/commit/8894706))
-* **forms:** improve types of directive constructor arguments ([#38944](https://github.com/angular/angular/issues/38944)) ([246de9a](https://github.com/angular/angular/commit/246de9a))
-* **forms:** include null in .parent of abstract control ([#32671](https://github.com/angular/angular/issues/32671)) ([f4f1bcc](https://github.com/angular/angular/commit/f4f1bcc)), closes [#16999](https://github.com/angular/angular/issues/16999)
-* **language-service:** [Ivy] hybrid visitor should not locate let keyword ([#39061](https://github.com/angular/angular/issues/39061)) ([70e13dc](https://github.com/angular/angular/commit/70e13dc))
-* **router:** properly assign ExtraOptions to Router in RouterTestingModule ([#39096](https://github.com/angular/angular/issues/39096)) ([d8c0534](https://github.com/angular/angular/commit/d8c0534)), closes [#23347](https://github.com/angular/angular/issues/23347)
-
-
-### Features
-
-* **compiler-cli:** support getting resource dependencies for a source file ([#38048](https://github.com/angular/angular/issues/38048)) ([5dbf357](https://github.com/angular/angular/commit/5dbf357))
-* **forms:** add migration for AbstractControl.parent accesses ([#39009](https://github.com/angular/angular/issues/39009)) ([aeec223](https://github.com/angular/angular/commit/aeec223)), closes [#32671](https://github.com/angular/angular/issues/32671)
-* **language-service:** Add getDefinitionAndBoundSpan (go to definition) ([#39101](https://github.com/angular/angular/issues/39101)) ([3975dd9](https://github.com/angular/angular/commit/3975dd9))
-* **language-service:** add quick info for inline templates in ivy ([#39060](https://github.com/angular/angular/issues/39060)) ([904adb7](https://github.com/angular/angular/commit/904adb7))
-
-
-### BREAKING CHANGES
-
-* **forms:** Directives in the `@angular/forms` package used to have `any[]` as a type of `validators` and
-`asyncValidators` arguments in constructors. Now these arguments are properly typed, so if your
-code relies on directive constructor types it may require some updates to improve type safety.
-* **forms:** Type of AbstractFormControl.parent now includes null
-
-`null` is now included in the types of .parent. If you don't already have a check for this case,
-the TypeScript compiler might compain. A v11 migration exists which adds the not-null assertion
-operator where necessary.
-
-In an unlikely case your code was testing the parnet against undefined with sitrct equality,
-you'll need to change this to `=== null` instead, since the parent is not explicily initialized
-with `null` instead of being left `undefined`.
-
-
-
 <a name="10.1.5"></a>
 ## 10.1.5 (2020-10-07)
 
@@ -125,92 +34,6 @@ with `null` instead of being left `undefined`.
 
 
 
-<a name="11.0.0-next.4"></a>
-# 11.0.0-next.4 (2020-09-30)
-
-
-### Bug Fixes
-
-* **common:** correct and simplify typing of `KeyValuePipe` ([#37447](https://github.com/angular/angular/issues/37447)) ([4dfe0fa](https://github.com/angular/angular/commit/4dfe0fa))
-* **common:** correct and simplify typing of AsyncPipe ([#37447](https://github.com/angular/angular/issues/37447)) ([5f815c0](https://github.com/angular/angular/commit/5f815c0))
-* **common:** correct and simplify typing of I18nPluralPipe ([#37447](https://github.com/angular/angular/issues/37447)) ([3b919ef](https://github.com/angular/angular/commit/3b919ef))
-* **common:** correct typing and implementation of `SlicePipe` ([#37447](https://github.com/angular/angular/issues/37447)) ([4744c22](https://github.com/angular/angular/commit/4744c22))
-* **common:** let case conversion pipes accept type unions with `null` ([#36259](https://github.com/angular/angular/issues/36259)) ([#37447](https://github.com/angular/angular/issues/37447)) ([c7d5555](https://github.com/angular/angular/commit/c7d5555))
-* **compiler-cli:** perform DOM schema checks even in basic mode in g3 ([#38943](https://github.com/angular/angular/issues/38943)) ([40975e0](https://github.com/angular/angular/commit/40975e0))
-* **language-service:** hybrid visitor returns parent node of BoundAttribute ([#38995](https://github.com/angular/angular/issues/38995)) ([323be39](https://github.com/angular/angular/commit/323be39))
-* **packaging:** remove polyfills needed to run tests on IE9 and IE 10 ([#38931](https://github.com/angular/angular/issues/38931)) ([4ca1c73](https://github.com/angular/angular/commit/4ca1c73))
-* **platform-webworker:** remove platform-webworker and platform-webworker-dynamic ([#38846](https://github.com/angular/angular/issues/38846)) ([93c3d8f](https://github.com/angular/angular/commit/93c3d8f))
-* **router:** make relativeLinkResolution corrected by default ([#25609](https://github.com/angular/angular/issues/25609)) ([837889f](https://github.com/angular/angular/commit/837889f)), closes [#22394](https://github.com/angular/angular/issues/22394)
-
-
-### Code Refactoring
-
-* **router:** Adjust type of parameter in navigateByUrl and createUrlTree to be more accurate ([#38227](https://github.com/angular/angular/issues/38227)) ([e4f4d18](https://github.com/angular/angular/commit/e4f4d18)), closes [#18798](https://github.com/angular/angular/issues/18798)
-
-
-### Features
-
-* **common:** stricter types for DatePipe ([#37447](https://github.com/angular/angular/issues/37447)) ([daf8b7f](https://github.com/angular/angular/commit/daf8b7f))
-* **common:** stricter types for number pipes ([#37447](https://github.com/angular/angular/issues/37447)) ([7b2aac9](https://github.com/angular/angular/commit/7b2aac9))
-* **compiler:** Add keySpan to Variable Node ([#38965](https://github.com/angular/angular/issues/38965)) ([239968d](https://github.com/angular/angular/commit/239968d))
-* **router:** Add `relativeLinkResolution` migration to update default value ([#38698](https://github.com/angular/angular/issues/38698)) ([15ea811](https://github.com/angular/angular/commit/15ea811))
-
-
-### BREAKING CHANGES
-
-* **packaging:** In v10, IE 9, 10, and IE mobile support was deprecated. In v11, Angular framework removes IE 9,
-10, and IE mobile support completely.
-Supporting outdated browsers like these increases bundle size, code complexity, and test load,
-and also requires time and effort that could be spent on improvements to the framework.
-For example, fixing issues can be more difficult, as a straightforward fix for modern browsers
-could break old ones that have quirks due to not receiving updates from vendors.
-* **platform-webworker:** @angular/platform-webworker and @angular/platform-webworker-dynamic
-have been removed as they were deprecated in v8
-* **common:** The `slice` pipe now returns `null` for the `undefined` input value,
-which is consistent with the behavior of most pipes. If you rely on
-`undefined` being the result in that case, you now need to check for it
-explicitly.
-* **common:** The typing of the `keyvalue` pipe has been fixed to report that for
-input objects that have `number` keys, the result will contain the
-string representation of the keys. This was already the case and the
-code has simply been updated to reflect this. Please update the
-consumers of the pipe output if they were relying on the incorrect
-types. Note that this does not affect use cases where the input values
-are `Map`s, so if you need to preserve `number`s, this is an effective
-way.
-* **common:** The signatures of the number pipes now explicitly state which types are
-accepted. This should only cause issues in corner cases, as any other
-values would result in runtime exceptions.
-* **common:** The signature of the `date` pipe now explicitly states which types are
-accepted. This should only cause issues in corner cases, as any other
-values would result in runtime exceptions.
-* **common:** The async pipe no longer claims to return `undefined` for an input that
-was typed as `undefined`. Note that the code actually returned `null` on
-`undefined` inputs. In the unlikely case you were relying on this,
-please fix the typing of the consumers of the pipe output.
-* **common:** The case conversion pipes no longer let falsy values through. They now
-map both `null` and `undefined` to `null` and raise an exception on
-invalid input (`0`, `false`, `NaN`) just like most "common pipes". If
-your code required falsy values to pass through, you need to handle them
-explicitly.
-* **router:** While the new parameter types allow a variable of type
-`NavigationExtras` to be passed in, they will not allow object literals,
-as they may only specify known properties. They will also not accept
-types that do not have properties in common with the ones in the `Pick`.
-To fix this error, only specify properties from the `NavigationExtras` which are
-actually used in the respective function calls or use a type assertion
-on the object or variable: `as NavigationExtras`.
-* **router:** This commit changes the default value of
-`relativeLinkResolution` from `'legacy'` to `'default'`. If your
-application previously used the default by not specifying a value in the
-`ExtraOptions` and uses relative links when navigating from children of
-empty path routes, you will need to update your `RouterModule` to
-specifically specify `'legacy'` for `relativeLinkResolution`.
-See https://angular.io/api/router/ExtraOptions#relativeLinkResolution
-for more details.
-
-
-
 <a name="10.1.4"></a>
 ## 10.1.4 (2020-09-30)
 
@@ -221,38 +44,6 @@ for more details.
 
 
 
-<a name="11.0.0-next.3"></a>
-# 11.0.0-next.3 (2020-09-23)
-
-
-### Bug Fixes
-
-* **common:** add `params` and `reportProgress` options to `HttpClient.put()` overload ([#37873](https://github.com/angular/angular/issues/37873)) ([dd8d8c8](https://github.com/angular/angular/commit/dd8d8c8)), closes [#23600](https://github.com/angular/angular/issues/23600)
-* **compiler-cli:** generate `let` statements in ES2015+ mode ([#38775](https://github.com/angular/angular/issues/38775)) ([123bff7](https://github.com/angular/angular/commit/123bff7))
-* **core:** ensure TestBed is not instantiated before override provider ([#38717](https://github.com/angular/angular/issues/38717)) ([c8f056b](https://github.com/angular/angular/commit/c8f056b))
-* **forms:** type NG_VALUE_ACCESSOR injection token as array ([#29723](https://github.com/angular/angular/issues/29723)) ([2b1b718](https://github.com/angular/angular/commit/2b1b718)), closes [#29351](https://github.com/angular/angular/issues/29351)
-
-
-### Features
-
-* **common:** Add ISO week-numbering year formats support to formatDate ([#38828](https://github.com/angular/angular/issues/38828)) ([984ed39](https://github.com/angular/angular/commit/984ed39))
-* **compiler:** Parse and recover on incomplete opening HTML tags ([#38681](https://github.com/angular/angular/issues/38681)) ([6ae3b68](https://github.com/angular/angular/commit/6ae3b68)), closes [#38596](https://github.com/angular/angular/issues/38596)
-* **router:** add migration to update calls to navigateByUrl and createUrlTree with invalid parameters ([#38825](https://github.com/angular/angular/issues/38825)) ([7849fdd](https://github.com/angular/angular/commit/7849fdd)), closes [#38227](https://github.com/angular/angular/issues/38227)
-* **service-worker:** add the option to prefer network for navigation requests ([#38565](https://github.com/angular/angular/issues/38565)) ([a206852](https://github.com/angular/angular/commit/a206852)), closes [#38194](https://github.com/angular/angular/issues/38194)
-
-
-### BREAKING CHANGES
-
-* **core:** If you call `TestBed.overrideProvider` after TestBed initialization, provider overrides are not applied. This
-behavior is consistent with other override methods (such as `TestBed.overrideDirective`, etc) but they
-throw an error to indicate that, when the check was missing in the `TestBed.overrideProvider` function.
-Now calling `TestBed.overrideProvider` after TestBed initialization also triggers an
-error, thus there is a chance that some tests (where `TestBed.overrideProvider` is
-called after TestBed initialization) will start to fail and require updates to move `TestBed.overrideProvider` calls
-before TestBed initialization is completed.
-
-
-
 <a name="10.1.3"></a>
 ## 10.1.3 (2020-09-23)
 
@@ -269,57 +60,6 @@ before TestBed initialization is completed.
 
 
 
-<a name="11.0.0-next.2"></a>
-# 11.0.0-next.2 (2020-09-16)
-
-
-### Bug Fixes
-
-* **common:** do not round up fractions of a millisecond in `DatePipe` ([#38009](https://github.com/angular/angular/issues/38009)) ([26f2820](https://github.com/angular/angular/commit/26f2820)), closes [/www.ecma-international.org/ecma-262/5.1/#sec-15](https://github.com//www.ecma-international.org/ecma-262/5.1//issues/sec-15) [#37989](https://github.com/angular/angular/issues/37989)
-* **common:** mark locale data arrays as readonly ([#30397](https://github.com/angular/angular/issues/30397)) ([6acea54](https://github.com/angular/angular/commit/6acea54)), closes [#27003](https://github.com/angular/angular/issues/27003)
-* **compiler:** source span for microsyntax text att should be key span ([#38766](https://github.com/angular/angular/issues/38766)) ([8f349b2](https://github.com/angular/angular/commit/8f349b2))
-* **router:** Fix arguments order for call to shouldReuseRoute ([#26949](https://github.com/angular/angular/issues/26949)) ([3817e5f](https://github.com/angular/angular/commit/3817e5f)), closes [#16192](https://github.com/angular/angular/issues/16192) [#16192](https://github.com/angular/angular/issues/16192)
-
-
-### Features
-
-* **compiler-cli:** `TemplateTypeChecker` operation to get `Symbol` from a template node ([#38618](https://github.com/angular/angular/issues/38618)) ([c4556db](https://github.com/angular/angular/commit/c4556db))
-* **compiler-cli:** Add ability to get `Symbol` of `Template`s and `Element`s in component template ([#38618](https://github.com/angular/angular/issues/38618)) ([cf2e8b9](https://github.com/angular/angular/commit/cf2e8b9))
-* **compiler-cli:** Add ability to get `Symbol` of AST expression in component template ([#38618](https://github.com/angular/angular/issues/38618)) ([f56ece4](https://github.com/angular/angular/commit/f56ece4))
-* **compiler-cli:** add ability to get symbol of reference or variable ([#38618](https://github.com/angular/angular/issues/38618)) ([19598b4](https://github.com/angular/angular/commit/19598b4))
-* **compiler-cli:** define interfaces to be used for TemplateTypeChecker ([#38618](https://github.com/angular/angular/issues/38618)) ([9e77bd3](https://github.com/angular/angular/commit/9e77bd3))
-
-
-### Performance Improvements
-
-* **compiler-cli:** only emit directive/pipe references that are used ([#38539](https://github.com/angular/angular/issues/38539)) ([077f516](https://github.com/angular/angular/commit/077f516))
-* **compiler-cli:** optimize computation of type-check scope information ([#38539](https://github.com/angular/angular/issues/38539)) ([297c060](https://github.com/angular/angular/commit/297c060))
-* **router:** use `ngDevMode` to tree-shake error messages in router ([#38674](https://github.com/angular/angular/issues/38674)) ([db21c4f](https://github.com/angular/angular/commit/db21c4f))
-
-
-### BREAKING CHANGES
-
-* **router:** This change corrects the argument order when calling
-RouteReuseStrategy#shouldReuseRoute. Previously, when evaluating child
-routes, they would be called with the future and current arguments would
-be swapped. If your RouteReuseStrategy relies specifically on only the future
-or current snapshot state, you may need to update the shouldReuseRoute
-implementation's use of "future" and "current" ActivateRouteSnapshots.
-* **common:** The locale data API has been marked as returning readonly arrays, rather
-than mutable arrays, since these arrays are shared across calls to the
-API. If you were mutating them (e.g. calling `sort()`, `push()`, `splice()`, etc)
-then your code will not longer compile. If you need to mutate the array, you
-should now take a copy (e.g. by calling `slice()`) and mutate the copy.
-* **common:** When passing a date-time formatted string to the `DatePipe` in a format that contains
-fractions of a millisecond, the milliseconds will now always be rounded down rather than
-to the nearest millisecond.
-
-Most applications will not be affected by this change. If this is not the desired behaviour
-then consider pre-processing the string to round the millisecond part before passing
-it to the `DatePipe`.
-
-
-
 <a name="10.1.2"></a>
 ## 10.1.2 (2020-09-16)
 
@@ -342,24 +82,6 @@ it to the `DatePipe`.
 
 
 
-<a name="11.0.0-next.1"></a>
-# 11.0.0-next.1 (2020-09-09)
-
-
-### Bug Fixes
-
-* **compiler-cli:** compute source-mappings for localized strings ([#38645](https://github.com/angular/angular/issues/38645)) ([7e0b3fd](https://github.com/angular/angular/commit/7e0b3fd)), closes [#38588](https://github.com/angular/angular/issues/38588)
-* **core:** remove CollectionChangeRecord symbol ([#38668](https://github.com/angular/angular/issues/38668)) ([fdea180](https://github.com/angular/angular/commit/fdea180))
-* **router:** support lazy loading for empty path named outlets ([#38379](https://github.com/angular/angular/issues/38379)) ([926ffcd](https://github.com/angular/angular/commit/926ffcd)), closes [#12842](https://github.com/angular/angular/issues/12842)
-
-
-### BREAKING CHANGES
-
-* **core:** CollectionChangeRecord has been removed, use IterableChangeRecord
-instead
-
-
-
 <a name="10.1.1"></a>
 ## 10.1.1 (2020-09-09)
 
@@ -385,31 +107,6 @@ instead
 
 
 
-<a name="11.0.0-next.0"></a>
-# 11.0.0-next.0 (2020-09-02)
-
-
-### Bug Fixes
-
-* **forms:** ensure to emit `statusChanges` on subsequent value update/validations ([#38354](https://github.com/angular/angular/issues/38354)) ([d9fea85](https://github.com/angular/angular/commit/d9fea85)), closes [#20424](https://github.com/angular/angular/issues/20424) [#14542](https://github.com/angular/angular/issues/14542)
-* **service-worker:** fix condition to check for a cache-busted request ([#36847](https://github.com/angular/angular/issues/36847)) ([5be4edf](https://github.com/angular/angular/commit/5be4edf))
-
-
-### Features
-
-* **service-worker:** add `UnrecoverableStateError` ([#36847](https://github.com/angular/angular/issues/36847)) ([036a2fa](https://github.com/angular/angular/commit/036a2fa)), closes [#36539](https://github.com/angular/angular/issues/36539)
-
-
-### BREAKING CHANGES
-
-* **forms:** Previously if FormControl, FormGroup and FormArray class instances had async validators
-defined at initialization time, the status change event was not emitted once async validator
-completed. After this change the status event is emitted into the `statusChanges` observable.
-If your code relies on the old behavior, you can filter/ignore this additional status change
-event.
-
-
-
 <a name="10.1.0"></a>
 # 10.1.0 (2020-09-02)
 

CONTRIBUTING.md

@@ -244,9 +244,9 @@ Any line of the commit message cannot be longer than 100 characters.
   │       │
   │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
   │                          elements|forms|http|language-service|localize|platform-browser|
-  │                          platform-browser-dynamic|platform-server|router|service-worker|
-  │                          upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
-  │                          ngcc|ve
+  │                          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
 ```
@@ -288,6 +288,8 @@ The following is the list of supported scopes:
 * `platform-browser`
 * `platform-browser-dynamic`
 * `platform-server`
+* `platform-webworker`
+* `platform-webworker-dynamic`
 * `router`
 * `service-worker`
 * `upgrade`

README.md

@@ -1,151 +1,27 @@
-<h1 align="center">Angular - One framework. Mobile & desktop.</h1>
+[![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/workflows/angular/tree/master)
+[![Discord](https://img.shields.io/discord/463752820026376202.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/angular)
+[![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
 
-<p align="center">
-  <img src="aio/src/assets/images/logos/angular/angular.png" alt="angular-logo" width="120px" height="120px"/>
-  <br>
-  <i>Angular is a development platform for building mobile and desktop web applications
-    <br> using Typescript/JavaScript and other languages.</i>
-  <br>
-</p>
 
-<p align="center">
-  <a href="https://www.angular.io"><strong>www.angular.io</strong></a>
-  <br>
-</p>
+# Angular
 
-<p align="center">
-  <a href="CONTRIBUTING.md">Contributing Guidelines</a>
-  ·
-  <a href="https://github.com/angular/angular/issues">Submit an Issue</a>
-  ·
-  <a href="https://blog.angular.io/">Blog</a>
-  <br>
-  <br>
-</p>
-
-<p align="center">
-  <a href="https://circleci.com/gh/angular/workflows/angular/tree/master">
-    <img src="https://img.shields.io/circleci/build/github/angular/angular/master.svg?logo=circleci&logoColor=fff&label=CircleCI" alt="CI status" />
-  </a>&nbsp;
-  <a href="https://www.npmjs.com/@angular/core">
-    <img src="https://img.shields.io/npm/v/@angular/core.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="Angular on npm" />
-  </a>&nbsp;
-  <a href="https://discord.gg/angular">
-    <img src="https://img.shields.io/discord/463752820026376202.svg?logo=discord&logoColor=fff&label=Discord&color=7389d8" alt="Discord conversation" />
-  </a>
-</p>
-
-<hr>
-
-## Documentation
-
-Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.
-
-- [Getting Started][quickstart]
-- [Architecture][architecture]
-- [Components and Templates][componentstemplates]
-- [Forms][forms]
-- [API][api]
-
-### Advanced
-
-- [Angular Elements][angularelements]
-- [Server Side Rendering][ssr]
-- [Schematics][schematics]
-- [Lazy Loading][lazyloading]
-
-## Development Setup
-
-### Prerequisites
-
-- Install [Node.js] which includes [Node Package Manager][npm]
-
-### Setting Up a Project
-
-Intall the Angular CLI globally:
-
-```
-npm install -g @angular/cli
-```
-
-Create workspace:
-
-```
-ng new [PROJECT NAME]
-```
-
-Run the application:
-
-```
-cd [PROJECT NAME]
-ng serve
-```
+Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages.
 
 ## Quickstart
 
 [Get started in 5 minutes][quickstart].
 
-## Ecosystem
-
-<p>
-  <img src="/docs/images/angular-ecosystem-logos.png" alt="angular ecosystem logos" width="500px" height="auto">
-</p>
-
-- [Angular Command Line (CLI)][cli]
-- [Angular Material][angularmaterial]
-
 ## Changelog
 
 [Learn about the latest improvements][changelog].
 
-## Upgrading
+## Want to help?
 
-Check out our [upgrade guide](https://update.angular.io/) to find out the best way to upgrade your project.
+Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
+guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
 
-## Contributing
-
-### Contributing Guidelines
-
-Read through our [contributing guidelines][contributing] to learn about our submission process, coding rules and more.
-
-### Want to Help?
-
-Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
-
-### Code of Conduct
-
-Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][codeofconduct].
-
-## Community
-
-Join the conversation and help the community.
-
-- [Twitter][twitter]
-- [Gitter][gitter]
-- Find a Local [Meetup][meetup]
-
-[![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)
-
-**Love Angular? Give our repo a star :star: :arrow_up:.**
-
-[contributing]: CONTRIBUTING.md
+[contributing]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md
 [quickstart]: https://angular.io/start
-[changelog]: CHANGELOG.md
+[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md
 [ng]: https://angular.io
-[documentation]: https://angular.io/docs
-[angularmaterial]: https://material.angular.io/
-[cli]: https://cli.angular.io/
-[architecture]: https://angular.io/guide/architecture
-[componentstemplates]: https://angular.io/guide/displaying-data
-[forms]: https://angular.io/guide/forms-overview
-[api]: https://angular.io/api
-[angularelements]: https://angular.io/guide/elements
-[ssr]: https://angular.io/guide/universal
-[schematics]: https://angular.io/guide/schematics
-[lazyloading]: https://angular.io/guide/lazy-loading-ngmodules
-[node.js]: https://nodejs.org/
-[npm]: https://www.npmjs.com/get-npm
-[codeofconduct]: CODE_OF_CONDUCT.md
-[twitter]: https://www.twitter.com/angular
-[gitter]: https://gitter.im/angular/angular
-[meetup]: https://www.meetup.com/find/?keywords=angular"

aio/README.md

@@ -36,9 +36,8 @@ Here are the most important tasks you might need to use:
 
 * `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
 * `yarn boilerplate:add:viewengine` - same as `boilerplate:add` but also turns on `ViewEngine` (pre-Ivy) mode.
-* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
-* `yarn create-example` - create a new example directory containing initial source files.
 
+* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
 * `yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
 

aio/content/examples/.gitignore

@@ -32,8 +32,6 @@
 **/karma-test-shim.js
 **/browser-test-shim.js
 **/node_modules
-**/yarn.lock
-**/package-lock.json
 
 # built files
 *.map

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

@@ -3,10 +3,8 @@
 <h2>Attribute binding</h2>
 <!-- #docregion attrib-binding-colspan -->
 <table border=1>
-  <!-- #docregion colspan -->
   <!--  expression calculates colspan=2 -->
   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
-  <!-- #enddocregion colspan -->
 
   <!-- ERROR: There is no `colspan` property to set!
     <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
@@ -34,31 +32,31 @@
 <!-- #docregion basic-specificity -->
 <h3>Basic specificity</h3>
 
-<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
-<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
+<!-- The `class.special` binding will override any value for the `special` class in `classExpr`.  -->
+<div [class.special]="isSpecial" [class]="classExpr">Some text.</div>
 
-<!-- The `style.color` binding overrides any value for the `color` property in `styleExpression`.  -->
-<div [style.color]="color" [style]="styleExpression">Some text.</div>
+<!-- The `style.color` binding will override any value for the `color` property in `styleExpr`.  -->
+<div [style.color]="color" [style]="styleExpr">Some text.</div>
 <!-- #enddocregion basic-specificity -->
 
 <!-- #docregion source-specificity -->
 <h3>Source specificity</h3>
 
-<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
+<!-- The `class.special` template binding will override any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
 <comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding>Some text.</comp-with-host-binding>
 
-<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
+<!-- The `style.color` template binding will override any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
 <comp-with-host-binding [style.color]="color" dirWithStyleBinding>Some text.</comp-with-host-binding>
 <!-- #enddocregion source-specificity -->
 
 <!-- #docregion dynamic-priority -->
 <h3>Dynamic vs static</h3>
 
-<!-- If `classExpression` has a value for the `special` class, this value overrides the `class="special"` below -->
-<div class="special" [class]="classExpression">Some text.</div>
+<!-- If `classExpr` has a value for the `special` class, this value will override the `class="special"` below -->
+<div class="special" [class]="classExpr">Some text.</div>
 
-<!-- If `styleExpression` has a value for the `color` property, this value overrides the `style="color: blue"` below -->
-<div style="color: blue" [style]="styleExpression">Some text.</div>
+<!-- If `styleExpr` has a value for the `color` property, this value will override the `style="color: blue"` below -->
+<div style="color: blue" [style]="styleExpr">Some text.</div>
 
 <!-- #enddocregion dynamic-priority -->
 

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

@@ -9,7 +9,7 @@ export class AppComponent {
   actionName = 'Go for it';
   isSpecial = true;
   canSave = true;
-  classExpression = 'special clearance';
-  styleExpression = 'color: red';
+  classExpr = 'special clearance';
+  styleExpr = 'color: red';
   color = 'blue';
 }

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

@@ -11,9 +11,6 @@ export class CompWithHostBindingComponent {
   @HostBinding('style.color')
   color = 'green';
 
-  // #docregion hostbinding
   @HostBinding('style.width')
   width = '200px';
-  // #enddocregion hostbinding
-
 }

aio/content/examples/comparing-observables/e2e/src/app.e2e-spec.ts

@@ -1,9 +0,0 @@
-/*
- * This example project is special in that it is not a cli app. To run tests appropriate for this
- * project, the test command is overwritten in `aio/content/examples/observables/example-config.json`.
- *
- * This is an empty placeholder file to ensure that `aio/tools/examples/run-example-e2e.js` runs
- * tests for this project.
- *
- * TODO: Fix our infrastructure/tooling, so that this hack is not necessary.
- */

aio/content/examples/comparing-observables/example-config.json

@@ -1,12 +0,0 @@
-{
-  "tests": [
-    {
-      "cmd": "yarn",
-      "args": ["tsc", "--project", "tsconfig.spec.json", "--module", "commonjs"]
-    },
-    {
-      "cmd": "yarn",
-      "args": ["jasmine", "out-tsc/**/*.spec.js"]
-    }
-  ]
-}

aio/content/examples/comparing-observables/src/observables.spec.ts

@@ -1,26 +0,0 @@
-import { docRegionChain, docRegionObservable, docRegionUnsubscribe } from './observables';
-
-describe('observables', () => {
-  it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
-    const observable = docRegionObservable(console);
-    observable.subscribe(() => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
-      doneFn();
-    });
-  });
-
-  it('should close the subscription', () => {
-    const subscription = docRegionUnsubscribe();
-    expect(subscription.closed).toBeTruthy();
-  });
-
-  it('should chain an observable', (doneFn: DoneFn) => {
-    const observable = docRegionChain();
-    observable.subscribe(value => {
-      expect(value).toBe(4);
-      doneFn();
-    });
-  });
-});

aio/content/examples/comparing-observables/src/observables.ts

@@ -1,72 +1,40 @@
-// #docplaster
-
-import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
-export function docRegionObservable(console: Console) {
-  // #docregion observable
+// #docregion observable
 
-  // declare a publishing operation
-  const observable = new Observable<number>(observer => {
-    // Subscriber fn...
-    // #enddocregion observable
-    // The below code is used for unit testing only
-    observer.next(2);
-    // #docregion observable
-  });
+// declare a publishing operation
+const observable = new Observable<number>(observer => {
+  // Subscriber fn...
+});
 
-  // initiate execution
-  observable.subscribe(value => {
-    // observer handles notifications
-    // #enddocregion observable
-    // The below code is used for unit testing only
-    console.log(value);
-    // #docregion observable
-  });
+// initiate execution
+observable.subscribe(() => {
+  // observer handles notifications
+});
 
-  // #enddocregion observable
-  return observable;
-}
+// #enddocregion observable
 
-export function docRegionUnsubscribe() {
-  const observable = new Observable<number>(() => {
-    // Subscriber fn...
-  });
-  // #docregion unsubscribe
+// #docregion unsubscribe
 
-  const subscription = observable.subscribe(() => {
-    // observer handles notifications
-  });
+const subscription = observable.subscribe(() => {
+  // observer handles notifications
+});
 
-  subscription.unsubscribe();
+subscription.unsubscribe();
 
-  // #enddocregion unsubscribe
-  return subscription;
-}
+// #enddocregion unsubscribe
 
-export function docRegionError() {
-  const observable = new Observable<number>(() => {
-    // Subscriber fn...
-  });
+// #docregion error
 
-  // #docregion error
-  observable.subscribe(() => {
-    throw new Error('my error');
-  });
-  // #enddocregion error
-}
+observable.subscribe(() => {
+  throw Error('my error');
+});
 
-export function docRegionChain() {
-  let observable = new Observable<number>(observer => {
-    // Subscriber fn...
-    observer.next(2);
-  });
+// #enddocregion error
 
-  observable =
-  // #docregion chain
+// #docregion chain
 
-  observable.pipe(map(v => 2 * v));
+observable.pipe(map(v => 2 * v));
 
-  // #enddocregion chain
-  return observable;
-}
+// #enddocregion chain

aio/content/examples/comparing-observables/src/promises.spec.ts

@@ -1,23 +0,0 @@
-import { docRegionError, docRegionPromise } from './promises';
-
-describe('promises', () => {
-  it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
-    const pr = docRegionPromise(console, 2);
-    pr.then((value) => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
-      expect(value).toBe(4);
-      doneFn();
-    });
-  });
-
-  it('should throw an error', (doneFn: DoneFn) => {
-    const promise = docRegionError();
-    promise
-      .then(() => {
-        throw new Error('Promise should be rejected.');
-      },
-        () => doneFn());
-  });
-});

aio/content/examples/comparing-observables/src/promises.ts

@@ -1,44 +1,25 @@
-// #docplaster
+// #docregion promise
+// initiate execution
+const promise = new Promise<number>((resolve, reject) => {
+  // Executer fn...
+});
 
-export function docRegionPromise(console: Console, inputValue: number) {
-  // #docregion promise
-  // initiate execution
-  let promise = new Promise<number>((resolve, reject) => {
-    // Executer fn...
-    // #enddocregion promise
-    // The below is used in the unit tests.
-    resolve(inputValue);
-    // #docregion promise
-  });
-  // #enddocregion promise
-  promise =
-  // #docregion promise
-  promise.then(value => {
-    // handle result here
-    // #enddocregion promise
-    // The below is used in the unit tests.
-    console.log(value);
-    return value;
-    // #docregion promise
-  });
-  // #enddocregion promise
-  promise =
-  // #docregion chain
-  promise.then(v => 2 * v);
-  // #enddocregion chain
+promise.then(value => {
+  // handle result here
+});
 
-  return promise;
-}
+// #enddocregion promise
 
-export function docRegionError() {
-  let promise = Promise.resolve();
-  promise =
-  // #docregion error
+// #docregion chain
 
-  promise.then(() => {
-    throw new Error('my error');
-  });
+promise.then(v => 2 * v);
 
-  // #enddocregion error
-  return promise;
-}
+// #enddocregion chain
+
+// #docregion error
+
+promise.then(() => {
+  throw Error('my error');
+});
+
+// #enddocregion error

aio/content/examples/component-styles/src/app/quest-summary.component.ts

@@ -13,8 +13,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 export class QuestSummaryComponent { }
 // #enddocregion
 /*
-  // #docregion encapsulation.shadow
+  // #docregion encapsulation.native
   // warning: few browsers support shadow DOM encapsulation at this time
-  encapsulation: ViewEncapsulation.ShadowDom
-  // #enddocregion encapsulation.shadow
+  encapsulation: ViewEncapsulation.Native
+  // #enddocregion encapsulation.native
 */

aio/content/examples/rx-library/src/retry-on-error.spec.ts

@@ -23,13 +23,13 @@ describe('retry-on-error', () => {
     docRegionDefault(mockConsole, ajax);
     expect(mockConsole.log.calls.allArgs()).toEqual([
       ['Subscribed to AJAX'],
-      ['Error occurred.'],
+      ['Error occured.'],
       ['Subscribed to AJAX'],
-      ['Error occurred.'],
+      ['Error occured.'],
       ['Subscribed to AJAX'],
-      ['Error occurred.'],
+      ['Error occured.'],
       ['Subscribed to AJAX'],
-      ['Error occurred.'],
+      ['Error occured.'],
       ['data: ', []],
     ]);
   });

aio/content/examples/rx-library/src/retry-on-error.ts

@@ -17,7 +17,7 @@ export function docRegionDefault(console, ajax) {
   const apiData = ajax('/api/data').pipe(
     map((res: any) => {
       if (!res.response) {
-        console.log('Error occurred.');
+        console.log('Error occured.');
         throw new Error('Value expected!');
       }
       return res.response;

aio/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts

@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-function notifyUser(message: string): void { }
-
-// #docregion sw-unrecoverable-state
-@Injectable()
-export class HandleUnrecoverableStateService {
-  constructor(updates: SwUpdate) {
-    updates.unrecoverable.subscribe(event => {
-      notifyUser(
-        `An error occurred that we cannot recover from:\n${event.reason}\n\n` +
-        'Please reload the page.');
-    });
-  }
-}
-// #enddocregion sw-unrecoverable-state

aio/content/guide/architecture-components.md

@@ -89,7 +89,7 @@ This example from the `HeroListComponent` template uses three of these forms.
 
 <code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (binding)" region="binding"></code-example>
 
-* The `{{hero.name}}` [*interpolation*](guide/interpolation)
+* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation)
 displays the component's `hero.name` property value within the `<li>` element.
 
 * The `[hero]` [*property binding*](guide/property-binding) passes the value of
@@ -166,8 +166,8 @@ The example template uses two built-in structural directives to add application
 
 <code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (structural)" region="structural"></code-example>
 
-* [`*ngFor`](guide/structural-directives#inside-ngfor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
-* [`*ngIf`](guide/structural-directives#ngif-case-study) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
+* [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
+* [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
 
 #### Attribute directives
 

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

@@ -11,7 +11,7 @@ about the features and tools that can help you develop and deliver Angular appli
 
 ## Application architecture
 
-* The **Main Concepts** section located in the table of contents contains several topics that explain how to connect the application data in your [components](guide/glossary#component) to your page-display [templates](guide/glossary#template), to create a complete interactive application.
+* The [Components and templates](guide/displaying-data) guide explains how to connect the application data in your [components](guide/glossary#component) to your page-display [templates](guide/glossary#template), to create a complete interactive application.
 
 * The [NgModules](guide/ngmodules) guide provides in-depth information on the modular structure of an Angular application.
 
@@ -21,7 +21,7 @@ about the features and tools that can help you develop and deliver Angular appli
 
 ## Responsive programming
 
-The [template syntax](guide/template-syntax) and related topics contain details about how to display your component data when and where you want it within a view, and how to collect input from users that you can respond to.
+The **Components and Templates** guide provides guidance and details of the [template syntax](guide/template-syntax) that you use to display your component data when and where you want it within a view, and to collect input from users that you can respond to.
 
 Additional pages and sections describe some basic programming techniques for Angular apps.
 
@@ -52,6 +52,8 @@ For some platforms and applications, you might also want to use the PWA (Progres
 
 ## Support for the development cycle
 
+The **Development Workflow** section describes the tools and processes you use to compile, test, and deploy Angular applications.
+
 * [CLI Command Reference](cli): The Angular CLI is a command-line tool that you use to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
 
 * [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment.
@@ -66,6 +68,7 @@ For some platforms and applications, you might also want to use the PWA (Progres
 
 * [Accessibility](guide/accessibility): Make your app accessible to all users.
 
+
 ## File structure, configuration, and dependencies
 
 * [Workspace and file structure](guide/file-structure): Understand the structure of Angular workspace and project folders.

aio/content/guide/attribute-binding.md

@@ -1,7 +1,6 @@
 # Attribute, class, and style bindings
 
-Attribute binding in Angular helps you set values for attributes directly.
-With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.
+The template syntax provides specialized one-way bindings for scenarios less well-suited to property binding.
 
 <div class="alert is-helpful">
 
@@ -9,36 +8,23 @@ See the <live-example></live-example> for a working example containing the code
 
 </div>
 
-## Binding to an attribute
 
-It is recommended that you set an element property with a [property binding](guide/property-binding) whenever possible.
-However, sometimes you don't have an element property to bind.
-In those situations, you can use attribute binding.
+## Attribute binding
 
-For example, [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and
-[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) are purely attributes.
-Neither ARIA nor SVG correspond to element properties and don't set element properties.
-In these cases, you must use attribute binding because there are no corresponding property targets.
+Set the value of an attribute directly with an **attribute binding**. This is the only exception to the rule that a binding sets a target property and the only binding that creates and sets an attribute.
 
+Usually, setting an element property with a [property binding](guide/property-binding)
+is preferable to setting the attribute with a string. However, sometimes
+there is no element property to bind, so attribute binding is the solution.
 
-## Syntax
+Consider the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and
+[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). They are purely attributes, don't correspond to element properties, and don't set element properties. In these cases, there are no property targets to bind to.
 
-Attribute binding syntax resembles [property binding](guide/property-binding), but instead of an element property between brackets, you precede the name of the attribute with the prefix `attr`, followed by a dot.
-Then, you set the attribute value with an expression that resolves to a string.
-
-<code-example language="html">
-
- &lt;p [attr.attribute-you-are-targeting]="expression"&gt;&lt;/p&gt;
-
-</code-example>
-
-<div class="alert is-helpful">
-
-When the expression resolves to `null`, Angular removes the attribute altogether.
-
-</div>
-
-## Binding ARIA attributes
+Attribute binding syntax resembles property binding, but
+instead of an element property between brackets, start with the prefix `attr`,
+followed by a dot (`.`), and the name of the attribute.
+You then set the attribute value, using an expression that resolves to a string,
+or remove the attribute when the expression resolves to `null`.
 
 One of the primary use cases for attribute binding
 is to set ARIA attributes, as in this example:
@@ -47,30 +33,32 @@ is to set ARIA attributes, as in this example:
 
 {@a colspan}
 
-## Binding to `colspan`
-
-Another common use case for attribute binding is with the `colspan` attribute in tables.
-Binding to the `colspan` attribute helps you keep your tables programmatically dynamic.
-Depending on the amount of data that your application populates a table with, the number of columns that a row spans could change.
-
-To use attribute binding with the `<td>` attribute `colspan`:
-
-1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`.
-1. Set `[attr.colspan]` equal to an expression.
-
-In the following example, binds the `colspan` attribute to the expression `1 + 1`.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="colspan" header="src/app/app.component.html"></code-example>
-
-This binding causes the `<tr>` to span two columns.
-
 <div class="alert is-helpful">
 
-Sometimes there are differences between the name of property and an attribute.
+#### `colspan` and `colSpan`
 
-`colspan` is an attribute of `<tr>`, while `colSpan`  with a capital "S" is a property.
-When using attribute binding, use `colspan` with a lowercase "s".
-For more information on how to bind to the `colSpan` property, see the [`colspan` and `colSpan`](guide/property-binding#colspan) section of [Property Binding](guide/property-binding).
+Notice the difference between the `colspan` attribute and the `colSpan` property.
+
+If you wrote something like this:
+
+<code-example language="html">
+  &lt;tr&gt;&lt;td colspan="{{1 + 1}}"&gt;Three-Four&lt;/td&gt;&lt;/tr&gt;
+</code-example>
+
+You'd get this error:
+
+<code-example language="bash">
+  Template parse errors:
+  Can't bind to 'colspan' since it isn't a known native property
+</code-example>
+
+As the message says, the `<td>` element does not have a `colspan` property. This is true
+because `colspan` is an attribute&mdash;`colSpan`, with a capital `S`, is the
+corresponding property. Interpolation and property binding can set only *properties*, not attributes.
+
+Instead, you'd use property binding and write it like this:
+
+<code-example path="attribute-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html"></code-example>
 
 </div>
 
@@ -78,32 +66,28 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
 
 {@a class-binding}
 
-## Binding to the `class` attribute
+## Class binding
 
-You can use class binding to add and remove CSS class names from an element's `class` attribute.
+Here's how to set the `class` attribute without a binding in plain HTML:
 
-### Binding to a single CSS `class`
+```html
+<!-- standard class attribute setting -->
+<div class="foo bar">Some text</div>
+```
 
-To create a single class binding, use the prefix `class` followed by a dot and the name of the CSS class&mdash;for example, `[class.sale]="onSale"`.
-Angular adds the class when the bound expression, `onSale` is truthy, and it removes the class when the expression is falsy&mdash;with the exception of `undefined`.
-See [styling delegation](guide/style-precedence#styling-delegation) for more information.
+You can also add and remove CSS class names from an element's `class` attribute with a **class binding**.
 
-### Binding to multiple CSS classes
+To create a single class binding, start with the prefix `class` followed by a dot (`.`) and the name of the CSS class (for example, `[class.foo]="hasFoo"`).
+Angular adds the class when the bound expression is truthy, and it removes the class when the expression is falsy (with the exception of `undefined`, see [styling delegation](#styling-delegation)).
 
-To bind to multiple classes, use `[class]` set to an expression&mdash;for example, `[class]="classExpression"`.
-The expression can be a space-delimited string of class names, or an object with class names as the keys and truthy or falsy expressions as the values.
-With an object format, Angular adds a class only if its associated value is truthy.
+To create a binding to multiple classes, use a generic `[class]` binding without the dot (for example, `[class]="classExpr"`).
+The expression can be a space-delimited string of class names, or you can format it as an object with class names as the keys and truthy/falsy expressions as the values.
+With object format, Angular will add a class only if its associated value is truthy.
 
-<div class="alert is-important">
+It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated.
+Updating the property without changing object identity will have no effect.
 
-With any object-like expression&mdash;such as `object`, `Array`, `Map`, or `Set`&mdash;the identity of the object must change for Angular to update the class list.
-Updating the property without changing object identity has no effect.
-
-</div>
-
-If there are multiple bindings to the same class name, Angular uses [styling precedence](guide/style-precedence) to determine which binding to use.
-
-The following table summarizes class binding syntax.
+If there are multiple bindings to the same class name, conflicts are resolved using [styling precedence](#styling-precedence).
 
 <style>
   td, th {vertical-align: top}
@@ -134,13 +118,13 @@ The following table summarizes class binding syntax.
   </tr>
   <tr>
     <td>Single class binding</td>
-    <td><code>[class.sale]="onSale"</code></td>
+    <td><code>[class.foo]="hasFoo"</code></td>
     <td><code>boolean | undefined | null</code></td>
     <td><code>true</code>, <code>false</code></td>
   </tr>
   <tr>
     <td rowspan=3>Multi-class binding</td>
-    <td rowspan=3><code>[class]="classExpression"</code></td>
+    <td rowspan=3><code>[class]="classExpr"</code></td>
     <td><code>string</code></td>
     <td><code>"my-class-1 my-class-2 my-class-3"</code></td>
   </tr>
@@ -154,44 +138,44 @@ The following table summarizes class binding syntax.
   </tr>
 </table>
 
+
+The [NgClass](guide/built-in-directives/#ngclass) directive can be used as an alternative to direct `[class]` bindings.
+However, using the above class binding syntax without `NgClass` is preferred because due to improvements in class binding in Angular, `NgClass` no longer provides significant value, and might eventually be removed in the future.
+
+
 <hr/>
 
-{@a style-binding}
+## Style binding
 
-## Binding to the style attribute
+Here's how to set the `style` attribute without a binding in plain HTML:
 
-You can use style binding to set styles dynamically.
+```html
+<!-- standard style attribute setting -->
+<div style="color: blue">Some text</div>
+```
 
-### Binding to a single style
+You can also set styles dynamically with a **style binding**.
 
-To create a single style binding, use the prefix `style` followed by a dot and the name of the CSS style property&mdash;for example, `[style.width]="width"`.
-Angular sets the property to the value of the bound expression, which is usually a string.
+To create a single style binding, start with the prefix `style` followed by a dot (`.`) and the name of the CSS style property (for example, `[style.width]="width"`).
+The property will be set to the value of the bound expression, which is normally a string.
 Optionally, you can add a unit extension like `em` or `%`, which requires a number type.
 
 <div class="alert is-helpful">
 
-You can write a style property name in either [dash-case](guide/glossary#dash-case), or
-[camelCase](guide/glossary#camelcase).
+Note that a _style property_ name can be written in either
+[dash-case](guide/glossary#dash-case), as shown above, or
+[camelCase](guide/glossary#camelcase), such as `fontSize`.
 
 </div>
 
-### Binding to multiple styles
+If there are multiple styles you'd like to toggle, you can bind to the `[style]` property directly without the dot (for example, `[style]="styleExpr"`).
+The expression attached to the `[style]` binding is most often a string list of styles like `"width: 100px; height: 100px;"`.
 
-To toggle multiple styles, bind to the `[style]` attribute&mdash;for example, `[style]="styleExpression"`).
-The expression is often a string list of styles such as `"width: 100px; height: 100px;"`.
+You can also format the expression as an object with style names as the keys and style values as the values, like `{width: '100px', height: '100px'}`.
+It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated.
+Updating the property without changing object identity will have no effect.
 
-You can also format the expression as an object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px'}`.
-
-<div class="alert is-important">
-
-With any object-like expression&mdash;such as `object`, `Array`, `Map`, or `Set`&mdash;the identity of the object must change for Angular to update the class list.
-Updating the property without changing object identity has no effect.
-
-</div>
-
-If there are multiple bindings to the same style attribute, Angular uses [styling precedence](guide/style-precedence) to determine which binding to use.
-
-The following table summarizes style binding syntax.
+If there are multiple bindings to the same style property, conflicts are resolved using [styling precedence rules](#styling-precedence).
 
 <style>
   td, th {vertical-align: top}
@@ -235,7 +219,7 @@ The following table summarizes style binding syntax.
   </tr>
     <tr>
     <td rowspan=3>Multi-style binding</td>
-    <td rowspan=3><code>[style]="styleExpression"</code></td>
+    <td rowspan=3><code>[style]="styleExpr"</code></td>
     <td><code>string</code></td>
     <td><code>"width: 100px; height: 100px"</code></td>
   </tr>
@@ -248,3 +232,72 @@ The following table summarizes style binding syntax.
     <td><code>['width', '100px']</code></td>
   </tr>
 </table>
+
+The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings.
+However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future.
+
+
+<hr/>
+
+{@a styling-precedence}
+
+## Styling Precedence
+
+A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives).
+
+When there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element.
+
+<div class="alert is-helpful">
+<h4>Styling precedence (highest to lowest)</h4>
+
+1. Template bindings
+    1. Property binding (for example, `<div [class.foo]="hasFoo">` or `<div [style.color]="color">`)
+    1. Map binding (for example, `<div [class]="classExpr">` or `<div [style]="styleExpr">`)
+    1. Static value (for example, `<div class="foo">` or `<div style="color: blue">`)
+1. Directive host bindings
+    1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)
+    1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)
+    1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)
+1. Component host bindings
+    1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)
+    1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)
+    1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)
+
+</div>
+
+The more specific a class or style binding is, the higher its precedence.
+
+A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="basic-specificity" header="src/app/app.component.html"></code-example>
+
+Specificity rules also apply when it comes to bindings that originate from different sources.
+It's possible for an element to have bindings in the template where it's declared, from host bindings on matched directives, and from host bindings on matched components.
+
+Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.
+
+Directive host bindings are considered less specific because directives can be used in multiple locations, so they have a lower precedence than template bindings.
+
+Directives often augment component behavior, so host bindings from components have the lowest precedence.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="source-specificity" header="src/app/app.component.html"></code-example>
+
+In addition, bindings take precedence over static attributes.
+
+In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic.
+
+<code-example path="attribute-binding/src/app/app.component.html" region="dynamic-priority" header="src/app/app.component.html"></code-example>
+
+{@a styling-delegation}
+### Delegating to styles with lower precedence
+
+It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values.
+Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style.
+
+For example, consider the following template:
+
+<code-example path="attribute-binding/src/app/app.component.html" region="style-delegation" header="src/app/app.component.html"></code-example>
+
+Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding.
+In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding.
+However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.

aio/content/guide/browser-support.md

@@ -53,7 +53,18 @@ Angular supports most recent browsers. This includes the following specific vers
       IE
     </td>
     <td>
-      <div>11</div>
+      <div> 11, 10*, 9* ("compatibility view" mode not supported) </div>
+      <div>*deprecated in v10, see the {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.</div>
+    </td>
+  </tr>
+ <tr>
+   <tr>
+    <td>
+      IE Mobile*
+    </td>
+    <td>
+      11
+      <div>*deprecated in v10, see the {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.</div>
     </td>
   </tr>
  <tr>
@@ -174,7 +185,7 @@ These are the polyfills required to run an Angular application on each supported
 
     <td>
       Chrome, Firefox, Edge, <br>
-      Safari, Android, IE 11
+      Safari, Android, IE 10+
     </td>
 
     <td>
@@ -185,6 +196,20 @@ These are the polyfills required to run an Angular application on each supported
 
   </tr>
 
+  <tr style="vertical-align: top">
+
+    <td>
+      IE 9
+    </td>
+
+    <td>
+
+      ES2015<br>[classList](guide/browser-support#classlist)
+
+    </td>
+
+  </tr>
+
 </table>
 
 
@@ -247,7 +272,30 @@ Some features of Angular may require additional polyfills.
     </td>
 
     <td>
-      IE 11
+      IE 10, IE 11
+    </td>
+
+  </tr>
+
+  <tr style="vertical-align: top">
+
+    <td>
+
+      [Http](guide/http) when sending and receiving binary data
+    </td>
+
+    <td>
+
+      [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
+
+      [Blob](guide/browser-support#blob)<br>
+
+      [FormData](guide/browser-support#formdata)
+
+    </td>
+
+    <td>
+      IE 9
     </td>
 
   </tr>
@@ -389,6 +437,60 @@ The following polyfills are used to test the framework itself. They are a good s
 
   </tr>
 
+  <tr>
+
+    <td>
+
+      <a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      4KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+       <a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      1.3KB
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td>
+
+       <a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
+
+    </td>
+
+    <td>
+      MIT
+    </td>
+
+    <td>
+      0.4KB
+    </td>
+
+  </tr>
+
 </table>
 
 

aio/content/guide/built-in-directives.md

@@ -194,7 +194,7 @@ which explains the following:
 * Using [`<ng-container>`](guide/structural-directives#ngcontainer "<ng-container>")
 to group elements when there is no suitable host element for the directive.
 * How to write your own structural directive.
-* Why you [can only apply one structural directive](guide/structural-directives#one-per-element "one per host element") to an element.
+* That you can only apply [one structural directive](guide/structural-directives#one-per-element "one per host element") to an element.
 
 </div>
 
@@ -281,7 +281,7 @@ You define a block of HTML that defines how a single item should be displayed
 and then you tell Angular to use that block as a template for rendering each item in the list.
 The text assigned to `*ngFor` is the instruction that guides the repeater process.
 
-The following example shows `NgFor` applied to a simple `<div>`.
+The following example shows `NgFor` applied to a simple `<div>`. (Don't forget the asterisk (`*`) in front of `ngFor`.)
 
 <code-example path="built-in-directives/src/app/app.component.html" region="NgFor-1" header="src/app/app.component.html"></code-example>
 

aio/content/guide/deployment.md

@@ -97,7 +97,7 @@ For the simplest deployment, create a production build and copy the output direc
   </code-example>
 
 
-2. Copy _everything_ within the output folder (`dist/project-name/` by default) to a folder on the server.
+2. Copy _everything_ within the output folder (`dist/` by default) to a folder on the server.
 
 3. Configure the server to redirect requests for missing files to `index.html`.
 Learn more about server-side redirects [below](#fallback).
@@ -211,11 +211,11 @@ modified to serve `index.html`:
   # .
   # -- server.rb
   # -- public
-  #    |-- project-name
+  #    |-- dist
   #        |-- index.html
 
   get '/' do
-      folderDir = settings.public_folder + '/project-name'  # ng build output folder
+      folderDir = settings.public_folder + '/dist'  # ng build output folder
       send_file File.join(folderDir, 'index.html')
   end
   ```
@@ -383,11 +383,11 @@ Build your app for production _including the source maps_
 
 </code-example>
 
-List the generated bundles in the `dist/project-name/` folder.
+List the generated bundles in the `dist/` folder.
 
 <code-example language="none" class="code-shell">
 
-  ls dist/project-name/*.js
+  ls dist/*.js
 
 </code-example>
 
@@ -396,7 +396,7 @@ The following example displays the graph for the _main_ bundle.
 
 <code-example language="none" class="code-shell">
 
-  node_modules/.bin/source-map-explorer dist/project-name/main*
+  node_modules/.bin/source-map-explorer dist/main*
 
 </code-example>
 
@@ -530,7 +530,7 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
 </code-example>
 
 <code-example language="json" header="tsconfig.json">

aio/content/guide/deprecations.md

@@ -38,14 +38,18 @@ v9 - v12
 | `@angular/bazel`              | [`Bazel builder and schematics`](#bazelbuilder)                               | v10 |
 | `@angular/common`             | [`ReflectiveInjector`](#reflectiveinjector)                                   | <!--v8--> v11 |
 | `@angular/common`             | [`CurrencyPipe` - `DEFAULT_CURRENCY_CODE`](api/common/CurrencyPipe#currency-code-deprecation) | <!--v9--> v11 |
+| `@angular/core`               | [`CollectionChangeRecord`](#core)                                             | <!--v7--> v11 |
 | `@angular/core`               | [`DefaultIterableDiffer`](#core)                                              | <!--v7--> v11 |
 | `@angular/core`               | [`ReflectiveKey`](#core)                                                      | <!--v8--> v11 |
 | `@angular/core`               | [`RenderComponentType`](#core)                                                | <!--v7--> v11 |
+| `@angular/core`               | [`ViewEncapsulation.Native`](#core)                                           | <!--v6--> v11 |
 | `@angular/core`               | [`WrappedValue`](#core)                                                       | <!--v10--> v12 |
 | `@angular/forms`              | [`ngModel` with reactive forms](#ngmodel-reactive)                            | <!--v6--> v11 |
+| `@angular/router`             | [`preserveQueryParams`](#router)                                              | <!--v7--> v11 |
 | `@angular/upgrade`            | [`@angular/upgrade`](#upgrade)                                                | <!--v8--> v11 |
 | `@angular/upgrade`            | [`getAngularLib`](#upgrade-static)                                            | <!--v8--> v11 |
 | `@angular/upgrade`            | [`setAngularLib`](#upgrade-static)                                            | <!--v8--> v11 |
+| `@angular/platform-webworker` | [All entry points](api/platform-webworker)                                    | <!--v8--> v11 |
 | template syntax               | [`<template`>](#template-tag)                                                 | <!--v7--> v11 |
 | polyfills                     | [reflect-metadata](#reflect-metadata)                                         | <!--v8--> v11 |
 | npm package format            | [`esm5` and `fesm5` entry-points in @angular/* npm packages](guide/deprecations#esm5-fesm5) | <!-- v9 --> v11 |
@@ -57,6 +61,7 @@ v9 - v12
 | `@angular/core/testing`       | [`async`](#testing)                                                     | <!--v9--> v12 |
 | `@angular/router`             | [`ActivatedRoute` params and `queryParams` properties](#activatedroute-props) | unspecified |
 | template syntax               | [`/deep/`, `>>>`, and `::ng-deep`](#deep-component-style-selector)            | <!--v7--> unspecified |
+| browser support               | [`IE 9 and 10, IE mobile`](#ie-9-10-and-mobile)                               | <!--v10--> v11 |
 
 For information about Angular CDK and Angular Material deprecations, see the [changelog](https://github.com/angular/components/blob/master/CHANGELOG.md).
 
@@ -84,9 +89,11 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
 
 | API | Replacement | Deprecation announced | Notes |
 | --- | ----------- | --------------------- | ----- |
+| [`CollectionChangeRecord`](api/core/CollectionChangeRecord) | [`IterableChangeRecord`](api/core/IterableChangeRecord) | v4 | none |
 | [`DefaultIterableDiffer`](api/core/DefaultIterableDiffer) | n/a | v4 | Not part of public API. |
 | [`ReflectiveInjector`](api/core/ReflectiveInjector) | [`Injector.create`](api/core/Injector#create)  | v5 | See [`ReflectiveInjector`](#reflectiveinjector) |
 | [`ReflectiveKey`](api/core/ReflectiveKey) | none | v5 | none |
+| [`ViewEncapsulation.Native`](api/core/ViewEncapsulation#Native) | [`ViewEncapsulation.ShadowDom`](api/core/ViewEncapsulation#ShadowDom) | v6 | Use the native encapsulation mechanism of the renderer. See [view.ts](https://github.com/angular/angular/blob/3e992e18ebf51d6036818f26c3d77b52d3ec48eb/packages/core/src/metadata/view.ts#L32).
 | [`defineInjectable`](api/core/defineInjectable) | `ɵɵdefineInjectable` | v8 | Used only in generated code. No source code should depend on this API. |
 | [`entryComponents`](api/core/NgModule#entryComponents) | none | v9 | See [`entryComponents`](#entryComponents) |
 | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | none | v9 | See [`ANALYZE_FOR_ENTRY_COMPONENTS`](#entryComponents) |
@@ -112,6 +119,26 @@ Tip: In the [API reference section](api) of this doc site, deprecated APIs are i
 | --- | ----------- | --------------------- | ----- |
 | [`ngModel` with reactive forms](#ngmodel-reactive) | [`FormControlDirective`](api/forms/FormControlDirective) | v6 | none |
 
+{@a router}
+### @angular/router
+
+| API | Replacement | Deprecation announced | Notes |
+| --- | ----------- | --------------------- | ----- |
+| [`preserveQueryParams`](api/router/NavigationExtras#preserveQueryParams) | [`queryParamsHandling`](api/router/NavigationExtras#queryParamsHandling) | v4 | none |
+
+{@a platform-webworker}
+### @angular/platform-webworker
+
+| API | Replacement | Deprecation announced | Notes |
+| --- | ----------- | --------------------- | ----- |
+| [All entry points](api/platform-webworker) | none | v8 | See [platform-webworker](#webworker-apps). |
+
+{@a platform-webworker-dynamic}
+### @angular/platform-webworker-dynamic
+
+| API | Replacement | Deprecation announced | Notes |
+| --- | ----------- | --------------------- | ----- |
+| [All entry points](api/platform-webworker-dynamic) | none | v8 | See [platform-webworker](#webworker-apps). |
 
 {@a upgrade}
 ### @angular/upgrade
@@ -367,6 +394,28 @@ These two properties have subtle differences, so switching to `textContent` unde
 
 All of the `wtf*` APIs are deprecated and will be removed in a future version.
 
+{@a webworker-apps}
+### Running Angular applications in platform-webworker
+
+The `@angular/platform-*` packages enable Angular to be run in different contexts. For examples,
+`@angular/platform-server` enables Angular to be run on the server, and `@angular/platform-browser`
+enables Angular to be run in a web browser.
+
+`@angular/platform-webworker` was introduced in Angular version 2 as an experiment in leveraging
+Angular's rendering architecture to run an entire web application in a
+[web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). We've learned a lot
+from this experiment and have come to the conclusion that running the entire application in a web
+worker is not the best strategy for most applications.
+
+Going forward, we will focus our efforts related to web workers around their primary use case of
+offloading CPU-intensive, non-critical work needed for initial rendering (such as in-memory search
+and image processing). Learn more in the
+[guide to Using Web Workers with the Angular CLI](guide/web-worker).
+
+As of Angular version 8, all  `platform-webworker` APIs are deprecated.
+This includes both packages: `@angular/platform-webworker` and
+`@angular/platform-webworker-dynamic`.
+
 {@a entryComponents}
 ### `entryComponents` and `ANALYZE_FOR_ENTRY_COMPONENTS` no longer required
 Previously, the `entryComponents` array in the `NgModule` definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the `entryComponents` array can be removed from existing module declarations. The same applies to the `ANALYZE_FOR_ENTRY_COMPONENTS` injection token.
@@ -415,6 +464,20 @@ export class MyModule {
 }
 ```
 
+
+{@a ie-9-10-and-mobile}
+### IE 9, 10, and IE mobile support
+
+Support for IE 9 and 10 has been deprecated, as well as support for IE Mobile. These will be dropped in a future version.
+Supporting outdated browsers like these increases bundle size, code complexity, and test load, and also requires time and effort that could be spent on improvements to the framework.
+For example, fixing issues can be more difficult, as a straightforward fix for modern browsers could break old ones that have quirks due to not receiving updates from vendors.
+
+The final decision was made on three key points:
+* __Vendor support__: Microsoft dropped support of IE 9 and 10 on 1/12/16, meaning they no longer provide security updates or technical support. Additionally, Microsoft dropped support for Windows 10 Mobile in December 2019.
+* __Usage statistics__: We looked at usage trends for IE 9 and 10 (as well as IE Mobile) from various sources and all indicated that usage percentages were extremely small (fractions of 1%).
+* __Feedback from partners__: We also reached out to some of our Angular customers and none expressed concern about dropping IE 9, 10, nor IE Mobile support.
+
+
 {@a wrapped-value}
 ###  `WrappedValue`
 
@@ -481,13 +544,15 @@ This section contains a complete list all of the currently deprecated CLI flags.
 {@a removed}
 ## Removed APIs
 
-The following APIs have been removed starting with version 11.0.0*:
+The following APIs have been removed starting with version 10.0.0*:
 
 | Package          | API            | Replacement | Notes |
 | ---------------- | -------------- | ----------- | ----- |
-| `@angular/router` | `preserveQueryParams` | [`queryParamsHandling`](api/router/UrlCreationOptions#queryParamsHandling) | |
+| `@angular/core`  | Undecorated base classes that use Angular features | Add Angular decorator | See [migration guide](guide/migration-undecorated-classes) for more info |
+| `@angular/core`  | `ModuleWithProviders` without a generic             | `ModuleWithProviders` with a generic | See [migration guide](guide/migration-module-with-providers) for more info |
+| `@angular/core`  | Style Sanitization | no action needed | See [style sanitization API removal](#style-sanitization) for more info
 
-*To see APIs removed in version 10, check out this guide on the [version 10 docs site](https://v10.angular.io/guide/deprecations#removed).
+*To see APIs removed in version 9, check out this guide on the [version 9 docs site](https://v9.angular.io/guide/deprecations#removed).
 
 
 {@a esm5-fesm5}

aio/content/guide/displaying-data.md

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

aio/content/guide/entry-components.md

@@ -4,7 +4,7 @@ An entry component is any component that Angular loads imperatively, (which mean
 
 <div class="alert is-helpful">
 
-    To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.
+To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.
 
 </div>
 
@@ -75,10 +75,11 @@ All router components must be entry components. Because this would require you t
 
 
 ## The `entryComponents` array
+
 <div class="alert is-helpful">
-
-   Since 9.0.0 with Ivy, the `entryComponents` property is no longer necessary. See [deprecations guide](guide/deprecations#entryComponents).
-
+   
+Since 9.0.0 with Ivy, the `entryComponents` property is no longer necessary. See [deprecations guide](guide/deprecations#entryComponents).
+   
 </div>
 
 Though the `@NgModule` decorator has an `entryComponents` array, most of the time

aio/content/guide/file-structure.md

@@ -95,6 +95,7 @@ Angular components, templates, and styles go here.
 | `app/app.component.css`     | Defines the base CSS stylesheet for the root `AppComponent`. |
 | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. |
 | `app/app.module.ts`         | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here. |
+| `app/package.json`              | This file is generated only in applications created using `--strict` mode. This file is not used by package managers. It is used to tell the tools and bundlers whether the code under this directory is free of non-local [side-effects](guide/strict-mode#side-effect). |
 
 ### Application configuration files
 

aio/content/guide/glossary.md

@@ -627,11 +627,10 @@ The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is
 
 Learn more about how Angular uses [Npm Packages](guide/npm-packages).
 
-{@a ngc}
-
+{@ ngc}
 ## ngc
 `ngc` is a Typescript-to-Javascript transpiler that processes Angular decorators, metadata, and templates, and emits JavaScript code.
-The most recent implementation is internally referred to as `ngtsc` because it's a minimalistic wrapper around the TypeScript compiler `tsc` that adds a transform for processing Angular code.
+The most recent implementation is internally refered to as `ngtsc` because it's a minimalistic wrapper around the TypeScript compiler `tsc` that adds a transform for processing Angular code.
 
 {@a O}
 

aio/content/guide/property-binding.md

@@ -39,34 +39,7 @@ which is the attribute, spelled with a lowercase `s`.
 
 For more details, see the [MDN HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) documentation.
 
-{@a colspan}
-
-#### `colspan` and `colSpan`
-
-A common point of confusion is between the attribute, `colspan`, and the property, `colSpan`.
-Notice that these two names differ by only a single letter.
-
-If you wrote something like this:
-
-<code-example language="html">
-  &lt;tr&gt;&lt;td colspan="{{1 + 1}}"&gt;Three-Four&lt;/td&gt;&lt;/tr&gt;
-</code-example>
-
-You'd get this error:
-
-<code-example language="bash">
-  Template parse errors:
-  Can't bind to 'colspan' since it isn't a known native property
-</code-example>
-
-As the message says, the `<td>` element does not have a `colspan` property. This is true
-because `colspan` is an attribute&mdash;`colSpan`, with a capital `S`, is the
-corresponding property. Interpolation and property binding can set only *properties*, not attributes.
-
-Instead, you'd use property binding and write it like this:
-
-<code-example path="attribute-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html"></code-example>
-
+For more information about `colSpan` and `colspan`, see the [Attribute binding](guide/attribute-binding#colspan) guide.
 
 Another example is disabling a button when the component says that it `isUnchanged`:
 

aio/content/guide/router-tutorial-toh.md

@@ -1656,7 +1656,7 @@ _before_ the `AppRoutingModule`:
 
 </code-tabs>
 
-Remove the initial crisis center route from the `app-routing.module.ts` because now the `HeroesModule` and the `CrisisCenter` modules provide the feature routes.
+Remove the initial crisis center route from the `app-routing.module.ts` because now the `HeroesModule` and the `CrisisCenter` modules provide teh feature routes.
 
 The `app-routing.module.ts` file retains the top-level application routes such as the default and wildcard routes.
 

aio/content/guide/service-worker-communications.md

@@ -67,33 +67,6 @@ Therefore, it is recommended to reload the page once the promise returned by `ac
 
 </div>
 
-### Handling an unrecoverable state
-
-In some cases, the version of the app used by the service worker to serve a client might be in a broken state that cannot be recovered from without a full page reload.
-
-For example, imagine the following scenario:
-- A user opens the app for the first time and the service worker caches the latest version of the app.
-  Let's assume the app's cached assets include `index.html`, `main.<main-hash-1>.js` and `lazy-chunk.<lazy-hash-1>.js`.
-- The user closes the app and does not open it for a while.
-- After some time, a new version of the app is deployed to the server.
-  This newer version includes the files `index.html`, `main.<main-hash-2>.js` and `lazy-chunk.<lazy-hash-2>.js` (note that the hashes are different now, because the content of the files has changed).
-  The old version is no longer available on the server.
-- In the meantime, the user's browser decides to evict `lazy-chunk.<lazy-hash-1>.js` from its cache.
-  Browsers may decide to evict specific (or all) resources from a cache in order to reclaim disk space.
-- The user opens the app again.
-  The service worker serves the latest version known to it at this point, namely the old version (`index.html` and `main.<main-hash-1>.js`).
-- At some later point, the app requests the lazy bundle, `lazy-chunk.<lazy-hash-1>.js`.
-- The service worker is unable to find the asset in the cache (remember that the browser evicted it).
-  Nor is it able to retrieve it from the server (since the server now only has `lazy-chunk.<lazy-hash-2>.js` from the newer version).
-
-In the above scenario, the service worker is not able to serve an asset that would normally be cached.
-That particular app version is broken and there is no way to fix the state of the client without reloading the page.
-In such cases, the service worker notifies the client by sending an `UnrecoverableStateEvent` event.
-You can subscribe to `SwUpdate#unrecoverable` to be notified and handle these errors.
-
-<code-example path="service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts" header="handle-unrecoverable-state.service.ts" region="sw-unrecoverable-state"></code-example>
-
-
 ## More on Angular service workers
 
 You may also be interested in the following:

aio/content/guide/service-worker-config.md

@@ -267,12 +267,6 @@ By default, these criteria are:
 1. The URL must not contain a file extension (i.e. a `.`) in the last path segment.
 2. The URL must not contain `__`.
 
-<div class="alert is-helpful">
-
-To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigation-request-strategy) section.
-
-</div>
-
 ### Matching navigation request URLs
 
 While these default criteria are fine in most cases, it is sometimes desirable to configure different rules. For example, you may want to ignore specific routes (that are not part of the Angular app) and pass them through to the server.
@@ -291,32 +285,3 @@ If the field is omitted, it defaults to:
   '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
 ]
 ```
-
-{@a navigation-request-strategy}
-
-## `navigationRequestStrategy`
-
-This optional property enables you to configure how the service worker handles navigation requests:
-
-```json
-{
-  "navigationRequestStrategy": "freshness"
-}
-```
-
-Possible values:
-
-- `'performance'`: The default setting. Serves the specified [index file](#index-file), which is typically cached.
-- `'freshness'`: Passes the requests through to the network and falls back to the `performance` behavior when offline.
-  This value is useful when the server redirects the navigation requests elsewhere using an HTTP redirect (3xx status code).
-  Reasons for using this value include:
-    - Redirecting to an authentication website when authentication is not handled by the application.
-    - Redirecting specific URLs to avoid breaking existing links/bookmarks after a website redesign.
-    - Redirecting to a different website, such as a server-status page, while a page is temporarily down.
-
-<div class="alert is-important">
-
-The `freshness` strategy usually results in more requests sent to the server, which can increase response latency.
-It is recommended that you use the default performance strategy whenever possible.
-
-</div>

aio/content/guide/strict-mode.md

@@ -1,15 +1,17 @@
 # Strict mode
 
-When you create a new workspace or an application you have an option to create them in a strict mode using the `--strict` flag.
+When you create a new workspace or a project you have an option to create them in a strict mode using the `--strict` flag.
 
-Enabling this flag initializes your new workspace or application with a few new settings that improve maintainability, help you catch bugs ahead of time.
+Enabling this flag initializes your new workspace or project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your application.
 Additionally, applications that use these stricter settings are easier to statically analyze, which can help the `ng update` command refactor code more safely and precisely when you are updating to future versions of Angular.
 
 Specifically, the `strict` flag does the following:
 
 * Enables [`strict` mode in TypeScript](https://www.staging-typescript.org/tsconfig#strict), as well as other strictness flags recommended by the TypeScript team. Specifically, `forceConsistentCasingInFileNames`, `noImplicitReturns`,  `noFallthroughCasesInSwitch`.
-* Turns on strict Angular compiler flags [`strictTemplates`](guide/angular-compiler-options#stricttemplates), [`strictInjectionParameters`](guide/angular-compiler-options#strictinjectionparameters) and [`strictTemplates`](guide/angular-compiler-options#stricttemplates).
-* [Bundle size budgets](guide/build#configuring-size-budgets) have been reduced by ~75%.
+* Turns on strict Angular compiler flags [`strictTemplates`](guide/angular-compiler-options#stricttemplates) and [`strictInjectionParameters`](guide/angular-compiler-options#strictinjectionparameters)
+* [Bundle size budgets](guide/build#configuring-size-budgets) have been reduced by ~75%
+* Turns on [`no-any` tslint rule](https://palantir.github.io/tslint/rules/no-any/) to prevent declarations of type `any`
+* [Marks your application as side-effect free](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) to enable more advanced tree-shaking
 
 You can apply these settings at the workspace and project level.
 
@@ -28,3 +30,17 @@ To create a new application in the strict mode within an existing non-strict wor
 ng generate application [project-name] --strict
 
 </code-example>
+
+{@a side-effect}
+
+### Non-local side effects in applications
+
+When you create projects and workspaces using the `strict` mode, you'll notice an additional `package.json` file, located in `src/app/` directory.
+This file informs tools and bundlers that the code under this directory is free of non-local side effects. Non-local side effects in the application code are not common and using them is not considered a good coding pattern.
+More importantly, code with these types of side effects cannot be optimized, resulting in increased bundle sizes and applications that load more slowly.
+
+If you need more information, the following links may be helpful.
+
+* [Tree-shaking](https://webpack.js.org/guides/tree-shaking/)
+* [Dealing with side effects and pure functions in JavaScript](https://dev.to/vonheikemen/dealing-with-side-effects-and-pure-functions-in-javascript-16mg)
+* [How to deal with dirty side effects in your pure function JavaScript](https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/)

aio/content/guide/style-precedence.md

@@ -1,133 +0,0 @@
-# Style Precedence
-
-When there are multiple bindings to the same class name or style attribute, Angular uses a set of precedence rules to determine which classes or styles to apply to the element.
-These rules specify an order for which style- and class-related bindings have priority.
-This styling precedence is as follows, from the most specific with the highest priority to least specific with the lowest priorty:
-
-1. Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.
-  <table width="100%">
-    <col width="40%"></col>
-    <col width="60%"></col>
-    <thead>
-      <tr>
-        <th>Binding type</th>
-        <th>Example</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Property binding</td>
-        <td><code>&lt;div [class.foo]="hasFoo"&gt;</code><br><code>&lt;div [style.color]="color"&gt;</code></td>
-      </tr>
-      <tr>
-        <td>Map binding</td>
-        <td><code>&lt;div [class]="classExpression"&gt;</code><br><code>&lt;div [style]="styleExpression"&gt;</code></td>
-      </tr>
-      <tr>
-        <td>Static value</td>
-        <td><code>&lt;div class="foo"&gt;</code><br><code>&lt;div style="color: blue"&gt;</code></td>
-      </tr>
-    </tbody>
-  </table>
-1. Directive host bindings are less specific because you can use directives in multiple locations, so they have a lower precedence than template bindings.
-  <table width="100%">
-    <col width="40%"></col>
-    <col width="60%"></col>
-    <thead>
-      <tr>
-        <th>Binding type</th>
-        <th>Example</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Property binding</td>
-        <td><code>host: {'[class.foo]': 'hasFoo'}</code><br><code>host: {'[style.color]': 'color'}</code></td>
-      </tr>
-      <tr>
-        <td>Map binding</td>
-        <td><code>host: {'[class]': 'classExpr'}</code><br><code>host: {'[style]': 'styleExpr'}</code></td>
-      </tr>
-      <tr>
-        <td>Static value</td>
-        <td><code>host: {'class': 'foo'}</code><br><code>host: {'style': 'color: blue'}</code></td>
-      </tr>
-    </tbody>
-  </table>
-1. Component host bindings have the lowest precedence.
-    <table width="100%">
-    <col width="40%"></col>
-    <col width="60%"></col>
-    <thead>
-      <tr>
-        <th>Binding type</th>
-        <th>Example</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Property binding</td>
-        <td><code>host: {'[class.foo]': 'hasFoo'}</code><br><code>host: {'[style.color]': 'color'}</code></td>
-      </tr>
-      <tr>
-        <td>Map binding</td>
-        <td><code>host: {'[class]': 'classExpression'}</code><br><code>host: {'[style]': 'styleExpression'}</code></td>
-      </tr>
-      <tr>
-        <td>Static value</td>
-        <td><code>host: {'class': 'foo'}</code><br><code>host: {'style': 'color: blue'}</code></td>
-      </tr>
-    </tbody>
-  </table>
-
-## Precedence and specificity
-
-In the following example, binding to a specific class, as in `[class.special]`, takes precedence over a generic `[class]` binding.
-Similarly, binding to a specific style, as in `[style.color]`, takes precedence over a generic `[style]` binding.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="basic-specificity" header="src/app/app.component.html"></code-example>
-
-## Precedence and bindings from different sources
-
-Specificity rules also apply to bindings even when they originate from different sources.
-An element can have bindings that originate from its own template, from host bindings on matched directives, and from host bindings on matched components.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="source-specificity" header="src/app/app.component.html"></code-example>
-
-## Precedence of bindings and static attributes
-
-Bindings take precedence over static attributes because they are dynamic.
-In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding takes precedence.
-
-<code-example path="attribute-binding/src/app/app.component.html" region="dynamic-priority" header="src/app/app.component.html"></code-example>
-
-{@a styling-delegation}
-
-## Delegating to styles with lower precedence
-
-Higher precedence styles can defer to lower precedence styles using `undefined` values.
-For example, consider the following template:
-
-<code-example path="attribute-binding/src/app/app.component.html" region="style-delegation" header="src/app/app.component.html"></code-example>
-
-Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding.
-
-<code-example path="attribute-binding/src/app/comp-with-host-binding.component.ts" region="hostbinding" header="src/app/comp-with-host-binding.component.ts and dirWithHostBinding.directive.ts"></code-example>
-
-If `dirWithHostBinding` sets its binding to `undefined`, the `width` property falls back to the value of the `comp-with-host-binding` host binding.
-
-<code-example header="dirWithHostBinding directive">
-@HostBinding('style.width')
-width = ''; // undefined
-</code-example>
-
-<div class="alert is-helpful">
-
-  If `dirWithHostBinding` sets its binding to `null`, Angular removes the `width` property entirely.
-
-  <code-example header="dirWithHostBinding">
-  @HostBinding('style.width')
-  width = null;
-  </code-example>
-
-</div>

aio/content/guide/template-statements.md

@@ -14,7 +14,7 @@ In the following example, the template statement `deleteHero()` appears in quote
 
 <code-example path="template-syntax/src/app/app.component.html" region="context-component-statement" header="src/app/app.component.html"></code-example>
 
-When the user clicks the **Delete hero** button, Angular calls the `deleteHero()` method in the component class.
+When the user clicks the **Delete hero** button, Angular calls the `deleteHero()` function in the component class.
 
 You can use template statements with elements, components, or directives in response to events.
 

aio/content/guide/updating-to-version-10.md

@@ -37,10 +37,10 @@ If you're curious about the specific migrations being run by the CLI, see the [a
 {@a deprecations}
 ### New Deprecations
 
-| Area                          | API or Feature                                     | May be removed in |
-| ----------------------------- | -------------------------------------------------- | ----------------- |
-| `@angular/core`               | [`WrappedValue`](guide/deprecations#wrapped-value) | <!--v10--> v12 |
-| browser support               | IE 9, 10, and IE Mobile                            | <!--v10--> v11 |
+| Area                          | API or Feature                                                                 | May be removed in |
+| ----------------------------- | ---------------------------------------------------------------------------    | ----------------- |
+| `@angular/core`               | [`WrappedValue`](guide/deprecations#wrapped-value)                                     | <!--v10--> v12 |
+| browser support               | [`IE 9, 10, and IE Mobile`](guide/deprecations#ie-9-10-and-ie-mobile-support) | <!--v10--> v11 |
 
 
 {@a removals}

aio/content/guide/user-input.md

@@ -234,8 +234,8 @@ To fix this issue, listen to both the _Enter_ key and the _blur_ event.
 
 
 ## Put it all together
-
-This page demonstrated several event binding techniques.
+The previous page showed how to [display data](guide/displaying-data).
+This page demonstrated event binding techniques.
 
 Now, put it all together in a micro-app
 that can display a list of heroes and add new heroes to the list.

aio/content/guide/view-encapsulation.md

@@ -13,6 +13,8 @@ Choose from the following modes:
   to attach a shadow DOM to the component's host element, and then puts the component
   view inside that shadow DOM. The component's styles are included within the shadow DOM.
 
+* `Native` view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - [learn about the changes](https://hayato.io/2016/shadowdomv1/).
+
 * `Emulated` view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing
   (and renaming) the CSS code to effectively scope the CSS to the component's view.
   For details, see [Inspecting generated CSS](guide/view-encapsulation#inspect-generated-css) below.
@@ -24,7 +26,7 @@ Choose from the following modes:
 
 To set the components encapsulation mode, use the `encapsulation` property in the component metadata:
 
-<code-example path="component-styles/src/app/quest-summary.component.ts" region="encapsulation.shadow" header="src/app/quest-summary.component.ts"></code-example>
+<code-example path="component-styles/src/app/quest-summary.component.ts" region="encapsulation.native" header="src/app/quest-summary.component.ts"></code-example>
 
 `ShadowDom` view encapsulation only works on browsers that have native support
 for shadow DOM (see [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1) on the
@@ -78,4 +80,4 @@ by the generated component styles, which are in the `<head>` section of the DOM:
 
 These styles are post-processed so that each selector is augmented
 with `_nghost` or `_ngcontent` attribute selectors.
-These extra selectors enable the scoping rules described in this page.
+These extra selectors enable the scoping rules described in this page.

aio/content/guide/zone.md

@@ -9,7 +9,7 @@ To understand the benefits of `NgZone`, it is important to have a clear grasp of
 
 ### Displaying and updating data in Angular
 
-In Angular, you can display data by binding controls in an HTML template to the properties of an Angular component.
+In Angular, you can [display data](guide/displaying-data) by binding controls in an HTML template to the properties of an Angular component.
 
 <code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts"></code-example>
 
@@ -102,13 +102,13 @@ In Angular, this step is unnecessary. Whenever you update the data, your HTML is
 
 To understand how change detection works, first consider when the application needs to update the HTML. Typically, updates occur for one of the following reasons:
 
-1. Component initialization. For example, when bootstrapping an Angular application, Angular loads the bootstrap component and triggers the [ApplicationRef.tick()](api/core/ApplicationRef#tick) to call change detection and View Rendering.
+1. Component initialization. For example, when bootstrapping an Angular application, Angular loads the bootstrap component and triggers the [ApplicationRef.tick()](api/core/ApplicationRef#tick) to call change detection and View Rendering. Just as in the [displaying data](guide/displaying-data) sample, the `AppComponent` is the bootstrap component. This component has the properties `title` and `myHero`, which the application renders in the HTML.
 
-1. Event listener. The DOM event listener can update the data in an Angular component and also trigger change detection, as in the following example.
+2. Event listener. The DOM event listener can update the data in an Angular component and also trigger change detection, as in the following example.
 
 <code-example path="user-input/src/app/click-me.component.ts" region="click-me-component" header="src/app/click-me.component.ts"></code-example>
 
-1. HTTP Data Request. You can also get data from a server through an HTTP request. For example:
+3. HTTP Data Request. You can also get data from a server through an HTTP request. For example:
 
 ```typescript
 @Component({

aio/content/marketing/contributors.json

@@ -53,9 +53,6 @@
   },
   "kyliau": {
     "name": "Keen Yee Liau",
-    "twitter": "liauky",
-    "website": "https://github.com/kyliau",
-    "bio": "Keen works on language service and CLI. He also maintains Karma and Protractor.",
     "groups": ["Angular"],
     "lead": "igorminar",
     "picture": "kyliau.jpg"

aio/content/navigation.json

@@ -56,35 +56,35 @@
       "tooltip": "Set up your environment and learn basic concepts",
       "children": [
         {
-            "title": "Try it",
-            "tooltip": "Examine and work with a ready-made sample app, with no setup.",
-            "children": [
-              {
-                "url": "start",
-                "title": "Getting started",
-                "tooltip": "Take a look at Angular's component model, template syntax, and component communication."
-              },
-              {
-                "url": "start/start-routing",
-                "title": "Adding navigation",
-                "tooltip": "Navigate among different page views using the browser's URL."
-              },
-              {
-                "url": "start/start-data",
-                "title": "Managing Data",
-                "tooltip": "Use services and access external data via HTTP."
-              },
-              {
-                "url": "start/start-forms",
-                "title": "Using Forms for User Input",
-                "tooltip": "Learn about fetching and managing data from users with forms."
-              },
-              {
-                "url": "start/start-deployment",
-                "title": "Deploying an application",
-                "tooltip": "Move to local development, or deploy your application to Firebase or your own server."
-              }
-            ]
+          "title": "Try it",
+          "tooltip": "Examine and work with a ready-made sample app, with no setup.",
+          "children": [
+            {
+              "url": "start",
+              "title": "Getting started",
+              "tooltip": "Take a look at Angular's component model, template syntax, and component communication."
+            },
+            {
+              "url": "start/start-routing",
+              "title": "Adding navigation",
+              "tooltip": "Navigate among different page views using the browser's URL."
+            },
+            {
+              "url": "start/start-data",
+              "title": "Managing Data",
+              "tooltip": "Use services and access external data via HTTP."
+            },
+            {
+              "url": "start/start-forms",
+              "title": "Using Forms for User Input",
+              "tooltip": "Learn about fetching and managing data from users with forms."
+            },
+            {
+              "url": "start/start-deployment",
+              "title": "Deploying an application",
+              "tooltip": "Move to local development, or deploy your application to Firebase or your own server."
+            }
+          ]
         },
         {
           "url": "guide/setup-local",
@@ -106,6 +106,11 @@
               "title": "User Input",
               "tooltip": "User input triggers DOM events. Angular listens to those events with event bindings that funnel updated values back into your app's components and models."
             },
+            {
+              "url": "guide/pipes",
+              "title": "Pipes",
+              "tooltip": "Pipes transform displayed values within a template."
+            },
             {
               "url": "guide/lifecycle-hooks",
               "title": "Component Lifecycle",
@@ -162,11 +167,6 @@
               "title": "Template statements",
               "tooltip": "Introductory guide to statements in templates that respond to events that components, directives, or elements raise."
             },
-            {
-              "url": "guide/pipes",
-              "title": "Pipes",
-              "tooltip": "Pipes transform displayed values within a template."
-            },
             {
               "url": "guide/binding-syntax",
               "title": "Binding syntax",
@@ -609,6 +609,11 @@
           "title": "Building a Template-driven Form",
           "tooltip": "Create a template-driven form using directives and Angular template syntax."
         },
+        {
+          "url": "guide/displaying-data",
+          "title": "Data binding",
+          "tooltip": "Property binding helps show app data in the UI."
+        },
         {
           "url": "guide/web-worker",
           "title": "Web Workers",

aio/firebase.json

@@ -31,7 +31,6 @@
       {"type": 301, "source": "/guide/quickstart", "destination": "/start"},
       {"type": 301, "source": "/getting-started", "destination": "/start"},
       {"type": 301, "source": "/getting-started/:rest*", "destination": "/start/:rest*"},
-      {"type": 301, "source": "/guide/displaying-data", "destination": "/start#template-syntax"},
 
       // Renaming of Getting Started topics
       {"type": 301, "source": "/start/data", "destination": "/start/start-data"},

aio/ngsw-config.json

@@ -102,9 +102,6 @@
     "!/guide/cli-quickstart",
     "!/guide/cli-quickstart.html",
     "!/guide/cli-quickstart/",
-    "!/guide/displaying-data",
-    "!/guide/displaying-data.html",
-    "!/guide/displaying-data/",
     "!/guide/learning-angular",
     "!/guide/learning-angular.html",
     "!/guide/learning-angular/",

aio/package.json

@@ -23,7 +23,7 @@
     "build-local-with-viewengine": "yarn ~~build",
     "prebuild-local-with-viewengine-ci": "node scripts/switch-to-viewengine && yarn setup-local-ci",
     "build-local-with-viewengine-ci": "yarn ~~build --progress=false",
-    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 06ad10668",
+    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js ab97bc382",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
     "test": "yarn check-env && ng test",
     "pree2e": "yarn check-env && yarn update-webdriver",
@@ -71,7 +71,6 @@
     "boilerplate:test": "node tools/examples/test.js",
     "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz",
     "generate-zips": "node ./tools/example-zipper/generateZips",
-    "create-example": "node ./tools/examples/create-example.js",
     "build-404-page": "node scripts/build-404-page",
     "update-webdriver": "node ../scripts/webdriver-manager-update.js",
     "~~audit-web-app": "node scripts/audit-web-app",
@@ -173,6 +172,6 @@
     "unist-util-visit-parents": "^1.1.1",
     "watchr": "^3.0.1",
     "xregexp": "^4.0.0",
-    "yargs": "^16.1.0"
+    "yargs": "^7.0.2"
   }
 }

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -21,7 +21,7 @@ const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElemen
   selector: 'aio-doc-viewer',
   template: ''
   // TODO(robwormald): shadow DOM and emulated don't work here (?!)
-  // encapsulation: ViewEncapsulation.ShadowDom
+  // encapsulation: ViewEncapsulation.Native
 })
 export class DocViewerComponent implements OnDestroy {
   // Enable/Disable view transition animations.

aio/src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**

aio/src/testing/dom-utils.ts

@@ -5,7 +5,7 @@ export function createCustomEvent(doc: Document, name: string, detail: any): Cus
   const bubbles = false;
   const cancelable = false;
 
-  // On IE11, `CustomEvent` is not a constructor.
+  // On IE9-11, `CustomEvent` is not a constructor.
   if (typeof CustomEvent !== 'function') {
     const event = doc.createEvent('CustomEvent');
     event.initCustomEvent(name, bubbles, cancelable, detail);

aio/tests/deployment/shared/URLS_TO_REDIRECT.txt

@@ -177,7 +177,6 @@
 /getting-started/forms	/start/start-forms
 /getting-started/deployment	/start/start-deployment
 /guide/cli-quickstart	/start
-/guide/displaying-data	/start#template-syntax
 /guide/learning-angular	/start
 /guide/learning-angular.html	/start
 /guide/metadata	/guide/aot-compiler

aio/tools/README.md

@@ -29,12 +29,11 @@ sub-folder. Also there are a number of common boilerplate files that are needed
 example's project. We maintain these common boilerplate files centrally to reduce the amount of effort
 if one of them needs to change.
 
-This `examples` tool folder contains three utilities:
+This `examples` tool folder contains two utilities:
 
 * example-boilerplate.js - install/remove the npm dependencies and boilerplate files into/from each of the
   examples' subfolders.
 * run-example-e2e.js - run the e2e tests for one or more examples
-* create-example.js - create a new example from the `example-scaffold/` directory or by importing files from a CLI project.
 
 See the [README.md](examples/README.md) for more details.
 

aio/tools/examples/README.md

@@ -150,14 +150,6 @@ See [aio/README.md](../../README.md#developer-tasks) for the available command-l
 
 Running the script will create an `aio/protractor-results.txt` file with the results of the tests.
 
-### `create-example.js`
-
-The [create-example.js](./create-example.js) script creates a new example under the `aio/content/examples` directory.
-
-You must provide a new name for the example.
-By default the script will place basic scaffold files into the new example (from [shared/example-scaffold](./shared/example-scaffold)).
-But you can also specify the path to a separate CLI project, from which the script will copy files that would not be considered "boilerplate".
-See the [Boilerplate overview](#boilerplate-overview) for more information.
 
 ### Updating example dependencies
 

aio/tools/examples/UPDATING.md

@@ -7,9 +7,9 @@ Follow these steps to update the examples to the latest versions of Angular (and
   > NOTE:
   > The [angular-cli-diff](https://github.com/cexbrayat/angular-cli-diff) repo can be a useful resource for discovering what dependency versions are used for a basic CLI app at a specific CLI version.
 
-- In the [shared/](./shared) directory, run `yarn` to update the dependencies in the [shared/node_modules/](./shared/node_modules) directory and the [shared/yarn.lock](./shared/yarn.lock) file.
+- In the [shared/](./shared) folder, run `yarn` to update the dependencies in the [shared/node_modules/](./shared/node_modules) folder and the [shared/yarn.lock](./shared/yarn.lock) file.
 
-- In the [shared/](./shared) directory, run `yarn sync-deps` to update the dependency versions of the `package.json` files in each sub-folder of [shared/boilerplate/](./shared/boilerplate) to match the ones in [shared/package.json](./shared/package.json).
+- In the [shared/](./shared) folder, run `yarn sync-deps` to update the dependency versions of the `package.json` files in each sub-folder of [shared/boilerplate/](./shared/boilerplate) to match the ones in [shared/package.json](./shared/package.json).
 
 - Follow the steps in the following section to update the rest of the boilerplate files.
 
@@ -24,7 +24,7 @@ Any necessary changes to boilerplate files will be done automatically through mi
 > You have to make these changes (if any) manually.
 > Again, the [angular-cli-diff](https://github.com/cexbrayat/angular-cli-diff) repo can be a useful resource for discovering changes between versions.
 
-- In the [shared/boilerplate/cli/](./shared/boilerplate/cli) directory, run the following commands to migrate the the project to the current versions of Angular CLI and the Angular framework (updated in previous steps):
+- In the [shared/boilerplate/cli/](./shared/boilerplate/cli) folder, run the following commands to migrate the the project to the current versions of Angular CLI and the Angular framework (updated in previous steps):
   ```sh
   # Ensure dependencies are installed.
   yarn install
@@ -38,11 +38,8 @@ Any necessary changes to boilerplate files will be done automatically through mi
   > In order for `ng update` to work, there must be a `node_modules/` directory with installed dependencies inside the [shared/boilerplate/cli/](./shared/boilerplate/cli) directory.
   > This `node_modules/` directory is only needed during the update operation and is otherwise ignored (both by git and by the [example-boilerplate.js](./example-boilerplate.js) script) by means of the [shared/boilerplate/.gitignore](./shared/boilerplate/.gitignore) file.
 
-- The previous command made any necessary changes to boilerplate files inside the `cli/` directory, but the same changes need to be applied to the other CLI-based boilerplate directories.
-  Inspect the changes in `cli/` and manually apply the necessary ones to other CLI-based boilerplate directories.
-
-- Also ensure that any relevant changes in the [shared/boilerplate/cli/](./shared/boilerplate/cli) directory are copied to the [shared/example-scaffold/](./shared/example-scaffold) directory, which is used when creating new examples (via `yarn create-example ...`).
-  Only files that would not be considered boilerplate should be added to the `example-scaffold/` directory.
+- The previous command made any necessary changes to boilerplate files inside the `cli/` folder, but the same changes need to be applied to the other CLI-based boilerplate folders.
+  Inspect the changes in `cli/` and manually apply the necessary ones to other CLI-based boilerplate folders.
 
 - Ensure any changes to [cli/tslint.json](./shared/boilerplate/cli/tslint.json) are ported over to [systemjs/tslint.json](./shared/boilerplate/systemjs/tslint.json) and also [aio/content/examples/tslint.json](../../content/examples/tslint.json).
   This last part is important, since this file is used to lint example code on CI.

aio/tools/examples/constants.js

@@ -1,6 +0,0 @@
-const path = require('canonical-path');
-
-exports.EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
-exports.EXAMPLE_CONFIG_FILENAME = 'example-config.json';
-exports.SHARED_PATH = path.resolve(__dirname, 'shared');
-exports.STACKBLITZ_CONFIG_FILENAME = 'stackblitz.json';

aio/tools/examples/create-example.js

@@ -1,140 +0,0 @@
-const fs = require('fs-extra');
-const glob = require('glob');
-const ignore = require('ignore');
-const path = require('canonical-path');
-const shelljs = require('shelljs');
-const yargs = require('yargs');
-
-const {EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, SHARED_PATH, STACKBLITZ_CONFIG_FILENAME} =
-    require('./constants');
-const BASIC_SOURCE_PATH = path.resolve(SHARED_PATH, 'example-scaffold');
-
-shelljs.set('-e');
-
-if (require.main === module) {
-  const options =
-      yargs(process.argv.slice(2))
-          .command(
-              '$0 <name> [source]',
-              [
-                'Create a new <name> example.',
-                '',
-                'If [source] is provided then the relevant files from the CLI project at that path are copied into the example.',
-              ].join('\n'))
-          .strict()
-          .version(false)
-          .argv;
-
-  const exampleName = options.name;
-  const examplePath = path.resolve(EXAMPLES_BASE_PATH, exampleName);
-
-  console.log('Creating new example at', examplePath);
-  createEmptyExample(exampleName, examplePath);
-
-  const sourcePath =
-      options.source !== undefined ? path.resolve(options.source) : BASIC_SOURCE_PATH;
-  console.log('Copying files from', sourcePath);
-  copyExampleFiles(sourcePath, examplePath, exampleName);
-
-  console.log(`The new "${exampleName}" example has been created.`);
-  console.log('Now run "yarn boilerplate:add" to set it up for development.');
-  console.log(
-      'You can find more info on working with docs examples in aio/tools/examples/README.md.')
-}
-
-/**
- * Create the directory and marker files for the new example.
- */
-function createEmptyExample(exampleName, examplePath) {
-  ensureExamplePath(examplePath);
-  writeExampleConfigFile(examplePath);
-  writeStackBlitzFile(exampleName, examplePath);
-}
-
-/**
- * Ensure that the new example directory exists.
- */
-function ensureExamplePath(examplePath) {
-  if (fs.existsSync(examplePath)) {
-    throw new Error(
-        `Unable to create example. The path to the new example already exists: ${examplePath}`);
-  }
-  fs.ensureDirSync(examplePath);
-}
-
-/**
- * Write the `example-config.json` file to the new example.
- */
-function writeExampleConfigFile(examplePath) {
-  fs.writeFileSync(path.resolve(examplePath, EXAMPLE_CONFIG_FILENAME), '');
-}
-
-/**
- * Write the `stackblitz.json` file into the new example.
- */
-function writeStackBlitzFile(exampleName, examplePath) {
-  const config = {
-    description: titleize(exampleName),
-    files: ['!**/*.d.ts', '!**/*.js', '!**/*.[1,2].*'],
-    tags: [exampleName.split('-')]
-  };
-  fs.writeFileSync(
-      path.resolve(examplePath, STACKBLITZ_CONFIG_FILENAME),
-      JSON.stringify(config, null, 2) + '\n');
-}
-
-/**
- * Copy all the files from the `sourcePath`, which are not ignored by the `.gitignore` file in the
- * `EXAMPLES_BASE_PATH`, to the `examplePath`.
- */
-function copyExampleFiles(sourcePath, examplePath, exampleName) {
-  const gitIgnoreSource = getGitIgnore(sourcePath);
-  const gitIgnoreExamples = getGitIgnore(EXAMPLES_BASE_PATH);
-
-  // Grab the files in the source folder and filter them based on the gitignore rules.
-  const sourceFiles =
-      glob.sync('**/*', {
-            cwd: sourcePath,
-            dot: true,
-            ignore: ['**/node_modules/**', '.git/**', '.gitignore'],
-            mark: true
-          })
-          // Filter out the directories, leaving only files
-          .filter(filePath => !/\/$/.test(filePath))
-          // Filter out files that match the source directory .gitignore rules
-          .filter(filePath => !gitIgnoreSource.ignores(filePath))
-          // Filter out files that match the examples directory .gitignore rules
-          .filter(filePath => !gitIgnoreExamples.ignores(path.join(exampleName, filePath)));
-
-  for (const sourceFile of sourceFiles) {
-    console.log(' - ', sourceFile);
-    const destPath = path.resolve(examplePath, sourceFile)
-    fs.ensureDirSync(path.dirname(destPath));
-    fs.copySync(path.resolve(sourcePath, sourceFile), destPath);
-  }
-}
-
-function getGitIgnore(directory) {
-  const gitIgnoreMatcher = ignore();
-  const gitignoreFilePath = path.resolve(directory, '.gitignore');
-  if (fs.existsSync(gitignoreFilePath)) {
-    const gitignoreFile = fs.readFileSync(gitignoreFilePath, 'utf8');
-    gitIgnoreMatcher.add(gitignoreFile);
-  }
-  return gitIgnoreMatcher;
-}
-
-/**
- * Convert a kebab-case string to space separated Title Case string.
- */
-function titleize(input) {
-  return input.replace(
-      /(-|^)(.)/g, (_, pre, char) => `${pre === '-' ? ' ' : ''}${char.toUpperCase()}`);
-}
-
-exports.createEmptyExample = createEmptyExample;
-exports.ensureExamplePath = ensureExamplePath;
-exports.writeExampleConfigFile = writeExampleConfigFile;
-exports.writeStackBlitzFile = writeStackBlitzFile;
-exports.copyExampleFiles = copyExampleFiles;
-exports.titleize = titleize;

aio/tools/examples/create-example.spec.js

@@ -1,130 +0,0 @@
-const path = require('canonical-path');
-const fs = require('fs-extra');
-const {glob} = require('glob');
-
-const {EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, SHARED_PATH, STACKBLITZ_CONFIG_FILENAME} =
-    require('./constants');
-
-const {
-  copyExampleFiles,
-  createEmptyExample,
-  ensureExamplePath,
-  titleize,
-  writeExampleConfigFile,
-  writeStackBlitzFile
-} = require('./create-example');
-
-describe('create-example tool', () => {
-  describe('createEmptyExample', () => {
-    it('should create an empty example with marker files', () => {
-      spyOn(fs, 'existsSync').and.returnValue(false);
-      spyOn(fs, 'ensureDirSync');
-      const writeFileSpy = spyOn(fs, 'writeFileSync');
-
-      createEmptyExample('foo-bar', '/path/to/foo-bar');
-      expect(writeFileSpy).toHaveBeenCalledTimes(2);
-      expect(writeFileSpy)
-          .toHaveBeenCalledWith(`/path/to/foo-bar/${EXAMPLE_CONFIG_FILENAME}`, jasmine.any(String));
-      expect(writeFileSpy)
-          .toHaveBeenCalledWith(
-              `/path/to/foo-bar/${STACKBLITZ_CONFIG_FILENAME}`, jasmine.any(String));
-    });
-  });
-
-  describe('ensureExamplePath', () => {
-    it('should error if the path already exists', () => {
-      spyOn(fs, 'existsSync').and.returnValue(true);
-      expect(() => ensureExamplePath('foo/bar'))
-          .toThrowError(
-              `Unable to create example. The path to the new example already exists: foo/bar`);
-    });
-
-    it('should create the directory on disk', () => {
-      spyOn(fs, 'existsSync').and.returnValue(false);
-      const spy = spyOn(fs, 'ensureDirSync');
-      ensureExamplePath('foo/bar');
-      expect(spy).toHaveBeenCalledWith('foo/bar');
-    });
-  });
-
-  describe('writeExampleConfigFile', () => {
-    it('should write a JSON file to disk', () => {
-      const spy = spyOn(fs, 'writeFileSync');
-      writeExampleConfigFile('/foo/bar');
-      expect(spy).toHaveBeenCalledWith(`/foo/bar/${EXAMPLE_CONFIG_FILENAME}`, '');
-    });
-  });
-
-  describe('writeStackBlitzFile', () => {
-    it('should write a JSON file to disk', () => {
-      const spy = spyOn(fs, 'writeFileSync');
-      writeStackBlitzFile('bar-bar', '/foo/bar-bar');
-      expect(spy).toHaveBeenCalledWith(`/foo/bar-bar/${STACKBLITZ_CONFIG_FILENAME}`, [
-        '{',
-        '  "description": "Bar Bar",',
-        '  "files": [',
-        '    "!**/*.d.ts",',
-        '    "!**/*.js",',
-        '    "!**/*.[1,2].*"',
-        '  ],',
-        '  "tags": [',
-        '    [',
-        '      "bar",',
-        '      "bar"',
-        '    ]',
-        '  ]',
-        '}',
-        '',
-      ].join('\n'));
-    });
-  });
-
-  describe('copyExampleFiles', () => {
-    it('should copy over files that are not ignored by git', () => {
-      const examplesGitIgnorePath = path.resolve(EXAMPLES_BASE_PATH, '.gitignore');
-      const sourceGitIgnorePath = path.resolve('/source/path', '.gitignore');
-
-      spyOn(console, 'log');
-      spyOn(fs, 'existsSync').and.returnValue(true);
-      const readFileSyncSpy = spyOn(fs, 'readFileSync').and.callFake(p => {
-        switch (p) {
-          case examplesGitIgnorePath:
-            return '**/a/b/**';
-          case sourceGitIgnorePath:
-            return '**/*.bad';
-          default:
-            throw new Error('Unexpected path');
-        }
-      });
-      spyOn(glob, 'sync').and.returnValue([
-        'a/', 'a/b/', 'a/c', 'x.ts', 'x.bad', 'a/b/y.ts', 'a/b/y.bad'
-      ]);
-      const ensureDirSyncSpy = spyOn(fs, 'ensureDirSync');
-      const copySyncSpy = spyOn(fs, 'copySync');
-
-      copyExampleFiles('/source/path', '/path/to/test-example', 'test-example');
-
-      expect(readFileSyncSpy).toHaveBeenCalledWith(examplesGitIgnorePath, 'utf8');
-      expect(readFileSyncSpy).toHaveBeenCalledWith(sourceGitIgnorePath, 'utf8');
-
-      expect(ensureDirSyncSpy.calls.allArgs()).toEqual([
-        ['/path/to/test-example/a'],
-        ['/path/to/test-example'],
-      ]);
-
-      expect(copySyncSpy.calls.allArgs()).toEqual([
-        ['/source/path/a/c', '/path/to/test-example/a/c'],
-        ['/source/path/x.ts', '/path/to/test-example/x.ts'],
-      ]);
-    });
-  });
-
-  describe('titleize', () => {
-    it('should convert a kebab-case string to title-case', () => {
-      expect(titleize('abc')).toEqual('Abc');
-      expect(titleize('abc-def')).toEqual('Abc Def');
-      expect(titleize('123')).toEqual('123');
-      expect(titleize('abc---def')).toEqual('Abc - Def');
-    });
-  });
-});

aio/tools/examples/example-boilerplate.js

@@ -4,8 +4,8 @@ const ignore = require('ignore');
 const path = require('canonical-path');
 const shelljs = require('shelljs');
 const yargs = require('yargs');
-const {EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, SHARED_PATH} = require('./constants');
 
+const SHARED_PATH = path.resolve(__dirname, 'shared');
 const SHARED_NODE_MODULES_PATH = path.resolve(SHARED_PATH, 'node_modules');
 
 const BOILERPLATE_BASE_PATH = path.resolve(SHARED_PATH, 'boilerplate');
@@ -13,6 +13,9 @@ const BOILERPLATE_CLI_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'cli');
 const BOILERPLATE_COMMON_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'common');
 const BOILERPLATE_VIEWENGINE_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'viewengine');
 
+const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+
 class ExampleBoilerPlate {
   /**
    * Add boilerplate files to all the examples

aio/tools/examples/shared/boilerplate/cli/.browserslistrc

@@ -14,4 +14,5 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
 not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**

aio/tools/examples/shared/boilerplate/elements/src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**

aio/tools/examples/shared/boilerplate/i18n/src/polyfills.ts

@@ -22,7 +22,7 @@ import '@angular/localize/init';
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**

aio/tools/examples/shared/example-scaffold/e2e/src/app.e2e-spec.ts

@@ -1,20 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  // Add your e2e tests here
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});

aio/tools/examples/shared/example-scaffold/src/app/app.component.html

@@ -1 +0,0 @@
-<h1>Replace the src folder in this {{title}} with yours.</h1>

aio/tools/examples/shared/example-scaffold/src/app/app.component.spec.ts

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

aio/tools/examples/shared/example-scaffold/src/app/app.component.ts

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

aio/tools/examples/shared/example-scaffold/src/app/app.module.ts

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

aio/tools/examples/shared/example-scaffold/src/index.html

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

aio/tools/examples/shared/example-scaffold/src/main.ts

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

aio/tools/transforms/authors-package/api-package.js

@@ -20,6 +20,8 @@ const packageMap = {
   'platform-browser': ['platform-browser/index.ts', 'platform-browser/animations/index.ts', 'platform-browser/testing/index.ts'],
   'platform-browser-dynamic': ['platform-browser-dynamic/index.ts', 'platform-browser-dynamic/testing/index.ts'],
   'platform-server': ['platform-server/index.ts', 'platform-server/testing/index.ts'],
+  'platform-webworker': ['platform-webworker/index.ts'],
+  'platform-webworker-dynamic': ['platform-webworker-dynamic/index.ts'],
   router: ['router/index.ts', 'router/testing/index.ts', 'router/upgrade/index.ts'],
   'service-worker': ['service-worker/index.ts'],
   upgrade: ['upgrade/index.ts', 'upgrade/static/index.ts', 'upgrade/static/testing/index.ts']

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -3,7 +3,7 @@
 
 {%- macro renderHeritage(exportDoc) -%}
   {%- if exportDoc.extendsClauses.length %} extends {% for clause in exportDoc.extendsClauses -%}
-  {% if clause.doc.path %}<a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% else %}{$ clause.text $}{% endif %}{% if not loop.last %}, {% endif -%}
+  <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}
   {% endfor %}{% endif %}
   {%- if exportDoc.implementsClauses.length %} implements {% for clause in exportDoc.implementsClauses -%}
   <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}

aio/yarn.lock

@@ -3075,6 +3075,11 @@ camelcase@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
   integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
 
+camelcase@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
+
 camelcase@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -3454,7 +3459,7 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-cliui@^3.0.3:
+cliui@^3.0.3, cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
   integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
@@ -3490,15 +3495,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.2.tgz#e3a412e1d5ec0ccbe50d1b4120fc8164e97881f4"
-  integrity sha512-lhpKkuUj67j5JgZIPZxLe7nSa4MQoojzRVWQyzMqBp2hBg6gwRjUDAwC1YDeBaC3APDBKNnjWbv2mlDF4XgOSA==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -4909,7 +4905,7 @@ errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.3.1:
+error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -5021,11 +5017,6 @@ es6-weak-map@^2.0.1, es6-weak-map@^2.0.2:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
-escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
-
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -5592,6 +5583,14 @@ find-free-port@^2.0.0:
   resolved "https://registry.yarnpkg.com/find-free-port/-/find-free-port-2.0.0.tgz#4b22e5f6579eb1a38c41ac6bcb3efed1b6da9b1b"
   integrity sha1-SyLl9leesaOMQaxryz7+0bbamxs=
 
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -5926,7 +5925,7 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -7375,6 +7374,11 @@ is-url@^1.2.2:
   resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
   integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
 
+is-utf8@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
+
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -8133,6 +8137,17 @@ listenercount@~1.0.1:
   resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
   integrity sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=
 
+load-json-file@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+    strip-bom "^2.0.0"
+
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -9809,6 +9824,13 @@ parse-entities@^1.0.2, parse-entities@^1.1.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
+  dependencies:
+    error-ex "^1.2.0"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -9888,6 +9910,13 @@ path-dirname@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
   integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
+  dependencies:
+    pinkie-promise "^2.0.0"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -9930,6 +9959,15 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -10834,6 +10872,23 @@ read-package-tree@5.3.1:
     readdir-scoped-modules "^1.0.0"
     util-promisify "^2.1.0"
 
+read-pkg-up@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
+  dependencies:
+    find-up "^1.0.0"
+    read-pkg "^1.0.0"
+
+read-pkg@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
+  dependencies:
+    load-json-file "^1.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^1.0.0"
+
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -12326,7 +12381,7 @@ string-length@^1.0.0:
   dependencies:
     strip-ansi "^3.0.0"
 
-string-width@^1.0.1:
+string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
   integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
@@ -12458,6 +12513,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
+  dependencies:
+    is-utf8 "^0.2.0"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -13948,6 +14010,11 @@ when@~3.6.x:
   resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
   integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
 
+which-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -14047,15 +14114,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -14188,7 +14246,7 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-y18n@^3.2.0:
+y18n@^3.2.0, y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
   integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
@@ -14198,11 +14256,6 @@ y18n@^3.2.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-y18n@^5.0.2:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.3.tgz#978115b82befe2b5c762bf55980b7b01a4a2d5d9"
-  integrity sha512-JeFbcHQ/7hVmMBXW6UB6Tg7apStHd/ztGz1JN78y3pFi/q0Ht1eA6PVkvw56gm7UA8fcJR/ziRlYEDMGoju0yQ==
-
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
@@ -14242,10 +14295,12 @@ yargs-parser@^18.1.0, yargs-parser@^18.1.1, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2:
-  version "20.2.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.2.tgz#84562c6b1c41ccec2f13d346c7dd83f8d1a0dc70"
-  integrity sha512-XmrpXaTl6noDsf1dKpBuUNCOHqjs0g3jRMXf/ztRxdOmb+er8kE5z5b55Lz3p5u2T8KJ59ENBnASS8/iapVJ5g==
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
+  dependencies:
+    camelcase "^3.0.0"
 
 yargs@15.3.0:
   version "15.3.0"
@@ -14328,18 +14383,24 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.1"
 
-yargs@^16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.1.0.tgz#fc333fe4791660eace5a894b39d42f851cd48f2a"
-  integrity sha512-upWFJOmDdHN0syLuESuvXDmrRcWd1QafJolHskzaw79uZa7/x53gxQKiR07W59GWY1tFhhU/Th9DrtSfpS782g==
+yargs@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
   dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
     require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.2"
-    yargs-parser "^20.2.2"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
 
 yauzl@^2.10.0:
   version "2.10.0"

browser-providers.conf.js

@@ -27,6 +27,8 @@ var CIconfiguration = {
   // Currently deactivated due to https://github.com/angular/angular/issues/7560
   'FirefoxBeta': {unitTest: {target: null, required: true}, e2e: {target: null, required: false}},
   'FirefoxDev': {unitTest: {target: null, required: true}, e2e: {target: null, required: true}},
+  'IE9': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
+  'IE10': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
   'IE11': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
   'Edge': {unitTest: {target: 'SL', required: false}, e2e: {target: null, required: true}},
   'Android7': {unitTest: {target: 'SL', required: true}, e2e: {target: null, required: true}},
@@ -88,6 +90,14 @@ var customLaunchers = {
     version: '13.0',
     device: 'iPhone 11 Simulator'
   },
+  'SL_IE9':
+      {base: 'SauceLabs', browserName: 'internet explorer', platform: 'Windows 2008', version: '9'},
+  'SL_IE10': {
+    base: 'SauceLabs',
+    browserName: 'internet explorer',
+    platform: 'Windows 2012',
+    version: '10'
+  },
   'SL_IE11':
       {base: 'SauceLabs', browserName: 'internet explorer', platform: 'Windows 8.1', version: '11'},
   'SL_EDGE': {
@@ -127,6 +137,15 @@ var customLaunchers = {
   'BS_CHROME': {base: 'BrowserStack', browser: 'chrome', os: 'OS X', os_version: 'Yosemite'},
   'BS_FIREFOX': {base: 'BrowserStack', browser: 'firefox', os: 'Windows', os_version: '10'},
   'BS_SAFARI10': {base: 'BrowserStack', browser: 'safari', os: 'OS X', os_version: 'Sierra'},
+  'BS_IE9':
+      {base: 'BrowserStack', browser: 'ie', browser_version: '9.0', os: 'Windows', os_version: '7'},
+  'BS_IE10': {
+    base: 'BrowserStack',
+    browser: 'ie',
+    browser_version: '10.1',
+    os: 'Windows',
+    os_version: '8'
+  },
   'BS_IE11': {
     base: 'BrowserStack',
     browser: 'ie',
@@ -145,12 +164,13 @@ var sauceAliases = {
     return customLaunchers[item].base == 'SauceLabs';
   }),
   'DESKTOP': [
-    'SL_CHROME', 'SL_FIREFOX', 'SL_IE11', 'SL_EDGE', 'SL_SAFARI12', 'SL_SAFARI13', 'SL_FIREFOXESR'
+    'SL_CHROME', 'SL_FIREFOX', 'SL_IE9', 'SL_IE10', 'SL_IE11', 'SL_EDGE', 'SL_SAFARI12',
+    'SL_SAFARI13', 'SL_FIREFOXESR'
   ],
   'MOBILE': ['SL_ANDROID7', 'SL_ANDROID8', 'SL_ANDROID9', 'SL_ANDROID10', 'SL_IOS12', 'SL_IOS13'],
   'ANDROID': ['SL_ANDROID7', 'SL_ANDROID8', 'SL_ANDROID9', 'SL_ANDROID10'],
   'FIREFOX': ['SL_FIREFOXESR'],
-  'IE': ['SL_IE11'],
+  'IE': ['SL_IE9', 'SL_IE10', 'SL_IE11'],
   'IOS': ['SL_IOS12', 'SL_IOS13'],
   'SAFARI': ['SL_SAFARI12', 'SL_SAFARI13'],
   'BETA': ['SL_CHROMEBETA', 'SL_FIREFOXBETA'],
@@ -166,12 +186,14 @@ var browserstackAliases = {
   'DESKTOP': [
     'BS_CHROME',
     'BS_FIREFOX',
+    'BS_IE9',
+    'BS_IE10',
     'BS_IE11',
     'BS_EDGE',
   ],
   'MOBILE': ['BS_ANDROID7', 'BS_WINDOWSPHONE'],
   'ANDROID': ['BS_ANDROID7'],
-  'IE': ['BS_IE11'],
+  'IE': ['BS_IE9', 'BS_IE10', 'BS_IE11'],
   'IOS': [],
   'SAFARI': [],
   'CI_REQUIRED': buildConfiguration('unitTest', 'BS', true),

dev-infra/caretaker/check/g3.ts

@@ -35,17 +35,31 @@ export async function printG3Comparison(git: GitClient) {
     return;
   }
 
-  /** The latest sha for the g3 branch. */
-  const g3Ref = getShaForBranchLatest('g3');
-  /** The latest sha for the master branch. */
-  const masterRef = getShaForBranchLatest('master');
+  /** Random prefix to create unique branch names. */
+  const randomPrefix = `prefix${Math.floor(Math.random() * 1000000)}`;
+  /** Ref name of the temporary master branch. */
+  const masterRef = `${randomPrefix}-master`;
+  /** Ref name of the temporary g3 branch. */
+  const g3Ref = `${randomPrefix}-g3`;
+  /** Url of the ref for fetching master and g3 branches. */
+  const refUrl = `https://github.com/${git.remoteConfig.owner}/${git.remoteConfig.name}.git`;
+  /** The result fo the fetch command. */
+  const fetchResult =
+      git.runGraceful(['fetch', '-q', refUrl, `master:${masterRef}`, `g3:${g3Ref}`]);
 
-  if (!g3Ref && !masterRef) {
-    return debug('Exiting early as either the g3 or master was unable to be retrieved');
+  // If the upstream repository does not have a g3 branch to compare to, skip the comparison.
+  if (fetchResult.status !== 0) {
+    if (fetchResult.stderr.includes(`couldn't find remote ref g3`)) {
+      return debug('No g3 branch exists on upstream, skipping.');
+    }
+    throw Error('Fetch of master and g3 branches for comparison failed.');
   }
 
   /** The statistical information about the git diff between master and g3. */
-  const stats = getDiffStats();
+  const stats = getDiffStats(git);
+
+  // Delete the temporarily created mater and g3 branches.
+  git.runGraceful(['branch', '-D', masterRef, g3Ref]);
 
   info.group(bold('g3 branch check'));
   info(`${stats.commits} commits between g3 and master`);
@@ -59,27 +73,11 @@ export async function printG3Comparison(git: GitClient) {
   info();
 
 
-  /** Fetch and retrieve the latest sha for a specific branch. */
-  function getShaForBranchLatest(branch: string) {
-    /** The result fo the fetch command. */
-    const fetchResult = git.runGraceful([
-      'fetch', '-q', `https://github.com/${git.remoteConfig.owner}/${git.remoteConfig.name}.git`,
-      branch
-    ]);
-
-    if (fetchResult.status !== 0 &&
-        fetchResult.stderr.includes(`couldn't find remote ref ${branch}`)) {
-      debug(`No '${branch}' branch exists on upstream, skipping.`);
-      return false;
-    }
-    return git.runGraceful(['rev-parse', 'FETCH_HEAD']).stdout.trim();
-  }
-
   /**
    * Get git diff stats between master and g3, for all files and filtered to only g3 affecting
    * files.
    */
-  function getDiffStats() {
+  function getDiffStats(git: GitClient) {
     /** The diff stats to be returned. */
     const stats = {
       insertions: 0,
@@ -88,6 +86,7 @@ export async function printG3Comparison(git: GitClient) {
       commits: 0,
     };
 
+
     // Determine the number of commits between master and g3 refs. */
     stats.commits = parseInt(git.run(['rev-list', '--count', `${g3Ref}..${masterRef}`]).stdout, 10);
 

docs/DEVELOPER.md

@@ -154,7 +154,9 @@ available as a long-term distribution mechanism, but they are guaranteed to be a
 time of the build.
 
 You can access the artifacts for a specific CI run by going to the workflow page, clicking on the
-`publish_packages_as_artifacts` job and then switching to the "ARTIFACTS" tab.
+`publish_packages_as_artifacts` job and then switching to the "Artifacts" tab.
+(If you happen to know the build number of the job, the URL will be something like:
+`https://circleci.com/gh/angular/angular/<build-number>#artifacts`)
 
 #### Archives for each Package
 On the "Artifacts" tab, there is a list of links to compressed archives for Angular packages. The

docs/PUBLIC_API.md

@@ -10,6 +10,8 @@ Our semver, timed-release cycle and deprecation policy currently applies to thes
 - `@angular/platform-browser`
 - `@angular/platform-browser-dynamic`
 - `@angular/platform-server`
+- `@angular/platform-webworker`
+- `@angular/platform-webworker-dynamic`
 - `@angular/upgrade`
 - `@angular/router`
 - `@angular/service-worker`
@@ -77,10 +79,10 @@ INFO: From Testing //packages/core:core_api:
      ngModule: Type<T>;
      providers?: Provider[];
  }
-
+ 
 -export declare type NgIterable<T> = Array<T> | Iterable<T>;
 +export declare type NgIterable<T> = Iterable<T>;
-
+ 
  export declare interface NgModule {
      bootstrap?: Array<Type<any> | any[]>;
      declarations?: Array<Type<any> | any[]>;

goldens/public-api/common/common.d.ts

@@ -3,9 +3,10 @@ export declare const APP_BASE_HREF: InjectionToken<string>;
 export declare class AsyncPipe implements OnDestroy, PipeTransform {
     constructor(_ref: ChangeDetectorRef);
     ngOnDestroy(): void;
-    transform<T>(obj: Observable<T> | Promise<T>): T | null;
-    transform<T>(obj: null | undefined): null;
-    transform<T>(obj: Observable<T> | Promise<T> | null | undefined): T | null;
+    transform<T>(obj: null): null;
+    transform<T>(obj: undefined): undefined;
+    transform<T>(obj: Observable<T> | null | undefined): T | null;
+    transform<T>(obj: Promise<T> | null | undefined): T | null;
 }
 
 export declare class CommonModule {
@@ -13,23 +14,17 @@ export declare class CommonModule {
 
 export declare class CurrencyPipe implements PipeTransform {
     constructor(_locale: string, _defaultCurrencyCode?: string);
-    transform(value: number | string, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null;
-    transform(value: null | undefined, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): null;
-    transform(value: number | string | null | undefined, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null;
+    transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null;
 }
 
 export declare class DatePipe implements PipeTransform {
     constructor(locale: string);
-    transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
-    transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
-    transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null;
+    transform(value: any, format?: string, timezone?: string, locale?: string): string | null;
 }
 
 export declare class DecimalPipe implements PipeTransform {
     constructor(_locale: string);
-    transform(value: number | string, digitsInfo?: string, locale?: string): string | null;
-    transform(value: null | undefined, digitsInfo?: string, locale?: string): null;
-    transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string): string | null;
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
 }
 
 export declare const DOCUMENT: InjectionToken<Document>;
@@ -66,13 +61,13 @@ export declare function getLocaleDateFormat(locale: string, width: FormatWidth):
 
 export declare function getLocaleDateTimeFormat(locale: string, width: FormatWidth): string;
 
-export declare function getLocaleDayNames(locale: string, formStyle: FormStyle, width: TranslationWidth): ReadonlyArray<string>;
+export declare function getLocaleDayNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
 
-export declare function getLocaleDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): Readonly<[string, string]>;
+export declare function getLocaleDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth): [string, string];
 
 export declare function getLocaleDirection(locale: string): 'ltr' | 'rtl';
 
-export declare function getLocaleEraNames(locale: string, width: TranslationWidth): Readonly<[string, string]>;
+export declare function getLocaleEraNames(locale: string, width: TranslationWidth): [string, string];
 
 export declare function getLocaleExtraDayPeriodRules(locale: string): (Time | [Time, Time])[];
 
@@ -82,7 +77,7 @@ export declare function getLocaleFirstDayOfWeek(locale: string): WeekDay;
 
 export declare function getLocaleId(locale: string): string;
 
-export declare function getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): ReadonlyArray<string>;
+export declare function getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
 
 export declare function getLocaleNumberFormat(locale: string, type: NumberFormatStyle): string;
 
@@ -110,7 +105,7 @@ export declare class HashLocationStrategy extends LocationStrategy {
 
 export declare class I18nPluralPipe implements PipeTransform {
     constructor(_localization: NgLocalization);
-    transform(value: number | null | undefined, pluralMap: {
+    transform(value: number, pluralMap: {
         [count: string]: string;
     }, locale?: string): string;
 }
@@ -140,13 +135,21 @@ export declare interface KeyValue<K, V> {
 
 export declare class KeyValuePipe implements PipeTransform {
     constructor(differs: KeyValueDiffers);
+    transform<K, V>(input: null, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): null;
+    transform<V>(input: {
+        [key: string]: V;
+    } | ReadonlyMap<string, V>, compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number): Array<KeyValue<string, V>>;
+    transform<V>(input: {
+        [key: string]: V;
+    } | ReadonlyMap<string, V> | null, compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number): Array<KeyValue<string, V>> | null;
+    transform<V>(input: {
+        [key: number]: V;
+    } | ReadonlyMap<number, V>, compareFn?: (a: KeyValue<number, V>, b: KeyValue<number, V>) => number): Array<KeyValue<number, V>>;
+    transform<V>(input: {
+        [key: number]: V;
+    } | ReadonlyMap<number, V> | null, compareFn?: (a: KeyValue<number, V>, b: KeyValue<number, V>) => number): Array<KeyValue<number, V>> | null;
     transform<K, V>(input: ReadonlyMap<K, V>, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>>;
-    transform<K extends number, V>(input: Record<K, V>, compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number): Array<KeyValue<string, V>>;
-    transform<K extends string, V>(input: Record<K, V> | ReadonlyMap<K, V>, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>>;
-    transform(input: null | undefined, compareFn?: (a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number): null;
-    transform<K, V>(input: ReadonlyMap<K, V> | null | undefined, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>> | null;
-    transform<K extends number, V>(input: Record<K, V> | null | undefined, compareFn?: (a: KeyValue<string, V>, b: KeyValue<string, V>) => number): Array<KeyValue<string, V>> | null;
-    transform<K extends string, V>(input: Record<K, V> | ReadonlyMap<K, V> | null | undefined, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>> | null;
+    transform<K, V>(input: ReadonlyMap<K, V> | null, compareFn?: (a: KeyValue<K, V>, b: KeyValue<K, V>) => number): Array<KeyValue<K, V>> | null;
 }
 
 export declare class Location {
@@ -191,8 +194,6 @@ export declare abstract class LocationStrategy {
 
 export declare class LowerCasePipe implements PipeTransform {
     transform(value: string): string;
-    transform(value: null | undefined): null;
-    transform(value: string | null | undefined): string | null;
 }
 
 export declare class NgClass implements DoCheck {
@@ -338,9 +339,7 @@ export declare class PathLocationStrategy extends LocationStrategy {
 
 export declare class PercentPipe implements PipeTransform {
     constructor(_locale: string);
-    transform(value: number | string, digitsInfo?: string, locale?: string): string | null;
-    transform(value: null | undefined, digitsInfo?: string, locale?: string): null;
-    transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string): string | null;
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
 }
 
 export declare abstract class PlatformLocation {
@@ -381,10 +380,9 @@ export declare function registerLocaleData(data: any, localeId?: string | any, e
 
 export declare class SlicePipe implements PipeTransform {
     transform<T>(value: ReadonlyArray<T>, start: number, end?: number): Array<T>;
-    transform(value: null | undefined, start: number, end?: number): null;
-    transform<T>(value: ReadonlyArray<T> | null | undefined, start: number, end?: number): Array<T> | null;
     transform(value: string, start: number, end?: number): string;
-    transform(value: string | null | undefined, start: number, end?: number): string | null;
+    transform(value: null, start: number, end?: number): null;
+    transform(value: undefined, start: number, end?: number): undefined;
 }
 
 export declare type Time = {
@@ -394,8 +392,6 @@ export declare type Time = {
 
 export declare class TitleCasePipe implements PipeTransform {
     transform(value: string): string;
-    transform(value: null | undefined): null;
-    transform(value: string | null | undefined): string | null;
 }
 
 export declare enum TranslationWidth {
@@ -407,8 +403,6 @@ export declare enum TranslationWidth {
 
 export declare class UpperCasePipe implements PipeTransform {
     transform(value: string): string;
-    transform(value: null | undefined): null;
-    transform(value: string | null | undefined): string | null;
 }
 
 export declare const VERSION: Version;

goldens/public-api/common/http/http.d.ts

@@ -1177,10 +1177,6 @@ export declare class HttpClient {
             [header: string]: string | string[];
         };
         observe: 'events';
-        params?: HttpParams | {
-            [param: string]: string | string[];
-        };
-        reportProgress?: boolean;
         responseType?: 'json';
         withCredentials?: boolean;
     }): Observable<HttpEvent<T>>;

goldens/public-api/common/http/testing/testing.d.ts

@@ -33,7 +33,7 @@ export declare class TestRequest {
         statusText?: string;
     }): void;
     event(event: HttpEvent<any>): void;
-    flush(body: ArrayBuffer | Blob | boolean | string | number | Object | (boolean | string | number | Object | null)[] | null, opts?: {
+    flush(body: ArrayBuffer | Blob | string | number | Object | (string | number | Object | null)[] | null, opts?: {
         headers?: HttpHeaders | {
             [name: string]: string | string[];
         };

goldens/public-api/core/core.d.ts

@@ -85,6 +85,10 @@ export declare interface ClassSansProvider {
     useClass: Type<any>;
 }
 
+/** @deprecated */
+export declare interface CollectionChangeRecord<V> extends IterableChangeRecord<V> {
+}
+
 export declare class Compiler {
     compileModuleAndAllComponentsAsync: <T>(moduleType: Type<T>) => Promise<ModuleWithComponentFactories<T>>;
     compileModuleAndAllComponentsSync: <T>(moduleType: Type<T>) => ModuleWithComponentFactories<T>;
@@ -1032,6 +1036,7 @@ export declare abstract class ViewContainerRef {
 
 export declare enum ViewEncapsulation {
     Emulated = 0,
+    Native = 1,
     None = 2,
     ShadowDom = 3
 }

goldens/public-api/forms/forms.d.ts

@@ -6,7 +6,7 @@ export declare abstract class AbstractControl {
     get enabled(): boolean;
     readonly errors: ValidationErrors | null;
     get invalid(): boolean;
-    get parent(): FormGroup | FormArray | null;
+    get parent(): FormGroup | FormArray;
     get pending(): boolean;
     readonly pristine: boolean;
     get root(): AbstractControl;
@@ -199,7 +199,7 @@ export declare class FormArrayName extends ControlContainer implements OnInit, O
     name: string | number | null;
     get path(): string[];
     get validator(): ValidatorFn | null;
-    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
     ngOnDestroy(): void;
     ngOnInit(): void;
 }
@@ -246,7 +246,7 @@ export declare class FormControlDirective extends NgControl implements OnChanges
     /** @deprecated */ update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
     viewModel: any;
-    constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
     ngOnChanges(changes: SimpleChanges): void;
     viewToModelUpdate(newValue: any): void;
 }
@@ -261,7 +261,7 @@ export declare class FormControlName extends NgControl implements OnChanges, OnD
     get path(): string[];
     /** @deprecated */ update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
-    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     viewToModelUpdate(newValue: any): void;
@@ -306,7 +306,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form
     ngSubmit: EventEmitter<any>;
     get path(): string[];
     readonly submitted: boolean;
-    constructor(_validators: (Validator | ValidatorFn)[], _asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
+    constructor(_validators: any[], _asyncValidators: any[]);
     addControl(dir: FormControlName): FormControl;
     addFormArray(dir: FormArrayName): void;
     addFormGroup(dir: FormGroupName): void;
@@ -325,7 +325,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form
 
 export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
     name: string | number | null;
-    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
 }
 
 export declare class FormsModule {
@@ -349,7 +349,7 @@ export declare const NG_ASYNC_VALIDATORS: InjectionToken<(Function | Validator)[
 
 export declare const NG_VALIDATORS: InjectionToken<(Function | Validator)[]>;
 
-export declare const NG_VALUE_ACCESSOR: InjectionToken<readonly ControlValueAccessor[]>;
+export declare const NG_VALUE_ACCESSOR: InjectionToken<ControlValueAccessor>;
 
 export declare abstract class NgControl extends AbstractControlDirective {
     get asyncValidator(): AsyncValidatorFn | null;
@@ -380,7 +380,7 @@ export declare class NgForm extends ControlContainer implements Form, AfterViewI
     };
     get path(): string[];
     readonly submitted: boolean;
-    constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
+    constructor(validators: any[], asyncValidators: any[]);
     addControl(dir: NgModel): void;
     addFormGroup(dir: NgModelGroup): void;
     getControl(dir: NgModel): FormControl;
@@ -413,7 +413,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
     update: EventEmitter<any>;
     get validator(): ValidatorFn | null;
     viewModel: any;
-    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], valueAccessors: ControlValueAccessor[]);
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     viewToModelUpdate(newValue: any): void;
@@ -422,7 +422,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
 
 export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
     name: string;
-    constructor(parent: ControlContainer, validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[]);
+    constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
 }
 
 export declare class NgSelectOption implements OnDestroy {

goldens/public-api/router/router.d.ts

@@ -156,7 +156,7 @@ export declare class GuardsCheckStart extends RouterEvent {
     toString(): string;
 }
 
-export declare type InitialNavigation = 'disabled' | 'enabled' | 'enabledBlocking' | 'enabledNonBlocking';
+export declare type InitialNavigation = true | false | 'enabled' | 'disabled' | 'legacy_enabled' | 'legacy_disabled';
 
 export declare type LoadChildren = LoadChildrenCallback | DeprecatedLoadChildren;
 
@@ -172,14 +172,6 @@ export declare type Navigation = {
     previousNavigation: Navigation | null;
 };
 
-export declare interface NavigationBehaviorOptions {
-    replaceUrl?: boolean;
-    skipLocationChange?: boolean;
-    state?: {
-        [k: string]: any;
-    };
-}
-
 export declare class NavigationCancel extends RouterEvent {
     reason: string;
     constructor(
@@ -207,7 +199,18 @@ export declare class NavigationError extends RouterEvent {
     toString(): string;
 }
 
-export declare interface NavigationExtras extends UrlCreationOptions, NavigationBehaviorOptions {
+export declare interface NavigationExtras {
+    fragment?: string;
+    preserveFragment?: boolean;
+    /** @deprecated */ preserveQueryParams?: boolean;
+    queryParams?: Params | null;
+    queryParamsHandling?: QueryParamsHandling | null;
+    relativeTo?: ActivatedRoute | null;
+    replaceUrl?: boolean;
+    skipLocationChange?: boolean;
+    state?: {
+        [k: string]: any;
+    };
 }
 
 export declare class NavigationStart extends RouterEvent {
@@ -347,7 +350,7 @@ export declare class Router {
     initialNavigation(): void;
     isActive(url: string | UrlTree, exact: boolean): boolean;
     navigate(commands: any[], extras?: NavigationExtras): Promise<boolean>;
-    navigateByUrl(url: string | UrlTree, extras?: NavigationBehaviorOptions): Promise<boolean>;
+    navigateByUrl(url: string | UrlTree, extras?: NavigationExtras): Promise<boolean>;
     ngOnDestroy(): void;
     parseUrl(url: string): UrlTree;
     resetConfig(config: Routes): void;
@@ -376,10 +379,13 @@ export declare class RouterEvent {
 }
 
 export declare class RouterLink implements OnChanges {
-    fragment?: string;
+    fragment: string;
     preserveFragment: boolean;
-    queryParams?: Params | null;
-    queryParamsHandling?: QueryParamsHandling | null;
+    /** @deprecated */ set preserveQueryParams(value: boolean);
+    queryParams: {
+        [k: string]: any;
+    };
+    queryParamsHandling: QueryParamsHandling;
     replaceUrl: boolean;
     set routerLink(commands: any[] | string | null | undefined);
     skipLocationChange: boolean;
@@ -407,11 +413,14 @@ export declare class RouterLinkActive implements OnChanges, OnDestroy, AfterCont
 }
 
 export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
-    fragment?: string;
+    fragment: string;
     href: string;
     preserveFragment: boolean;
-    queryParams?: Params | null;
-    queryParamsHandling?: QueryParamsHandling | null;
+    /** @deprecated */ set preserveQueryParams(value: boolean);
+    queryParams: {
+        [k: string]: any;
+    };
+    queryParamsHandling: QueryParamsHandling;
     replaceUrl: boolean;
     set routerLink(commands: any[] | string | null | undefined);
     skipLocationChange: boolean;
@@ -493,14 +502,6 @@ export declare class Scroll {
     toString(): string;
 }
 
-export declare interface UrlCreationOptions {
-    fragment?: string;
-    preserveFragment?: boolean;
-    queryParams?: Params | null;
-    queryParamsHandling?: QueryParamsHandling | null;
-    relativeTo?: ActivatedRoute | null;
-}
-
 export declare abstract class UrlHandlingStrategy {
     abstract extract(url: UrlTree): UrlTree;
     abstract merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree;

goldens/public-api/service-worker/config/config.d.ts

@@ -14,7 +14,6 @@ export declare interface Config {
     assetGroups?: AssetGroup[];
     dataGroups?: DataGroup[];
     index: string;
-    navigationRequestStrategy?: 'freshness' | 'performance';
     navigationUrls?: string[];
 }
 

goldens/public-api/service-worker/service-worker.d.ts

@@ -29,17 +29,11 @@ export declare class SwUpdate {
     readonly activated: Observable<UpdateActivatedEvent>;
     readonly available: Observable<UpdateAvailableEvent>;
     get isEnabled(): boolean;
-    readonly unrecoverable: Observable<UnrecoverableStateEvent>;
     constructor(sw: ɵangular_packages_service_worker_service_worker_a);
     activateUpdate(): Promise<void>;
     checkForUpdate(): Promise<void>;
 }
 
-export declare interface UnrecoverableStateEvent {
-    reason: string;
-    type: 'UNRECOVERABLE_STATE';
-}
-
 export declare interface UpdateActivatedEvent {
     current: {
         hash: string;

goldens/size-tracking/integration-payloads.json

@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 140199,
+        "main-es2015": 140709,
         "polyfills-es2015": 36571
       }
     }
@@ -30,7 +30,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 1485,
-        "main-es2015": 135003,
+        "main-es2015": 134891,
         "polyfills-es2015": 37248
       }
     }
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 241850,
+        "main-es2015": 244189,
         "polyfills-es2015": 36938,
         "5-es2015": 751
       }
@@ -49,7 +49,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 217827,
+        "main-es2015": 220768,
         "polyfills-es2015": 36723,
         "5-es2015": 781
       }

integration/angular_integration_test.bzl

@@ -50,6 +50,8 @@ GENERATED_NPM_PACKAGES = [
     "@angular/platform-browser",
     "@angular/platform-browser-dynamic",
     "@angular/platform-server",
+    "@angular/platform-webworker",
+    "@angular/platform-webworker-dynamic",
     "@angular/router",
     "@angular/service-worker",
     "@angular/upgrade",

integration/cli-hello-world-ivy-compat/browserslist

@@ -9,4 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 11 # For IE 11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.

integration/cli-hello-world-ivy-compat/src/polyfills.ts

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE11 requires the following for NgClass support on SVG elements */
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**

integration/cli-hello-world-ivy-i18n/browserslist

@@ -9,4 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 11 # For IE 11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.