How do I fix building errors with Angular Material Components?

Question

Am I missing something in the configuration?

ng Version command

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

Repro steps

Step 1 Create new project ng new any-name Step 2 By following steps on https://material.angular.io/guide/getting-started i.e

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

Step 3

Material.module.ts

import {MatButtonModule,
        MatCheckboxModule} from '@angular/material';
 @NgModule({
   imports: [MatButtonModule, MatCheckboxModule],
 })
 export class MaterialModule { }

app.component.html

<div>
  <input type="button" mat-button placeholder="Holla!">

  <button mat-raised-button >Click me!</button>
  <mat-checkbox>Check me!</mat-checkbox>
</div>

App.module.ts

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 { }

styles.css

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Observed behavior

compiler.js:485 Uncaught Error: Template parse errors: 'mat-checkbox' is not a known element:

1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.

2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

   Click me! [ERROR ->]Check me!

   "): 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

Desired behavior

What would like to see implemented? It should load the angular material components.

Package.json

{
  "name": "mat-learn",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Main.ts

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 => console.log(err));

Answer 1

As per the example given here, you also need to export the material modules from your shared material module

https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

import {MatButtonModule,
        MatCheckboxModule} from '@angular/material';
 @NgModule({
   imports: [MatButtonModule, MatCheckboxModule],
   exports: [MatButtonModule, MatCheckboxModule]
 })
 export class MaterialModule { }

Answer 2

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
add this in style.css