Class MatFormFieldModule is not an Angular module

Question

I don't understand why MatFormFieldModule is not an Angular module.

In my HTML part of the login I use <mat-form-field></mat-form-field>.

Here it tells me:

Unknown html tag mat-form-field.

In the AuthModule where I import MatFormFieldModule I am told:

Class MatFormFieldModule is not an Angular module.

login.component.html:

    <mat-toolbar>
      <mat-toolbar-row>
        <h1 style="text-align: center !important; width: 100%">Login Page</h1>
      </mat-toolbar-row>
    </mat-toolbar>
    
    <div class="row">
      <div class="col-md-12">
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
          <div class="container">
    
            <div class="form-group">
              <mat-form-field>
                <label>
                  <input formControlName="email" matInput placeholder="E-Mail">
                </label>
    <!--            <mat-hint *ngIf="loginForm.controls.email.errors">Email is required</mat-hint>-->
              </mat-form-field>
            </div>
    
            <div class="form-group">
              <mat-form-field>
                <label>
                  <input formControlName="password" matInput placeholder="Password">
                </label>
    <!--            <mat-hint *ngIf="loginForm.controls.password.errors">Password is required</mat-hint>-->
              </mat-form-field>
            </div>
    
            <button mat-flat-button color="primary" [disabled]="!loginForm.valid" type="submit">Login</button>
    
          </div>
    
        </form>
      </div>
    </div>

auth.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { AuthRoutingModule } from "./auth-routing.module";
import { LoginComponent } from "./components/login/login.component";
import { RegisterComponent } from "./components/register/register.component";
import { ResetPasswordComponent } from "./components/reset-password/reset-password.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatButtonModule } from "@angular/material/button";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
  declarations: [LoginComponent, RegisterComponent, ResetPasswordComponent],
  imports: [
    CommonModule,
    AuthRoutingModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatButtonModule,
    FormsModule,
    MatToolbarModule,
  ],
  exports: [LoginComponent, RegisterComponent, ResetPasswordComponent],
})
export class AuthModule {}

This is the error i get:

Error: src/app/auth/components/login/login.component.html:1:1 - error NG8001: 'mat-toolbar' is not a known element:

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

1 ~~~~~~~~~~~~~

I tried the following steps from this answer: CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

but this dosen´n work for me.

Can it be related to the fact that in project angular was updated from version 11 to version 12?

If you need more info, let me know.

Answer 1

So, i fixed it by exporting the module. The AppModule was apparently missing the MatFormFieldModule..

@NgModule({
  declarations: [
    LoginComponent,
    RegisterComponent,
    ResetPasswordComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatInputModule,
    MatToolbarModule
  ],
  exports: [
    LoginComponent,
    RegisterComponent,
    ResetPasswordComponent,
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AuthModule {
}

Answer 2

If this component (login.component.html) or its module is child of App.module.ts, then just add this module into App.module.ts import array and everything will work perfectly fine.

@NgModules({
  // ...
  imports: [
   // ...,
   // ...,
   // add module of login.component.html
  ]
})
export class AppModule { }