"'mat-form-field' is not an known element:

I have an Angular app that uses Materials, in my materials.module.ts folder I imported the MatFormFieldModule but it's not being read. The other material components work just fine but the form field is not being found.

Here is the component:

<mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput>
</mat-form-field>

Here is the Materials Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';

const MaterialComponents = [
  MatToolbarModule,
  MatIconModule,
  MatTooltipModule,
  MatDialogModule,
  MatInputModule,
  MatFormFieldModule,
  MatSelectModule
]

@NgModule({
  imports: [
    CommonModule,
    ...MaterialComponents
  ],
  exports: [
    MaterialComponents
  ]
})
export class MaterialsModule { }

And here is the app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialsModule } from './materials/materials-module/materials.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

and this is the error I keep getting:

Error: src/app/components/auth/auth.component.html:3:1 - 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.

3 <mat-form-field appearance="fill">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/auth/auth.component.ts:7:16
    7   templateUrl: './auth.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AuthComponent.


Error: src/app/components/auth/auth.component.html:4:5 - error NG8001: 'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

4     <mat-label>Input</mat-label>
× Failed to compile.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BeavPlI