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

Question

Error adding angular material in project

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 design but it looks like that's the issue.

Environment settings: Angular CLI: 1.7.4 & Node: 9.11.1

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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