docs: add changelog for 6.0.0-rc.2

PR Close #23164

.circleci/bazel.rc

@@ -8,6 +8,15 @@ build --noshow_progress
 # Don't run manual tests
 test --test_tag_filters=-manual
 
+# Print all the options that apply to the build.
+# This helps us diagnose which options override others
+# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
+build --announce_rc
+
+# Create dist/bin symlink to $(bazel info bazel-bin)
+# We use this when uploading artifacts after the build finishes
+build --symlink_prefix=dist/
+
 # Enable experimental CircleCI bazel remote cache proxy
 # See remote cache documentation in /docs/BAZEL.md
 build --experimental_remote_spawn_cache --remote_rest_cache=http://localhost:7643

.circleci/config.yml

@@ -74,19 +74,29 @@ jobs:
       - run: ls /home/circleci/bazel_repository_cache || true
       - run: bazel info release
       - run: bazel run @yarn//:yarn
-      # Use bazel query so that we explicitly ask for all buildable targets to be built as well
+      # We could use bazel query so that we explicitly ask for all buildable targets to be built as well
-      # This avoids waiting for a build command to finish before running the first test
+      # This would avoid waiting for a build command to finish before running the first test
       # See https://github.com/bazelbuild/bazel/issues/4257
-      - run: bazel query --output=label '//modules/... union //packages/... union //tools/...' | xargs bazel test
+      # - run: bazel query --output=label //... | xargs bazel test
+      # However it makes it more confusing for Angular developers who are still novice at Bazel
+      # So keep it simple for now
+      - run: bazel build //...
+      - run: bazel test //...
 
       # CircleCI will allow us to go back and view/download these artifacts from past builds.
       # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
           destination: packages/core/test/bundling/hello_world/bundle.min.js
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
+          destination: packages/core/test/bundling/todo/bundle.min.js
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.brotli
           destination: packages/core/test/bundling/hello_world/bundle.min.js.brotli
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.brotli
+          destination: packages/core/test/bundling/todo/bundle.min.js.brotli
 
       - save_cache:
           key: *cache_key
@@ -94,9 +104,28 @@ jobs:
             - "node_modules"
             - "~/bazel_repository_cache"
 
+  aio_monitoring:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - run: xvfb-run --auto-servernum ./aio/scripts/test-production.sh
+
 workflows:
   version: 2
   default_workflow:
     jobs:
       - lint
       - build
+  aio_monitoring:
+    jobs:
+      - aio_monitoring
+    triggers:
+      - schedule:
+          cron: "0 0 * * *"
+          filters:
+            branches:
+              only:
+                - master

.github/angular-robot.yml

@@ -19,10 +19,12 @@ merge:
     disabled: false
     # the name of the status
     context: "google3"
-    # text to show when the status is pending
+    # text to show when the status is pending, {{PRNumber}} will be replaced by the PR number
-    pendingDesc: "Googler: test this change in google3 http://go/angular-g3sync"
+    pendingDesc: "Googler: run g3sync presubmit {{PRNumber}}"
     # text to show when the status is success
     successDesc: "Does not affect google3"
+    # link to use for the details
+    url: "http://go/angular-g3sync"
     # list of patterns to check for the files changed by the PR
     # this list must be manually kept in sync with google3/third_party/javascript/angular2/copy.bara.sky
     include:

.pullapprove.yml

@@ -7,6 +7,7 @@
 #
 # alexeagle - Alex Eagle
 # alxhub - Alex Rickabaugh
+# andrewseguin - Andrew Seguin
 # brocco - Mike Brocchi
 # chuckjaz - Chuck Jazdzewski
 # filipesilva - Filipe Silva
@@ -302,6 +303,16 @@ groups:
       - IgorMinar #fallback
       - mhevery #fallback
 
+  elements:
+    conditions:
+      files:
+        - "packages/elements/*"
+    users:
+      - andrewseguin #primary
+      - gkalpak
+      - IgorMinar #fallback
+      - mhevery #fallback
+
   benchpress:
     conditions:
       files:

BUILD.bazel

@@ -1,5 +1,7 @@
 package(default_visibility = ["//visibility:public"])
 
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
+
 exports_files([
     "tsconfig.json",
     "LICENSE",
@@ -12,40 +14,24 @@ alias(
     actual = "@yarn//:yarn",
 )
 
-# This rule belongs in node_modules/BUILD
+node_modules_filegroup(
-# It's here as a workaround for
-# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
-filegroup(
     name = "node_modules",
-    # Performance workaround: list individual files
+    packages = [
-    # Reduces the number of files as inputs to nodejs_binary:
-    # bazel query "deps(:node_modules)" | wc -l
-    # This won't scale in the general case.
-    # TODO(alexeagle): figure out what to do
-    srcs = glob(["/".join([
-        "node_modules",
-        pkg,
-        "**",
-        ext,
-    ]) for pkg in [
-        "jasmine",
-        "typescript",
-        "zone.js",
-        "tsutils",
-        "@types",
-        "tsickle",
-        "hammerjs",
-        "protobufjs",
         "bytebuffer",
+        "hammerjs",
+        "jasmine",
+        "minimist",
+        "protobufjs",
         "reflect-metadata",
         "source-map-support",
-        "minimist",
+        "tsickle",
         "tslib",
-    ] for ext in [
+        "tsutils",
-        "*.js",
+        "typescript",
-        "*.json",
+        "zone.js",
-        "*.d.ts",
+        "@types",
-    ]]),
+        "@webcomponents/custom-elements",
+    ],
 )
 
 filegroup(
@@ -54,12 +40,8 @@ filegroup(
     srcs = [
         "//:node_modules/reflect-metadata/Reflect.js",
         "//:node_modules/zone.js/dist/zone.js",
-        "//:node_modules/zone.js/dist/async-test.js",
+        "//:node_modules/zone.js/dist/zone-testing.js",
-        "//:node_modules/zone.js/dist/sync-test.js",
-        "//:node_modules/zone.js/dist/fake-async-test.js",
         "//:node_modules/zone.js/dist/task-tracking.js",
-        "//:node_modules/zone.js/dist/proxy.js",
-        "//:node_modules/zone.js/dist/jasmine-patch.js",
     ],
 )
 

CHANGELOG.md

@@ -1,3 +1,188 @@
+<a name="6.0.0-rc.2"></a>
+# [6.0.0-rc.2](https://github.com/angular/angular/compare/6.0.0-rc.1...6.0.0-rc.2) (2018-04-05)
+
+
+### Bug Fixes
+
+* **common:** `locales` are not being shipped ([#23136](https://github.com/angular/angular/issues/23136)) ([7ca7720](https://github.com/angular/angular/commit/7ca7720))
+* **common:** properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([4a42669](https://github.com/angular/angular/commit/4a42669)), closes [#21932](https://github.com/angular/angular/issues/21932)
+* **compiler-cli:** flat module index metadata should be transformed ([#23129](https://github.com/angular/angular/issues/23129)) ([f99cb5c](https://github.com/angular/angular/commit/f99cb5c))
+* **core:** inject() should always work in an NgModule injection scope ([#23148](https://github.com/angular/angular/issues/23148)) ([fab6b39](https://github.com/angular/angular/commit/fab6b39)), closes [angular/material2#10586](https://github.com/angular/material2/issues/10586)
+* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([23cc3ef](https://github.com/angular/angular/commit/23cc3ef))
+* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([ad9ce5c](https://github.com/angular/angular/commit/ad9ce5c)), closes [#14286](https://github.com/angular/angular/issues/14286)
+* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([a2330ff](https://github.com/angular/angular/commit/a2330ff)), closes [#22723](https://github.com/angular/angular/issues/22723)
+
+
+### Features
+
+* **compiler-cli:** lower loadChildren fields to allow dynamic module paths ([#23088](https://github.com/angular/angular/issues/23088)) ([550433a](https://github.com/angular/angular/commit/550433a))
+
+
+
+<a name="6.0.0-rc.1"></a>
+# [6.0.0-rc.1](https://github.com/angular/angular/compare/6.0.0-rc.0...6.0.0-rc.1) (2018-03-30)
+
+
+### Bug Fixes
+
+* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([f88fba0](https://github.com/angular/angular/commit/f88fba0)), closes [#19712](https://github.com/angular/angular/issues/19712)
+* **animations:** treat numeric state name values as strings ([#22923](https://github.com/angular/angular/issues/22923)) ([e5e1b0d](https://github.com/angular/angular/commit/e5e1b0d))
+* **bazel:** complete the rollup globals list for all angular entrypoints ([#23080](https://github.com/angular/angular/issues/23080)) ([439030f](https://github.com/angular/angular/commit/439030f))
+* **bazel:** don't inline tslib into fesms ([#23044](https://github.com/angular/angular/issues/23044)) ([0049743](https://github.com/angular/angular/commit/0049743))
+* **bazel:** don't try to do flatmoduleindex under Blaze ([#23083](https://github.com/angular/angular/issues/23083)) ([be10bf5](https://github.com/angular/angular/commit/be10bf5))
+* **bazel:** downlevel decorators in fesm5 files ([#23078](https://github.com/angular/angular/issues/23078)) ([481b22e](https://github.com/angular/angular/commit/481b22e))
+* **bazel:** ng_package packages attr not forwarded to npm_package ([#22967](https://github.com/angular/angular/issues/22967)) ([2aabbc5](https://github.com/angular/angular/commit/2aabbc5))
+* **bazel:** ng_package should include private exports in fesms ([#23054](https://github.com/angular/angular/issues/23054)) ([0d9140c](https://github.com/angular/angular/commit/0d9140c))
+* **bazel:** pass --global option to rollup ([#23073](https://github.com/angular/angular/issues/23073)) ([45e090b](https://github.com/angular/angular/commit/45e090b))
+* **common:** titlecase pipe ([#22600](https://github.com/angular/angular/issues/22600)) ([7966744](https://github.com/angular/angular/commit/7966744))
+* **compiler:** don't typecheck all inputs ([#22899](https://github.com/angular/angular/issues/22899)) ([838a610](https://github.com/angular/angular/commit/838a610))
+* consistently rewrite Injector to INJECTOR ([#23008](https://github.com/angular/angular/issues/23008)) ([884bf0e](https://github.com/angular/angular/commit/884bf0e))
+* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([28058b7](https://github.com/angular/angular/commit/28058b7))
+* **compiler:** take quoting into account when determining if object literals can be shared ([#22942](https://github.com/angular/angular/issues/22942)) ([d98e9e7](https://github.com/angular/angular/commit/d98e9e7))
+* **compiler-cli:** use numeric comparison for TypeScript version ([#22705](https://github.com/angular/angular/issues/22705)) ([193737a](https://github.com/angular/angular/commit/193737a)), closes [#22593](https://github.com/angular/angular/issues/22593)
+* **core:** don't override ngInjectableDef in the decorator if present on the type ([#22943](https://github.com/angular/angular/issues/22943)) ([6f01917](https://github.com/angular/angular/commit/6f01917))
+* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([9e9b8dd](https://github.com/angular/angular/commit/9e9b8dd)), closes [#21636](https://github.com/angular/angular/issues/21636)
+* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([8c2a578](https://github.com/angular/angular/commit/8c2a578)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
+* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([d9dc46e](https://github.com/angular/angular/commit/d9dc46e)), closes [#22362](https://github.com/angular/angular/issues/22362)
+
+
+### Features
+
+* **bazel:** prefix private-export (barred-latin-o) symbols ([#23007](https://github.com/angular/angular/issues/23007)) ([27e14b2](https://github.com/angular/angular/commit/27e14b2))
+* **compiler:** lower @NgModule ids if needed ([#23031](https://github.com/angular/angular/issues/23031)) ([bd024c0](https://github.com/angular/angular/commit/bd024c0))
+
+
+
+<a name="6.0.0-rc.0"></a>
+# [6.0.0-rc.0](https://github.com/angular/angular/compare/6.0.0-beta.8...6.0.0-rc.0) (2018-03-21)
+
+v6 framework is now feature complete, the cli and material/cdk parts of the v6 release and other integrations are still
+in works and will be completed by the time we cut v6.0.0.
+
+Please [file new issues](https://github.com/angular/angular/issues/new) at our issue tracker with as many details as
+possible, and ideally also a include a good reproduction of the problem.
+
+### Bug Fixes
+
+* **bazel:** correct expected outs for external sources in ng_module ([#22755](https://github.com/angular/angular/issues/22755)) ([bfe077a](https://github.com/angular/angular/commit/bfe077a))
+* **compiler:** do not emit line/char in ngsummary files. ([#22840](https://github.com/angular/angular/issues/22840)) ([5c387a7](https://github.com/angular/angular/commit/5c387a7))
+* correct several esm2015 entry-points in package.jsons ([#22892](https://github.com/angular/angular/issues/22892)) ([7d095b9](https://github.com/angular/angular/commit/7d095b9))
+* **router:** don't use spread operator to workaround an issue in closure compiler ([#22884](https://github.com/angular/angular/issues/22884)) ([e6c731f](https://github.com/angular/angular/commit/e6c731f))
+* **router:** make locationSyncBootstrapListener public due to change in output after TS 2.7 update in [#22669](https://github.com/angular/angular/issues/22669) ([#22896](https://github.com/angular/angular/issues/22896)) ([623d769](https://github.com/angular/angular/commit/623d769))
+* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([2b3de63](https://github.com/angular/angular/commit/2b3de63)), closes [#22734](https://github.com/angular/angular/issues/22734)
+
+
+### Features
+
+* **core:** update the package output of build.sh to [APF v6](https://goo.gl/jB3GVv) ([#22808](https://github.com/angular/angular/issues/22808)) ([ce63dc6](https://github.com/angular/angular/commit/ce63dc6))
+* **core:** upgrade rxjs to 6.0.0-beta.0, please see this [RxJS Upgrade Guide](https://goo.gl/osWFzo) for more info ([#22573](https://github.com/angular/angular/issues/22573)) ([b43f8bc](https://github.com/angular/angular/commit/b43f8bc))
+
+
+
+<a name="6.0.0-beta.8"></a>
+# [6.0.0-beta.8](https://github.com/angular/angular/compare/6.0.0-beta.7...6.0.0-beta.8) (2018-03-16)
+
+
+### Bug Fixes
+
+* **aio:** constrain error logging to improve reporting ([#22713](https://github.com/angular/angular/issues/22713)) ([049757b](https://github.com/angular/angular/commit/049757b))
+* **compiler-cli:** annotate Ivy fields as [@nocollapse](https://github.com/nocollapse) in closure mode ([#22691](https://github.com/angular/angular/issues/22691)) ([6e00410](https://github.com/angular/angular/commit/6e00410))
+* **compiler-cli:** disableTypeScriptVersionCheck should be applied even for older tsc versions ([#22669](https://github.com/angular/angular/issues/22669)) ([3f70aba](https://github.com/angular/angular/commit/3f70aba))
+* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([6e5e819](https://github.com/angular/angular/commit/6e5e819))
+* **compiler-cli:** enableResourceInlining handles both styles and styleUrls ([#22688](https://github.com/angular/angular/issues/22688)) ([40315be](https://github.com/angular/angular/commit/40315be))
+* **compiler-cli:** generate proper exports.* identifiers in cjs output ([#22564](https://github.com/angular/angular/issues/22564)) ([0d8deb0](https://github.com/angular/angular/commit/0d8deb0))
+* **compiler-cli:** resolve resource URLs before loading them under enableResourceInlining ([#22688](https://github.com/angular/angular/issues/22688)) ([123efba](https://github.com/angular/angular/commit/123efba))
+* **core:** remove core animation import symbols ([#22692](https://github.com/angular/angular/issues/22692)) ([f5a98f4](https://github.com/angular/angular/commit/f5a98f4))
+* **elements:** fix elements test bootstrap ([#22839](https://github.com/angular/angular/issues/22839)) ([5d82d8d](https://github.com/angular/angular/commit/5d82d8d))
+* overloading a function doesn't generate all of the signatures ([#22569](https://github.com/angular/angular/issues/22569)) ([e8326e6](https://github.com/angular/angular/commit/e8326e6))
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([cd2ebd2](https://github.com/angular/angular/commit/cd2ebd2))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([0bf6fa5](https://github.com/angular/angular/commit/0bf6fa5))
+
+
+### Code Refactoring
+
+* **compiler:** Drop support for the deprecated `<template>`. Use `<ng-template>` instead ([#22783](https://github.com/angular/angular/issues/22783)) ([0ebd577](https://github.com/angular/angular/commit/0ebd577))
+
+
+### Features
+
+* **aio:** add hack, remove me ([#22413](https://github.com/angular/angular/issues/22413)) ([4d506ac](https://github.com/angular/angular/commit/4d506ac))
+* **aio:** migrate embedded comp to elements ([#22413](https://github.com/angular/angular/issues/22413)) ([7c9b411](https://github.com/angular/angular/commit/7c9b411))
+* **aio:** update payload size ([#22413](https://github.com/angular/angular/issues/22413)) ([400460c](https://github.com/angular/angular/commit/400460c))
+* **animations:** expose `element` and `params` within transition matchers ([#22693](https://github.com/angular/angular/issues/22693)) ([58b94e6](https://github.com/angular/angular/commit/58b94e6))
+* **bazel:** change ng_package rule to APF v6 ([#22782](https://github.com/angular/angular/issues/22782)) ([88b3198](https://github.com/angular/angular/commit/88b3198))
+* **compiler:** support for singleline, multiline & jsdoc comments ([#22715](https://github.com/angular/angular/issues/22715)) ([3b167be](https://github.com/angular/angular/commit/3b167be))
+* **compiler-cli:** add resource inlining to ngc ([#22615](https://github.com/angular/angular/issues/22615)) ([b5be18f](https://github.com/angular/angular/commit/b5be18f))
+* **compiler-cli:** require node 8 as runtime engine ([#22669](https://github.com/angular/angular/issues/22669)) ([c602563](https://github.com/angular/angular/commit/c602563))
+* **core:** add task tracking to Testability ([#16863](https://github.com/angular/angular/issues/16863)) ([37fedd0](https://github.com/angular/angular/commit/37fedd0))
+* **elements:** add polyfill for elements es5 shim ([#22413](https://github.com/angular/angular/issues/22413)) ([863aff1](https://github.com/angular/angular/commit/863aff1))
+* **elements:** add support for creating custom elements ([#22413](https://github.com/angular/angular/issues/22413)) ([22b96b9](https://github.com/angular/angular/commit/22b96b9))
+* **elements:** add tests for component factory strategy ([#22413](https://github.com/angular/angular/issues/22413)) ([d2be675](https://github.com/angular/angular/commit/d2be675))
+* **elements:** another polyfill solution ([#22413](https://github.com/angular/angular/issues/22413)) ([cf3ff7d](https://github.com/angular/angular/commit/cf3ff7d))
+* **elements:** fix lint ([#22413](https://github.com/angular/angular/issues/22413)) ([0b45dfa](https://github.com/angular/angular/commit/0b45dfa))
+* **elements:** fix payload size ([#22413](https://github.com/angular/angular/issues/22413)) ([fe21437](https://github.com/angular/angular/commit/fe21437))
+* **elements:** fix test ([#22413](https://github.com/angular/angular/issues/22413)) ([44f637a](https://github.com/angular/angular/commit/44f637a))
+* **elements:** George's comments ([#22413](https://github.com/angular/angular/issues/22413)) ([46efd4b](https://github.com/angular/angular/commit/46efd4b))
+* **elements:** injector create ([#22413](https://github.com/angular/angular/issues/22413)) ([87f60bc](https://github.com/angular/angular/commit/87f60bc))
+* **elements:** make bazel happy ([#22413](https://github.com/angular/angular/issues/22413)) ([39a12d2](https://github.com/angular/angular/commit/39a12d2))
+* **elements:** provide type, not factory; remove config need ([#22413](https://github.com/angular/angular/issues/22413)) ([1936808](https://github.com/angular/angular/commit/1936808))
+* **elements:** rebase ([#22413](https://github.com/angular/angular/issues/22413)) ([d72f445](https://github.com/angular/angular/commit/d72f445))
+* **elements:** remove attribute/input from config ([#22413](https://github.com/angular/angular/issues/22413)) ([688096b](https://github.com/angular/angular/commit/688096b))
+* **elements:** rename API to createCustomElement ([#22413](https://github.com/angular/angular/issues/22413)) ([167fdf7](https://github.com/angular/angular/commit/167fdf7))
+* **elements:** update package.json with latest ([#22413](https://github.com/angular/angular/issues/22413)) ([2e450f6](https://github.com/angular/angular/commit/2e450f6))
+* mark angular packages as side-effect free ([#22785](https://github.com/angular/angular/issues/22785)) ([44de10e](https://github.com/angular/angular/commit/44de10e))
+* tree-shakeable providers API updates ([#22655](https://github.com/angular/angular/issues/22655)) ([db56836](https://github.com/angular/angular/commit/db56836))
+* update tslib to 1.9.0 ([#22667](https://github.com/angular/angular/issues/22667)) ([489fec1](https://github.com/angular/angular/commit/489fec1))
+
+
+### BREAKING CHANGES
+
+* **compiler:** The `<template>` tag was deprecated in Angular v4 to avoid collisions (i.e. when
+using Web Components).
+
+This commit removes support for `<template>`. `<ng-template>` should be used
+instead.
+
+BEFORE:
+
+    <!-- html template -->
+    <template>some template content</template>
+
+    # tsconfig.json
+    {
+      # ...
+      "angularCompilerOptions": {
+        # ...
+        # This option is no more supported and will have no effect
+        "enableLegacyTemplate": [true|false]
+      }
+    }
+
+AFTER:
+
+    <!-- html template -->
+    <ng-template>some template content</ng-template>
+* **core:** it is no longer possible to import
+animation-related functions from @angular/core. All
+animation symbols must now be imported from @angular/animations.
+* after this change, npm and yarn will issue incompatible peerDependencies warning
+
+We don't expect this to actually break an application, but the application/library package.json
+will need to be updated to provide tslib 1.9.0 or higher.
+
+
+
+<a name="5.2.9"></a>
+## [5.2.9](https://github.com/angular/angular/compare/5.2.8...5.2.9) (2018-03-14)
+
+
+### Bug Fixes
+
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([fc6dfc2](https://github.com/angular/angular/commit/fc6dfc2))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([86517f2](https://github.com/angular/angular/commit/86517f2))
+
+
+
 <a name="6.0.0-beta.7"></a>
 # [6.0.0-beta.7](https://github.com/angular/angular/compare/6.0.0-beta.6...6.0.0-beta.7) (2018-03-07)
 
@@ -226,7 +411,7 @@ If that is the case, you should be able to track the old value directly by savin
 * **common:** don't convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([8b14488](https://github.com/angular/angular/commit/8b14488)), closes [#20744](https://github.com/angular/angular/issues/20744)
 * **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#20640](https://github.com/angular/angular/issues/20640)) ([f791e9f](https://github.com/angular/angular/commit/f791e9f))
 * **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([e81606c](https://github.com/angular/angular/commit/e81606c)), closes [#21999](https://github.com/angular/angular/issues/21999)
-* **core:** should check Zone existance when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
+* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
 * **forms:** publish missing types ([#19941](https://github.com/angular/angular/issues/19941)) ([2707012](https://github.com/angular/angular/commit/2707012))
 * **ivy:** generate correct interpolations ([#21946](https://github.com/angular/angular/issues/21946)) ([3cc1d76](https://github.com/angular/angular/commit/3cc1d76))
 * **ivy:** generate lifecycle pattern ([#21865](https://github.com/angular/angular/issues/21865)) ([f816666](https://github.com/angular/angular/commit/f816666))
@@ -257,7 +442,7 @@ If that is the case, you should be able to track the old value directly by savin
 * **common:** don't convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([c4fb696](https://github.com/angular/angular/commit/c4fb696)), closes [#20744](https://github.com/angular/angular/issues/20744)
 * **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#22007](https://github.com/angular/angular/issues/22007)) ([ce51ea9](https://github.com/angular/angular/commit/ce51ea9))
 * **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([c6645e7](https://github.com/angular/angular/commit/c6645e7)), closes [#21999](https://github.com/angular/angular/issues/21999)
-* **core:** should check Zone existance when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([aa9ba7f](https://github.com/angular/angular/commit/aa9ba7f))
+* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([aa9ba7f](https://github.com/angular/angular/commit/aa9ba7f))
 
 
 
@@ -1678,7 +1863,7 @@ From 4.0.0 @angular/core uses a [`WeakMap`](https://github.com/angular/angular/c
 * **compiler:** make sourcemaps work in AOT mode ([492153a](https://github.com/angular/angular/commit/492153a))
 * **compiler:** only warn for `[@Injectable](https://github.com/Injectable)` classes with invalid args. ([5c34066](https://github.com/angular/angular/commit/5c34066)), closes [#15003](https://github.com/angular/angular/issues/15003)
 * **compiler:** shouldn't throw when Symbol is used as DI token ([#13701](https://github.com/angular/angular/issues/13701)) ([8b5c6b2](https://github.com/angular/angular/commit/8b5c6b2)), closes [#13314](https://github.com/angular/angular/issues/13314)
-* **compiler:** support interface types in injectable constuctors ([#14894](https://github.com/angular/angular/issues/14894)) ([b00fe20](https://github.com/angular/angular/commit/b00fe20)), closes [#12631](https://github.com/angular/angular/issues/12631)
+* **compiler:** support interface types in injectable constructors ([#14894](https://github.com/angular/angular/issues/14894)) ([b00fe20](https://github.com/angular/angular/commit/b00fe20)), closes [#12631](https://github.com/angular/angular/issues/12631)
 * **compiler:** warning prints "WARNING" instead of "ERROR" ([#15125](https://github.com/angular/angular/issues/15125)) ([3b1956b](https://github.com/angular/angular/commit/3b1956b))
 * **core:** don’t recreate `TemplateRef` when used as a reference. ([#15066](https://github.com/angular/angular/issues/15066)) ([df914ef](https://github.com/angular/angular/commit/df914ef)), closes [#14873](https://github.com/angular/angular/issues/14873)
 * **core:** don’t throw if queries change during change detection. ([06fc42b](https://github.com/angular/angular/commit/06fc42b)), closes [#14925](https://github.com/angular/angular/issues/14925)
@@ -1718,7 +1903,7 @@ From 4.0.0 @angular/core uses a [`WeakMap`](https://github.com/angular/angular/c
 
 ### BREAKING CHANGES
 
-* Perviously, any provider that had an ngOnDestroy lifecycle hook would be created eagerly.
+* Previously, any provider that had an ngOnDestroy lifecycle hook would be created eagerly.
 
   Now, only classes that are annotated with @Component, @Directive, @Pipe, @NgModule are eager. Providers only become eager if they are either directly or transitively injected into one of the above.
 
@@ -1986,7 +2171,7 @@ Note: the 4.0.0-rc.0 release on npm accidentally omitted one bug fix, so we cut
 * **compiler:** improve error message for unknown elements ([#14373](https://github.com/angular/angular/issues/14373)) ([2c6dab9](https://github.com/angular/angular/commit/2c6dab9))
 * **compiler:** improve error messages in aot compiler ([#14333](https://github.com/angular/angular/issues/14333)) ([a696f4a](https://github.com/angular/angular/commit/a696f4a))
 * **compiler:** improve error msg for unknown properties on ([#14373](https://github.com/angular/angular/issues/14373)) ([e5a144d](https://github.com/angular/angular/commit/e5a144d)), closes [#14070](https://github.com/angular/angular/issues/14070)
-* **core:** Remove ChangeDetectorRef Paramter from KeyValueDifferFactory and IterableDifferFactory ([#14311](https://github.com/angular/angular/issues/14311)) ([45cc444](https://github.com/angular/angular/commit/45cc444))
+* **core:** Remove ChangeDetectorRef Parameter from KeyValueDifferFactory and IterableDifferFactory ([#14311](https://github.com/angular/angular/issues/14311)) ([45cc444](https://github.com/angular/angular/commit/45cc444))
 * **core:** suppress a Closure Compiler warning ([#14484](https://github.com/angular/angular/issues/14484)) ([2f2b65b](https://github.com/angular/angular/commit/2f2b65b))
 * **forms:** getRawValue should correctly work with nested FormGroups/Arrays ([#12964](https://github.com/angular/angular/issues/12964)) ([1ece736](https://github.com/angular/angular/commit/1ece736)), closes [#12963](https://github.com/angular/angular/issues/12963)
 * **http:** REVERT: remove dots from jsonp callback name ([#13219](https://github.com/angular/angular/issues/13219)) ([4676df5](https://github.com/angular/angular/commit/4676df5))
@@ -2171,7 +2356,7 @@ returned value being an array.
 ### Bug Fixes
 
 * **common:** add PopStateEvent interface ([#13400](https://github.com/angular/angular/issues/13400)) ([71567d1](https://github.com/angular/angular/commit/71567d1)), closes [#13378](https://github.com/angular/angular/issues/13378)
-* **common:** DatePipe does't throw for NaN ([#14117](https://github.com/angular/angular/issues/14117)) ([32cc675](https://github.com/angular/angular/commit/32cc675)), closes [#14103](https://github.com/angular/angular/issues/14103)
+* **common:** DatePipe doesn't throw for NaN ([#14117](https://github.com/angular/angular/issues/14117)) ([32cc675](https://github.com/angular/angular/commit/32cc675)), closes [#14103](https://github.com/angular/angular/issues/14103)
 * **common:** DatePipe parses input string if it's not a valid date in browser ([#13895](https://github.com/angular/angular/issues/13895)) ([e641636](https://github.com/angular/angular/commit/e641636)), closes [#12334](https://github.com/angular/angular/issues/12334) [#13874](https://github.com/angular/angular/issues/13874)
 * **common:** introduce isObservable method ([#14067](https://github.com/angular/angular/issues/14067)) ([109f0d1](https://github.com/angular/angular/commit/109f0d1)), closes [#8848](https://github.com/angular/angular/issues/8848)
 * **compiler:** allow empty translations for attributes ([#14085](https://github.com/angular/angular/issues/14085)) ([f3d5506](https://github.com/angular/angular/commit/f3d5506)), closes [#13897](https://github.com/angular/angular/issues/13897)
@@ -2589,7 +2774,7 @@ We are adding more tests to our test suite to catch these kinds of problems befo
 * **common:** make sure the plural category exists ([#13169](https://github.com/angular/angular/issues/13169)) ([82c81cd](https://github.com/angular/angular/commit/82c81cd)), closes [#12379](https://github.com/angular/angular/issues/12379)
 * **compiler:** include the summaries of reexported modules / directives / pipes ([#13196](https://github.com/angular/angular/issues/13196)) ([75d1617](https://github.com/angular/angular/commit/75d1617))
 * **compiler:** serialize any `StaticSymbol` correctly, not matter in which context ([5614c4f](https://github.com/angular/angular/commit/5614c4f))
-* **compiler:** short-circut expressions with an index ([#13263](https://github.com/angular/angular/issues/13263)) ([f31c947](https://github.com/angular/angular/commit/f31c947)), closes [#13254](https://github.com/angular/angular/issues/13254)
+* **compiler:** short-circuit expressions with an index ([#13263](https://github.com/angular/angular/issues/13263)) ([f31c947](https://github.com/angular/angular/commit/f31c947)), closes [#13254](https://github.com/angular/angular/issues/13254)
 * **core:** display framework version on bootstrapped component ([#13252](https://github.com/angular/angular/issues/13252)) ([16efb13](https://github.com/angular/angular/commit/16efb13))
 * **facade:** cache original format string ([#12764](https://github.com/angular/angular/issues/12764)) ([a132287](https://github.com/angular/angular/commit/a132287))
 * **http:** set the default Accept header ([#12989](https://github.com/angular/angular/issues/12989)) ([986abbe](https://github.com/angular/angular/commit/986abbe)), closes [#6354](https://github.com/angular/angular/issues/6354)

CONTRIBUTING.md

@@ -212,6 +212,7 @@ The following is the list of supported scopes:
 * **compiler**
 * **compiler-cli**
 * **core**
+* **elements**
 * **forms**
 * **http**
 * **language-service**

WORKSPACE

@@ -2,18 +2,21 @@ workspace(name = "angular")
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/f03c8b5df155da2a640b6775afdd4fe4aa6fec72.zip",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/99166f8eb7fc628ca561acf9f9a51a1c26edadad.zip",
-    strip_prefix = "rules_nodejs-f03c8b5df155da2a640b6775afdd4fe4aa6fec72",
+    strip_prefix = "rules_nodejs-99166f8eb7fc628ca561acf9f9a51a1c26edadad",
-    sha256 = "9d541f49af8cf60c73efb102186bfa5670ee190a088ce52638dcdf90cd9e2de6",
+    sha256 = "338e8495e5d1fa16de7190106c5675372ff4a347f6004e203e84a168db96281e",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 
 check_bazel_version("0.9.0")
-node_repositories(package_json = [
+node_repositories(package_json = ["//:package.json"])
-    "//:package.json",
+
-    "//tools/ts-api-guardian:package.json",
+yarn_install(
-])
+    name = "ts-api-guardian_runtime_deps",
+    package_json = "//tools/ts-api-guardian:package.json",
+    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
+)
 
 http_archive(
     name = "build_bazel_rules_typescript",
@@ -31,6 +34,13 @@ local_repository(
     path = "node_modules/rxjs/src",
 )
 
+# Point to the integration test workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "bazel_integration_test",
+    path = "integration/bazel",
+)
+
 # This commit matches the version of buildifier in angular/ngcontainer
 # If you change this, also check if it matches the version in the angular/ngcontainer
 # version in /.circleci/config.yml
@@ -78,7 +88,7 @@ http_archive(
 
 http_archive(
     name = "org_brotli",
-    url = "https://github.com/google/brotli/archive/v1.0.2.zip",
+    url = "https://github.com/google/brotli/archive/c6333e1e79fb62ea088443f192293f964409b04e.zip",
-    strip_prefix = "brotli-1.0.2",
+    strip_prefix = "brotli-c6333e1e79fb62ea088443f192293f964409b04e",
-    sha256 = "b43d5d6bc40f2fa6c785b738d86c6bbe022732fe25196ebbe43b9653a025920d",
+    sha256 = "3f781988dee7dd3bcce2bf238294663cfaaf3b6433505bdb762e24d0a284d1dc",
 )

aio/.angular-cli.json

@@ -13,7 +13,9 @@
         "app/search/search-worker.js",
         "favicon.ico",
         "pwa-manifest.json",
-        "google385281288605d160.html"
+        "google385281288605d160.html",
+        { "glob": "custom-elements.min.js", "input": "../node_modules/@webcomponents/custom-elements", "output": "./assets/js" },
+        { "glob": "native-shim.js", "input": "../node_modules/@webcomponents/custom-elements/src", "output": "./assets/js" }
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -66,5 +68,6 @@
     "build": {
       "namedChunks": true
     }
-  }
+  },
+  "packageManager": "yarn"
 }

aio/.gitignore

@@ -30,6 +30,7 @@
 /connect.lock
 /coverage
 /libpeerconnection.log
+debug.log
 npm-debug.log
 testem.log
 /typings

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -19,8 +19,8 @@ ARG      AIO_DOMAIN_NAME=ngbuilds.io
 ARG TEST_AIO_DOMAIN_NAME=$AIO_DOMAIN_NAME.localhost
 ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=angular
-ARG      AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80

aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md

@@ -9,7 +9,7 @@ Necessary secrets:
    - Used for:
      - Retrieving open PRs without rate-limiting.
      - Retrieving PR author.
-     - Retrieving members of the `angular-core` team.
+     - Retrieving members of the trusted GitHub teams.
      - Posting comments with preview links on PRs.
 
 2. `PREVIEW_DEPLOYMENT_TOKEN`

aio/aio-builds-setup/docs/vm-setup--start-docker-container.md

@@ -74,7 +74,7 @@ sudo docker run \
 ## Example
 The following command would start a docker container based on the previously created `foobar-builds`
 docker image, alias it as 'foobar-builds-1' and map predefined directories on the host VM to be used
-by the container for accesing secrets and SSL certificates and keeping the build artifacts and logs.
+by the container for accessing secrets and SSL certificates and keeping the build artifacts and logs.
 
 ```
 sudo docker run \

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

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

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

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

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

@@ -178,6 +178,11 @@ describe('Dependency Injection Tests', function () {
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () {
+        let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
+        expect(heroes.count()).toBeGreaterThan(0);
+      });
+
       it('authorized user should have secret heroes', function () {
         let heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);

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

@@ -21,6 +21,7 @@ import { UserService } from './user.service';
     <p>
     <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
     <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
+    <app-heroes-tsp id="tspAuthorized" *ngIf="isAuthorized"></app-heroes-tsp>
     <app-providers></app-providers>
   `
 })

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

@@ -6,6 +6,7 @@ import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
 import { AppComponent } from './app.component';
 import { CarComponent } from './car/car.component';
 import { HeroesComponent } from './heroes/heroes.component';
+import { HeroesTspComponent } from './heroes/heroes-tsp.component';
 import { HeroListComponent } from './heroes/hero-list.component';
 import { InjectorComponent } from './injector.component';
 import { Logger } from './logger.service';
@@ -25,6 +26,7 @@ import { ProvidersModule } from './providers.module';
     CarComponent,
     HeroesComponent,
     // #enddocregion ngmodule
+    HeroesTspComponent,
     HeroListComponent,
     InjectorComponent,
     TestComponent

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

@@ -0,0 +1,6 @@
+// #docregion
+import { NgModule } from '@angular/core';
+
+@NgModule({})
+export class HeroModule {
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
   constructor() { }
 }

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

@@ -2,7 +2,9 @@
 import { Injectable } from '@angular/core';
 import { HEROES }     from './mock-heroes';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
   getHeroes() { return HEROES; }
 }

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

@@ -3,7 +3,9 @@ import { Injectable } from '@angular/core';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class HeroService {
 
   // #docregion ctor

aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+
+@Injectable({
+  // we declare that this service should be created
+  // by the root application injector.
+
+  providedIn: 'root',
+})
+export class HeroService {
+  getHeroes() { return HEROES; }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HeroModule } from './hero.module';
+import { HEROES }     from './mock-heroes';
+
+@Injectable({
+  // we declare that this service should be created
+  // by any injector that includes HeroModule.
+
+  providedIn: HeroModule,
+})
+export class HeroService {
+  getHeroes() { return HEROES; }
+}

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

@@ -2,8 +2,14 @@
 import { Injectable } from '@angular/core';
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
+import { UserService } from '../user.service';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+  useFactory: (logger: Logger, userService: UserService) =>
+      new HeroService(logger, userService.user.isAuthorized),
+  deps: [Logger, UserService],
+})
 export class HeroService {
   // #docregion internals
   constructor(

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+/**
+ * A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its
+ * `Injectable`-declared provider) in order to function.
+ *
+ * TSP stands for Tree-Shakeable Provider.
+ */
+@Component({
+  selector: 'app-heroes-tsp',
+  template: `
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
+  `
+})
+export class HeroesTspComponent { }

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

@@ -0,0 +1,15 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule }  from '@angular/router';
+import { ServiceModule } from './service-and-module';
+
+// #docregion
+@NgModule({
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([]),
+    ServiceModule,
+  ],
+})
+export class AppModule {
+}

aio/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Injectable, NgModule } from '@angular/core';
+
+@Injectable()
+export class Service {
+  doSomething(): void {
+  }
+}
+
+@NgModule({
+  providers: [Service],
+})
+export class ServiceModule {
+}

aio/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+// #docregion
+@Injectable({
+  providedIn: 'root',
+  useFactory: () => new Service('dependency'),
+})
+export class Service {
+  constructor(private dep: string) {
+  }
+}

aio/content/examples/dependency-injection/src/app/tree-shaking/service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+// #docregion
+@Injectable({
+  providedIn: 'root',
+})
+export class Service {
+}

aio/content/examples/dependency-injection/stackblitz.json

@@ -3,7 +3,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[0,1,2].*",
+    "!**/*.[0,1,2,3,4].*",
     "!**/dummy.module.ts"
   ],
   "tags": ["dependency", "di"]

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

@@ -0,0 +1,26 @@
+// #docregion
+import { Component, Injector } from '@angular/core';
+import { createNgElementConstructor } from '../elements-dist';
+import { PopupService } from './popup.service';
+import { PopupComponent } from './popup.component';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <input #input value="Message">
+    <button (click)="popup.showAsComponent(input.value)">
+        Show as component </button>
+    <button (click)="popup.showAsElement(input.value)">
+        Show as element </button>
+  `
+})
+
+export class AppComponent {
+   constructor(private injector: Injector, public popup: PopupService) {
+    // on init, convert PopupComponent to a custom element
+    const PopupElement =
+createNgElementConstructor(PopupComponent, {injector: this.injector});
+    // register the custom element with the browser.
+       customElements.define('popup-element', PopupElement);
+  }
+}

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

@@ -0,0 +1,22 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { PopupService } from './popup.service';
+import { PopupComponent } from './popup.component';
+
+// include the PopupService provider,
+// but exclude PopupComponent from compilation,
+// because it will be added dynamically
+
+@NgModule({
+  declarations: [AppComponent, PopupComponent],
+  imports: [BrowserModule, BrowserAnimationsModule],
+  providers: [PopupService],
+  bootstrap: [AppComponent],
+  entryComponents: [PopupComponent],
+})
+
+export class AppModule {}

aio/content/examples/elements/src/app/popup.component.ts

@@ -0,0 +1,58 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AnimationEvent } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'my-popup',
+  template: 'Popup: {{message}}',
+  host: {
+    '[@state]': 'state',
+    '(@state.done)': 'onAnimationDone($event)',
+  },
+  animations: [
+    trigger('state', [
+      state('opened', style({transform: 'translateY(0%)'})),
+      state('void, closed', style({transform: 'translateY(100%)', opacity: 0})),
+      transition('* => *', animate('100ms ease-in')),
+    ])
+  ],
+  styles: [`
+    :host {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: #009cff;
+      height: 48px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid black;
+      font-size: 24px;
+    }
+  `]
+})
+
+export class PopupComponent {
+  private state: 'opened' | 'closed' = 'closed';
+
+  @Input()
+  set message(message: string) {
+    this._message = message;
+    this.state = 'opened';
+
+    setTimeout(() => this.state = 'closed', 2000);
+  }
+  get message(): string { return this._message; }
+  _message: string;
+
+  @Output()
+  closed = new EventEmitter();
+
+  onAnimationDone(e: AnimationEvent) {
+    if (e.toState === 'closed') {
+      this.closed.next();
+    }
+  }
+}

aio/content/examples/elements/src/app/popup.service.ts

@@ -0,0 +1,54 @@
+
+// #docregion
+import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+
+import { PopupComponent } from './popup.component';
+import { NgElementConstructor } from '../elements-dist';
+
+@Injectable()
+export class PopupService {
+  constructor(private injector: Injector,
+              private applicationRef: ApplicationRef,
+              private componentFactoryResolver: ComponentFactoryResolver) {}
+
+  // Previous dynamic-loading method required you to set up infrastructure
+  // before adding the popup to the DOM.
+  showAsComponent(message: string) {
+    // Create element
+    const popup = document.createElement('popup-component');
+
+    // Create the component and wire it up with the element
+    const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
+    const popupComponentRef = factory.create(this.injector, [], popup);
+
+    // Attach to the view so that the change detector knows to run
+    this.applicationRef.attachView(popupComponentRef.hostView);
+
+    // Listen to the close event
+    popupComponentRef.instance.closed.subscribe(() => {
+      document.body.removeChild(popup);
+      this.applicationRef.detachView(popupComponentRef.hostView);
+    });
+
+    // Set the message
+    popupComponentRef.instance.message = message;
+
+    // Add to the DOM
+    document.body.appendChild(popup);
+  }
+
+  // This uses the new custom-element method to add the popup to the DOM.
+  showAsElement(message: string) {
+    // Create element
+    const popupEl = document.createElement('popup-element');
+
+    // Listen to the close event
+    popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
+
+    // Set the message
+    popupEl.message = message;
+
+    // Add to the DOM
+    document.body.appendChild(popupEl);
+  }
+}

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

@@ -1,6 +1,6 @@
 // #docregion
 import { Component }  from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Hero, HeroTaxReturn } from './hero';
 import { HeroesService }       from './heroes.service';

aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, Observer } from 'rxjs';
-import { Observer } from 'rxjs/Observer';
 
 import { Hero, HeroTaxReturn } from './hero';
 

aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Component }  from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Villain, VillainsService } from './villains.service';
 

aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { of }         from 'rxjs/observable/of';
+import { of }         from 'rxjs';
 
 export interface Villain { id: number; name: string; }
 

aio/content/examples/http/e2e/app.e2e-spec.ts

@@ -28,7 +28,10 @@ let checkLogForMessage = (message: string) => {
   expect(page.logList.getText()).toContain(message);
 };
 
-describe('Http Tests', function() {
+// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet
+//          and we don't have the backwards compatibility package yet.
+//          Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6
+xdescribe('Http Tests', function() {
   beforeEach(() => {
     browser.get('');
   });

aio/content/examples/http/src/app/config/config.component.ts

@@ -30,7 +30,7 @@ export class ConfigComponent {
     this.configService.getConfig()
   // #enddocregion v1, v2
       .subscribe(
-        data => this.config = { ...data }, // success path
+        (data: Config) => this.config = { ...data }, // success path
         error => this.error = error // error path
       );
   }
@@ -39,7 +39,7 @@ export class ConfigComponent {
   showConfig_v1() {
     this.configService.getConfig_1()
   // #docregion v1, v1_callback
-      .subscribe(data => this.config = {
+      .subscribe((data: Config) => this.config = {
           heroesUrl: data['heroesUrl'],
           textfile:  data['textfile']
       });
@@ -51,7 +51,7 @@ export class ConfigComponent {
     this.configService.getConfig()
   // #docregion v2, v2_callback
       // clone the data object, using its known Config shape
-      .subscribe(data => this.config = { ...data });
+      .subscribe((data: Config) => this.config = { ...data });
   // #enddocregion v2_callback
   }
   // #enddocregion v2

aio/content/examples/http/src/app/config/config.service.ts

@@ -6,8 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 
 // #docregion rxjs-imports
-import { Observable } from 'rxjs/Observable';
+import { Observable, throwError } from 'rxjs';
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
 import { catchError, retry } from 'rxjs/operators';
 // #enddocregion rxjs-imports
 
@@ -82,8 +81,8 @@ export class ConfigService {
         `Backend returned code ${error.status}, ` +
         `body was: ${error.error}`);
     }
-    // return an ErrorObservable with a user-facing error message
+    // return an observable with a user-facing error message
-    return new ErrorObservable(
+    return throwError(
       'Something bad happened; please try again later.');
   };
   // #enddocregion handleError

aio/content/examples/http/src/app/heroes/heroes.service.ts

@@ -6,8 +6,7 @@ import { HttpHeaders } from '@angular/common/http';
 
 // #enddocregion http-options
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { catchError } from 'rxjs/operators';
 
 import { Hero } from './hero';

aio/content/examples/http/src/app/http-error-handler.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 
 import { MessageService } from './message.service';
 

aio/content/examples/http/src/app/http-interceptors/auth-interceptor.ts

@@ -4,8 +4,6 @@ import {
   HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
-
 // #docregion
 import { AuthService } from '../auth.service';
 

aio/content/examples/http/src/app/http-interceptors/caching-interceptor.ts

@@ -5,8 +5,7 @@ import {
   HttpInterceptor, HttpHandler
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { startWith, tap } from 'rxjs/operators';
 
 import { RequestCache } from '../request-cache.service';

aio/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts

@@ -3,7 +3,7 @@ import {
   HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class EnsureHttpsInterceptor implements HttpInterceptor {

aio/content/examples/http/src/app/http-interceptors/logging-interceptor.ts

@@ -4,7 +4,6 @@ import {
   HttpRequest, HttpResponse
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
 // #docregion excerpt
 import { finalize, tap } from 'rxjs/operators';
 import { MessageService } from '../message.service';

aio/content/examples/http/src/app/http-interceptors/noop-interceptor.ts

@@ -3,7 +3,7 @@ import {
   HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 /** Pass untouched request through to the next request handler. */
 @Injectable()

aio/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts

@@ -3,7 +3,7 @@ import {
   HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class TrimNameInterceptor implements HttpInterceptor {

aio/content/examples/http/src/app/http-interceptors/upload-interceptor.ts

@@ -5,8 +5,7 @@ import {
   HttpEventType, HttpProgressEvent
 } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 
 /** Simulate server replying to file upload request */
 @Injectable()

aio/content/examples/http/src/app/package-search/package-search.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, Subject } from 'rxjs';
-import { Subject } from 'rxjs/Subject';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { NpmPackageInfo, PackageSearchService } from './package-search.service';

aio/content/examples/http/src/app/package-search/package-search.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { catchError, map } from 'rxjs/operators';
 
 import { HttpErrorHandler, HandleError } from '../http-error-handler.service';

aio/content/examples/http/src/app/uploader/uploader.service.ts

@@ -4,7 +4,7 @@ import {
   HttpRequest, HttpResponse, HttpErrorResponse
 } from '@angular/common/http';
 
-import { of } from 'rxjs/observable/of';
+import { of } from 'rxjs';
 import { catchError, last, map, tap } from 'rxjs/operators';
 
 import { MessageService } from '../message.service';

aio/content/examples/http/src/main-specs.ts

@@ -6,12 +6,7 @@ declare var jasmine;
 
 import './polyfills';
 
-import 'zone.js/dist/async-test';
+import 'zone.js/dist/zone-testing';
-import 'zone.js/dist/fake-async-test';
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
 
 import { getTestBed } from '@angular/core/testing';
 import {

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

@@ -2,8 +2,7 @@
 // #docregion
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
 import { delay }      from 'rxjs/operators';
 
 export class Contact {

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Crisis,
          CrisisService } from './crisis.service';

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

@@ -1,7 +1,6 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
 import { delay }      from 'rxjs/operators';
 
 export class Crisis {

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

@@ -1,5 +1,5 @@
 import { Component }  from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Hero,
          HeroService } from './hero.service';

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

@@ -1,7 +1,6 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
 import { delay }      from 'rxjs/operators';
 
 export class Hero {

aio/content/examples/ngmodules/src/app/contact/contact.service.ts

@@ -1,8 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
+import { delay }      from 'rxjs/operators';
-import { delay }      from 'rxjs/operator/delay';
 
 export class Contact {
   constructor(public id: number, public name: string) { }
@@ -24,12 +23,12 @@ export class ContactService implements OnDestroy {
   ngOnDestroy() { console.log('ContactService instance destroyed.'); }
 
   getContacts(): Observable<Contact[]>  {
-    return delay.call(of(CONTACTS), FETCH_LATENCY);
+    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
   }
 
   getContact(id: number | string): Observable<Contact> {
     const contact$ = of(CONTACTS.find(contact => contact.id === +id));
-    return delay.call(contact$, FETCH_LATENCY);
+    return contact$.pipe(delay(FETCH_LATENCY));
   }
 }
 

aio/content/examples/ngmodules/src/app/customers/customers-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Customer,
          CustomersService } from './customers.service';

aio/content/examples/ngmodules/src/app/customers/customers.service.ts

@@ -1,8 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
+import { delay }      from 'rxjs/operators';
-import { delay }      from 'rxjs/operator/delay';
 
 export class Customer {
   constructor(public id: number, public name: string) { }
@@ -27,11 +26,11 @@ export class CustomersService implements OnDestroy {
   ngOnDestroy() { console.log('CustomersService instance destroyed.'); }
 
   getCustomers(): Observable<Customer[]>  {
-    return delay.call(of(CUSTOMERS), FETCH_LATENCY);
+    return of(CUSTOMERS).pipe(delay(FETCH_LATENCY));
   }
 
   getCustomer(id: number | string): Observable<Customer> {
     const customer$ = of(CUSTOMERS.find(customer => customer.id === +id));
-    return delay.call(customer$, FETCH_LATENCY);
+    return customer$.pipe(delay(FETCH_LATENCY));
   }
 }

aio/content/examples/ngmodules/src/app/items/items-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable }from 'rxjs/Observable';
+import { Observable }from 'rxjs';
 
 import { Item,
          ItemService }     from './items.service';

aio/content/examples/ngmodules/src/app/items/items.module.ts

@@ -1,6 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 
+import { ItemsComponent } from './items.component';
 import { ItemsListComponent }    from './items-list.component';
 import { ItemsDetailComponent }  from './items-detail.component';
 import { ItemService }          from './items.service';
@@ -8,7 +9,7 @@ import { ItemsRoutingModule }    from './items-routing.module';
 
 @NgModule({
   imports:      [ CommonModule, ItemsRoutingModule ],
-  declarations: [ ItemsDetailComponent, ItemsListComponent ],
+  declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ],
   providers:    [ ItemService ]
 })
 export class ItemsModule {}

aio/content/examples/ngmodules/src/app/items/items.service.ts

@@ -1,8 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
+import { delay }      from 'rxjs/operators';
-import { delay }      from 'rxjs/operator/delay';
 
 export class Item {
   constructor(public id: number, public name: string) { }
@@ -25,12 +24,12 @@ export class ItemService implements OnDestroy {
   ngOnDestroy() { console.log('ItemService instance destroyed.'); }
 
   getItems(): Observable<Item[]>  {
-    return delay.call(of(ITEMS), FETCH_LATENCY);
+    return of(ITEMS).pipe(delay(FETCH_LATENCY));
   }
 
   getItem(id: number | string): Observable<Item> {
     const item$ = of(ITEMS.find(item => item.id === +id));
-    return delay.call(item$, FETCH_LATENCY);
+    return item$.pipe(delay(FETCH_LATENCY));
   }
 }
 

aio/content/examples/observables-in-angular/src/main.ts

@@ -1,6 +1,6 @@
 
 import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 // #docregion eventemitter
 

aio/content/examples/observables/src/creating.ts

@@ -1,5 +1,5 @@
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 // #docregion subscriber
 

aio/content/examples/observables/src/geolocation.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 // #docregion
 

aio/content/examples/observables/src/multicasting.ts

@@ -1,5 +1,5 @@
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 // #docregion delay_sequence
 

aio/content/examples/observables/src/subscribing.ts

@@ -1,6 +1,5 @@
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 // #docregion observer
 

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

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular//common/http';
 
 import { AppComponent } from './app.component';
 import {
@@ -26,7 +26,7 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpClientModule
   ],
   declarations: [
     AppComponent,

aio/content/examples/pipes/src/app/fetch-json.pipe.ts

@@ -1,9 +1,6 @@
 // #docregion
 import { Pipe, PipeTransform } from '@angular/core';
-import { Http }                from '@angular/http';
+import { HttpClient }          from '@angular/common/http';
-
-import 'rxjs/add/operator/map';
-
 // #docregion pipe-metadata
 @Pipe({
   name: 'fetch',
@@ -14,15 +11,13 @@ export class FetchJsonPipe  implements PipeTransform {
   private cachedData: any = null;
   private cachedUrl = '';
 
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
 
   transform(url: string): any {
     if (url !== this.cachedUrl) {
       this.cachedData = null;
       this.cachedUrl = url;
-      this.http.get(url)
+      this.http.get(url).subscribe( result => this.cachedData = result );
-        .map( result => result.json() )
-        .subscribe( result => this.cachedData = result );
     }
 
     return this.cachedData;

aio/content/examples/pipes/src/app/hero-async-message.component.ts

@@ -1,10 +1,8 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, interval } from 'rxjs';
-import 'rxjs/add/observable/interval';
+import { map, take } from 'rxjs/operators';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/take';
 
 @Component({
   selector: 'app-hero-message',
@@ -25,14 +23,17 @@ export class HeroAsyncMessageComponent {
   constructor() { this.resend(); }
 
   resend() {
-    this.message$ = Observable.interval(500)
+    this.message$ = interval(500).pipe(
-      .map(i => this.messages[i])
+      map(i => this.messages[i]),
-      .take(this.messages.length);
+      take(this.messages.length)
+    );
   }
 }
 // #enddocregion
 
 // Alternative message$ formula:
-// this.message$ = Observable.fromArray(this.messages)
+// this.message$ = fromArray(this.messages).pipe(
-//   .map(message => Observable.timer(500).map(() => message))
+//   map(message => timer(500),
-//   .concatAll();
+//   map(() => message)),
+//   concatAll()
+// );

aio/content/examples/practical-observable-usage/src/backoff.ts

@@ -1,9 +1,7 @@
 
-import { ajax } from 'rxjs/observable/dom/ajax';
+import { pipe, range, timer, zip } from 'rxjs';
-import { range } from 'rxjs/observable/range';
+import { ajax } from 'rxjs/ajax';
-import { timer } from 'rxjs/observable/timer';
+import { retryWhen, map, mergeMap } from 'rxjs/operators';
-import { pipe } from 'rxjs/util/pipe';
-import { retryWhen, zip, map, mergeMap } from 'rxjs/operators';
 
 function backoff(maxTries, ms) {
  return pipe(

aio/content/examples/practical-observable-usage/src/typeahead.ts

@@ -1,6 +1,6 @@
 
-import { fromEvent } from 'rxjs/observable/fromEvent';
+import { fromEvent } from 'rxjs';
-import { ajax } from 'rxjs/observable/dom/ajax';
+import { ajax } from 'rxjs/ajax';
 import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 const searchBox = document.getElementById('search-box');

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

@@ -6,7 +6,6 @@ import { UserService } from './user.service';
 
 @NgModule({
   imports:      [ BrowserModule ],
-  providers:    [ UserService ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

aio/content/examples/providers/src/app/user.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { UserService } from './user.service';
+
+@NgModule({
+  providers: [UserService],
+})
+export class UserModule {
+}

aio/content/examples/providers/src/app/user.service.0.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+}

aio/content/examples/providers/src/app/user.service.1.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { UserModule } from './user.module';
+
+@Injectable({
+  providedIn: UserModule,
+})
+export class UserService {
+}

aio/content/examples/providers/src/app/user.service.spec.ts

@@ -3,9 +3,7 @@ import { UserService } from './user.service';
 
 describe('UserService', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({
+    TestBed.configureTestingModule({});
-      providers: [UserService]
-    });
   });
 
   it('should ...', inject([UserService], (service: UserService) => {

aio/content/examples/providers/src/app/user.service.ts

@@ -5,7 +5,9 @@ export class User {
   name: string;
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class UserService {
 
   constructor() { }

aio/content/examples/providers/stackblitz.json

@@ -3,7 +3,7 @@
   "files": [
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1,2].*"
+    "!**/*.[0,1,2].*"
   ],
   "file": "src/app/app.component.ts",
   "tags": ["providers"]

aio/content/examples/reactive-forms/src/app/demo.component.ts

@@ -1,6 +1,7 @@
 /* tslint:disable:member-ordering */
 import { Component }  from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
 
 import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
@@ -33,8 +34,9 @@ export class DemoComponent {
 
   getHeroes() {
     this.isLoading = true;
-    this.heroes = this.heroService.getHeroes()
+    this.heroes = this.heroService.getHeroes().pipe(
-                      .finally(() => this.isLoading = false);
+                      finalize(() => this.isLoading = false)
+    );
     this.selectedHero = undefined;
   }
 

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

@@ -1,7 +1,7 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Observable }        from 'rxjs/Observable';
+import { Observable }        from 'rxjs';
-import 'rxjs/add/operator/finally';
+import { finalize } from 'rxjs/operators';
 
 import { Hero }        from '../data-model';
 import { HeroService } from '../hero.service';
@@ -24,7 +24,7 @@ export class HeroListComponent implements OnInit {
     this.isLoading = true;
     this.heroes = this.heroService.getHeroes()
                       // Todo: error handling
-                      .finally(() => this.isLoading = false);
+                      .pipe(finalize(() => this.isLoading = false));
     this.selectedHero = undefined;
   }
 

aio/content/examples/reactive-forms/src/app/hero.service.ts

@@ -1,9 +1,8 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of }         from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
-import 'rxjs/add/operator/delay';
 
 import { Hero, heroes } from './data-model';
 
@@ -14,13 +13,13 @@ export class HeroService {
 
   // Fake server get; assume nothing can go wrong
   getHeroes(): Observable<Hero[]> {
-    return of(heroes).delay(this.delayMs); // simulate latency with delay
+    return of(heroes).pipe(delay(this.delayMs)); // simulate latency with delay
   }
 
   // Fake server update; assume nothing can go wrong
   updateHero(hero: Hero): Observable<Hero>  {
     const oldHero = heroes.find(h => h.id === hero.id);
     const newHero = Object.assign(oldHero, hero); // Demo: mutate cached hero
-    return of(newHero).delay(this.delayMs); // simulate latency with delay
+    return of(newHero).pipe(delay(this.delayMs)); // simulate latency with delay
   }
 }

aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts

@@ -1,8 +1,8 @@
 // #docregion
 import { Component, OnInit }  from '@angular/core';
 import { ActivatedRoute }     from '@angular/router';
-import { Observable }         from 'rxjs/Observable';
+import { Observable }         from 'rxjs';
-import 'rxjs/add/operator/map';
+import { map }                from 'rxjs/operators';
 
 @Component({
   template:  `
@@ -23,11 +23,11 @@ export class AdminDashboardComponent implements OnInit {
     // Capture the session ID if available
     this.sessionId = this.route
       .queryParamMap
-      .map(params => params.get('session_id') || 'None');
+      .pipe(map(params => params.get('session_id') || 'None'));
 
     // Capture the fragment if available
     this.token = this.route
       .fragment
-      .map(fragment => fragment || 'None');
+      .pipe(map(fragment => fragment || 'None'));
   }
 }

aio/content/examples/router/src/app/admin/admin-dashboard.component.ts

@@ -1,11 +1,11 @@
 // #docregion
 import { Component, OnInit }    from '@angular/core';
 import { ActivatedRoute }       from '@angular/router';
-import { Observable }           from 'rxjs/Observable';
+import { Observable }           from 'rxjs';
+import { map }                  from 'rxjs/operators';
 
 import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
 
-import 'rxjs/add/operator/map';
 
 @Component({
   template:  `
@@ -37,11 +37,11 @@ export class AdminDashboardComponent implements OnInit {
     // Capture the session ID if available
     this.sessionId = this.route
       .queryParamMap
-      .map(params => params.get('session_id') || 'None');
+      .pipe(map(params => params.get('session_id') || 'None'));
 
     // Capture the fragment if available
     this.token = this.route
       .fragment
-      .map(fragment => fragment || 'None');
+      .pipe(map(fragment => fragment || 'None'));
   }
 }

aio/content/examples/router/src/app/auth.service.ts

@@ -1,10 +1,8 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
+import { tap, delay } from 'rxjs/operators';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/delay';
 
 @Injectable()
 export class AuthService {
@@ -14,7 +12,10 @@ export class AuthService {
   redirectUrl: string;
 
   login(): Observable<boolean> {
-    return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
+    return of(true).pipe(
+      delay(1000),
+      tap(val => this.isLoggedIn = true)
+    );
   }
 
   logout(): void {

aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable }           from '@angular/core';
-import { Observable }           from 'rxjs/Observable';
+import { Observable }           from 'rxjs';
 import { CanDeactivate,
          ActivatedRouteSnapshot,
          RouterStateSnapshot }  from '@angular/router';

aio/content/examples/router/src/app/can-deactivate-guard.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable }    from '@angular/core';
 import { CanDeactivate } from '@angular/router';
-import { Observable }    from 'rxjs/Observable';
+import { Observable }    from 'rxjs';
 
 export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;

aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts

@@ -1,10 +1,9 @@
 // #docregion
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/take';
 import { Injectable }             from '@angular/core';
-import { Observable }             from 'rxjs/Observable';
 import { Router, Resolve, RouterStateSnapshot,
          ActivatedRouteSnapshot } from '@angular/router';
+import { Observable }             from 'rxjs';
+import { map, take }              from 'rxjs/operators';
 
 import { Crisis, CrisisService }  from './crisis.service';
 
@@ -15,13 +14,16 @@ export class CrisisDetailResolver implements Resolve<Crisis> {
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
     let id = route.paramMap.get('id');
 
-    return this.cs.getCrisis(id).take(1).map(crisis => {
+    return this.cs.getCrisis(id).pipe(
+      take(1),
+      map(crisis => {
         if (crisis) {
           return crisis;
         } else { // id not found
           this.router.navigate(['/crisis-center']);
           return null;
         }
-    });
+      })
+    );
   }
 }

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts

@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion
-import 'rxjs/add/operator/switchMap';
 import { Component, OnInit, HostBinding }   from '@angular/core';
 import { ActivatedRoute, Router, ParamMap } from '@angular/router';
-import { Observable }                       from 'rxjs/Observable';
+import { Observable }                       from 'rxjs';
+import { switchMap }                        from 'rxjs/operators';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
@@ -46,8 +46,9 @@ export class CrisisDetailComponent implements OnInit {
   // #docregion ngOnInit
   ngOnInit() {
     this.route.paramMap
-      .switchMap((params: ParamMap) =>
+      .pipe(
-        this.service.getCrisis(params.get('id')))
+        switchMap((params: ParamMap) =>
+          this.service.getCrisis(params.get('id'))))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis }         from './crisis.service';

aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts

@@ -1,10 +1,10 @@
 
-import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }        from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Observable }            from 'rxjs/Observable';
+import { Observable }            from 'rxjs';
+import { switchMap }             from 'rxjs/operators';
 
 @Component({
   // #docregion relative-navigation-router-link
@@ -34,10 +34,11 @@ export class CrisisListComponent implements OnInit {
 
 
   ngOnInit() {
-    this.crises$ = this.route.paramMap
+    this.crises$ = this.route.paramMap.pipe(
-      .switchMap((params: ParamMap) => {
+      switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
-      });
+      })
+    );
   }
 }

aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts

@@ -1,10 +1,10 @@
 // #docregion
-import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }        from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Observable }            from 'rxjs/Observable';
+import { Observable }            from 'rxjs';
+import { switchMap }             from 'rxjs/operators';
 
 @Component({
   template: `
@@ -32,10 +32,11 @@ export class CrisisListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.crises$ = this.route.paramMap
+    this.crises$ = this.route.paramMap.pipe(
-      .switchMap((params: ParamMap) => {
+      switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
-      });
+      })
+    );
   }
 }

aio/content/examples/router/src/app/crisis-center/crisis.service.ts

@@ -1,8 +1,7 @@
 // #docplaster
 // #docregion , mock-crises
-import 'rxjs/add/observable/of';
+import { BehaviorSubject } from 'rxjs';
-import 'rxjs/add/operator/map';
+import { map } from 'rxjs/operators';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 export class Crisis {
   constructor(public id: number, public name: string) { }
@@ -26,8 +25,9 @@ export class CrisisService {
   getCrises() { return this.crises$; }
 
   getCrisis(id: number | string) {
-    return this.getCrises()
+    return this.getCrises().pipe(
-      .map(crises => crises.find(crisis => crisis.id === +id));
+      map(crises => crises.find(crisis => crisis.id === +id))
+    );
   }
 
   // #enddocregion

aio/content/examples/router/src/app/dialog.service.ts

@@ -1,7 +1,6 @@
 // #docregion
-import 'rxjs/add/observable/of';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 
 /**
  * Async modal dialog service
@@ -17,6 +16,6 @@ export class DialogService {
   confirm(message?: string): Observable<boolean> {
     const confirmation = window.confirm(message || 'Is it OK?');
 
-    return Observable.of(confirmation);
+    return of(confirmation);
   };
 }

aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts

@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
 // #docregion rxjs-operator-import
-import 'rxjs/add/operator/switchMap';
+import { switchMap } from 'rxjs/operators';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 // #docregion imports
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion imports
@@ -41,9 +41,10 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.hero$ = this.route.paramMap
+    this.hero$ = this.route.paramMap.pipe(
-      .switchMap((params: ParamMap) =>
+      switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')));
+        this.service.getHero(params.get('id')))
+    );
   }
   // #enddocregion ngOnInit
 

aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable }             from 'rxjs/Observable';
+import { Observable }             from 'rxjs';
 
 import { Hero, HeroService } from './hero.service';