refactor(aio): switch to pipeable RxJS operators (#22872)

PR Close #22872

aio/src/app/custom-elements/announcement-bar/announcement-bar.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
 import { Logger } from 'app/shared/logger.service';
 import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 const announcementsPath = CONTENT_URL_PREFIX + 'announcements.json';
@@ -58,15 +59,17 @@ export class AnnouncementBarComponent implements OnInit {
 
   ngOnInit() {
     this.http.get<Announcement[]>(announcementsPath)
-      .catch(error => {
-        this.logger.error(new Error(`${announcementsPath} request failed: ${error.message}`));
-        return [];
-      })
-      .map(announcements => this.findCurrentAnnouncement(announcements))
-      .catch(error => {
-        this.logger.error(new Error(`${announcementsPath} contains invalid data: ${error.message}`));
-        return [];
-      })
+      .pipe(
+        catchError(error => {
+          this.logger.error(new Error(`${announcementsPath} request failed: ${error.message}`));
+          return [];
+        }),
+        map(announcements => this.findCurrentAnnouncement(announcements)),
+        catchError(error => {
+          this.logger.error(new Error(`${announcementsPath} contains invalid data: ${error.message}`));
+          return [];
+        }),
+      )
       .subscribe(announcement => this.announcement = announcement);
   }
 

aio/src/app/custom-elements/api/api.service.ts

@@ -2,9 +2,7 @@ import { Injectable, OnDestroy } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
 import { ReplaySubject, Subject } from 'rxjs';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/takeUntil';
+import { takeUntil, tap } from 'rxjs/operators';
 
 import { Logger } from 'app/shared/logger.service';
 import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
@@ -34,7 +32,7 @@ export class ApiService implements OnDestroy {
   private firstTime = true;
   private onDestroy = new Subject();
   private sectionsSubject = new ReplaySubject<ApiSection[]>(1);
-  private _sections = this.sectionsSubject.takeUntil(this.onDestroy);
+  private _sections = this.sectionsSubject.pipe(takeUntil(this.onDestroy));
 
   /**
   * Return a cached observable of API sections from a JSON file.
@@ -70,8 +68,10 @@ export class ApiService implements OnDestroy {
     // TODO: get URL by configuration?
     const url = this.apiBase + (src || this.apiListJsonDefault);
     this.http.get<ApiSection[]>(url)
-      .takeUntil(this.onDestroy)
-      .do(() => this.logger.log(`Got API sections from ${url}`))
+      .pipe(
+        takeUntil(this.onDestroy),
+        tap(() => this.logger.log(`Got API sections from ${url}`)),
+      )
       .subscribe(
         sections => this.sectionsSubject.next(sections),
         (err: HttpErrorResponse) => {

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -3,8 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatSnackBar } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import 'rxjs/add/operator/first';
-import 'rxjs/add/operator/toPromise';
+import { first } from 'rxjs/operators';
 
 import { CodeComponent } from './code.component';
 import { CodeModule } from './code.module';
@@ -65,7 +64,7 @@ describe('CodeComponent', () => {
   describe('pretty printing', () => {
     const untilCodeFormatted = () => {
       const emitter = hostComponent.codeComponent.codeFormatted;
-      return emitter.first().toPromise();
+      return emitter.pipe(first()).toPromise();
     };
     const hasLineNumbers = async () => {
       // presence of `<li>`s are a tell-tale for line numbers

aio/src/app/custom-elements/code/code.component.ts

@@ -3,7 +3,7 @@ import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { CopierService } from 'app/shared/copier.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import 'rxjs/add/operator/do';
+import { tap } from 'rxjs/operators';
 
 /**
  * If linenums is not set, this is the default maximum number of lines that
@@ -120,7 +120,7 @@ export class CodeComponent implements OnChanges {
 
     this.pretty
         .formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
-        .do(() => this.codeFormatted.emit())
+        .pipe(tap(() => this.codeFormatted.emit()))
         .subscribe(c => this.setCodeHtml(c), err => { /* ignore failure to format */ }
     );
   }

aio/src/app/custom-elements/code/pretty-printer.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { from as fromPromise, Observable } from 'rxjs';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/first';
+import { first, map, share } from 'rxjs/operators';
 
 import { Logger } from 'app/shared/logger.service';
 
@@ -21,7 +20,7 @@ export class PrettyPrinter {
   private prettyPrintOne: Observable<PrettyPrintOne>;
 
   constructor(private logger: Logger) {
-    this.prettyPrintOne = fromPromise(this.getPrettyPrintOne()).share();
+    this.prettyPrintOne = fromPromise(this.getPrettyPrintOne()).pipe(share());
   }
 
   private getPrettyPrintOne(): Promise<PrettyPrintOne> {
@@ -50,15 +49,17 @@ export class PrettyPrinter {
    * @returns Observable<string> - Observable of formatted code
    */
   formatCode(code: string, language?: string, linenums?: number | boolean) {
-    return this.prettyPrintOne.map(ppo => {
-      try {
-        return ppo(code, language, linenums);
-      } catch (err) {
-        const msg = `Could not format code that begins '${code.substr(0, 50)}...'.`;
-        console.error(msg, err);
-        throw new Error(msg);
-      }
-    })
-    .first(); // complete immediately
+    return this.prettyPrintOne.pipe(
+      map(ppo => {
+        try {
+          return ppo(code, language, linenums);
+        } catch (err) {
+          const msg = `Could not format code that begins '${code.substr(0, 50)}...'.`;
+          console.error(msg, err);
+          throw new Error(msg);
+        }
+      }),
+      first(),  // complete immediately
+    );
   }
 }

aio/src/app/custom-elements/contributor/contributor.service.ts

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-import { Observable } from 'rxjs';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/publishLast';
+import { ConnectableObservable, Observable } from 'rxjs';
+import { map, publishLast } from 'rxjs/operators';
 
 import { Contributor, ContributorGroup } from './contributors.model';
 
@@ -22,9 +21,9 @@ export class ContributorService {
   }
 
   private getContributors() {
-    const contributors = this.http.get<{[key: string]: Contributor}>(contributorsPath)
+    const contributors = this.http.get<{[key: string]: Contributor}>(contributorsPath).pipe(
       // Create group map
-      .map(contribs => {
+      map(contribs => {
         const contribMap: { [name: string]: Contributor[]} = {};
         Object.keys(contribs).forEach(key => {
           const contributor = contribs[key];
@@ -38,10 +37,10 @@ export class ContributorService {
         });
 
         return contribMap;
-      })
+      }),
 
       // Flatten group map into sorted group array of sorted contributors
-      .map(cmap => {
+      map(cmap => {
         return Object.keys(cmap).map(key => {
           const order = knownGroups.indexOf(key);
           return {
@@ -51,10 +50,12 @@ export class ContributorService {
           } as ContributorGroup;
         })
         .sort(compareGroups);
-      })
-      .publishLast();
+      }),
 
-    contributors.connect();
+      publishLast(),
+    );
+
+    (contributors as ConnectableObservable<ContributorGroup[]>).connect();
     return contributors;
   }
 }

aio/src/app/custom-elements/resource/resource.service.ts

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-import { Observable } from 'rxjs';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/publishLast';
+import { ConnectableObservable, Observable } from 'rxjs';
+import { map, publishLast } from 'rxjs/operators';
 
 import { Category, Resource, SubCategory } from './resource.model';
 import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
@@ -20,11 +19,12 @@ export class ResourceService {
 
   private getCategories(): Observable<Category[]> {
 
-    const categories = this.http.get<any>(resourcesPath)
-      .map(data => mkCategories(data))
-      .publishLast();
+    const categories = this.http.get<any>(resourcesPath).pipe(
+      map(data => mkCategories(data)),
+      publishLast(),
+    );
 
-    categories.connect();
+    (categories as ConnectableObservable<Category[]>).connect();
     return categories;
   };
 }

aio/src/app/custom-elements/search/file-not-found-search.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { LocationService } from 'app/shared/location.service';
 import { SearchResults } from 'app/search/interfaces';
 import { SearchService } from 'app/search/search.service';
@@ -15,9 +16,9 @@ export class FileNotFoundSearchComponent implements OnInit {
   constructor(private location: LocationService, private search: SearchService) {}
 
   ngOnInit() {
-    this.searchResults = this.location.currentPath.switchMap(path => {
+    this.searchResults = this.location.currentPath.pipe(switchMap(path => {
       const query = path.split(/\W+/).join(' ');
       return this.search.search(query);
-    });
+    }));
   }
 }