16

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

Nilson Nieto
  • 324
  • 1
  • 2
  • 7
  • There is [**a bug logged in github against `@angular/material`**](https://github.com/angular/material2/issues/11100) 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 May 04 '18 at 12:45

6 Answers6

29

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

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Newtorn Moses
  • 531
  • 5
  • 13
8

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.

John Willson
  • 444
  • 1
  • 3
  • 13
4

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.

yehuda mazal
  • 39
  • 3
  • I also run "npm install --save @angular/material @angular/cdk", from https://stackoverflow.com/questions/46885008/i-am-new-to-angular-i-just-installed-angular-material-and-angular-animations-in But I think this was because another issue. – yehuda mazal May 04 '18 at 23:02
  • Again, its alot of commands, but it's the way I found to update everything else and not need to downgrade. – yehuda mazal May 04 '18 at 23:03
3

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

Hamdalah
  • 31
  • 2
1

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
ajay verma
  • 340
  • 1
  • 8
-1

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

yehuda mazal
  • 39
  • 3