docs: remove rxjs-extensions in favor of explict imports (#3075)

wardbell · web-flow · commit aa6f50333150 · 2017-01-05T01:12:06.000-08:00
Triggered by #2620 which it closes.
diff --git a/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts b/public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts
@@ -1,7 +1,8 @@
 // #docregion
 import { Pipe, PipeTransform } from '@angular/core';
 import { Http }                from '@angular/http';
-import './rxjs-extensions';
+
+import 'rxjs/add/operator/map';
 
 // #docregion pipe-metadata
 @Pipe({
diff --git a/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts b/public/docs/_examples/pipes/ts/app/hero-async-message.component.ts
@@ -1,7 +1,10 @@
 // #docregion
 import { Component } from '@angular/core';
+
 import { Observable } from 'rxjs/Observable';
-import './rxjs-extensions';
+import 'rxjs/add/observable/interval';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
 
 @Component({
   selector: 'hero-message',
diff --git a/public/docs/_examples/pipes/ts/app/rxjs-extensions.ts b/public/docs/_examples/pipes/ts/app/rxjs-extensions.ts
diff --git a/public/docs/_examples/server-communication/ts/app/app.component.ts b/public/docs/_examples/server-communication/ts/app/app.component.ts
@@ -1,12 +1,6 @@
-// #docplaster
 // #docregion
 import { Component }         from '@angular/core';
 
-// #docregion import-rxjs
-// Add the RxJS Observable operators.
-import './rxjs-operators';
-// #enddocregion import-rxjs
-
 @Component({
   selector: 'my-app',
   template: `
@@ -17,4 +11,3 @@ import './rxjs-operators';
   `
 })
 export class AppComponent { }
-// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.1.ts b/public/docs/_examples/server-communication/ts/app/app.module.1.ts
@@ -1,7 +1,7 @@
 // #docregion
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule }   from '@angular/forms';
 import { HttpModule, JsonpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
+import { FormsModule }   from '@angular/forms';
 import { HttpModule, JsonpModule } from '@angular/http';
 
 
diff --git a/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
@@ -1,10 +1,15 @@
 // #docplaster
 // #docregion
 // Promise Version
-import { Injectable }     from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Injectable }              from '@angular/core';
+import { Http, Response }          from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
-import { Hero }           from './hero';
+
+// #docregion rxjs-imports
+import 'rxjs/add/operator/toPromise';
+// #enddocregion rxjs-imports
+
+import { Hero } from './hero';
 
 @Injectable()
 export class HeroService {
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
@@ -2,16 +2,21 @@
 // #docregion
 // Observable Version
 // #docregion v1
-import { Injectable }     from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Injectable }              from '@angular/core';
+import { Http, Response }          from '@angular/http';
 // #enddocregion v1
 // #docregion import-request-options
 import { Headers, RequestOptions } from '@angular/http';
 // #enddocregion import-request-options
 // #docregion v1
 
-import { Hero }           from './hero';
-import { Observable }     from 'rxjs/Observable';
+// #docregion rxjs-imports
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+// #enddocregion rxjs-imports
+
+import { Hero } from './hero';
 
 @Injectable()
 export class HeroService {
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
@@ -1,32 +1,42 @@
 /* tslint:disable: member-ordering forin */
 // #docplaster
 // #docregion
-import { Component, OnInit }        from '@angular/core';
-import { Observable }       from 'rxjs/Observable';
+import { Component, OnInit } from '@angular/core';
+
+// #docregion rxjs-imports
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/switchMap';
+
 // #docregion import-subject
-import { Subject }          from 'rxjs/Subject';
+import { Subject } from 'rxjs/Subject';
 // #enddocregion import-subject
 
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
   moduleId: module.id,
   selector: 'my-wiki-smart',
-  templateUrl: './wiki.component.html',
+  template: `
+    <h1>Smarter Wikipedia Demo</h1>
+    <p>Search when typing stops</p>
+    <input #term (keyup)="search(term.value)"/>
+    <ul>
+      <li *ngFor="let item of items | async">{{item}}</li>
+    </ul>`,
   providers: [ WikipediaService ]
 })
 export class WikiSmartComponent implements OnInit {
-  title   = 'Smarter Wikipedia Demo';
-  fetches = 'Fetches when typing stops';
   items: Observable<string[]>;
 
+  constructor (private wikipediaService: WikipediaService) {}
+
   // #docregion subject
   private searchTermStream = new Subject<string>();
   search(term: string) { this.searchTermStream.next(term); }
   // #enddocregion subject
 
-  constructor (private wikipediaService: WikipediaService) {}
-
   ngOnInit() {
     // #docregion observable-operators
     this.items = this.searchTermStream
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.html b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.html
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
@@ -5,19 +5,22 @@ import { Observable }       from 'rxjs/Observable';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-wiki',
-  templateUrl: 'wiki.component.html',
+  template: `
+    <h1>Wikipedia Demo</h1>
+    <p>Search after each keystroke</p>
+    <input #term (keyup)="search(term.value)"/>
+    <ul>
+      <li *ngFor="let item of items | async">{{item}}</li>
+    </ul>`,
   providers: [ WikipediaService ]
 })
 export class WikiComponent {
-  title   = 'Wikipedia Demo';
-  fetches = 'Fetches after each keystroke';
   items: Observable<string[]>;
 
+  constructor (private wikipediaService: WikipediaService) { }
+
   search (term: string) {
     this.items = this.wikipediaService.search(term);
   }
-
-  constructor (private wikipediaService: WikipediaService) { }
 }
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.1.ts
@@ -3,6 +3,8 @@
 import { Injectable } from '@angular/core';
 import { Jsonp }      from '@angular/http';
 
+import 'rxjs/add/operator/map';
+
 @Injectable()
 export class WikipediaService {
   constructor(private jsonp: Jsonp) { }
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
@@ -2,6 +2,8 @@
 import { Injectable } from '@angular/core';
 import { Jsonp, URLSearchParams } from '@angular/http';
 
+import 'rxjs/add/operator/map';
+
 @Injectable()
 export class WikipediaService {
   constructor(private jsonp: Jsonp) {}
diff --git a/public/docs/_examples/style-guide/ts/04-11/app/core/index.ts b/public/docs/_examples/style-guide/ts/04-11/app/core/index.ts
@@ -1,5 +1,4 @@
 // #docregion
 export * from './logger.service';
-export * from './rxjs-extensions';
 export * from './spinner/spinner.service';
 export * from './nav/nav.component';
diff --git a/public/docs/_examples/style-guide/ts/04-11/app/core/rxjs-extensions.ts b/public/docs/_examples/style-guide/ts/04-11/app/core/rxjs-extensions.ts
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
@@ -3,7 +3,11 @@
 
 import { OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
+
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/finally';
+import 'rxjs/add/operator/map';
 
 import { Hero } from '../shared/hero.model';
 
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/hero.service.ts
@@ -1,6 +1,8 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-03/app/heroes/shared/hero.service.ts
@@ -1,6 +1,8 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero.service.ts
@@ -1,6 +1,8 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 
 import { Hero } from './hero.model';
 
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts
@@ -1,9 +1,5 @@
 // #docplaster
 // #docregion
-// #docregion rxjs-extensions
-import './rxjs-extensions';
-// #enddocregion rxjs-extensions
-
 // #docregion v1, v2
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
@@ -2,9 +2,20 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
+
+// #docregion rxjs-imports
 import { Observable }        from 'rxjs/Observable';
 import { Subject }           from 'rxjs/Subject';
 
+// Observable class extensions
+import 'rxjs/add/observable/of';
+
+// Observable operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+// #enddocregion rxjs-imports
+
 import { HeroSearchService } from './hero-search.service';
 import { Hero } from './hero';
 
@@ -37,15 +48,15 @@ export class HeroSearchComponent implements OnInit {
 
   ngOnInit(): void {
     this.heroes = this.searchTerms
-      .debounceTime(300)        // wait for 300ms pause in events
+      .debounceTime(300)        // wait 300ms after each keystroke before considering the term
       .distinctUntilChanged()   // ignore if next search term is same as previous
-      .switchMap(term => term   // switch to new observable each time
+      .switchMap(term => term   // switch to new observable each time the term changes
         // return the http search observable
         ? this.heroSearchService.search(term)
-        // or the observable of empty heroes if no search term
+        // or the observable of empty heroes if there was no search term
         : Observable.of<Hero[]>([]))
       .catch(error => {
-        // TODO: real error handling
+        // TODO: add real error handling
         console.log(error);
         return Observable.of<Hero[]>([]);
       });
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
@@ -1,7 +1,9 @@
 // #docregion
-import { Injectable }     from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+
+import { Observable }     from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
 
 import { Hero }           from './hero';
 
@@ -13,6 +15,6 @@ export class HeroSearchService {
   search(term: string): Observable<Hero[]> {
     return this.http
                .get(`app/heroes/?name=${term}`)
-               .map((r: Response) => r.json().data as Hero[]);
+               .map(response => response.json().data as Hero[]);
   }
 }
diff --git a/public/docs/_examples/toh-6/ts/app/rxjs-extensions.ts b/public/docs/_examples/toh-6/ts/app/rxjs-extensions.ts
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
