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:
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/material@17.3.6).
I appreciate any help.
Your component MaintainInvalidTaxIdModalComponent doesn't appear to be standalone and also isn't declared in your app.module.ts. This probably means it's declared in a different module.
You need to import MatFormFieldModule and MatInputModule in the same module that declares the component you're trying to use them in.