Error TS2315: Type 'ElementRef' is not generic material angular

16
votes

ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(136,20):

error TS2315: Type 'ElementRef' is not generic.

node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(154,104):

error TS2315: Type 'ElementRef' is not generic

I'm trying to install material but it looks like that's the mistake.

DATA:

Angular CLI: 1.7.4
Node: 9.11.1
6
javascriptangularangular-material
There is a bug logged in github against @angular/material for exactly this. For us to help you, you should show us your whole package.json, though I suspect the response in the bug I linked will solve your problem. FYI The version of node you run is largely irrelevant for this kind of problem because packages specify which engine version they can run on. - msanford

6 Answers

29
votes

The best way here is to change all your material dependencies to match that of angular for those of you who have angular 5.2.0 follow this

INITIAL

"dependencies": {
  "@angular/core": "^5.2.0",
  "@angular/cdk": "^6.0.1",
  "@angular/material": "^6.0.1"    
}

just change these to whatever the current version of the other angular components are.

FINAL

"dependencies": {
  "@angular/core": "^5.2.0",
  "@angular/cdk": "^5.2.0",
  "@angular/material": "^5.2.0"    
}

THEN do npm install

8
votes

This occurs when all of your angular packagage in one version and material package in another version.

I faced this when my angular package version was 5.2 and material version was 6.0 so i changed the material version back to 5.1 and the issue is fixed.

4
votes

OK, here is how I fixed it: Step one:

  • run npm update -D and npm update -S But I don't think this was necessary, because the problem was stil there.

Step tow:

npm install -g @angular/cli@latest
ng update

The Command complainded that I needed to run (so I did):

ng update @angular/cli

After trying: ng serve I got an error since 'hammerjs' was not installed, so I run (but this might not be your case):

npm install hammerjs --save

and npm install @types/hammerjs --save-dev

I don't understand the point of --save-dev, but I did it this way. Its compiling now.

This last hammerjs thing has been found here: Module not found: Error: Can't resolve 'hammerjs'

Hope this help.

3
votes

I had the same issues but downgrading my @angular/material to version 5.0 worked. You can try that out.

1
votes

This error occurs when there is a mismatch in your angular version and material version. To see the error go to package.json file where you can find the angular version and the material version.

  "dependencies": {
"@angular/animations": "^5.2.0",
"@angular/cdk": "^6.2.1",              //ERROR here the version is 6.x
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^6.2.1",         // ERROR here the material version is 6.x
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"}

},

As you can see in the above package.json file there is mismatch of the version. There are two ways to solve this error:

  1. Upgrade your angular by using command: ng update (this will change your angular versio to 6.x).
  2. Change the version of cdk and material to 5.2.0 manually then enter the command: npm install this will add the material of version 5.2.0
-1
votes

Maybe its related to angular 1.6 that just came out ?

I have the same problem, but just can't figure out how to update the reste of it (instead of downgrade one thing, upgrade everything else thing), but I can't figure it out.

Tried npm update -D and than npm update -S But it did not help.

That idea came from: I am new to angular. I just installed angular material and angular animations in my small project and got some of the errors