docs: add changelog for 6.0.0-rc.0

PR Close #22896

.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

@@ -40,6 +40,7 @@ filegroup(
         "reflect-metadata",
         "source-map-support",
         "minimist",
+        "@webcomponents/custom-elements",
         "tslib",
     ] for ext in [
         "*.js",

CHANGELOG.md

@@ -1,3 +1,130 @@
+<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.
+
+### 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/NTuwfs) 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-21)
+
+
+### 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)
 

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,9 +2,9 @@ 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/25bb70fb67bddcc257b869f434ccc0fd130ec3bd.zip",
-    strip_prefix = "rules_nodejs-f03c8b5df155da2a640b6775afdd4fe4aa6fec72",
+    strip_prefix = "rules_nodejs-25bb70fb67bddcc257b869f434ccc0fd130ec3bd",
-    sha256 = "9d541f49af8cf60c73efb102186bfa5670ee190a088ce52638dcdf90cd9e2de6",
+    sha256 = "11c0d73bdcb4b2608abbe5967be5a910bdaebf848eb13e4e7f8413bbdeb940b8",
 )
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")

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",

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/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/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/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';
 

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

@@ -1,11 +1,11 @@
 // #docplaster
 // #docregion
 // #docregion rxjs-operator-import
-import 'rxjs/add/operator/switchMap';
+import { switchMap } from 'rxjs/operators';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
 
 import { slideInDownAnimation } from '../animations';
 
@@ -48,9 +48,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-list.component.1.ts

@@ -3,7 +3,7 @@
 // TODO SOMEDAY: Feature Componetized like HeroCenter
 import { Component, OnInit }   from '@angular/core';
 import { Router }              from '@angular/router';
-import { Observable }          from 'rxjs/Observable';
+import { Observable }          from 'rxjs';
 
 import { Hero, HeroService }   from './hero.service';
 

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

@@ -2,8 +2,8 @@
 // #docregion
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
 // #docregion rxjs-imports
-import 'rxjs/add/operator/switchMap';
+import { Observable } from 'rxjs';
-import { Observable } from 'rxjs/Observable';
+import { switchMap } from 'rxjs/operators';
 // #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
@@ -41,12 +41,13 @@ export class HeroListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.heroes$ = this.route.paramMap
+    this.heroes$ = this.route.paramMap.pipe(
-      .switchMap((params: ParamMap) => {
+      switchMap((params: ParamMap) => {
         // (+) before `params.get()` turns the string into a number
         this.selectedId = +params.get('id');
         return this.service.getHeroes();
-      });
+      })
+    );
   }
   // #enddocregion ctor
 // #docregion ctor

aio/content/examples/router/src/app/heroes/hero.service.ts

@@ -1,8 +1,7 @@
 // #docregion
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/map';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 export class Hero {
   constructor(public id: number, public name: string) { }
@@ -19,11 +18,12 @@ const HEROES = [
 
 @Injectable()
 export class HeroService {
-  getHeroes() { return Observable.of(HEROES); }
+  getHeroes() { return of(HEROES); }
 
   getHero(id: number | string) {
-    return this.getHeroes()
+    return this.getHeroes().pipe(
       // (+) before `id` turns the string into a number
-      .map(heroes => heroes.find(hero => hero.id === +id));
+      map(heroes => heroes.find(hero => hero.id === +id))
+    );
   }
 }

aio/content/examples/router/src/app/selective-preloading-strategy.ts

@@ -1,8 +1,7 @@
 // #docregion
-import 'rxjs/add/observable/of';
 import { Injectable } from '@angular/core';
 import { PreloadingStrategy, Route } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 
 @Injectable()
 export class SelectivePreloadingStrategy implements PreloadingStrategy {
@@ -18,7 +17,7 @@ export class SelectivePreloadingStrategy implements PreloadingStrategy {
 
       return load();
     } else {
-      return Observable.of(null);
+      return of(null);
     }
   }
 }

aio/content/examples/rx-library/src/error-handling.ts

@@ -1,10 +1,9 @@
 
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 // #docregion
 
-import { ajax } from 'rxjs/observable/dom/ajax';
+import { ajax } from 'rxjs/ajax';
 import { map, catchError } from 'rxjs/operators';
 // Return "response" from the API. If an error happens,
 // return an empty array.
@@ -15,7 +14,7 @@ const apiData = ajax('/api/data').pipe(
     }
     return res.response;
   }),
-  catchError(err => Observable.of([]))
+  catchError(err => of([]))
 );
 
 apiData.subscribe({

aio/content/examples/rx-library/src/naming-convention.ts

@@ -1,7 +1,7 @@
 
 
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-stopwatch',

aio/content/examples/rx-library/src/operators.1.ts

@@ -1,12 +1,10 @@
-import { Observable } from 'rxjs/Observable';
+import { of, pipe } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 // #docregion
 
-import { pipe } from 'rxjs/util/pipe';
 import { filter, map } from 'rxjs/operators';
 
-const nums = Observable.of(1, 2, 3, 4, 5);
+const nums = of(1, 2, 3, 4, 5);
 
 // Create a function that accepts an Observable.
 const squareOddVals = pipe(

aio/content/examples/rx-library/src/operators.2.ts

@@ -1,12 +1,10 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 // #docregion
 
-import { filter } from 'rxjs/operators/filter';
+import { filter, map } from 'rxjs/operators';
-import { map } from 'rxjs/operators/map';
 
-const squareOdd = Observable.of(1, 2, 3, 4, 5)
+const squareOdd = of(1, 2, 3, 4, 5)
   .pipe(
     filter(n => n % 2),
     map(n => n * n)

aio/content/examples/rx-library/src/operators.ts

@@ -1,12 +1,11 @@
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 // #docregion
 
 import { map } from 'rxjs/operators';
 
-const nums = Observable.of(1, 2, 3);
+const nums = of(1, 2, 3);
 
 const squareValues = map((val: number) => val * val);
 const squaredNums = squareValues(nums);

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

@@ -1,11 +1,10 @@
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 
 // #docregion
 
-import { ajax } from 'rxjs/observable/dom/ajax';
+import { ajax } from 'rxjs/ajax';
 import { map, retry, catchError } from 'rxjs/operators';
 
 const apiData = ajax('/api/data').pipe(
@@ -16,7 +15,7 @@ const apiData = ajax('/api/data').pipe(
     }
     return res.response;
   }),
-  catchError(err => Observable.of([]))
+  catchError(err => of([]))
 );
 
 apiData.subscribe({

aio/content/examples/rx-library/src/simple-creation.ts

@@ -1,7 +1,7 @@
 
 // #docregion promise
 
-import { fromPromise } from 'rxjs/observable/fromPromise';
+import { fromPromise } from 'rxjs';
 
 // Create an Observable out of a promise
 const data = fromPromise(fetch('/api/endpoint'));
@@ -16,7 +16,7 @@ data.subscribe({
 
 // #docregion interval
 
-import { interval } from 'rxjs/observable/interval';
+import { interval } from 'rxjs';
 
 // Create an Observable that will publish a value on an interval
 const secondsCounter = interval(1000);
@@ -29,7 +29,7 @@ secondsCounter.subscribe(n =>
 
 // #docregion event
 
-import { fromEvent } from 'rxjs/observable/fromEvent';
+import { fromEvent } from 'rxjs';
 
 const el = document.getElementById('my-element');
 
@@ -53,7 +53,7 @@ const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
 
 // #docregion ajax
 
-import { ajax } from 'rxjs/observable/dom/ajax';
+import { ajax } from 'rxjs/ajax';
 
 // Create an Observable that will create an AJAX request
 const apiData = ajax('/api/data');

aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts

@@ -3,7 +3,7 @@ import { SwUpdate } from '@angular/service-worker';
 
 
 // #docregion sw-check-update
-import { interval } from 'rxjs/observable/interval';
+import { interval } from 'rxjs';
 
 @Injectable()
 export class CheckForUpdateService {

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

@@ -59,7 +59,8 @@ describe('Style Guide', function () {
     expect(buttons.get(1).getText()).toBe('Hide toast');
   });
 
-  it('03-06', function () {
+  // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
+  xit('03-06', function () {
     browser.get('#/03-06');
 
     let div = element(by.tagName('sg-app > div'));
@@ -158,7 +159,8 @@ describe('Style Guide', function () {
     expect(input.isPresent()).toBe(true);
   });
 
-  it('07-01', function () {
+  // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
+  xit('07-01', function () {
     browser.get('#/07-01');
 
     let lis = element.all(by.tagName('sg-app > ul > li'));

aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts

@@ -5,6 +5,7 @@
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
 import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
 import { Hero } from './hero.model';
 // #enddocregion example
 
@@ -19,13 +20,13 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`api/heroes/${id}`).pipe(
-      .map(response => response.json().data as Hero);
+      map(response => response.json().data as Hero));
   }
 
   getHeroes() {
-    return this.http.get(`api/heroes`)
+    return this.http.get(`api/heroes`).pipe(
-      .map(response => response.json().data as Hero[]);
+      map(response => response.json().data as Hero[]));
   }
 
 }

aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts

@@ -2,6 +2,7 @@
 // #docregion example
 import { Injectable } from '@angular/core';
 import { Http }       from '@angular/http';
+import { map }        from 'rxjs/operators';
 
 import { Hero } from './hero.model';
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
@@ -19,13 +20,13 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`api/heroes/${id}`).pipe(
-      .map(response => response.json() as Hero);
+      map(response => response.json() as Hero));
   }
 
   getHeroes() {
-    return this.http.get(`api/heroes`)
+    return this.http.get(`api/heroes`).pipe(
-      .map(response => response.json() as Hero[]);
+      map(response => response.json() as Hero[]));
   }
 
 }

aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { LoggerService } from '../logger.service';
 import { SpinnerState, SpinnerService } from './spinner.service';

aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
 export interface SpinnerState {
   show: boolean;

aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts

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

aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts

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

aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Http }       from '@angular/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import 'rxjs/add/operator/map';
+import { map } from 'rxjs/operators';
 
 import { Hero }       from './hero.model';
 
@@ -12,7 +12,8 @@ export class HeroService {
   constructor(private http: Http) {}
 
   getHeroes(): Observable<Hero[]> {
-    return this.http.get('api/heroes')
+    return this.http.get('api/heroes').pipe(
-                    .map(resp => resp.json().data as Hero[]);
+      map(resp => resp.json().data as Hero[])
+    );
   }
 }

aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -4,10 +4,8 @@
 import { OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import 'rxjs/add/operator/catch';
+import { catchError, finalize, map } from 'rxjs/operators';
-import 'rxjs/add/operator/finally';
-import 'rxjs/add/operator/map';
 
 import { Hero } from '../shared/hero.model';
 
@@ -18,11 +16,11 @@ export class HeroListComponent implements OnInit {
   constructor(private http: Http) {}
   getHeroes() {
     this.heroes = [];
-    this.http.get(heroesUrl)
+    this.http.get(heroesUrl).pipe(
-      .map((response: Response) => <Hero[]>response.json().data)
+      map((response: Response) => <Hero[]>response.json().data),
-      .catch(this.catchBadResponse)
+      catchError(this.catchBadResponse),
-      .finally(() => this.hideSpinner())
+      finalize(() => this.hideSpinner())
-      .subscribe((heroes: Hero[]) => this.heroes = heroes);
+    ).subscribe((heroes: Hero[]) => this.heroes = heroes);
   }
   ngOnInit() {
     this.getHeroes();

aio/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
@@ -10,6 +9,6 @@ import { Hero } from './hero.model';
 export class HeroService {
   getHeroes() {
     let heroes: Hero[] = [];
-    return Observable.of(heroes);
+    return of(heroes);
   }
 }

aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts

@@ -1,6 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
+import { map } from 'rxjs/operators';
 
 import { Hero } from './hero.model';
 
@@ -10,8 +11,8 @@ export class HeroService {
   constructor(private http: Http) { }
 
   getHeroes() {
-    return this.http.get('api/heroes')
+    return this.http.get('api/heroes').pipe(
-      .map((response: Response) => <Hero[]>response.json());
+      map((response: Response) => <Hero[]>response.json()));
   }
 }
 // #enddocregion example

aio/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
@@ -10,6 +9,6 @@ import { Hero } from './hero.model';
 export class HeroService {
   getHeroes() {
     let heroes: Hero[] = [];
-    return Observable.of(heroes);
+    return of(heroes);
   }
 }

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
-import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
@@ -10,6 +9,6 @@ import { Hero } from './hero.model';
 export class HeroService {
   getHeroes() {
     let heroes: Hero[] = [];
-    return Observable.of(heroes);
+    return of(heroes);
   }
 }

aio/content/examples/styleguide/src/main.ts

@@ -1,6 +1,5 @@
 import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
-import 'rxjs/add/operator/map';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -1,7 +1,7 @@
 // tslint:disable-next-line:no-unused-variable
 import { async, fakeAsync, tick } from '@angular/core/testing';
 
-import { of } from 'rxjs/observable/of';
+import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
 describe('Angular async helper', () => {

aio/content/examples/testing/src/app/demo/demo.ts

@@ -6,7 +6,7 @@ import { Component, ContentChildren, Directive, EventEmitter,
          Pipe, PipeTransform,
          SimpleChange } from '@angular/core';
 
-import { of } from 'rxjs/observable/of';
+import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
 ////////// The App: Services and Components for the tests. //////////////

aio/content/examples/testing/src/app/hero/hero-detail.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { Hero } from '../model/hero';

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

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

aio/content/examples/testing/src/app/model/hero.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { catchError, map, tap } from 'rxjs/operators';
 
 import { Hero } from './hero';

aio/content/examples/testing/src/app/model/http-hero.service.spec.ts

@@ -14,9 +14,7 @@ import {
   HttpModule, Http, XHRBackend, Response, ResponseOptions
 } from '@angular/http';
 
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
-import { catchError, tap } from 'rxjs/operators';
 
 import { Hero } from './hero';
 import { HttpHeroService } from './http-hero.service';

aio/content/examples/testing/src/app/model/http-hero.service.ts

@@ -6,9 +6,9 @@ import { Http, Response } from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
 import { Hero }           from './hero';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { throwError } from 'rxjs';
-import { catchError, map, tap } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 
 @Injectable()
 export class HttpHeroService {
@@ -64,6 +64,6 @@ export class HttpHeroService {
     // In a real world app, we might send the error to remote logging infrastructure
     let errMsg = error.message || 'Server error';
     console.error(errMsg); // log to console instead
-    return new ErrorObservable(errMsg);
+    return throwError(errMsg);
   }
 }