title: Error: No provider for ChildrenOutletContexts
body: <p>I can not make use of angular/material with Angular 5 in any way.
  I followed this <a href="https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App" rel="noreferrer">simple Tutorial</a>, but whenever I insert some material tag in component HTML, the web page gets blank.</p>
  
  <p>Angular CLI does not show any issues when using <code>ng serve</code> </p>
  
  <p><strong>Dependencies:</strong></p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "^5.0.5",
      "@angular/cdk": "^5.0.0-rc.2",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/material": "^5.0.0-rc.2",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/router": "^5.0.0",
      "core-js": "^2.4.1",
      "hammerjs": "^2.0.8",
      "rxjs": "^5.5.2",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@angular/cli": "1.5.5",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.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-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2"
    }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;button mat-button&gt;My Button&lt;/button&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>material.module.ts:</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MatButtonModule } from '@angular/material';
  
  @NgModule({
    imports: [MatButtonModule],
    exports: [MatButtonModule],
  })
  export class MaterialModule { }
  </code></pre>
  
  <p><strong>app.module.ts:</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {MaterialModule} from './material.module';
  import { AppComponent } from './app.component';
  import {RouterModule} from '@angular/router';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MaterialModule,
      RouterModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Console Window Error:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/rAAGE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rAAGE.png" alt="Browser console errors"></a></p>