Angular 6 error show to 'mat-form-field' is not a known element:

Try to import

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

in your module then inject into

@NgModule({
//..your other property,
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 });

Looking at your error ng:///AppRoutingModule/LoginComponent.html@11:2

I can conclude that you declared LoginComponent in AppRoutingModule but didn't import MatFormFieldModule there.

Either move LoginComponent to the declarations array of AppModule:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  ...
})
export class AppModule { }

or import MatFormFieldModule or some SharedModule in AppRoutingModule:

@NgModule({
  declarations: [
    LoginComponent,
    ...
  ],
  imports: [
    MatFormFieldModule // or SharedModule that exports MatFormFieldModule
    ...
  ]
  ...
})
export class AppRoutingModule { }

See also:

  • Use component from another module