title: How to add angular material in Angular ~4.3.3
body: <p>I'm getting the following error when I use <code>@angular/material</code> and <code>@angular/cdk</code>:</p>
  
  <blockquote>
    <p><code>http://localhost:3000/@angular/cdk/observe-content (404) Not found error</code></p>
  </blockquote>
  
  <p><code>systemjs.config.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>map: {
         ...
  
      // Angular Material 
      '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  
      // CDK individual packages
      '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
      '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
  }
  </code></pre>
  
  <p><code>materialmodule.ts</code></p>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule }      from '@angular/core';
  import { MdButtonModule, MdCheckboxModule,MdButton } from '@angular/material';
  
  @NgModule({
      imports: [
          MdButtonModule,
          MdButton
      ],
      exports: [
          MdButtonModule,
          MdButton
      ]
  })
  export class CustomMaterialModule { }
  </code></pre>
  
  <p><code>app.component.ts</code></p>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppComponent }  from './app.component';
  import {CustomMaterialModule} from './materialmodule/material.module';
  @NgModule({
      imports: [
          BrowserModule,
          BrowserAnimationsModule,
          CustomMaterialModule
      ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>What is missing from my code that causes the error as stated above?</p>