导入 MatDialog 组件时出现以下错误的修复方法是什么？答案

【问题标题】：What is the fix to the following error while importing MatDialog component?导入 MatDialog 组件时出现以下错误的修复方法是什么？
【发布时间】：2019-06-09 10:06:39
【问题描述】：

用于以下导入

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

我收到以下错误：

错误 C:/Users/321806119/TableApp/node_modules/@angular/material/list/typings/list.d.ts (26,31)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/autocomplete/typings/autocomplete.d.ts (83,69)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/line/line.d.ts (20,70)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/line/line.d.ts (28,53)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/option/option.d.ts (64,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/ripple/ripple.d.ts (74,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/ripple/ripple-renderer.d.ts (77,69)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/autocomplete/typings/autocomplete-trigger.d.ts (106,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/autocomplete/typings/autocomplete-origin.d.ts (15,17)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/autocomplete/typings/autocomplete-origin.d.ts (18,17)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/badge/typings/badge.d.ts (52,63)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/bottom-sheet/typings/bottom-sheet-container.d.ts (39,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (151,21)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts (174,104)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/checkbox/typings/checkbox.d.ts (88,20)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/checkbox/typings/checkbox.d.ts (99,29)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/chips/typings/chip-list.d.ts (46,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/chips/typings/chip-list.d.ts (176,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/chips/typings/chip-input.d.ts (24,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/chips/typings/chip-input.d.ts (55,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/datepicker/typings/calendar-body.d.ts (65,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/datepicker/typings/datepicker-input.d.ts (84,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/expansion/typings/expansion-panel.d.ts (59,12)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/grid-list/typings/grid-list.d.ts (32,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/grid-list/typings/grid-tile.d.ts (16,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/grid-list/typings/grid-tile.d.ts (30,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/icon/typings/icon.d.ts (86,29)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/text-field/typings/autofill.d.ts (39,22)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/text-field/typings/autofill.d.ts (49,29)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/text-field/typings/autofill.d.ts (58,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/text-field/typings/autosize.d.ts (37,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/input/typings/input.d.ts (29,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/input/typings/input.d.ts (100,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/core/typings/common-behaviors/common-module.d.ts (9,10)：模块 '"C:/Users/321806119/TableApp/node_modules/@angular/platform-browser/platform-browser"' 没有导出成员“HammerLoader”。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/list/typings/list.d.ts (55,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/list/typings/selection-list.d.ts (62,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/list/typings/selection-list.d.ts (125,27)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/menu/typings/menu-directive.d.ts (110,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/menu/typings/menu-item.d.ts (34,30)：类型“ElementRef”不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/menu/typings/menu-trigger.d.ts (78,46)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/radio/typings/radio.d.ts (184,20)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/sidenav/typings/drawer.d.ts (29,100)：类型“ElementRef”不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/sidenav/typings/drawer.d.ts (86,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/sidenav/typings/drawer.d.ts (188,49)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/sidenav/typings/sidenav.d.ts (12,99)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts (93,20)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/snack-bar/typings/snack-bar-container.d.ts (35,47)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/stepper/typings/stepper.d.ts (145,92)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/stepper/typings/step-header.d.ts (11,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/stepper/typings/step-header.d.ts (12,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/stepper/typings/stepper.d.ts (49,89)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/stepper/typings/step-header.d.ts (36,82)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/table/typings/cell.d.ts (42,54)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/table/typings/cell.d.ts (50,54)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tabs/typings/ink-bar.d.ts (34,30)：类型“ElementRef”不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tabs/typings/tab-body.d.ts (80,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (12,10)：模块 '"C:/Users/321806119/TableApp/node_modules/@angular/platform-browser/platform-browser"' 没有导出成员“HammerLoader”。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tooltip/typings/tooltip.d.ts (89,49)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tree/typings/node.d.ts (18,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tree/typings/node.d.ts (21,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tree/typings/node.d.ts (33,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/material/tree/typings/node.d.ts (38,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/tree/typings/nested-node.d.ts (33,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/tree/typings/nested-node.d.ts (42,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/tree/typings/tree.d.ts (90,28)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/tree/typings/tree.d.ts (109,30)：“ElementRef”类型不是通用的。错误 C:/Users/321806119/TableApp/node_modules/@angular/cdk/tree/typings/padding.d.ts (34,95)：类型“ElementRef”不是通用的。

Package.json 文件

{
  "name": "table-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.7",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "ag-grid-angular": "^20.0.0",
    "ag-grid-community": "^20.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.10",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

有什么修复建议吗？

【问题讨论】：

好的，请提供minimal reproducible example
请添加您使用的版本@angular/material和@angular/core？
@tricheriche：你是说代码？我刚刚安装了 material.io 包并开始导入 MatDialog，它在编译时立即抛出错误。
ElementRef became 仅在 @angular/core@6.0.0 中通用。所以你必须使用至少 6 个版本，但我建议你使用与 @angular/material 相同的版本
对于 6.4.7 有像 v6.material.angular.io 这样的文档，对于 5.2.5 有像 v5.material.angular.io 这样的文档

标签： angular angular-material angular-material2

【解决方案1】：

正如@yuezui 所指出的，ElementRef 现在是一个通用属性，您应该使用相同版本的 Angular CDK/Material 和 Angular。

您还使用了不同版本的依赖项。理想情况下，Angular Material v7 应该与 Angular v7 一起安装。

（P.S. 以下答案改编自this answer）

您应该：

更新所有版本的 Angular。

这可以通过运行 ng update @angular/core 来完成，这应该会更新所有 Angular 依赖项。

（有关update 命令的更多信息，请查看docs 或Update Angular website）
将您的 Angular CDK 和 Angular Material 版本降级到 v4。

这可以通过运行以下命令来实现：
```
npm i @angular/{cdk,material}@'^4.0.0'
```
此命令应安装 CDK 和 Angular Material 的第 4 版。

【讨论】：