error NG8001: not a known element: | Angular 13

Question

All needed modules have been imported. But the error remains. The same error is repetitively appearing. mat-toolbar, mat-icon, mat-form-field, mat-label, mat-paginator, mat-label, mat-select, mat-option, mat-datepicker-toggle, mat-datepicker, mat-radio-group, mat-radio-button are coming with error NG8001: not a known element: I installed node_modules again and updated the angular material package also.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    DialogComponent,
 
   
  ],
  imports: [
    DialogModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatRadioModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    MatTableModule,
    ViewChild,
    MatPaginator,
    MatSort,
    MatTableDataSource,
    

  ],
  exports:[
    MatToolbarModule,
    MatFormFieldModule,
    MatFormField,
    MatLabel
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]

})
export class AppModule { }

Part of the Terminal:

Error: node_modules/@angular/core/index.d.ts:9069:22 - error NG1010: Value at position 18 in the NgModule.imports of AppModule is not a class     
  Value is a reference to 'ViewChild'.

9069 export declare const ViewChild: ViewChildDecorator;
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/core/index.d.ts:9069:22
    9069 export declare const ViewChild: ViewChildDecorator;
                              ~~~~~~~~~
    Reference is declared here.


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.   

1 <mat-toolbar color="primary">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:10:16
    10   templateUrl: './app.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

................

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

Answer 1

DialogComponent is a customized component implemented by me and needs to import the path here to declare the component in declarations.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { MatFormFieldModule } from '@angular/material/form-field';
import { AppComponent } from './app.component';
import { DialogComponent } from './dialog/dialog.component';
import { MatInputModule } from '@angular/material/input';
import { RouterModule } from '@angular/router';
import { MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
  declarations: [AppComponent, DialogComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    RouterModule,
    MatTableModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatDialogModule,
    HttpClientModule,
    MatInputModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Now, the error is disappeared.

Note: If you import MatDatepickerModule, MatNativeDateModule Please imported them independently. Because of Angular10+, these 2 should be imported independently as below.

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';