'mat-toolbar' is not a known element

Question

I used in app.component.html :

<mat-toolbar>
  Responsive side navigation
</mat-toolbar>

and I define MatToolbarModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I obtain this error when I execute ng build command:

Error: src/app/app.component.html:1:1 - error NG8001: '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.

please, how to correct this error

Answer 1

Based on what you shared (before any update) your set up is sufficient to make it working. In case you are on VSCode closing and opening the IDE would be sufficient sometimes to get ride of this kind of compilation errors. Here is a stackblitz compatible with your code above works fine.