material design not recognize

Question

Here is my folder:

-app 
     -content
     -footer
     -header
       -main-header
         {other services - shortcut} <- I just shortcut this bec. it is too long.
         main-header.component.html
         main-header.component.scss
         main-header.component.spec.ts
         main-header.module.ts
         main-header.routing.ts
     app.component.html
     etc..

main-header module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainHeaderComponent } from './main-header.component';
import { MainHeaderRouteModule } from './main-header.routing';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatCardModule } from '@angular/material/card';
import { MatSidenavModule } from '@angular/material/sidenav';
import { FormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@NgModule({
  declarations: [
    MainHeaderComponent
  ],
  imports: [
    MatCardModule,
    MatCheckboxModule,
    MatSidenavModule,
    FormsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MainHeaderRouteModule,
    CommonModule
  ]
})
export class MainHeaderModule {}

main-header.routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainHeaderComponent } from './main-header.component';


const routes: Routes = [
  {path: '', component: MainHeaderComponent}
];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MainHeaderRouteModule {}

app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainHeaderComponent } from './header/main-header/main-header.component';


@NgModule({
  declarations: [
    AppComponent,
    MainHeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  exports: [
    MainHeaderComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: '', redirectTo: 'main-header', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Since I am using a lazyloading route, it seems that the main-module doesn't recognize angular material:

'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. ("[ERROR ->]

Answer 1

i dont see you importing your MainHeaderModule anywhere in app.module

Answer 2

According to the comments for Lys's answer, you need to import MainHeaderModule in app.module.ts. Then you will get the error you mentioned

 ERROR in Type MainHeaderComponent in D:/Angular/proj/src/app/header/main-header/main-header.component.ts is part of the declarations of 2 modules 

The error is because, in both modules you have declared MainHeaderComponent. Remove MainHeaderComponent from app.module.ts. Since it's already declared in main header module. Importing main header module in app.module.ts will take care of MainHeaderComponent.