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

Question

I m trying to use  lt mat-form-field gt  in an Angular project using Material2 but I ve hit a wall   Getting the error message below   Uncaught Error  Template parse errors   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     ERROR - gt   lt mat-form-field gt     lt input matInput placeholder  Simple placeholder  required gt   lt  mat-form-field gt     ng    MaterialModule SearchComponent html 0 0     at syntaxError  compiler js 485      at TemplateParser parse  compiler js 24660      at JitCompiler  parseTemplate  compiler js 34471      at JitCompiler  compileTemplate  compiler js 34446      at eval  compiler js 34347      at Set forEach   lt anonymous gt       at JitCompiler  compileComponents  compiler js 34347      at eval  compiler js 34217      at Object then  compiler js 474      at JitCompiler  compileModuleAndComponents  compiler js 34216    This is my code I ve got   app module ts  import   BrowserModule   from   angular platform-browser   import   NgModule  CUSTOM ELEMENTS SCHEMA   from   angular core   import   FormGroup  FormControl  FormsModule  ReactiveFormsModule   from   angular forms    import   HttpModule   from   angular http   import   HttpClientModule   from   angular common http    import     MatButtonModule    MatFormFieldModule    MatInputModule    MatRippleModule   from   angular material   import   BrowserAnimationsModule   from   angular platform-browser animations    import   AppComponent   from    app component   import   YahooService   from    yahoo service   import   SearchComponent   from    search search component     NgModule     exports        MatButtonModule      MatFormFieldModule      MatInputModule      MatRippleModule         declarations        SearchComponent          export class MaterialModule       NgModule     declarations        AppComponent        imports        MaterialModule      BrowserModule      BrowserAnimationsModule      FormsModule      HttpModule      HttpClientModule         providers        YahooService         bootstrap        AppComponent         schemas        CUSTOM ELEMENTS SCHEMA          export class AppModule       search component html   lt mat-form-field gt      lt input matInput placeholder  Simple placeholder  required gt   lt  mat-form-field gt    search component ts  import   Component  OnInit   from   angular core   import   FormBuilder  FormGroup   from   angular forms     Component     selector   app-search     templateUrl     search component html     styleUrls      search component css      export class SearchComponent implements OnInit      options  FormGroup     constructor fb  FormBuilder        this options   fb group         floatLabel   never                  ngOnInit              package json       name    forecast      version    0 0 0      license    MIT      scripts          ng    ng        start    ng serve        build    ng build        test    ng test        lint    ng lint        e2e    ng e2e          private   true     dependencies           angular-devkit schematics    0 0 40         angular animations     5 1 3         angular cdk     5 0 3         angular common     5 1 3         angular compiler     5 1 3         angular core     5 1 3         angular forms     5 1 3         angular http     5 1 3         angular material     5 0 3         angular platform-browser     5 1 3         angular platform-browser-dynamic     5 1 3         angular router     5 1 3        axios     0 17 1        body-parser     1 18 2        core-js     2 5 3        express     4 16 2        node-sass     4 7 2        nodemon     1 14 7        q     1 5 1        rxjs     5 5 6        zone js     0 8 4          devDependencies           angular cli     1 6 3         angular compiler-cli     5 1 3         types jasmine    2 5 38         types node     6 0 60        codelyzer     2 0 0        jasmine-core     2 5 2        jasmine-spec-reporter     3 2 0        karma     1 4 1        karma-chrome-launcher     2 0 0        karma-cli     1 0 1        karma-coverage-istanbul-reporter     0 2 0        karma-jasmine     1 1 0        karma-jasmine-html-reporter     0 2 2        protractor     5 1 0        ts-node     2 0 0        tslint     4 5 0        typescript     2 4 0

User · Answer

the problem is in the MatInputModule   exports        MatInputModule

User · Answer

When using the  mat-form-field  MatInputModule needs to be imported also  import        MatToolbarModule       MatButtonModule      MatSidenavModule      MatIconModule      MatListModule       MatStepperModule      MatInputModule   from   angular material

User · Answer

NgModule     declarations        SearchComponent        exports        CommonModule      MatInputModule      MatButtonModule      MatCardModule      MatFormFieldModule      MatDialogModule         export class MaterialModule       Also  do not forget to import the MaterialModule in the imports array of AppModule

User · Answer

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

User · Answer

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

User · Answer

When using MatAutocompleteModule in your angular application  you need to import Input Module also in app module ts  Please import below   import   MatInputModule   from   angular material

User · Answer

Check the namespace from where we are importing  import   MatDialogModule   from     angular material dialog     import   MatCardModule   from     angular material card     import   MatButtonModule   from     angular material button

User · Answer

I had this problem too  It turned out I forgot to include one of the components in app module ts

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

Examples related to angular

Examples related to typescript

Examples related to angular-material2