MaterialModule not working in some modules: 'mat-card' is not a known element

Question

I've found similar questions, but none seems to be the problem I'm having.

Currently my app uses a postModule, which is lazy-loaded, while the other modules are loaded normally. They all use Angular Material, which I've added to a materialModule. The use of my materialModule works fine for my postModule components, however it doesn't work with my aboutModule (and possibly other modules aswell).

My apologies for the amount of code. I'm pretty new to Angular and I'm not sure where to start looking for this problem.

AboutModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [AboutComponent],
  imports: [
    CommonModule,
    MaterialModule
  ]
})
export class AboutModule { }

MaterialModule

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  MatListModule,
  MatCardModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule,
  MatToolbarModule,
  MatSidenavModule,
  MatTableModule,
  MatFormFieldModule,
  MatInputModule,
  MatProgressSpinnerModule
} from "@angular/material";
import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatListModule,
    //other Mat imports
  ],
  exports: [
    MatListModule,
    //Rest of the imports
  ]
})
export class MaterialModule {}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { MaterialModule } from './material/material.module';
import { AppRoutingModule } from './app-routing.module';
import { httpInterceptorProviders } from './http-interceptors';
import { MainNavComponent } from './main-nav/main-nav.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found/page-not-found.component';


@NgModule({
  declarations: [AppComponent, MainNavComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ReactiveFormsModule,
    LayoutModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SelectivePreloadStrategy } from './selective-preload-strategy';
import { AuthGuard } from './user/auth.guard';
import { AboutComponent } from './about/about/about.component';
import { MapComponent } from './map/map/map.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found/page-not-found.component';
import { NewsComponent } from './news/news/news.component';


const appRoutes: Routes = [
  {
    path: 'post',
    canActivate: [AuthGuard],
    loadChildren: './post/post.module#PostModule',
    data: { preload: true }
  },
  {path: '', redirectTo: 'post/list', pathMatch: 'full'},
  {path: 'about', component: AboutComponent},
  {path: 'news', component: NewsComponent},
  {path: 'map', component: MapComponent},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes,
      {preloadingStrategy: SelectivePreloadStrategy}),
  ],

  declarations: [
    AboutComponent,
    NewsComponent,
    MapComponent,
    PageNotFoundComponent
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Answer 1

you are not loading the "aboutModule", you are just importing the component. I suggest you make a routing module for the "aboutModule" which will handle its childs and then load your route module as you did in the post one.