Mat-form-field не является известным элементом

Я обновил приложение до Angular 17 (с 12). Однако я получаю много ошибок во время выполнения, связанных с модулями материалов. Я перепробовал много вещей, пытаясь исправить это, но не могу понять, в чем проблема.

Ошибка: src/app/pages/table-maintenance/maintain-invalid-tax-id/modal/maintain-invalid-tax-id-modal.comComponent.html:5:7 — ошибка NG8001: «mat-form-field» не является известным элементом:

1. Если «mat-form-field» является компонентом Angular, убедитесь, что он является частью этого модуля.
2. Если «mat-form-field» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@NgModule.schemas» этого компонента, чтобы подавить это сообщение.

support-invalid-tax-id-modal.comComponent.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> 

поддерживать-инвалид-налог-id-modal.comComponent.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 { }

Что я сделал: Добавлены MatFormFieldModule и MatInputModule в app.module.ts, как предложено в предыдущем сообщении. Проверено, что Материал успешно установлен (@angular/[email protected]).

Я ценю любую помощь.