Question

对于以下导入

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

有任何修复建议吗？

Answer 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材质的版本降级到v4。

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

导入MatDialog组件时，以下错误的解决方法是什么？

1 个答案: