build(aio): update to @angular/core@5.0.0-rc.5

aio/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "aio-use-local": "node tools/ng-packages-installer overwrite . --debug --ignore-packages @angular/service-worker",
-    "aio-use-npm": "node tools/ng-packages-installer restore . && yarn upgrade @angular/cli@1.3.0",
+    "aio-use-npm": "node tools/ng-packages-installer restore .",
     "aio-check-local": "node tools/ng-packages-installer check .",
     "ng": "yarn check-env && ng",
     "start": "yarn check-env && ng serve",
@@ -23,7 +23,7 @@
     "setup": "yarn aio-use-npm && yarn example-use-npm",
     "postsetup": "yarn boilerplate:add && yarn build-ie-polyfills && yarn generate-plunkers && yarn generate-zips && yarn docs",
     "presetup-local": "yarn presetup",
-    "setup-local": "yarn aio-use-local && yarn upgrade @angular/cli@1.5.0-rc.2 && yarn example-use-local",
+    "setup-local": "yarn aio-use-local && yarn example-use-local",
     "postsetup-local": "yarn postsetup",
     "pretest-pwa-score-localhost": "yarn build",
     "test-pwa-score-localhost": "concurrently --kill-others --success first \"http-server dist -p 4200 --silent\" \"yarn test-pwa-score http://localhost:4200 90\"",
@@ -52,7 +52,7 @@
     "generate-zips": "node ./tools/example-zipper/generateZips",
     "sw-manifest": "ngu-sw-manifest --dist dist --in ngsw-manifest.json --out dist/ngsw-manifest.json",
     "sw-copy": "cp node_modules/@angular/service-worker/bundles/worker-basic.min.js dist/",
-    "postinstall": "uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
+    "postinstall": "node tools/cli-patches/patch.js && uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
     "build-ie-polyfills": "node node_modules/webpack/bin/webpack.js -p src/ie-polyfills.js src/generated/ie-polyfills.min.js",
     "~~check-env": "node scripts/check-environment",
     "~~build": "ng build --target=production --environment=stable -sm --build-optimizer",
@@ -65,31 +65,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0-beta.3",
-    "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^5.0.0-beta.3",
-    "@angular/compiler": "^5.0.0-beta.3",
-    "@angular/core": "^5.0.0-beta.3",
-    "@angular/forms": "^5.0.0-beta.3",
-    "@angular/http": "^5.0.0-beta.3",
-    "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^5.0.0-beta.3",
-    "@angular/platform-browser-dynamic": "^5.0.0-beta.3",
-    "@angular/platform-server": "^5.0.0-beta.3",
-    "@angular/router": "^5.0.0-beta.3",
+    "@angular/animations": "^5.0.0-rc.9",
+    "@angular/cdk": "^2.0.0-beta.12",
+    "@angular/common": "^5.0.0-rc.9",
+    "@angular/compiler": "^5.0.0-rc.9",
+    "@angular/core": "^5.0.0-rc.9",
+    "@angular/forms": "^5.0.0-rc.9",
+    "@angular/http": "^5.0.0-rc.9",
+    "@angular/material": "^2.0.0-beta.12",
+    "@angular/platform-browser": "^5.0.0-rc.9",
+    "@angular/platform-browser-dynamic": "^5.0.0-rc.9",
+    "@angular/platform-server": "^5.0.0-rc.9",
+    "@angular/router": "^5.0.0-rc.9",
     "@angular/service-worker": "^1.0.0-beta.16",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "jasmine": "^2.6.0",
     "ng-pwa-tools": "^0.0.10",
-    "rxjs": "^5.2.0",
+    "rxjs": "^5.5.0",
     "tslib": "^1.7.1",
     "web-animations-js": "^2.2.5",
-    "zone.js": "^0.8.16"
+    "zone.js": "0.8.16"
   },
   "devDependencies": {
-    "@angular/cli": "^1.3.0",
-    "@angular/compiler-cli": "^5.0.0-beta.3",
+    "@angular/cli": "^1.5.0-rc.8",
+    "@angular/compiler-cli": "^5.0.0-rc.9",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
     "archiver": "^1.3.0",
@@ -136,7 +136,7 @@
     "tree-kill": "^1.1.0",
     "ts-node": "^3.3.0",
     "tslint": "~4.5.0",
-    "typescript": "2.3.2",
+    "typescript": "^2.5.3",
     "uglify-js": "^3.0.15",
     "unist-util-filter": "^0.2.1",
     "unist-util-source": "^1.0.1",

aio/scripts/_payload-limits.sh

@@ -4,11 +4,11 @@ set -u -e -o pipefail
 
 declare -A payloadLimits
 payloadLimits["aio", "uncompressed", "inline"]=1600
-payloadLimits["aio", "uncompressed", "main"]=525500
+payloadLimits["aio", "uncompressed", "main"]=487000
 payloadLimits["aio", "uncompressed", "polyfills"]=38000
 payloadLimits["aio", "gzip7", "inline"]=1000
-payloadLimits["aio", "gzip7", "main"]=127000
-payloadLimits["aio", "gzip7", "polyfills"]=12500
+payloadLimits["aio", "gzip7", "main"]=120000
+payloadLimits["aio", "gzip7", "polyfills"]=11900
 payloadLimits["aio", "gzip9", "inline"]=1000
-payloadLimits["aio", "gzip9", "main"]=127000
-payloadLimits["aio", "gzip9", "polyfills"]=12500
+payloadLimits["aio", "gzip9", "main"]=120000
+payloadLimits["aio", "gzip9", "polyfills"]=11900

aio/src/app/app.component.html

@@ -1,38 +1,38 @@
 <div id="top-of-page"></div>
 
 <div *ngIf="isFetching" class="progress-bar-container">
-  <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
+  <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
 </div>
 
-<md-toolbar color="primary" class="app-toolbar">
-  <button class="hamburger" [class.starting]="isStarting" md-button
+<mat-toolbar color="primary" class="app-toolbar">
+  <button class="hamburger" [class.starting]="isStarting" mat-button
     (click)="sidenav.toggle()" title="Docs menu">
-    <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
+    <mat-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></mat-icon>
   </button>
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
-</md-toolbar>
+</mat-toolbar>
 <aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
 
-<md-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
+<mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
 
-  <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
+  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
     <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 
     <div class="doc-version">
       <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
     </div>
-  </md-sidenav>
+  </mat-sidenav>
 
   <section class="sidenav-content" [id]="pageId" role="content">
     <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>
 
-</md-sidenav-container>
+</mat-sidenav-container>
 
 <div *ngIf="hasFloatingToc" class="toc-container" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
   <aio-toc></aio-toc>

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

@@ -3,7 +3,7 @@ import { inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/cor
 import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { MdProgressBar, MdSidenav } from '@angular/material';
+import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
 import { of } from 'rxjs/observable/of';
@@ -37,7 +37,7 @@ describe('AppComponent', () => {
   let docViewer: HTMLElement;
   let hamburger: HTMLButtonElement;
   let locationService: MockLocationService;
-  let sidenav: HTMLElement;
+  let sidenav: MatSidenav;
   let tocService: TocService;
 
   const initializeTest = () => {
@@ -51,7 +51,7 @@ describe('AppComponent', () => {
     docViewer = de.query(By.css('aio-doc-viewer')).nativeElement;
     hamburger = de.query(By.css('.hamburger')).nativeElement;
     locationService = de.injector.get(LocationService) as any as MockLocationService;
-    sidenav = de.query(By.css('md-sidenav')).nativeElement;
+    sidenav = de.query(By.directive(MatSidenav)).componentInstance;
     tocService = de.injector.get(TocService);
   };
 
@@ -155,19 +155,19 @@ describe('AppComponent', () => {
       it('should open when nav to a guide page (guide/pipes)', () => {
         locationService.go('guide/pipes');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-open/);
+        expect(sidenav.opened).toBe(true);
       });
 
       it('should open when nav to an api page', () => {
         locationService.go('api/a/b/c/d');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-open/);
+        expect(sidenav.opened).toBe(true);
       });
 
       it('should be closed when nav to a marketing page (features)', () => {
         locationService.go('features');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
       });
 
       describe('when manually closed', () => {
@@ -180,27 +180,27 @@ describe('AppComponent', () => {
         });
 
         it('should be closed', () => {
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+          expect(sidenav.opened).toBe(false);
         });
 
         it('should stay closed when nav from one guide page to another', () => {
           locationService.go('guide/bags');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+          expect(sidenav.opened).toBe(false);
         });
 
         it('should stay closed when nav from a guide page to api page', () => {
           locationService.go('api');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+          expect(sidenav.opened).toBe(false);
         });
 
         it('should reopen when nav to market page and back to guide page', () => {
           locationService.go('features');
           fixture.detectChanges();
           locationService.go('guide/bags');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-open/);
+          expect(sidenav.opened).toBe(true);
         });
       });
     });
@@ -214,19 +214,19 @@ describe('AppComponent', () => {
       it('should be closed when nav to a guide page (guide/pipes)', () => {
         locationService.go('guide/pipes');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
       });
 
       it('should be closed when nav to an api page', () => {
         locationService.go('api/a/b/c/d');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
       });
 
       it('should be closed when nav to a marketing page (features)', () => {
         locationService.go('features');
         fixture.detectChanges();
-        expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
       });
 
       describe('when manually opened', () => {
@@ -239,32 +239,32 @@ describe('AppComponent', () => {
         });
 
         it('should be open', () => {
-          expect(sidenav.className).toMatch(/sidenav-open/);
+          expect(sidenav.opened).toBe(true);
         });
 
         it('should close when click in gray content area overlay', () => {
-          const sidenavBackdrop = fixture.debugElement.query(By.css('.mat-sidenav-backdrop')).nativeElement;
+          const sidenavBackdrop = fixture.debugElement.query(By.css('.mat-drawer-backdrop')).nativeElement;
           sidenavBackdrop.click();
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
         });
 
         it('should close when nav to another guide page', () => {
           locationService.go('guide/bags');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
         });
 
         it('should close when nav to api page', () => {
           locationService.go('api');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
         });
 
         it('should close again when nav to market page', () => {
           locationService.go('features');
           fixture.detectChanges();
-          expect(sidenav.className).toMatch(/sidenav-clos/);
+        expect(sidenav.opened).toBe(false);
         });
 
       });
@@ -376,19 +376,17 @@ describe('AppComponent', () => {
       });
 
       it('should set the css class of the host container based on the open/closed state of the side nav', () => {
-        const sideNav = fixture.debugElement.query(By.directive(MdSidenav));
-
         locationService.go('guide/pipes');
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
 
-        sideNav.componentInstance.opened = false;
-        sideNav.triggerEventHandler('close', {});
+        sidenav.close();
+        sidenav.onClose.next();
         fixture.detectChanges();
         checkHostClass('sidenav', 'closed');
 
-        sideNav.componentInstance.opened = true;
-        sideNav.triggerEventHandler('open', {});
+        sidenav.open();
+        sidenav.onOpen.next();
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
       });
@@ -882,7 +880,7 @@ describe('AppComponent', () => {
 
     describe('initial rendering', () => {
       it('should initially add the starting class until the first document is rendered', fakeAsync(() => {
-        const getSidenavContainer = () => fixture.debugElement.query(By.css('md-sidenav-container'));
+        const getSidenavContainer = () => fixture.debugElement.query(By.css('mat-sidenav-container'));
 
         initializeTest();
 
@@ -909,7 +907,7 @@ describe('AppComponent', () => {
     describe('progress bar', () => {
       const SHOW_DELAY = 200;
       const HIDE_DELAY = 500;
-      const getProgressBar = () => fixture.debugElement.query(By.directive(MdProgressBar));
+      const getProgressBar = () => fixture.debugElement.query(By.directive(MatProgressBar));
       const initializeAndCompleteNavigation = () => {
         initializeTest();
         triggerDocRendered();

aio/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';
@@ -95,8 +95,8 @@ export class AppComponent implements OnInit {
   @ViewChild(SearchBoxComponent)
   searchBox: SearchBoxComponent;
 
-  @ViewChild(MdSidenav)
-  sidenav: MdSidenav;
+  @ViewChild(MatSidenav)
+  sidenav: MatSidenav;
 
   constructor(
     public deployment: Deployment,
@@ -287,11 +287,11 @@ export class AppComponent implements OnInit {
   @HostListener('window:scroll')
   onScroll() {
     if (!this.tocMaxHeightOffset) {
-      // Must wait until now for md-toolbar to be measurable.
+      // Must wait until now for mat-toolbar to be measurable.
       const el = this.hostElement.nativeElement as Element;
       this.tocMaxHeightOffset =
           el.querySelector('footer').clientHeight +
-          el.querySelector('md-toolbar.app-toolbar').clientHeight +
+          el.querySelector('mat-toolbar.app-toolbar').clientHeight +
           24; //  fudge margin
     }