CODEWITHSUNDEEP
angularangular-materialhyperledger-composer
Martin Carre
Martin Carre

Reputation: 1239

Angular Compilation Warnings with Angular Material Declarations

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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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 [email protected] 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/[email protected] postinstall /Users/ardzii/Documents/Angular/centralDev/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN @ngtools/[email protected] 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/[email protected] requires a peer of typescript@>=2.4.0 < 3.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] 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 [email protected] 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

Upvotes: 35

Views: 59726

Answers (8)

Popat Karkhile
Popat Karkhile

Reputation: 21

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

Use following command will solved your issue.

npm update @angular/cli @angular/cdk rxjs

Upvotes: -1

Sunny Goel
Sunny Goel

Reputation: 2132

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.

Upvotes: -2

Alejandro Araujo
Alejandro Araujo

Reputation: 499

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>

Upvotes: 0

MAESTRO_DE
MAESTRO_DE

Reputation: 475

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

npm install @angular/[email protected] 
npm install @angular/[email protected]

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.

Upvotes: 13

Vishal
Vishal

Reputation: 121

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.

Upvotes: 5

Prakash Dontha
Prakash Dontha

Reputation: 115

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/[email protected]
npm install --save @angular/[email protected]

you can check all the list of versions at angular material

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

Upvotes: 9

x-magix
x-magix

Reputation: 2852

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

Upvotes: 50

Reid
Reid

Reputation: 71

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.

Upvotes: 7

Related Questions