title: How to add safely Angular Material to an existing angular application?
body: <p>I'm trying to add Angular Material to my application. I installed Material components using this npm command </p>
  
  <p><strong>npm install --save @angular/material @angular/animations @angular/cdk</strong></p>
  
  <p>I had to update all my angular components to 7.0.2 version.
  I added a new material module and referenced it from my app.module.js</p>
  
  <p>material.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import {
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  } from '@angular/material';
  
  @NgModule({
    imports: [
      MatButtonModule,
      MatMenuModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule
    ],
    exports: [
      MatButtonModule,
      MatMenuModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule
    ]
  })
  export class MaterialModule {}
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule } from '@angular/http';
  import { FormsModule } from '@angular/forms';
  
  import { AppComponent } from "./app.component";
  import { AppRoutingModule } from "./app-routing.module";
  
  import { MaterialModule } from './material.module';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  
  
  @NgModule({
      imports: [BrowserModule, AppRoutingModule, HttpModule, FormsModule, MaterialModule, BrowserAnimationsModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  
  })
  export class AppModule { }
  </code></pre>
  
  <p>Here is my package.json</p>
  
  <pre><code>{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
      "@angular/animations": "^7.0.2",
      "@angular/cdk": "^7.0.2",
      "@angular/common": "~7.0.2",
      "@angular/compiler": "~7.0.2",
      "@angular/core": "~7.0.2",
      "@angular/forms": "~7.0.2",
      "@angular/http": "~7.0.2",
      "@angular/material": "^7.0.2",
      "@angular/platform-browser": "~7.0.2",
      "@angular/platform-browser-dynamic": "~7.0.2",
      "@angular/router": "~7.0.2",
      "angular-in-memory-web-api": "~0.3.0",
      "angular-material": "^1.1.10",
      "core-js": "^2.4.1",
      "hammerjs": "^2.0.8",
      "rxjs": "^5.4.2",
      "systemjs": "0.19.40",
      "typescript": "^3.1.6",
      "typings": "^2.1.1",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@types/jasmine": "2.5.36",
      "@types/node": "^6.0.46",
      "canonical-path": "0.0.2",
      "concurrently": "^3.2.0",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.16.4",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "tslint": "^3.15.1"
    },
    "repository": {}
  }
  </code></pre>
  
  <p>I cleaned node_modules and reinstalled everything to make I have all latest files. When I try to build my project I get all kind of errors. Mainly errors come from **\@angular\core** or **\@angular\common**</p>
  
  <p>I spent too many hours and obviously I'm missing something because it shouldn't be so complicated. </p>
  
  <p><a href="https://i.stack.imgur.com/xUuzu.png" rel="nofollow noreferrer">"errors"</a></p>