'mat-toolbar' is not a known element - Angular 5

Question

I have created a new project, and I am trying to add angular-material.

I have created material.module.ts in my app folder:

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

and I have imported it into one of my components:

import { MaterialModule } from '../material.module';

Furthermore, I have set up angular material in index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

in my style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

I know that it is working cause I have shown a material-icon as a test:

<i class="material-icons">face</i>

but when I try to create the footer it fails and it shows this message:

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.

Answer 1

That's because you have to import a module to the module which contains the component declaration, not into the component itself:

app.module.ts

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

P.S. The correct way to use a material icon is to use the MatIcon component. Example usage:

<mat-icon>home</mat-icon>

Answer 2

Best way
for a quick good fix

import {MatToolbarModule} from '@angular/material/toolbar'; 

in your app.module.ts

then declare MatToolbarModule in your declarations[].

Answer 3

Works fine for me here: https://stackblitz.com/edit/angular-w9ckf8

Look over the link and see if there's anything you are missing.

Answer 4

You need to import import {MatToolbarModule} from '@angular/material/toolbar'; and add it in imports array. Also the code for material is maintained in https://github.com/angular/components.

Answer 5

I have resolved this issue by making strict as false

Open

tsconfig.json

{ "compilerOptions" : { "strict" : false} }

Note: I have imported MatToolbarModule too

import {MatToolbarModule} from '@angular/material/toolbar';

and declared in Imports array

Answer 6

run ng add @angular/material in your terminal and this will fix your error