title: Template Parse Error: 'mat-sidenav-container' is not a known element
body: <p>I'm new to Angular/material2 and I'm unsure of what I'm missing from trying to follow the documentation on <code>sidenav</code>. </p>
  
  <p>In my AppComponent, I would like to display a sidenav and I've implemented as follows:</p>
  
  <p>app.component.tss</p>
  
  <pre><code>import {
      NgModule,
      Component
  } from '@angular/core';
  import {
      MatSidenavModule,
      MatSidenavContent,
      MatSidenav
  } from '@angular/material';
  import {
      BrowserAnimationsModule
  } from '@angular/platform-browser/animations';
  
  @NgModule({
      imports: [
          BrowserAnimationsModule,
          MatSidenav
      ],
      exports: [
          BrowserAnimationsModule,
          MatSidenav
      ]
  })
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      title = 'app';
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;mat-sidenav-container&gt;
  
  &lt;/mat-sidenav-container&gt;
  &lt;div style="text-align:center"&gt;
      &lt;h1&gt;
          Welcome to {{ title }}!
      &lt;/h1&gt;
      &lt;nav&gt;
          &lt;a routerLink="/clients"&gt;Clients&lt;/a&gt;
      &lt;/nav&gt;
      &lt;router-outlet&gt;
  
      &lt;/router-outlet&gt;
  
  &lt;/div&gt;]
  </code></pre>
  
  <p>The error is: </p>
  
  <pre><code>Uncaught Error: Template parse errors:
  'mat-sidenav-container' is not a known element:
  1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
  2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message
  </code></pre>
  
  <p>What am I missing in my code? </p>