build(aio): upgrade to latest `@angular/material` and `@angular/cdk` (#18428)

PR Close #18428

aio/package.json

@@ -65,13 +65,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.1.0-beta.2",
-    "@angular/cdk": "^2.0.0-beta.12",
+    "@angular/cdk": "^5.0.0-rc.1",
     "@angular/common": "^5.1.0-beta.2",
     "@angular/compiler": "^5.1.0-beta.2",
     "@angular/core": "^5.1.0-beta.2",
     "@angular/forms": "^5.1.0-beta.2",
     "@angular/http": "^5.1.0-beta.2",
-    "@angular/material": "^2.0.0-beta.12",
+    "@angular/material": "^5.0.0-rc.1",
     "@angular/platform-browser": "^5.1.0-beta.2",
     "@angular/platform-browser-dynamic": "^5.1.0-beta.2",
     "@angular/platform-server": "^5.1.0-beta.2",

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

@@ -6,6 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
+import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 
 import { AppComponent } from './app.component';
@@ -381,20 +382,27 @@ describe('AppComponent', () => {
         checkHostClass('view', '');
       });
 
-      it('should set the css class of the host container based on the open/closed state of the side nav', () => {
+      it('should set the css class of the host container based on the open/closed state of the side nav', async () => {
         locationService.go('guide/pipes');
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
 
         sidenav.close();
-        sidenav.onClose.next();
+        await waitForEmit(sidenav.onClose);
         fixture.detectChanges();
         checkHostClass('sidenav', 'closed');
 
         sidenav.open();
-        sidenav.onOpen.next();
+        await waitForEmit(sidenav.onOpen);
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
+
+        function waitForEmit(emitter: Observable<void>): Promise<void> {
+          return new Promise(resolve => {
+            emitter.subscribe(resolve);
+            fixture.detectChanges();
+          });
+        }
       });
 
       it('should set the css class of the host container based on the initial deployment mode', () => {

aio/src/app/app.component.ts

@@ -298,7 +298,7 @@ export class AppComponent implements OnInit {
       const el = this.hostElement.nativeElement as Element;
       this.tocMaxHeightOffset =
           el.querySelector('footer').clientHeight +
-          el.querySelector('mat-toolbar.app-toolbar').clientHeight +
+          el.querySelector('.app-toolbar').clientHeight +
           24; //  fudge margin
     }
 

aio/src/app/app.module.ts

@@ -13,10 +13,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { ROUTES } from '@angular/router';
 
-// Temporary fix for MatSidenavModule issue:
-// crashes with "missing first" operator when SideNav.mode is "over"
-import 'rxjs/add/operator/first';
-
 
 import { AppComponent } from 'app/app.component';
 import { EMBEDDED_COMPONENTS, EmbeddedComponentsMap } from 'app/embed-components/embed-components.service';

aio/src/app/shared/custom-icon-registry.ts

@@ -27,19 +27,6 @@ interface SvgIconMap {
   [iconName: string]: SVGElement;
 }
 
-// <hack-alert>
-// @angular/material's `MdIconRegitry` currently (v2.0.0-beta.8) requires an instance of `Http`
-// (from @angular/http). It is only used to [get some text content][1], so we can create a wrapper
-// around `HttpClient` and pretend it is `Http`.
-// [1]: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/icon/icon-registry.ts#L465-L466
-// </hack-alert>
-function createFakeHttp(http: HttpClient): any {
-  return {
-    get: (url: string) => http.get(url, {responseType: 'text'})
-      .map(data => ({text: () => data}))
-  };
-}
-
 /**
  * A custom replacement for Angular Material's `MdIconRegistry`, which allows
  * us to provide preloaded icon SVG sources.
@@ -49,7 +36,7 @@ export class CustomIconRegistry extends MatIconRegistry {
   private preloadedSvgElements: SvgIconMap = {};
 
   constructor(http: HttpClient, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
-    super(createFakeHttp(http), sanitizer);
+    super(http, sanitizer);
     this.loadSvgElements(svgIcons);
   }
 

aio/src/app/shared/scroll.service.ts

@@ -17,7 +17,7 @@ export class ScrollService {
   // at the top (e.g. toolbar) + some margin
   get topOffset() {
     if (!this._topOffset) {
-      const toolbar = this.document.querySelector('mat-toolbar.app-toolbar');
+      const toolbar = this.document.querySelector('.app-toolbar');
       this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
     }
     return this._topOffset;

aio/src/styles/0-base/_typography.scss

@@ -100,7 +100,7 @@ a {
   text-decoration: none;
 }
 
-.mat-toolbar-row a {
+.app-toolbar a {
   font-size: 16px;
   font-weight: 400;
   color: white;

aio/yarn.lock

@@ -32,9 +32,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cdk@^2.0.0-beta.12":
+"@angular/cdk@^5.0.0-rc.1":
-  version "2.0.0-beta.12"
+  version "5.0.0-rc.1"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.12.tgz#3a243cb62b93f4e039120ba70f900dc9e235622e"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-5.0.0-rc.1.tgz#7d6d937fea50074962db8ce02664b164401d197d"
   dependencies:
     tslib "^1.7.1"
 
@@ -140,9 +140,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/material@^2.0.0-beta.12":
+"@angular/material@^5.0.0-rc.1":
-  version "2.0.0-beta.12"
+  version "5.0.0-rc.1"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.12.tgz#71b6d0b7b021891e5d0e3688c1d4bd78c7457f58"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-5.0.0-rc.1.tgz#63456b7568c102b6bb7983a2837cc317350fe270"
   dependencies:
     tslib "^1.7.1"