title: How do I fix building errors with Angular Material Components?
body: <p>Am I missing something in the configuration?</p>
  <h3>ng Version command</h3>
  <pre><code>Versions
  Angular CLI: 1.7.0
  Node: 8.1.1
  OS: win32 x64
  Angular: 5.2.5
  ... common, compiler, compiler-cli, core, forms, http
  ... language-service, platform-browser, platform-browser-dynamic
  ... router
  
  @angular/animations: 5.2.9
  @angular/cdk: 5.2.4
  @angular/cli: 1.7.0
  @angular/material: 5.2.4
  @angular-devkit/build-optimizer: 0.3.1
  @angular-devkit/core: 0.3.1
  @angular-devkit/schematics: 0.3.1
  @ngtools/json-schema: 1.2.0
  @ngtools/webpack: 1.10.0
  @schematics/angular: 0.3.1
  @schematics/package-update: 0.3.1
  typescript: 2.5.3
  webpack-bundle-analyzer: 2.11.1
  webpack: 3.11.0
  </code></pre>
  <h3>Repro steps</h3>
  <p>Step 1 Create new project ng new any-name
  Step 2  By following steps on <a href="https://material.angular.io/guide/getting-started" rel="nofollow noreferrer">https://material.angular.io/guide/getting-started</a>
  i.e</p>
  <pre><code>npm install --save @angular/material @angular/cdk
  npm install --save @angular/animations
  </code></pre>
  <p>Step 3</p>
  <h3>Material.module.ts</h3>
  <pre><code>import {MatButtonModule,
          MatCheckboxModule} from '@angular/material';
   @NgModule({
     imports: [MatButtonModule, MatCheckboxModule],
   })
   export class MaterialModule { }
  </code></pre>
  <h3>app.component.html</h3>
  <pre><code>&lt;div&gt;
    &lt;input type=&quot;button&quot; mat-button placeholder=&quot;Holla!&quot;&gt;
  
    &lt;button mat-raised-button &gt;Click me!&lt;/button&gt;
    &lt;mat-checkbox&gt;Check me!&lt;/mat-checkbox&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>App.module.ts</h3>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  
  import { AppComponent } from './app.component';
  import {MaterialModule} from '../shared/material.module'
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      MaterialModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <h3>styles.css</h3>
  <pre><code>/* You can add global styles to this file, and also import other style files */
  @import &quot;~@angular/material/prebuilt-themes/indigo-pink.css&quot;;
  </code></pre>
  <h3>Observed behavior</h3>
  <p>compiler.js:485 Uncaught Error: Template parse errors:
  'mat-checkbox' is not a known element:</p>
  <ol>
  <li><p>If 'mat-checkbox' is an Angular component, then verify that it is part of this module.</p>
  </li>
  <li><p>If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (&quot;</p>
  <p>Click me!
  [ERROR -&gt;]Check me!</p>
   "): ng:///AppModule/AppComponent.html@4:2
       at syntaxError (compiler.js:485)
       at TemplateParser.parse (compiler.js:24668)
       at JitCompiler._parseTemplate (compiler.js:34621)
       at JitCompiler._compileTemplate (compiler.js:34596)
       at eval (compiler.js:34497)
       at Set.forEach ()
       at JitCompiler._compileComponents (compiler.js:34497)
       at eval (compiler.js:34367)
       at Object.then (compiler.js:474)
       at JitCompiler._compileModuleAndComponents (compiler.js:34366)
   syntaxError @ compiler.js:485
   TemplateParser.parse @ compiler.js:24668
   JitCompiler._parseTemplate @ compiler.js:34621
   JitCompiler._compileTemplate @ compiler.js:34596
   (anonymous) @ compiler.js:34497
   JitCompiler._compileComponents @ compiler.js:34497
   (anonymous) @ compiler.js:34367
   then @ compiler.js:474
   JitCompiler._compileModuleAndComponents @ compiler.js:34366
   JitCompiler.compileModuleAsync @ compiler.js:34260
   CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
   PlatformRef.bootstrapModule @ core.js:5567
   (anonymous) @ main.ts:11
   ./src/main.ts @ main.bundle.js:59
   __webpack_require__ @ inline.bundle.js:55
   0 @ main.bundle.js:75
   __webpack_require__ @ inline.bundle.js:55
   webpackJsonpCallback @ inline.bundle.js:26
   (anonymous) @ main.bundle.js:1
  </li>
  </ol>
  <h3>Desired behavior</h3>
  <p>What would like to see implemented?
  It should load the angular material components.</p>
  <h3>Package.json</h3>
  <pre><code>{
    &quot;name&quot;: &quot;mat-learn&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build --prod&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;^5.2.9&quot;,
      &quot;@angular/cdk&quot;: &quot;^5.2.4&quot;,
      &quot;@angular/common&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/compiler&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/core&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/forms&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/http&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/material&quot;: &quot;^5.2.4&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/router&quot;: &quot;^5.2.0&quot;,
      &quot;core-js&quot;: &quot;^2.4.1&quot;,
      &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
      &quot;rxjs&quot;: &quot;^5.5.6&quot;,
      &quot;zone.js&quot;: &quot;^0.8.19&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular/cli&quot;: &quot;~1.7.0&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;^5.2.0&quot;,
      &quot;@angular/language-service&quot;: &quot;^5.2.0&quot;,
      &quot;@types/jasmine&quot;: &quot;~2.8.3&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
      &quot;@types/node&quot;: &quot;~6.0.60&quot;,
      &quot;codelyzer&quot;: &quot;^4.0.1&quot;,
      &quot;jasmine-core&quot;: &quot;~2.8.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;~2.0.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
      &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
      &quot;protractor&quot;: &quot;~5.1.2&quot;,
      &quot;ts-node&quot;: &quot;~4.1.0&quot;,
      &quot;tslint&quot;: &quot;~5.9.1&quot;,
      &quot;typescript&quot;: &quot;~2.5.3&quot;
    }
  }
  </code></pre>
  <h3>Main.ts</h3>
  <pre><code>import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import 'hammerjs';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err =&gt; console.log(err));
  </code></pre>