title: NullInjectorError: No provider for MediaMatcher
body: <p>I am working with Angular 5 and AngularMaterial2.</p>
  
  <p>I have an error when I try to inject the MediaMatcher service.</p>
  
  <p>I have two modules. The root module that it is for the app bootstrap, and the main module that contains all the components. I am trying to use a responsive side nav as the example of angular material documentation says.</p>
  
  <p>I suppose I have a missing import, but I cannot find what is the module.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>AppModule:</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  //Angular Module Dependencies
  import { HttpClientModule } from '@angular/common/http'; 
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  //Root Module Imports
  import { AppComponent } from './app.component';
  
  //Feature Module Imports
  import { AppRoutingModule } from './app-routing.module';
  import { CoreModule  } from "./core-module/core.module";
  import { MainModule } from './main-module/main.module';
  import { FrontSession } from './core-module/services/front-session.service';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      //Dependencies
      HttpClientModule,
      BrowserModule,
      BrowserAnimationsModule,
  
      //Features
      CoreModule.forRoot({ devMode: true }),
      MainModule,
      AppRoutingModule
    ],
    exports: [
      ],  
    providers: [ ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>MainModule:</strong></p>
  
  <pre><code>    import { NgModule } from '@angular/core';
      import { FormsModule, ReactiveFormsModule } from '@angular/forms';
      import { FlexLayoutModule } from '@angular/flex-layout';
      import { CommonModule } from '@angular/common';
  
      import { MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatTableModule, MatSidenavModule, MatIconModule, MatToolbarModule, MatListModule } from '@angular/material'; 
      const matModules = [  MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatTableModule, MatSidenavModule, MatIconModule, MatToolbarModule, MatListModule ];
  
      import { Home } from './states/home/home.component';
      import { Login } from './states/login/login.component';
      import { Signin } from './states/signin/signin.component';
  
      import { UserEdit } from './components/user-edit/user-edit.component';
      import { UserList } from './components/user-list/user-list.component';
  
      @NgModule({
        imports: [
          FormsModule,
          FlexLayoutModule,
          CommonModule,
          ReactiveFormsModule,
          matModules
        ],
        declarations: [ Home, Login, Signin, UserEdit, UserList ]
      })
  
      export class MainModule { }
  </code></pre>
  
  <p><strong>HomeComponent:</strong></p>
  
  <pre><code>import { Component, ChangeDetectorRef } from '@angular/core';
  import { MediaMatcher } from '@angular/cdk/layout';
  
  
  @Component( { 
      templateUrl: './home.html',
      styleUrls: ['./home.css'] 
  })
  export class Home 
  {
      mobileQuery: MediaQueryList;
  
  
  
  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher){ }
  
     } 
  </code></pre>