I have upgraded an app to Angular 17 (from 12). However, I am getting many runtime errors related to the Material modules. I’ve tried many things in an attempt to get it fixed, but can’t figure out what the problem is.

Error: src/app/pages/table-maintenance/maintain-invalid-tax-id/modal/maintain-invalid-tax-id-modal.component.html:5:7 – error NG8001: ‘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.

~~~~~~~~~~~~~~~~
src/app/pages/table-maintenance/maintain-invalid-tax-id/modal/maintain-invalid-tax-id-modal.component.ts:10:16
templateUrl: ‘./maintain-invalid-tax-id-modal.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MaintainInvalidTaxIdModalComponent.

maintain-invalid-tax-id-modal.component.html:

<h2 mat-dialog-title>ADR Foreign Tax Reclaims: {{description}} TaxIds</h2>
<div mat-dialog-content>
  <form [formGroup]="invalidTaxIdsForm">
    <div fxLayout fxLayoutGap="20px">
      <mat-form-field>
        <mat-label class="bold">Invalid Tax ID</mat-label>
        <input matInput type="text"  placeholder="Invalid Tax ID" maxlength="10" cdkFocusInitial formControlName="invalidTaxId" />
        <mat-error *ngIf="invalidTaxIdsForm.controls.invalidTaxId.touched && invalidTaxIdsForm.controls.invalidTaxId?.errors">
          Tax id must be entered.
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="20px">
      <mat-form-field>
        <mat-label class="bold">Comment</mat-label>
        <input matInput type="text" maxlength="255"  placeholder="Comment" formControlName="comment" />
      </mat-form-field>
    </div>

  <div>
      <mat-label class="bold mat-red">{{errorMsg}}</mat-label>
    </div> 
    
  <div fxLayout="row" fxLayoutGap="20px">
    <button fxFlex="25" mat-raised-button color="primary" *ngIf="isAdd (click)="addNew()">Submit</button>
     <button fxFlex="25" mat-raised-button color="primary" *ngIf="isEdit" (click)="updateInvalidTaxIds()">Submit</button>
    <button fxFlex="25" mat-raised-button color="secondary" (click)="close()">Cancel</button>
  </div>
  </form>
</div> 

maintain-invalid-tax-id-modal.component.ts:

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AppConstants } from '@app/shared/models/app-constants';
import { MaintainInvalidTaxIdsModel } from '../models/maintain-invalid-taxId.model';
import { MaintainInvalidTaxIdService } from '../services/maintain-invalid-tax-id.service';

@Component({
  selector: 'app-maintain-invalid-tax-id-modal',
  templateUrl: './maintain-invalid-tax-id-modal.component.html',
  styleUrls: ['./maintain-invalid-tax-id-modal.component.scss']
})
export class MaintainInvalidTaxIdModalComponent implements OnInit {
  invalidTaxIdsForm: UntypedFormGroup;
  description: string;
  action: string;
  errorMsg: string;
  isEdit: boolean = false;
  isAdd: boolean = false;


  constructor(private formBuilder: UntypedFormBuilder,
    public dialog: MatDialog,
    private service:MaintainInvalidTaxIdService ,
    public dialogRef: MatDialogRef<MaintainInvalidTaxIdModalComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: MaintainInvalidTaxIdsModel) { }

  ngOnInit(): void {
    this.actionInitializer();
    this.createForm();

    if (this.isEdit) {
      this.patchEditForm();
      this.invalidTaxIdsForm.controls['invalidTaxId'].disable();

    }
  }
//[Code removed for brevity]
}

app.module.ts:

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { LogoutComponent } from './pages/logout/logout.component';
import { appInitializer } from './app.initializer';
import { environment } from '@environments/environment';


//Modules
import { AppRoutingModule } from './app-routing.module';
import { MaterialModule } from './material-module';
import { ControlsModule } from 'src/app/controls/controls.module';
import { SharedComponentsModule } from './shared/components/shared-components.module';
import { NgIdleModule } from '@ng-idle/core';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';

//Interceptors
import { JwtInterceptor } from 'src/app/shared/interceptors/jwt/jwt.interceptor';
import { LoadingSpinnerInterceptor } from './shared/interceptors/loading-spinner/loading-spinner.interceptor';
import { ServiceUnavailableInterceptor } from './shared/interceptors/status-code/service-unavailable.interceptor';
import { Status401Interceptor } from 'src/app/shared/interceptors/status-code/status-401.interceptor';
import { Status404Interceptor } from 'src/app/shared/interceptors/status-code/status-404.interceptor';
import { Status405Interceptor } from './shared/interceptors/status-code/status-405.interceptor';
import { Status500Interceptor } from 'src/app/shared/interceptors/status-code/status-500.interceptor';

//Layout
import { HeaderComponent } from 'src/app/shared/layout/header/header.component';
import { FooterComponent } from 'src/app/shared/layout/footer/footer.component';
import { NavMenuComponent } from 'src/app/shared/layout/nav-menu/nav-menu.component';

//Services
import { ConfigurationService } from './shared/services/configuration/configuration.service';
import { ENVIRONMENT } from './shared/services/configuration/environment-token';
import { AuthenticationService } from "@app/shared/services/authentication/authentication.service";
import { LoggingService } from '@app/shared/services/logging/logging.service';
import { LogPublisherService } from '@app/shared/services/logging/log-publisher.service';

export function initConfiguration(configService: ConfigurationService) {
  return () => configService.loadApiConfig();
}

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavMenuComponent,
    LoginComponent,
    LogoutComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    ControlsModule,
    SharedComponentsModule,
    NgIdleModule.forRoot(),
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    { provide: ENVIRONMENT, useValue: environment },
    {
      provide: APP_INITIALIZER,
      useFactory: initConfiguration,
      multi: true,
      deps: [ConfigurationService]
    },
    LoadingSpinnerInterceptor,
    LoggingService,
    LogPublisherService,
    { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AuthenticationService] },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoadingSpinnerInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status500Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status404Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status405Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: Status401Interceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ServiceUnavailableInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

What I did:
Added MatFormFieldModule and MatInputModule to app.module.ts as suggested in previous post.
Verified that Material is successfully installed (@angular/[email protected]).

I appreciate any help.