What is the fix to the following error while importing MatDialog component?

Question

For the following import

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

I am getting the following error :

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

Package.json file

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

Any fix suggestions ?

Please add which version you're using `@angular/material` and `@angular/core`? — yurzui, Jan 15 '19 at 11:42
@trichetriche : You mean the code ? I just installed material.io packages and begun with importing the MatDialog and it immediately threw the error upon compilation. — Devanshu Kashyap, Jan 15 '19 at 11:43
`ElementRef `became generic only in @angular/core@6.0.0. So you have to use at least 6 version but I would advice you using the same version as @angular/material — yurzui, Jan 15 '19 at 11:50
@yurzui : thanks for pointing out. Is there any lower version of material for popup design utility ? Any documentation links — Devanshu Kashyap, Jan 15 '19 at 11:53
There are docs like https://v6.material.angular.io/ for 6.4.7 and https://v5.material.angular.io/ for 5.2.5 — yurzui, Jan 15 '19 at 11:55
Possible duplicate of [Type 'ElementRef' is not generic](https://stackoverflow.com/questions/49899641/type-elementref-is-not-generic) — Abhishek Kumar, Jan 15 '19 at 12:18

score 1 · Accepted Answer · answered Jan 15 '19 at 13:32

As @yuezui has pointed, ElementRef is now a generic property and that you should use the same versions of the Angular CDK/Material and Angular.

You're also using dependencies of different versions. Angular Material v7 should ideally be installed alongside Angular v7.

(P.S. The following answer is adapted from this answer)

You should either:

Update all versions of Angular.

This can be done by running ng update @angular/core which should update all Angular dependencies.

(For more info about the update command, check out the docs, or the Update Angular website)
Downgrade your version of the Angular CDK and Angular Material to v4.

This can be achieved by running the following command:
```
npm i @angular/{cdk,material}@'^4.0.0'
```
This command should install version 4 of the CDK and Angular Material.

What is the fix to the following error while importing MatDialog component?

1 Answers1