带有 Angular Material 声明的 Angular 编译警告

Posted 2023-03-13

技术标签:

【中文标题】带有 Angular Material 声明的 Angular 编译警告【英文标题】：Angular Compilation Warnings with Angular Material Declarations 【发布时间】：2019-10-18 09:45:44 【问题描述】：

我在安装Angular Material 后尝试编译时遇到了一堆警告（无论是直接来自npm 还是通过ng add @angular/material，以及我是否选择使用动画）。

它可以在没有任何警告或问题的情况下正常工作。谁能帮帮我？

以下是警告：

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.

只有在我导入材质模块时才会触发：

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

如果没有导入，编译运行顺利... 这是我的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"

当我运行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

这是我正在使用的节点版本：

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

和我的 npm 版本：

git:(master) npm --version
6.9.0

最后当我运行npm audit fix时会发生什么：

failed to run Angular application getting error : Schema validation failed

这可能不相关，但这一切都是在我尝试访问 Hyperledger Composer 并且不知道发生了什么时开始的……我查看了网络，但似乎找不到类似的问题...

提前致谢！

**** 编辑 ***** 尝试更新：

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.

并且做了：

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.

最终将其限制为：

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

我尝试将我的 CLI -g 更新到最新版本：

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

但是当我创建一个新应用程序（测试）时，它出于某种原因创建了一个 7.1.4 应用程序... 所以我再次检查了我的 CLI 版本，显然，它直接回到了 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

【问题讨论】：

我认为答案就在警告中 - npm WARN @angular/cdk@8.0.0 需要 @angular/core@^8.0.0 的同级，您正在使用 Angular Material 版本 8角度版本 7。请同步版本并尝试。嘿用户2216584！我尝试安装角芯等... ^8.0.0 但情况更糟...但我会尝试回到材料 7.3.7。感谢您的快速回答您是否使用 cli 升级？ ng update @angular/cli @angular/core 这会遍历并更新导入语句等。刚刚尝试更新所有内容，但似乎我遇到了问题......请参阅问题中的编辑！谢谢你们的帮助！我不确定为什么我的 CLI 会自行从 8.0.1 切换到 7.1.4... 【参考方案1】：

您需要结合 Reid 和 Jens Mander 的答案

按这个顺序做：

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

在 Angular 材料开始为我工作之后

【讨论】：

如果在更新过程中，您的 Angular 版本从 7 切换到 8，那么您还需要运行以下命令：ng update @angular/cli @angular/core 对于将来使用此解决方案的任何人，请将您的项目更新为 angular 8。此解决方案将抛出 nullinjectError。【参考方案2】：

如果你有 Angular 7，你也应该有 Angular Material Version 7。所以请安装

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

如果您有package.json 文件，请删除node_modules 文件夹，在您的控制台中键入npm install。这应该重新安装所有 node_modules。之后警告就消失了。

【讨论】：

【参考方案3】：

我也有同样的问题，然后我换了angular material的版本。

选项 1:: 您可以使用以下命令来更改您的角度材质版本。

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

您可以在angular material查看所有版本列表

选项 2： 尝试将您的 Angular 版本从 7 更新到 8

【讨论】：

【参考方案4】：

这是一个版本问题。如果您打算使用 Material 8.0.0，那么您将需要同步版本的补充包。请尝试以下操作。

npm update @angular/cli @angular/cdk rxjs

上述命令运行完成后，从Angular Material docs运行以下命令

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

这应该使所有版本的 Angular、Material 和 RxJS 保持同步，并为您在 Angular 8 项目中开始使用 Angular Material 和 RxJS 做好准备。

作为一般的更新检查思路，当您更新 Angular 或任何东西以及相应的包时，这些问题总是会弹出。当拼图的每一部分都经过测试并且稳定时，请尝试在主要版本更新上拉动扳机，就像现在一样，您可以避免陷入依赖地狱，您的应用程序的一部分将不匹配并阻止您继续构建你想要的。

【讨论】：

我安装了 @angular/core 版本 8.0.0。 npm view @angular/core 报告 8.0.0，但我的 package.json 仍然将它与版本 7.2.15 一起列出，并且我仍然从原始帖子中得到错误。我需要做任何额外的事情吗？为什么 package.json 没有更新？谢谢好吧，我不知道，我做了什么，但以下帮助：npm uninstall @angular/core 然后 npm install @angular/core。 package.json 被修改了。【参考方案5】：

只需在 package.json 中进行一些更改：

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

这些应该与您的角度版本相匹配。

【讨论】：

【参考方案6】：

解决这个问题的一般方法：

列出项目包的当前版本和最新可用版本：

npm install -g npm-check-updates
ncu

验证您需要升级/退出/降级的版本。

升级 ncu 命令列出的所有版本（这只是编辑 package.json 文件）：

ncu -u

如果需要降级软件包，请使用以下命令找到所需的版本：

npm view <package> versions

然后，手动编辑 package.json 文件以配置所需的版本。

运行 npm install 以更新已安装的软件包和 package-lock.json。

最后，根据调试过程，如果控制台提示有任何额外的版本要求，您可以安装特定的版本：

npm install <package>@<version>

【讨论】：

【参考方案7】：

在@angular CLI-CDK-rxjs 的系统问题中。

使用以下命令将解决您的问题。

npm update @angular/cli @angular/cdk rxjs

【讨论】：

这与this other answer（和其他）中的解决方案相同。【参考方案8】：

首先通过运行以下命令卸载当前版本的angular cli：-

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

这将安装最新版本的 angular cli，即 8.0。您可以通过运行 ng --version 命令来检查它。

现在通过运行以下命令添加材料设计包：-

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

现在构建您的应用程序，它将删除所有警告。

希望它会有所帮助。

【讨论】：

以上是关于带有 Angular Material 声明的 Angular 编译警告的主要内容，如果未能解决你的问题，请参考以下文章

Angular6 Material - 使用带有自定义 ErrorStateMatcher 的输入的 Stepper

在带有 @angular/cdk-experimental 的 Angular Material 2 表中使用虚拟滚动

带有 ControlValueAccessor 和 formControlName 的 Angular Material Datepicker [重复]

带有 Angular Material 动态高度标签的可滚动内容元素

Angular Material Icon 不在带有 Cordova 的 Android 应用程序中居中

带有 ui-router 的 angular-material 中每个选项卡的单独控制器