mat-toolbar，mat-sidenav和mat-sidenav-container未知

Question

I am trying to use mat-toolbar but am getting error:

mat-menu.component.html :

<mat-toolbar color="primary">

  <span>Responsive Navigation</span>

  <span class="example-spacer"></span>

  <div fxShow="true" fxHide.lt-md="true">

    <!-- The following menu items will be hidden on both SM and XS screen sizes -->

    <a href="#" mat-button>Menu Item 1</a>

    <a href="#" mat-button>Menu Item 2</a>

    <a href="#" mat-button>Menu Item 3</a>

    <a href="#" mat-button>Menu Item 4</a>

    <a href="#" mat-button>Menu Item 5</a>

    <a href="#" mat-button>Menu Item 6</a>

  </div>

  <div fxShow="true" fxHide.gt-sm="true">

    <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>

  </div>

</mat-toolbar>

<mat-sidenav-container fxFlexFill class="example-container">

  <mat-sidenav #sidenav fxLayout="column">

    <div fxLayout="column">

      <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>

      <a href="#" mat-button>Menu Item 1</a>

      <a href="#" mat-button>Menu Item 2</a>

      <a href="#" mat-button>Menu Item 3</a>

      <a href="#" mat-button>Menu Item 4</a>

      <a href="#" mat-button>Menu Item 5</a>

      <a href="#" mat-button>Menu Item 6</a>

    </div>

  </mat-sidenav>

  <!--<mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>-->

</mat-sidenav-container>

mat-menu.component.ts :

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() {
  }

}

I have imported below in my app.module.ts: I believe I have imported all the required modules required but am not sure why angular does not identifies mat-toolbar and other components

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
  ],

I am getting the below error:

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 ->]<mat-toolbar color="primary">

      <span>Responsive Navigation</span>
"): 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. ("
    <mat-sidenav-container fxFlexFill class="example-container">

      [ERROR ->]<mat-sidenav #sidenav fxLayout="column">

        <div fxLayout="column">
"): 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. ("
    </mat-toolbar>

    [ERROR ->]<mat-sidenav-container fxFlexFill class="example-container">

      <mat-sidenav #sidenav fxLayout="): ng:///ComponentsModule/MatMenuComponent.html@34:4
    at syntaxError (compiler.js:485) [<root>]
    at TemplateParser.parse (compiler.js:24668) [<root>]
    at JitCompiler._parseTemplate (compiler.js:34621) [<root>]
    at JitCompiler._compileTemplate (compiler.js:34596) [<root>]
    at eval (compiler.js:34497) [<root>]
    at Set.forEach (<anonymous>) [<root>]
    at JitCompiler._compileComponents (compiler.js:34497) [<root>]
    at eval (compiler.js:34367) [<root>]
    at Object.then (compiler.js:474) [<root>]
    at JitCompiler._compileModuleAndComponents (compiler.js:34366) [<root>]
    at JitCompiler.compileModuleAsync (compiler.js:34260) [<root>]
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239) [<root>]
    at PlatformRef.bootstrapModule (core.js:5567) [<root>]
    at eval (main.ts:12) [<root>]

Answer 1

You should import the modules in your component related module.ts file. for example, mat-menu.module.ts file in your case.

Answer 2

The problem with what you are doing is, the exported material modules from AppModule are not being accessible inside your custom MatMenuModule

Instead create a SharedModule and then import all your @angular/material modules inside it. Export it in the same way as you are doing now from SharedModule .

And then import SharedModule inside your custom MatMenuModule

Check this simple DEMO