I am encountering an issue with my Angular nrwl nx project that includes Bootstrap 5 and Angular Material. Within a library, I have a dashboard component where I import the MatCardModule. However, when trying to use it inside the DashboardComponent, I receive the following error:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
The confusing part is that I have already imported it in the Dashboard Module like this:
@NgModule({
imports: [CommonModule,
RouterModule.forChild([
{path: 'home', pathMatch: 'full', component: DashboardHomeComponent}
]),
MatCardModule,
],
providers: [UserRouteAccessService],
declarations: [DashboardHomeComponent],
})
export class DashboardModule {}
Here is how my HTML looks where I am attempting to use it:
<mat-card>
<mat-card-content>Simple card</mat-card-content>
</mat-card>
I installed material with npm install and Bootstrap is functioning correctly.