title: mat-toolbar, mat-sidenav and mat-sidenav-container is not a known element
body: <p>I am trying to use mat-toolbar but am getting error:</p>
  
  <p><strong>mat-menu.component.html</strong>:</p>
  
  <pre><code>&lt;mat-toolbar color="primary"&gt;
  
    &lt;span&gt;Responsive Navigation&lt;/span&gt;
  
    &lt;span class="example-spacer"&gt;&lt;/span&gt;
  
    &lt;div fxShow="true" fxHide.lt-md="true"&gt;
  
      &lt;!-- The following menu items will be hidden on both SM and XS screen sizes --&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 1&lt;/a&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 2&lt;/a&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 3&lt;/a&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 4&lt;/a&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 5&lt;/a&gt;
  
      &lt;a href="#" mat-button&gt;Menu Item 6&lt;/a&gt;
  
    &lt;/div&gt;
  
    &lt;div fxShow="true" fxHide.gt-sm="true"&gt;
  
      &lt;a href="#" (click)="sidenav.toggle()"&gt;Show Side Menu&lt;/a&gt;
  
    &lt;/div&gt;
  
  &lt;/mat-toolbar&gt;
  
  &lt;mat-sidenav-container fxFlexFill class="example-container"&gt;
  
    &lt;mat-sidenav #sidenav fxLayout="column"&gt;
  
      &lt;div fxLayout="column"&gt;
  
        &lt;a (click)="sidenav.toggle()" href="#" mat-button&gt;Close&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 1&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 2&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 3&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 4&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 5&lt;/a&gt;
  
        &lt;a href="#" mat-button&gt;Menu Item 6&lt;/a&gt;
  
      &lt;/div&gt;
  
    &lt;/mat-sidenav&gt;
  
    &lt;!--&lt;mat-sidenav-content fxFlexFill&gt;Main content&lt;/mat-sidenav-content&gt;--&gt;
  
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p><strong>mat-menu.component.ts</strong>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-mat-menu',
    templateUrl: './mat-menu.component.html',
    styleUrls: ['./mat-menu.component.scss']
  })
  export class MatMenuComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>I have imported below in my app.module.ts:</strong> I believe I have imported all the required modules required but am not sure why angular does not identifies mat-toolbar and other components</p>
  
  <pre><code>import {MatToolbarModule} from '@angular/material/toolbar';
  import { MatMenuComponent } from '../../components/mat-menu/mat-menu.component';
  import {
    MatAutocompleteModule,MatButtonModule,MatButtonToggleModule,MatCardModule,
    MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatExpansionModule,
    MatGridListModule,  MatIconModule,  MatInputModule,  MatListModule,  MatMenuModule,  MatNativeDateModule,  MatPaginatorModule,  MatProgressBarModule,  MatProgressSpinnerModule,
    MatRadioModule,MatRippleModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,MatSnackBarModule, MatSortModule,MatStepperModule,  MatTooltipModule,
  } from '@angular/material';
  
  @NgModule({
    exports: [
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatStepperModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule,
    ],
    imports: [
      CommonModule,
      RouterModule.forChild(AdminLayoutRoutes),
      FormsModule,
      ReactiveFormsModule,
      MatTabsModule,
      MatSelectModule,
      MatTableModule,
      MatToolbarModule,
      BrowserModule,
      HttpClientModule,
      HttpModule,
      FileUploadModule
    ],
  </code></pre>
  
  <p><strong>I am getting the below error:</strong></p>
  
  <pre><code>compiler.js:24668 Uncaught Error: Template parse errors:
  'mat-toolbar' is not a known element:
  1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
  2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  
      [ERROR -&gt;]&lt;mat-toolbar color="primary"&gt;
  
        &lt;span&gt;Responsive Navigation&lt;/span&gt;
  "): ng:///ComponentsModule/MatMenuComponent.html@2:4
  'mat-sidenav' is not a known element:
  1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
  2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      &lt;mat-sidenav-container fxFlexFill class="example-container"&gt;
  
        [ERROR -&gt;]&lt;mat-sidenav #sidenav fxLayout="column"&gt;
  
          &lt;div fxLayout="column"&gt;
  "): ng:///ComponentsModule/MatMenuComponent.html@36:6
  '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. ("
      &lt;/mat-toolbar&gt;
  
      [ERROR -&gt;]&lt;mat-sidenav-container fxFlexFill class="example-container"&gt;
  
        &lt;mat-sidenav #sidenav fxLayout="): ng:///ComponentsModule/MatMenuComponent.html@34:4
      at syntaxError (compiler.js:485) [&lt;root&gt;]
      at TemplateParser.parse (compiler.js:24668) [&lt;root&gt;]
      at JitCompiler._parseTemplate (compiler.js:34621) [&lt;root&gt;]
      at JitCompiler._compileTemplate (compiler.js:34596) [&lt;root&gt;]
      at eval (compiler.js:34497) [&lt;root&gt;]
      at Set.forEach (&lt;anonymous&gt;) [&lt;root&gt;]
      at JitCompiler._compileComponents (compiler.js:34497) [&lt;root&gt;]
      at eval (compiler.js:34367) [&lt;root&gt;]
      at Object.then (compiler.js:474) [&lt;root&gt;]
      at JitCompiler._compileModuleAndComponents (compiler.js:34366) [&lt;root&gt;]
      at JitCompiler.compileModuleAsync (compiler.js:34260) [&lt;root&gt;]
      at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239) [&lt;root&gt;]
      at PlatformRef.bootstrapModule (core.js:5567) [&lt;root&gt;]
      at eval (main.ts:12) [&lt;root&gt;]
  </code></pre>