title: Material Module Components Not Recognized
body: <p>I'm trying to use the Angular Material library but my application doesn't recognize the components.</p>
  
  <p>My app.module.ts</p>
  
  <pre><code>import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  import { NgModule } from "@angular/core";
  import { FormsModule } from "@angular/forms";
  import { HttpClientModule } from "@angular/common/http";
  import { RouterModule } from "@angular/router";
  import { ToastrModule } from 'ngx-toastr';
  
  import { AppComponent } from "./app.component";
  import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
  import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
  
  import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
  
  import { AppRoutingModule } from "./app-routing.module";
  import { ComponentsModule } from "./components/components.module";
  import { MaterialModule } from './material.module';
  
  @NgModule({
    imports: [
      BrowserAnimationsModule,
      FormsModule,
      HttpClientModule,
      ComponentsModule,
      NgbModule,
      RouterModule,
      AppRoutingModule,
      MaterialModule,
      ToastrModule.forRoot()
    ],
    declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>
  
  <p>material.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import {
    MatButtonModule,
    MatFormFieldModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatCheckboxModule,
    MatRippleModule,
    MatSelectModule,
    MatTooltipModule,
    MatProgressBarModule
  } from '@angular/material';
  import { MatMenuModule } from '@angular/material/menu'
  
  @NgModule({
    imports: [
      MatButtonModule,
      MatFormFieldModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatInputModule,
      MatCheckboxModule,
      MatRippleModule,
      MatSelectModule,
      MatTooltipModule,
      MatProgressBarModule,
      MatMenuModule
    ],
    exports: [
      MatButtonModule,
      MatFormFieldModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatInputModule,
      MatCheckboxModule,
      MatRippleModule,
      MatSelectModule,
      MatTooltipModule,
      MatProgressBarModule,
      MatMenuModule
    ]
  })
  
  export class MaterialModule { }
  </code></pre>
  
  <p>and package.json:</p>
  
  <pre><code>{
    "name": "black-dashboard-angular",
    "version": "1.0.0",
    "description": "Black Dasboard Angular, a Creative Tim Desgin. Coded by Creative Tim",
    "scripts": {
      "start": "node server\\index.js",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/creativetimofficial/black-dashboard-angular.git"
    },
    "author": "Creative Tim &lt;hello@creative-tim.com&gt; (https://www.creative-tim.com/)",
    "license": "MIT",
    "bugs": {
      "url": "https://github.com/creativetimofficial/black-dashboard-angular/issues"
    },
    "homepage": "https://demos.creative-tim.com/black-dashboard-angular/#/dashboard",
    "private": false,
    "dependencies": {
      "@angular/animations": "8.0.2",
      "@angular/cdk": "~8.2.3",
      "@angular/common": "8.0.2",
      "@angular/compiler": "8.0.2",
      "@angular/core": "8.0.2",
      "@angular/forms": "8.0.2",
      "@angular/material": "^8.2.3",
      "@angular/platform-browser": "8.0.2",
      "@angular/platform-browser-dynamic": "8.0.2",
      "@angular/router": "8.0.2",
      "@ng-bootstrap/ng-bootstrap": "4.2.1",
      "chart.js": "2.8.0",
      "core-js": "3.1.4",
      "express": "^4.17.1",
      "hammerjs": "^2.0.8",
      "ngx-toastr": "10.0.4",
      "rxjs": "6.5.2",
      "tslib": "1.10.0",
      "zone.js": "0.9.1"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "0.800.3",
      "@angular/cli": "8.0.3",
      "@angular/compiler-cli": "8.0.2",
      "@angular/language-service": "8.0.2",
      "@types/jasmine": "3.3.13",
      "@types/jasminewd2": "2.0.6",
      "@types/node": "12.0.8",
      "codelyzer": "5.1.0",
      "jasmine-core": "3.4.0",
      "jasmine-spec-reporter": "4.2.1",
      "karma": "4.1.0",
      "karma-chrome-launcher": "2.2.0",
      "karma-coverage-istanbul-reporter": "2.0.5",
      "karma-jasmine": "2.0.1",
      "karma-jasmine-html-reporter": "1.4.2",
      "protractor": "5.4.2",
      "ts-node": "8.3.0",
      "tslint": "5.17.0",
      "typescript": "3.4.5"
    }
  }
  </code></pre>
  
  <p>I've tried the solution from <a href="https://stackoverflow.com/questions/49830728/angular-material-modules-are-not-recognized">Angular Material Modules are not recognized</a> but it doesn't worked for me. Can someone help?</p>