35

I've experiencing a bunch of warnings when trying to compile after installing Angular Material (whether directly from npm or via ng add @angular/material and whether I choose to use the animations or not).

It use to work without any warning or issues. Anyone can help me?

Here are the warnings: 

git:(master) ✗ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-06-02T16:53:30.127Z
Hash: 790c60ed1be271555fcc
Time: 13875ms
chunk {main} main.js, main.js.map (main) 10.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 181 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.73 MB [initial] [rendered]

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:55-73
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/datepicker.es5.js 101:59-77
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/paginator.es5.js 80:58-76
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:53-71
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/sort.es5.js 412:59-77
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/stepper.es5.js 61:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 38:65-83
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 195:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 456:55-73
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 1361:62-80
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:58-76
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/core.es5.js 1452:59-77
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:54-72
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js 102:50-68
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js 88:54-72
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js 314:60-78
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/collections.es5.js 524:67-85
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:58-76
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2338:55-73
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:63-81
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 824:67-85
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 930:58-76
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4167:64-82
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 5042:68-86
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 456:145-153
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:217-225
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 1361:166-174
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:240-248
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:154-162
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:186-194
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2038:204-212
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:139-147
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:145-153
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:188-196
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:148-156
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:226-234
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:158-166
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:142-150
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2956:160-168
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:183-191
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/platform.es5.js 102:130-138
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:203-211
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js 88:142-150
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:233-241
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js 314:160-168
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/layout.es5.js 314:184-192
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/snack-bar.es5.js 1049:260-268
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:171-179
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:154-162
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 663:172-180
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:167-175
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2338:145-153
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/scrolling.es5.js 2338:165-173
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/bottom-sheet.es5.js 829:187-195
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:169-177
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:197-205
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:222-230
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:240-248
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/bidi.es5.js 91:148-156
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 824:181-189
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:151-159
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 930:154-162
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:176-184
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4167:172-180
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4167:197-205
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4167:217-225
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 4167:237-245
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/observers.es5.js 195:151-159
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 5042:184-192
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/material/esm5/icon.es5.js 1027:200-208
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:151-159
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:206-214
"export 'ɵɵinject' was not found in '@angular/core'
ℹ ｢wdm｣: Compiled with warnings.

This is triggered only if I import a Material Module: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NoopAnimationsModule,
    MatMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If there's no import, the compilation runs smoothly... and here's my package.json: 

{
  "name": "central-dev",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "~8.0.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

Here's what happens when I run npm install: 

git:(master) npm install 
npm WARN @angular/cdk@8.0.0 requires a peer of @angular/core@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@8.0.0 requires a peer of @angular/common@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@8.0.0 requires a peer of @angular/animations@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@8.0.0 requires a peer of @angular/core@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@8.0.0 requires a peer of @angular/common@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@8.0.0 requires a peer of @angular/forms@^8.0.0 || ^9.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

audited 40200 packages in 6.883s
found 3 vulnerabilities (2 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Here's the node version I'm using: 

git:(master) ✗ node --version
v10.16.0

and my npm version: 

git:(master) npm --version
6.9.0

and finally what happens when I run npm audit fix:

failed to run Angular application getting error : Schema validation failed

It might not be related but it all started when I tried to take a go at Hyperledger Composer and have no idea what is happening... I've looked the web, but I can't seem to find a similar issue...

Thanks in advance!

**** EDIT ***** Tried to update: 

git:(master) ng update
^[[C^[[A    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       7.1.4 -> 8.0.1           ng update @angular/cli
      @angular/core                      7.1.4 -> 8.0.0           ng update @angular/core
      rxjs                               6.3.3 -> 6.5.2           ng update rxjs


    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

and did: 

centralDev git:(master) ng update --all
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.1")
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.1")
                  Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.1").
Incompatible peer dependencies found. See above.

to finally limit it to: 

git:(master) ng update @angular/cli @angular/core
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    packageGroup metadata of package @angular/cli is malformed. Ignoring.
    Updating package.json with dependency @angular/compiler @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/common @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/language-service @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/animations @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/core @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/compiler-cli @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/forms @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.29")...
    Updating package.json with dependency @angular/platform-browser @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency rxjs @ "6.5.2" (was "6.3.3")...
    Updating package.json with dependency @angular/router @ "8.0.0" (was "7.1.4")...
    Updating package.json with dependency @angular/cli @ "8.0.1" (was "7.1.4")...
    Updating package.json with dependency typescript @ "3.4.5" (was "3.1.6")...
UPDATE package.json (1373 bytes)

> @angular/cli@8.0.1 postinstall /Users/ardzii/Documents/Angular/centralDev/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN @ngtools/webpack@7.1.4 requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.1.4 requires a peer of typescript@>=2.4.0 < 3.2 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/compiler@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/core@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.

added 51 packages from 22 contributors, removed 44 packages, updated 28 packages, moved 1 package and audited 27777 packages in 142.377s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
    ** Executing migrations for package '@angular/cli' **
DELETE src/browserslist
CREATE browserslist (388 bytes)
UPDATE tslint.json (2819 bytes)
UPDATE package.json (1375 bytes)
UPDATE src/polyfills.ts (2838 bytes)
UPDATE tsconfig.json (438 bytes)
UPDATE src/tsconfig.app.json (166 bytes)
UPDATE src/tsconfig.spec.json (256 bytes)
added 46 packages from 31 contributors, removed 117 packages, updated 93 packages, moved 13 packages and audited 18839 packages in 55.466s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
    ** Executing migrations for package '@angular/core' **
            ------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            ------------------------------------------------

I tried to update my CLI -g to the latest version: 

centralDev git:(master) ✗ npm update angular-cli -g
➜  centralDev git:(master) ✗ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.1
Node: 10.16.0
OS: darwin x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

But when I created a new app (test) it created a 7.1.4 app for some reason... So I checked my CLI version again and it went, apparently, straight back to 7.1.4: 

git:(master) ✗ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 10.16.0
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cdk                      8.0.0
@angular/material                 8.0.0
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack
Ardzii
  • 1,013
  • 2
  • 16
  • 35
  • 3
    I think the answer is there in the warning - npm WARN @angular/cdk@8.0.0 requires a peer of @angular/core@^8.0.0, you are using angular material version 8 with angular version 7. Please sync the versions and try. – user2216584 Jun 02 '19 at 17:11
  • Hey user2216584! I tried to install angular core etc... ^8.0.0 but it was even worse ... But I'll try to get back to material 7.3.7. Thanks for your quick answer – Ardzii Jun 02 '19 at 17:13
  • 2
    Did you upgrade using the cli? ```ng update @angular/cli @angular/core``` This goes through and updates import statements, etc. – Jesse Jun 02 '19 at 17:18
  • 1
    Just tried to update all and it seems I'm experiencing issues... see the edit in the question! Thanks for your help guys! – Ardzii Jun 02 '19 at 17:22
  • I'm not sure to get why my CLI is switching on its own from 8.0.1 to 7.1.4... – Ardzii Jun 02 '19 at 17:35

8 Answers8

50

You will need to combine answers from Reid as well from Jens Mander

Do it in this order:

npm update @angular/cli @angular/cdk rxjs
npm install -S @angular/material @angular/cdk @angular/animations
npm uninstall @angular/core
npm install -S @angular/core

After Angular meterials started work for me

x-magix
  • 1,550
  • 11
  • 14
  • 2
    If during the update, your angular version switched from 7 to 8, then you need to also run the following command: ng update @angular/cli @angular/core – Hedeshy Jul 09 '19 at 10:59
  • 1
    For anyone coming to this solution in the future, please update your project to angular 8. This solution will throw nullinjectError. – Suraj Khanal Nov 04 '19 at 17:49
11

If you have Angular 7, you should have Angular Material Version 7 too. So please install

npm install @angular/material@7.3.7 
npm install @angular/cdk@7.3.7

If you have a package.json-file delete the node_modules folder, an in your console type npm install. This should reinstall all your node_modules. After that the warnings were gone.

MAESTRO_DE
  • 381
  • 1
  • 14
9

I also have the same problem, then I changed the version of angular material.

Option 1 :: you can use the following commands to change your angular material version.

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

you can check all the list of versions at angular material

Option 2: Try updating your angular version from 7 to 8

Prakash Dontha
  • 107
  • 2
7

This is a versioning issue. If you're aiming to use Material 8.0.0, then you will need synchronized versions of complementary packages. Try the following.

npm update @angular/cli @angular/cdk rxjs

After the above command completes running, run the following from the Angular Material docs

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

This should keep all the versions of Angular, Material and RxJS in sync and ready for you to start using Angular Material and RxJS in an Angular 8 project.

As a general update check idea, when you're updating Angular or anything along with corresponding packages, these sorts of issues pop up all the time. Try pulling the trigger on major version updates when each piece of the puzzle is tested and stable, like it is now, and you can avoid being stuck in a dependency hell where a piece of your application will be mismatched and hold you back from continuing to build what you want.

Reid
  • 71
  • 2
  • I installed @angular/core Version 8.0.0. npm view @angular/core reports 8.0.0, but my package.json still lists it with version 7.2.15 and I still get the errors from the original post. Do I have to do anything extra? Why isn't package.json updated? thx – Jens Mander Jun 03 '19 at 21:01
  • 3
    Okay, I didn't know, what I did, but the following helped: npm uninstall @angular/core and then npm install @angular/core. package.json got modified. – Jens Mander Jun 04 '19 at 02:27
5

just make some changes in package.json:

@angular/cdk": "^7.0.3"
@angular/material": "^7.0.3"

These should be match with your angular version.

Vishal
  • 89
  • 1
  • 2
  • 12
0

A general way to solve this problem:

  1. List current versions and latest available versions of project packages:

    npm install -g npm-check-updates
ncu

  2. Verify which versions you will need to upgrade / leave / degrade.

  3. To upgrade all the versions listed by the ncu command (this just edits the package.json file):

    ncu -u

  4. If it is necessary to degrade a package, locate the required versions with the command:

    npm view <package> versions

  5. Then, edit the package.json file by hand to configure the required versioning.

  6. Run npm install to update your installed packages and package-lock.json.

  7. Finally, depending on the debug process, and if the console indicates any additional version requirement, you can install specific versions:

    npm install <package>@<version>

Alejandro Araujo
  • 311
  • 1
  • 7
0

In your system issue with @angular CLI-CDK-rxjs.

Use following command will solved your issue.

npm update @angular/cli @angular/cdk rxjs
Ishwar Venugopal
  • 816
  • 4
  • 13
Popat Karkhile
  • 1
-2

First uninstall the current version of angular cli by running the following commands :-

      npm uninstall -g @angular/cli
      npm cache clean
      npm install -g @angular/cli`

This will install the latest version of angular cli i.e. 8.0. you can check it by running ng --version command .

Now add the material design package by running the following commands :-

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

Now build you application it will remove all the warnings.

Hope it will help.

Sunny Goel
  • 1,169
  • 10
  • 16