add angular/cdk/layout ( error)

Author: Gorniv

.gitignore

@@ -7,3 +7,4 @@ yarn.lock
 prerender.js
 prerender.js
 .DS_Store
+static/

package.json

@@ -18,36 +18,36 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "5.0.1",
-        "@angular/cdk": "5.0.0-rc0",
-        "@angular/common": "5.0.1",
-        "@angular/compiler": "5.0.1",
-        "@angular/core": "5.0.1",
-        "@angular/forms": "5.0.1",
-        "@angular/http": "5.0.1",
-        "@angular/platform-browser": "5.0.1",
-        "@angular/platform-browser-dynamic": "5.0.1",
-        "@angular/router": "5.0.1",
-        "@ngtools/webpack": "1.9.0-beta.0",
+        "@angular/animations": "5.0.3",
+        "@angular/cdk": "5.0.0-rc.2",
+        "@angular/material": "5.0.0-rc.2",
+        "@angular/common": "5.0.3",
+        "@angular/compiler": "5.0.3",
+        "@angular/core": "5.0.3",
+        "@angular/forms": "5.0.3",
+        "@angular/http": "5.0.3",
+        "@angular/platform-browser": "5.0.3",
+        "@angular/platform-browser-dynamic": "5.0.3",
+        "@angular/router": "5.0.3",
+        "@ngtools/webpack": "1.9.0-rc.0",
         "@nguniversal/common": "5.0.0-beta.5",
         "@nguniversal/express-engine": "5.0.0-beta.5",
         "@nguniversal/module-map-ngfactory-loader": "5.0.0-beta.5",
-        "@types/node": "8.0.51",
+        "@types/node": "8.0.53",
         "cookie-parser": "1.4.3",
         "core-js": "2.5.1",
         "hammerjs": "2.0.8",
         "ngx-cookie-service": "1.0.9",
         "preboot": "5.1.7",
         "rxjs": "5.5.2",
-        "uglify-es": "3.1.9",
+        "uglify-es": "3.2.0",
         "zone.js": "0.8.18"
     },
     "devDependencies": {
-        "@angular/cli": "1.6.0-beta.0",
-        "@angular/compiler-cli": "5.0.1",
-        "@angular/language-service": "5.0.1",
-        "@angular/material": "5.0.0-rc0",
-        "@angular/platform-server": "5.0.1",
+        "@angular/cli": "1.6.0-rc.0",
+        "@angular/compiler-cli": "5.0.3",
+        "@angular/language-service": "5.0.3",
+        "@angular/platform-server": "5.0.3",
         "@types/jasmine": "2.8.0",
         "@types/jasminewd2": "2.0.3",
         "codelyzer": "4.0.1",

src/app/materialPage/materialPage.component.ts

@@ -1,6 +1,7 @@
 import { PizzaComponent } from './pizza/pizza.component';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 import {
   CdkTableModule,
@@ -18,6 +19,7 @@ import { Observable } from 'rxjs/Observable';
 })
 export class MaterialPageComponent {
 
+
   /** List of columns for the CDK and Material table. */
   tableColumns = ['userId'];
 
@@ -34,7 +36,18 @@ export class MaterialPageComponent {
     'test2'
   ];
 
-  constructor(public snackBar: MatSnackBar) {
+  constructor(public snackBar: MatSnackBar, breakpointObserver: BreakpointObserver) {
+    breakpointObserver.observe([
+      Breakpoints.HandsetLandscape,
+      Breakpoints.HandsetPortrait
+    ]).subscribe(result => {
+      if (result.matches) {
+        this.activateHandsetLayout();
+      }
+    });
+  }
+
+  activateHandsetLayout(): any {
   }
 
   openSnackBar() {

src/app/materialPage/materialPage.module.ts

@@ -5,6 +5,8 @@ import { Component, NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { BrowserModule } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Observable';
+import {LayoutModule} from '@angular/cdk/layout';
+
 import {
   MatAutocompleteModule,
   MatButtonModule,
@@ -48,6 +50,7 @@ import { PizzaComponent } from './pizza/pizza.component';
 @NgModule({
   imports: [
     CommonModule,
+    LayoutModule,
     MaterialPageRoutes,
     MatAutocompleteModule,
     MatButtonModule,