将 Angular 材质添加到现有 Angular 7 应用程序时出错答案

【问题标题】：Error Adding Angular Material to Existing Angular 7 App将 Angular 材质添加到现有 Angular 7 应用程序时出错
【发布时间】：2019-10-14 23:43:59
【问题描述】：

我正在尝试将 Angular Material 添加到我现有的 Angular 7 应用程序中，以便我可以使用 MatDialogModule。我不断收到以下错误：

./node_modules/@angular/cdk/esm5/a11y.es5.js 中的警告 2324:55-73 在“@angular/core”中找不到导出“ɵɵdefineInjectable”

以下是我的 app.module.ts 和 package.json 的相关部分

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';

 ...

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    [BrowserAnimationsModule],
    MatDialogModule,
  ],

```json

  "dependencies": {
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.5",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.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": "~4.0.0",
    "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.2.2"
  }

【问题讨论】：

这可能是由于版本不匹配而发生的，您使用的是 Angular Material 版本 8，而对于 Angular，您使用的是 7，请降级 Angular Material 版本或升级 Angular 应用程序。
即使更改以下内容，我也会收到相同的错误：“@angular/cdk”：“^7.0.0”，“@angular/material”：“^7.0.0”，跨度>

标签： angular angular-material

【解决方案1】：

删除您的 ./nodule_modules 文件夹并运行

 npm init

【讨论】：

【解决方案2】：

我也有同样的问题，我使用的是@angular/core@7.2.0 和@angular/material@8.0.0 和@angular/cdk@8.0.0。

我知道您提到了降级材料和 cdk，但您的核心版本可能不匹配。通过确保所有 3 个都是 ~7.2.0，并在浏览器模块之后正确导入材料，我能够让应用程序运行。

【讨论】：

【解决方案3】：

当你运行时我遇到了完全相同的问题

npm 安装

您应该会看到一些警告，说您需要安装另一个软件包才能使 Angular Material 工作。就我而言，我必须运行

npm i @angular/core@^8.0.0

希望这会有所帮助。

【讨论】：

【解决方案4】：

如果您要升级站点，请务必通过 ng update 更新所有依赖项，如果问题仍然存在，您可能需要删除 node_modules 文件夹并使用 npm install 重新安装它们以确保有他们没有问题。
编码愉快！

【讨论】：

【解决方案5】：

"@angular/cdk": "^8.0.0"，应该改为你的角度版本。默认安装最新版本。

【讨论】：