build(aio): update tsc, angular, cli and other dependencies

aio/package.json

@@ -70,33 +70,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "^6.0.0-rc.0",
     "@angular/cdk": "^5.0.0-rc.1",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/elements": "6.0.0-beta.8",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
+    "@angular/common": "^6.0.0-rc.0",
+    "@angular/compiler": "^6.0.0-rc.0",
+    "@angular/core": "^6.0.0-rc.0",
+    "@angular/elements": "^6.0.0-rc.0",
+    "@angular/forms": "^6.0.0-rc.0",
+    "@angular/http": "^6.0.0-rc.0",
     "@angular/material": "^5.0.0-rc.1",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/platform-server": "^5.2.0",
-    "@angular/router": "^5.2.0",
+    "@angular/platform-browser": "^6.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "^6.0.0-rc.0",
+    "@angular/platform-server": "^6.0.0-rc.0",
+    "@angular/router": "^6.0.0-rc.0",
     "@angular/service-worker": "^1.0.0-beta.16",
     "@webcomponents/custom-elements": "^1.0.8",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "jasmine": "^2.6.0",
     "ng-pwa-tools": "^0.0.10",
-    "rxjs": "^5.5.2",
-    "tslib": "^1.7.1",
+    "rxjs": "^6.0.0-beta.1",
+    "rxjs-compat": "^6.0.0-beta.1",
+    "tslib": "^1.9.0",
     "web-animations-js": "^2.2.5",
     "zone.js": "^0.8.19"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.3",
-    "@angular/compiler-cli": "5.2",
+    "@angular/cli": "^1.7.3",
+    "@angular/compiler-cli": "^6.0.0-rc.0",
     "@types/jasmine": "^2.5.52",
     "@types/jasminewd2": "^2.0.3",
     "@types/node": "~6.0.60",
@@ -146,7 +147,7 @@
     "tree-kill": "^1.1.0",
     "ts-node": "^3.3.0",
     "tslint": "~4.5.0",
-    "typescript": "^2.5.3",
+    "typescript": "^2.7.2",
     "uglify-js": "^3.0.15",
     "unist-util-filter": "^0.2.1",
     "unist-util-source": "^1.0.1",

aio/scripts/_payload-limits.json

@@ -2,10 +2,9 @@
   "aio": {
     "master": {
       "uncompressed": {
-        "inline": 2062,
-        "main": 467103,
-        "polyfills": 40274,
-        "embedded": 71711,
+        "inline": 1971,
+        "main": 584136,
+        "polyfills": 40272,
         "prettify": 14888
       }
     }

aio/src/app/app.component.spec.ts

@@ -6,9 +6,8 @@ import { HttpClient } from '@angular/common/http';
 import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
-import { Observable } from 'rxjs/Observable';
-import { timer } from 'rxjs/observable/timer';
-import 'rxjs/add/operator/mapTo';
+import { Observable, timer } from 'rxjs';
+import { mapTo } from 'rxjs/operators';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
@@ -1372,6 +1371,6 @@ class TestHttpClient {
     }
 
     // Preserve async nature of `HttpClient`.
-    return timer(1).mapTo(data);
+    return timer(1).pipe(mapTo(data));
   }
 }

aio/src/app/app.component.ts

@@ -13,10 +13,8 @@ import { SearchResults } from 'app/search/interfaces';
 import { SearchService } from 'app/search/search.service';
 import { TocService } from 'app/shared/toc.service';
 
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { combineLatest } from 'rxjs/observable/combineLatest';
-import 'rxjs/add/operator/first';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { first, map } from 'rxjs/operators';
 
 const sideNavView = 'SideNav';
 
@@ -145,7 +143,7 @@ export class AppComponent implements OnInit {
     // Compute the version picker list from the current version and the versions in the navigation map
     combineLatest(
       this.navigationService.versionInfo,
-      this.navigationService.navigationViews.map(views => views['docVersions']))
+      this.navigationService.navigationViews.pipe(map(views => views['docVersions'])))
       .subscribe(([versionInfo, versions]) => {
         // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
         const computedVersions: NavigationNode[] = [
@@ -173,7 +171,7 @@ export class AppComponent implements OnInit {
 
     this.navigationService.versionInfo.subscribe(vi => this.versionInfo = vi);
 
-    const hasNonEmptyToc = this.tocService.tocList.map(tocList => tocList.length > 0);
+    const hasNonEmptyToc = this.tocService.tocList.pipe(map(tocList => tocList.length > 0));
     combineLatest(hasNonEmptyToc, this.showFloatingToc)
         .subscribe(([hasToc, showFloatingToc]) => this.hasFloatingToc = hasToc && showFloatingToc);
 
@@ -185,7 +183,7 @@ export class AppComponent implements OnInit {
     combineLatest(
       this.documentService.currentDocument,  // ...needed to determine host classes
       this.navigationService.currentNodes)   // ...needed to determine `sidenav` state
-      .first()
+      .pipe(first())
       .subscribe(() => this.updateShell());
   }
 

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-list.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject } from 'rxjs';
 
 import { ApiListComponent } from './api-list.component';
 import { ApiItem, ApiSection, ApiService } from './api.service';

aio/src/app/custom-elements/api/api-list.component.ts

@@ -8,9 +8,7 @@
 
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { combineLatest } from 'rxjs/observable/combineLatest';
+import { combineLatest, Observable, ReplaySubject } from 'rxjs';
 
 import { LocationService } from 'app/shared/location.service';
 import { ApiSection, ApiService } from './api.service';

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

@@ -49,17 +49,18 @@ describe('ApiService', () => {
 
   describe('#sections', () => {
 
-    it('first subscriber should fetch sections', () => {
+    it('first subscriber should fetch sections', done => {
       const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
 
       service.sections.subscribe(sections => {
         expect(sections).toEqual(data);
+        done();
       });
 
       httpMock.expectOne({}).flush(data);
     });
 
-    it('second subscriber should get previous sections and NOT trigger refetch', () => {
+    it('second subscriber should get previous sections and NOT trigger refetch', done => {
       const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
       let subscriptions = 0;
 
@@ -71,6 +72,8 @@ describe('ApiService', () => {
       service.sections.subscribe(sections => {
         subscriptions++;
         expect(sections).toEqual(data);
+        expect(subscriptions).toBe(2);
+        done();
       });
 
       httpMock.expectOne({}).flush(data);

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

@@ -1,11 +1,8 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/takeUntil';
+import { ReplaySubject, Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
 
 import { Logger } from 'app/shared/logger.service';
 import { DOC_CONTENT_URL_PREFIX } from 'app/documents/document.service';
@@ -35,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.
@@ -71,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,6 +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 { first } from 'rxjs/operators';
 
 import { CodeComponent } from './code.component';
 import { CodeModule } from './code.module';
@@ -61,44 +62,53 @@ describe('CodeComponent', () => {
   }));
 
   describe('pretty printing', () => {
-    it('should format a one-line code sample', () => {
+    const untilCodeFormatted = () => {
+      const emitter = hostComponent.codeComponent.codeFormatted;
+      return emitter.pipe(first()).toPromise();
+    };
+    const hasLineNumbers = async () => {
+      // presence of `<li>`s are a tell-tale for line numbers
+      await untilCodeFormatted();
+      return 0 < fixture.nativeElement.querySelectorAll('li').length;
+    };
+
+    it('should format a one-line code sample', async () => {
+      hostComponent.setCode(oneLineCode);
+      await untilCodeFormatted();
+
       // 'pln' spans are a tell-tale for syntax highlighing
       const spans = fixture.nativeElement.querySelectorAll('span.pln');
       expect(spans.length).toBeGreaterThan(0, 'formatted spans');
     });
 
-    function hasLineNumbers() {
-      // presence of `<li>`s are a tell-tale for line numbers
-      return 0 < fixture.nativeElement.querySelectorAll('li').length;
-    }
-
-    it('should format a one-line code sample without linenums by default', () => {
-      expect(hasLineNumbers()).toBe(false);
+    it('should format a one-line code sample without linenums by default', async () => {
+      hostComponent.setCode(oneLineCode);
+      expect(await hasLineNumbers()).toBe(false);
     });
 
-    it('should add line numbers to one-line code sample when linenums set true', () => {
+    it('should add line numbers to one-line code sample when linenums set true', async () => {
       hostComponent.linenums = 'true';
       fixture.detectChanges();
 
-      expect(hasLineNumbers()).toBe(true);
+      expect(await hasLineNumbers()).toBe(true);
     });
 
-    it('should format a small multi-line code without linenums by default', () => {
+    it('should format a small multi-line code without linenums by default', async () => {
       hostComponent.setCode(smallMultiLineCode);
-      expect(hasLineNumbers()).toBe(false);
+      expect(await hasLineNumbers()).toBe(false);
     });
 
-    it('should add line numbers to a big multi-line code by default', () => {
+    it('should add line numbers to a big multi-line code by default', async () => {
       hostComponent.setCode(bigMultiLineCode);
-      expect(hasLineNumbers()).toBe(true);
+      expect(await hasLineNumbers()).toBe(true);
     });
 
-    it('should format big multi-line code without linenums when linenums set false', () => {
+    it('should format big multi-line code without linenums when linenums set false', async () => {
       hostComponent.linenums = false;
       fixture.detectChanges();
 
       hostComponent.setCode(bigMultiLineCode);
-      expect(hasLineNumbers()).toBe(false);
+      expect(await hasLineNumbers()).toBe(false);
     });
   });
 

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

@@ -1,8 +1,9 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
 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 { tap } from 'rxjs/operators';
 
 /**
  * If linenums is not set, this is the default maximum number of lines that
@@ -93,6 +94,8 @@ export class CodeComponent implements OnChanges {
   get title(): string { return this._title; }
   private _title: string;
 
+  @Output() codeFormatted = new EventEmitter<void>();
+
   /** The element in the template that will display the formatted code. */
   @ViewChild('codeContainer') codeContainer: ElementRef;
 
@@ -115,7 +118,9 @@ export class CodeComponent implements OnChanges {
     this.setCodeHtml(leftAlignedCode); // start with unformatted code
     this.codeText = this.getCodeText(); // store the unformatted code as text (for copying)
 
-    this.pretty.formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
+    this.pretty
+        .formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
+        .pipe(tap(() => this.codeFormatted.emit()))
         .subscribe(c => this.setCodeHtml(c), err => { /* ignore failure to format */ }
     );
   }