chore(demo-app): replace rxjs patch operators w/ lettable operators (#8548)

Fixes #8501

src/demo-app/a11y/table/table-a11y.ts

@@ -11,6 +11,8 @@ import {DataSource} from '@angular/cdk/table';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
 import {MatSort, MatPaginator} from '@angular/material';
+import {merge} from 'rxjs/observable/merge';
+import {map} from 'rxjs/operators/map';
 
 export interface UserData {
   name: string;
@@ -78,9 +80,7 @@ export class SortDataSource extends DataSource<UserData> {
       this._sort.sortChange,
     ];
 
-    return Observable.merge(...displayDataChanges).map(() => {
-      return this.getSortedData();
-    });
+    return merge(...displayDataChanges).pipe(map(() => this.getSortedData()));
   }
 
   disconnect() {}
@@ -111,11 +111,14 @@ export class PaginatedDataSource extends DataSource<UserData> {
       this._paginator.page,
     ];
 
-    return Observable.merge(...displayDataChanges).map(() => {
-      const data = [...exampleData];
-      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
-      return data.splice(startIndex, this._paginator.pageSize);
-    });
+    return merge(...displayDataChanges)
+      .pipe(
+        map(() => {
+          const data = [...exampleData];
+          const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+          return data.splice(startIndex, this._paginator.pageSize);
+        })
+      );
   }
 
   disconnect() {}

src/demo-app/autocomplete/autocomplete-demo.ts

@@ -8,8 +8,8 @@
 
 import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
 import {FormControl, NgModel} from '@angular/forms';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
 
 export interface State {
   code: string;
@@ -101,9 +101,11 @@ export class AutocompleteDemo {
     this.tdStates = this.states;
     this.stateCtrl = new FormControl({code: 'CA', name: 'California'});
     this.reactiveStates = this.stateCtrl.valueChanges
-        .startWith(this.stateCtrl.value)
-        .map(val => this.displayFn(val))
-        .map(name => this.filterStates(name));
+      .pipe(
+        startWith(this.stateCtrl.value),
+        map(val => this.displayFn(val)),
+        map(name => this.filterStates(name))
+      );
 
     this.filteredGroupedStates = this.groupedStates = this.states.reduce((groups, state) => {
       let group = groups.find(g => g.letter === state.name[0]);

src/demo-app/overlay/overlay-demo.ts

@@ -16,8 +16,8 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
 } from '@angular/core';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/filter';
+import {filter} from 'rxjs/operators/filter';
+import {tap} from 'rxjs/operators/tap';
 
 
 @Component({
@@ -122,9 +122,10 @@ export class OverlayDemo {
         .attach(new ComponentPortal(KeyboardTrackingPanel, this.viewContainerRef));
 
     overlayRef.keydownEvents()
-      .do(e => componentRef.instance.lastKeydown = e.key)
-      .filter(e => e.key === 'Escape')
-      .subscribe(() => overlayRef.detach());
+      .pipe(
+        tap(e => componentRef.instance.lastKeydown = e.key),
+        filter(e => e.key === 'Escape')
+      ).subscribe(() => overlayRef.detach());
   }
 
 }

src/demo-app/table/person-data-source.ts

@@ -10,8 +10,8 @@ import {MatPaginator, MatSort} from '@angular/material';
 import {DataSource} from '@angular/cdk/collections';
 import {Observable} from 'rxjs/Observable';
 import {PeopleDatabase, UserData} from './people-database';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
+import {merge} from 'rxjs/observable/merge';
+import {map} from 'rxjs/operators/map';
 
 export class PersonDataSource extends DataSource<any> {
   constructor(private _peopleDatabase: PeopleDatabase,
@@ -26,13 +26,13 @@ export class PersonDataSource extends DataSource<any> {
       this._sort.sortChange,
       this._peopleDatabase.dataChange
     ];
-    return Observable.merge(...displayDataChanges).map(() => {
+    return merge(...displayDataChanges).pipe(map(() => {
       const data = this.getSortedData();
 
       // Grab the page's slice of data.
       const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
       return data.splice(startIndex, this._paginator.pageSize);
-    });
+    }));
   }
 
   disconnect() {

src/demo-app/table/person-detail-data-source.ts

@@ -9,8 +9,7 @@
 import {DataSource} from '@angular/cdk/collections';
 import {Observable} from 'rxjs/Observable';
 import {UserData} from './people-database';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
+import {map} from 'rxjs/operators/map';
 import {PersonDataSource} from './person-data-source';
 
 export interface DetailRow {
@@ -24,7 +23,7 @@ export class PersonDetailDataSource extends DataSource<any> {
   }
 
   connect(): Observable<(UserData|DetailRow)[]> {
-    return this._personDataSource.connect().map(data => {
+    return this._personDataSource.connect().pipe(map(data => {
       const rows: (UserData|DetailRow)[] = [];
 
       // Interweave a detail data object for each row data object that will be used for displaying
@@ -32,7 +31,7 @@ export class PersonDetailDataSource extends DataSource<any> {
       data.forEach(person => rows.push(person, {detailRow: true, data: person}));
 
       return rows;
-    });
+    }));
   }
 
   disconnect() {

src/demo-app/table/table-demo.ts

@@ -13,10 +13,9 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 import {DetailRow, PersonDetailDataSource} from './person-detail-data-source';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {SelectionModel} from '@angular/cdk/collections';
-import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/observable/fromEvent';
+import {distinctUntilChanged} from 'rxjs/operators/distinctUntilChanged';
+import {debounceTime} from 'rxjs/operators/debounceTime';
+import {fromEvent} from 'rxjs/observable/fromEvent';
 
 export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined;
 
@@ -88,13 +87,14 @@ export class TableDemo {
 
   ngOnInit() {
     this.connect();
-    Observable.fromEvent(this.filter.nativeElement, 'keyup')
-        .debounceTime(150)
-        .distinctUntilChanged()
-        .subscribe(() => {
-          this.paginatorForDataSource.pageIndex = 0;
-          this.matTableDataSource.filter = this.filter.nativeElement.value;
-        });
+    fromEvent(this.filter.nativeElement, 'keyup')
+      .pipe(
+        debounceTime(150),
+        distinctUntilChanged()
+      ).subscribe(() => {
+        this.paginatorForDataSource.pageIndex = 0;
+        this.matTableDataSource.filter = this.filter.nativeElement.value;
+      });
   }
 
   /** Whether all filtered rows are selected. */

src/material-examples/autocomplete-display/autocomplete-display-example.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
 
 export class User {
   constructor(public name: string) { }
@@ -30,9 +30,11 @@ export class AutocompleteDisplayExample {
 
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
-        .startWith(null)
-        .map(user => user && typeof user === 'object' ? user.name : user)
-        .map(name => name ? this.filter(name) : this.options.slice());
+      .pipe(
+        startWith({} as User),
+        map(user => user && typeof user === 'object' ? user.name : user),
+        map(name => name ? this.filter(name) : this.options.slice())
+      );
   }
 
   filter(name: string): User[] {

src/material-examples/autocomplete-filter/autocomplete-filter-example.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
 
 /**
  * @title Filter autocomplete
@@ -24,15 +24,17 @@ export class AutocompleteFilterExample {
 
   filteredOptions: Observable<string[]>;
 
-   ngOnInit() {
-      this.filteredOptions = this.myControl.valueChanges
-         .startWith('')
-         .map(val => this.filter(val));
-   }
+  ngOnInit() {
+    this.filteredOptions = this.myControl.valueChanges
+      .pipe(
+        startWith(''),
+        map(val => this.filter(val))
+      );
+  }
 
-    filter(val: string): string[] {
-      return this.options.filter(option =>
-        option.toLowerCase().indexOf(val.toLowerCase()) === 0);
-   }
+  filter(val: string): string[] {
+    return this.options.filter(option =>
+      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
+  }
 
 }

src/material-examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -2,8 +2,12 @@ import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
+
+export class State {
+  constructor(public name: string, public population: string, public flag: string) { }
+}
 
 /**
  * @title Autocomplete overview
@@ -17,7 +21,7 @@ export class AutocompleteOverviewExample {
   stateCtrl: FormControl;
   filteredStates: Observable<any[]>;
 
-  states: any[] = [
+  states: State[] = [
     {
       name: 'Arkansas',
       population: '2.978M',
@@ -47,8 +51,10 @@ export class AutocompleteOverviewExample {
   constructor() {
     this.stateCtrl = new FormControl();
     this.filteredStates = this.stateCtrl.valueChanges
-        .startWith(null)
-        .map(state => state ? this.filterStates(state) : this.states.slice());
+      .pipe(
+        startWith(''),
+        map(state => state ? this.filterStates(state) : this.states.slice())
+      );
   }
 
   filterStates(name: string) {

src/material-examples/cdk-table-basic/cdk-table-basic-example.ts

@@ -2,9 +2,6 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
 
 /**
  * @title Basic CDK data-table

src/material-examples/table-http/table-http-example.ts

@@ -2,12 +2,12 @@ import {Component, AfterViewInit, ViewChild} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/switchMap';
+import {merge} from 'rxjs/observable/merge';
+import {of as observableOf} from 'rxjs/observable/of';
+import {catchError} from 'rxjs/operators/catchError';
+import {map} from 'rxjs/operators/map';
+import {startWith} from 'rxjs/operators/startWith';
+import {switchMap} from 'rxjs/operators/switchMap';
 
 /**
  * @title Table retrieving data through HTTP
@@ -37,28 +37,29 @@ export class TableHttpExample implements AfterViewInit {
     // If the user changes the sort order, reset back to the first page.
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
 
-    Observable.merge(this.sort.sortChange, this.paginator.page)
-        .startWith(null)
-        .switchMap(() => {
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        startWith({}),
+        switchMap(() => {
           this.isLoadingResults = true;
           return this.exampleDatabase!.getRepoIssues(
-              this.sort.active, this.sort.direction, this.paginator.pageIndex);
-        })
-        .map(data => {
+            this.sort.active, this.sort.direction, this.paginator.pageIndex);
+        }),
+        map(data => {
           // Flip flag to show that loading has finished.
           this.isLoadingResults = false;
           this.isRateLimitReached = false;
           this.resultsLength = data.total_count;
 
           return data.items;
-        })
-        .catch(() => {
+        }),
+        catchError(() => {
           this.isLoadingResults = false;
           // Catch if the GitHub API has reached its rate limit. Return empty data.
           this.isRateLimitReached = true;
-          return Observable.of([]);
+          return observableOf([]);
         })
-        .subscribe(data => this.dataSource.data = data);
+      ).subscribe(data => this.dataSource.data = data);
   }
 }
 

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -1,7 +1,6 @@
 import {Component, NgModule} from '@angular/core';
 import {ServerModule} from '@angular/platform-server';
 import {BrowserModule} from '@angular/platform-browser';
-import {Observable} from 'rxjs/Observable';
 import {
   MatAutocompleteModule,
   MatButtonModule,
@@ -42,7 +41,7 @@ import {
   DataSource
 } from '@angular/cdk/table';
 
-import 'rxjs/add/observable/of';
+import {of as observableOf} from 'rxjs/observable/of';
 
 @Component({
   selector: 'kitchen-sink',
@@ -56,7 +55,7 @@ export class KitchenSink {
 
   /** Data source for the CDK and Material table. */
   tableDataSource: DataSource<any> = {
-    connect: () => Observable.of([{userId: 1}, {userId: 2}]),
+    connect: () => observableOf([{userId: 1}, {userId: 2}]),
     disconnect: () => {}
   };
 

tools/package-tools/rollup-globals.ts

@@ -86,16 +86,4 @@ export const rollupGlobals = {
   'rxjs/operators/share': 'Rx.Observable',
   'rxjs/operators/delay': 'Rx.Observable',
   'rxjs/operators/combineLatest': 'Rx.Observable',
-
-  'rxjs/add/observable/merge': 'Rx.Observable',
-  'rxjs/add/observable/fromEvent': 'Rx.Observable',
-  'rxjs/add/observable/of': 'Rx.Observable',
-  'rxjs/add/observable/interval': 'Rx.Observable',
-  'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
-  'rxjs/add/operator/map': 'Rx.Observable.prototype',
-  'rxjs/add/operator/debounceTime': 'Rx.Observable.prototype',
-  'rxjs/add/operator/distinctUntilChanged': 'Rx.Observable.prototype',
-  'rxjs/add/operator/first': 'Rx.Observable.prototype',
-  'rxjs/add/operator/catch': 'Rx.Observable.prototype',
-  'rxjs/add/operator/switchMap': 'Rx.Observable.prototype'
 };

tools/screenshot-test/src/app/firebase.service.ts

@@ -1,7 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import * as firebase from 'firebase';
-import 'rxjs/add/operator/toPromise';
 
 const config = require('../config.json');