title: Angular Material Components Not Displayed
body: <p>I am new to Angular 2 and Angular Material I tried creating one example to check Angular Material but its not working. I am getting empty html page. My code is as follows.</p>
  
  <p><strong>App Component ts:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  }
  </code></pre>
  
  <p><strong>App Module .ts</strong></p>
  
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      import {MdSidenavModule,MdMenuModule} from '@angular/material';
      import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
      import {NoopAnimationsModule} from '@angular/platform-browser/animations';
      import 'hammerjs';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      MdSidenavModule,
      BrowserAnimationsModule,
      NoopAnimationsModule,
      MdMenuModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  
  export class AppModule { }
  </code></pre>
  
  <p><strong>App Component Html;</strong></p>
  
  <pre><code>&lt;!--The whole content below can be removed with the new code.--&gt;
  
  
   &lt;link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
   &lt;div&gt;
  
   &lt;md-sidenav-container&gt;
  
     &lt;md-sidenav opened="true"&gt;
      &lt;button&gt;
       Add
      &lt;/button&gt;
     &lt;/md-sidenav&gt;
   &lt;/md-sidenav-container&gt;
  
  
   &lt;md-menu&gt;
    &lt;button md-menu-item&gt; Settings &lt;/button&gt;
    &lt;button md-menu-item&gt; Help &lt;/button&gt;
  &lt;/md-menu&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>styles.css</p>
  
  <pre><code>@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
  </code></pre>
  
  <p><strong>My Package.json</strong></p>
  
  <pre><code>{
    "name": "asyncpipe",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^4.2.6",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "hammerjs": "^2.0.8",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@angular/cli": "1.1.2",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "2.5.45",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
    }
  }
  </code></pre>
  
  <p><strong>My angular-cli.json</strong></p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "asyncpipe"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.css"
        ],
        "scripts": [
          "../node_modules/hammerjs/hammer.min.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "css",
      "component": {}
    }
  }
  </code></pre>
  
  <p>I have included all dependencies as per mentioned on web. Please help me to resolve this. </p>