'mat-card' is not a known element, but I've used it on other pages

Question

I'm working on an Angular 10 (cordova) project that uses angular Marterial. I've created login and register pages, which use material components. But adding a new users page results in a 'mat-card' is not a known element error (even though I've used them in the login and register pages). Deleting the <mat-card> element allows the app to compile (ng build) correctly.

The only difference with the users page is that it's lazy loaded within a dashboard module where the login, register and dashboard modules are all lazy loaded within app-routing.module.ts...

To get a full understanding of how my app is structured, I included all the important parts below. Please let me know if I'm missing anything. The basic idea is that I have a AppMaterialModule that I import into all my child modules, which are lazy loaded as needed.

All pages import app-material.module.ts which includes:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';

const matModules = [
  MatCardModule 
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ...matModules
  ],
  exports: [
    ...matModules
  ]
})
export class AppMaterialModule { }

app.module.ts imports both AppMaterialModule and AppRoutingModule.

app-routing.module.ts has the following code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthenticatedGuardService } from './shared/authenticated-guard.service';

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule) },
  { path: 'register', loadChildren: () => import('./pages/register/register.module').then(m => m.RegisterModule) },
  { path: 'dashboard', canActivate: [AuthenticatedGuardService], loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: '', redirectTo: 'dashboard/users', pathMatch: 'full' },
  { path: '**', redirectTo: 'dashboard/users' }
];

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

dashboard-routing.module.ts has the following:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  { 
    path: '', 
    component: DashboardComponent,
    children: [
      { path: 'users', loadChildren: () => import('../users/users-routing.module').then(m => m.UsersRoutingModule) }
    ]
  },
];

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

Finally, users.module.ts has the following:

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

import { UsersRoutingModule } from './users-routing.module';

import { UsersComponent } from './users.component';
import { AppMaterialModule } from '../../app-material.module';

@NgModule({
  declarations: [UsersComponent],
  imports: [
    CommonModule,
    AppMaterialModule,
    UsersRoutingModule,
  ]
})
export class UsersModule { }

As you can see, I import AppMaterialModule into each module. I've referred back to a working Angular 9 project (Ionic) that uses a similar setup and it looks identical (except for required Angular9 vs Angular10 changes), so not sure what I'm doing wrong :(

Can anyone see what I've overlooked?

Answer 1

Oh, my, god.

Within dashboard-routing.module.ts I was using import('../users/users-routing.module').then(m => m.UsersRoutingModule) instead of import('../users/users.module').then(m => m.UsersModule).

A very expensive mistake.