title: 'mat-form-field' is not a known element - Angular 5 & Material2
body: <p>I'm trying to use <code>&lt;mat-form-field&gt;</code> in an Angular project using Material2 but I've hit a wall.</p>
  
  <p>Getting the error message below.</p>
  
  <pre class="lang-none prettyprint-override"><code>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)
  </code></pre>
  
  <p>This is my code I've got.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>search.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
     &lt;input matInput placeholder="Simple placeholder" required&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><strong>search.component.ts</strong></p>
  
  <pre><code>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() {
    }
  
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>