❗ Angular Material components like 'mat-form-field' not recognized — even after importing...

Great! Based on your instructions, here is the Stack Overflow-ready post with proper formatting using triple backticks, inline code, and indentation for list items where appropriate:

❗ Angular Material components like 'mat-form-field' not recognized — even after importing MaterialModule (Angular v19, non-standalone)

Problem Summary


I'm working on an Angular v19 project using NgModules (non-standalone). When I use any Angular Material component like <mat-form-field>, <mat-card>, etc., I get this error:

'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.


This issue is not just for mat-form-field, but for all Material components.

Context

• I am not using standalone components.
• All components are declared using traditional @NgModule.
• I have a shared MaterialModule where all Angular Material modules are imported and exported.
• MaterialModule is correctly imported in AppModule.
• BrowserAnimationsModule is also included.
• CUSTOM_ELEMENTS_SCHEMA was added (just to test).
• The component where the error occurs (AppTooltipsComponent) is declared in AppModule.

Dependencies from package.json


"dependencies": {
"@angular/animations": "^19.2.14",
"@angular/cdk": "^19.0.0",
"@angular/common": "^19.2.14",
"@angular/compiler": "^19.2.14",
"@angular/core": "^19.2.14",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.2.18",
"@angular/platform-browser": "^19.2.14",
"@angular/platform-browser-dynamic": "^19.2.14",
"@angular/router": "^19.0.0",
"@material/card": "^14.0.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"angular-animations": "^0.11.0",
"apexcharts": "^3.49.0",
"ng-apexcharts": "1.7.6",
"ngx-scrollbar": "^11.0.0",
"rxjs": "~7.5.0",
"sass": "1.81.0",
"tslib": "^2.3.0",
"zone.js": "^0.15.1"
}

app.module.ts


@NgModule({
declarations: [
AppComponent,
AppTooltipsComponent,
AppBadgeComponent,
AppChipsComponent,
AppFormsComponent,
AppListsComponent,
AppTablesComponent,
// other components
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
MaterialModule, // ✅ My shared Material module
// other modules
],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // tried this but still doesn't help
bootstrap: [AppComponent]
})
export class AppModule {}

material.module.ts


@NgModule({
imports: [
MatAutocompleteModule,
MatCheckboxModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatCardModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatListModule,
MatStepperModule,
MatTabsModule,
MatTreeModule,
MatButtonModule,
MatButtonToggleModule,
MatBadgeModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatRippleModule,
MatBottomSheetModule,
MatDialogModule,
MatSnackBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
ReactiveFormsModule
],
exports: [
MatAutocompleteModule,
MatCheckboxModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatToolbarModule,
MatCardModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatListModule,
MatStepperModule,
MatTabsModule,
MatTreeModule,
MatButtonModule,
MatButtonToggleModule,
MatBadgeModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatRippleModule,
MatBottomSheetModule,
MatDialogModule,
MatSnackBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
ReactiveFormsModule
]
})
export class MaterialModule {}

❗ Potential Clues / Suspicions

1. 
   @material/card I found "@material/card": "^14.0.0" in my dependencies. This seems to be Material Web Components, not Angular Material. Could this be causing conflicts?
   
   
2. 
   Multiple Routing Modules I have AppRoutingModule, UiComponentsRoutingModule, etc., but the component with the error is directly declared in AppModule.
   
   
3. 
   Duplicate Imports I noticed AppRoutingModule might be imported multiple times — once in AppModule, once in another module.
   
   
4. 
   Angular Material Compatibility I am using Angular 19 and Angular Material 19, so versions are compatible.
   

✅ What I Need Help With

• Am I missing something basic about importing Material modules in a non-standalone Angular app?
• Could @material/card be causing namespace collisions?
• Why are none of the Material components recognized even though MaterialModule is imported in AppModule?
• Is there any other scenario where Angular recognizes the module, but not its component selectors?

What I've Tried

1. Deleted node_modules and package-lock.json
2. Cleared npm cache:

npm cache clean --force

1. Reinstalled dependencies:

npm install

1. Restarted the Angular server:

ng serve

1. Verified that all modules and components are correctly declared/imported.

Additional Question


Do I need to import MaterialModule in each routing module (UiComponentsRoutingModule, etc.) even if the component is already declared in the root AppModule?


Any help or insight is appreciated

Continue reading...