'mat-form-field' is not a known element - Angular 5 & Material2

You're only exporting it in your NgModule, you need to import it too

@NgModule({  imports: [    MatButtonModule,    MatFormFieldModule,    MatInputModule,    MatRippleModule, ]  exports: [    MatButtonModule,    MatFormFieldModule,    MatInputModule,    MatRippleModule,  ],  declarations: [    SearchComponent,  ],})export class MaterialModule {};

better yet

const modules = [        MatButtonModule,        MatFormFieldModule,        MatInputModule,        MatRippleModule];@NgModule({  imports: [...modules],  exports: [...modules]  ,})export class MaterialModule {};

update

You're declaring component (SearchComponent) depending on Angular Material before all Angular dependency are imported

Like BrowserAnimationsModule

Try moving it to MaterialModule, or before it

You're trying to use the MatFormFieldComponent in SearchComponent but you're not importing the MatFormFieldModule (which exports MatFormFieldComponent); you only export it.

Your MaterialModule needs to import it.

@NgModule({  imports: [    MatFormFieldModule,  ],  exports: [    MatButtonModule,    MatFormFieldModule,    MatInputModule,    MatRippleModule,  ],  declarations: [    SearchComponent,  ],})export class MaterialModule { }

When using the 'mat-form-field' MatInputModule needs to be imported also

import {     MatToolbarModule,     MatButtonModule,    MatSidenavModule,    MatIconModule,    MatListModule ,    MatStepperModule,    MatInputModule} from '@angular/material';