10

I am trying to use @angular/materials in my app and it is compiling successfully, however I am getting the following error: 

webpack: Compiled successfully.
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.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(53,15): error TS2315: Type 'ElementRef' is not generic.
node_modules/@angular/material/slide-toggle/typings/slide-toggle.d.ts(55,18): error TS2315: Type 'ElementRef' is not generic.

This does not seem to be a common problem, does anyone have any idea how to resolve?

Using:

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 6.0.0-rc.14-29bf024
@angular/cli: 1.7.4
@angular/material: 6.0.0-rc.14-29bf024
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
Zooly
  • 4,736
  • 4
  • 34
  • 54
MRDJR97
  • 818
  • 2
  • 10
  • 27

4 Answers4

14

You're using @angular/material and @angular/cdk 6RC versions (6.0.0-rc.14-29bf024), which probably depend on Angular version 6.

Either downgrade the @angular/material package to latest stable version (if you're building directly for production) or try upgrading angular to the 6.0.0-rc.6 version (if you're aiming your release after the angular 6 stable comes out).

kvetis
  • 6,682
  • 1
  • 28
  • 48
  • 2
    The default versions of _material_ and _cdk_ are for Angular 6 and don't work with Angular 5. If upgrading Angular is not an option, downgrading the packages should work. I did: `npm install --save @angular/material@5.2.4` and `npm install --save @angular/cdk@5.2.4`. (I think it's just a coincidence that the latest version 5's of material and cdk are both 5.2.4). – Oscar Bravo Jun 05 '18 at 12:25
  • I don't think it is a coincidence since they're developed together. – kvetis Jun 05 '18 at 13:43
13
npm uninstall @angular/material  --save
npm install @angular/material@5.2.4 --save

It worked for me.

Angular version is 5.2.1.

progm
  • 2,782
  • 3
  • 14
  • 32
Biswadev
  • 1,456
  • 11
  • 24
  • 1
    if anyone using sdk and animations with that then install both their version as 5.2.1 as well. – Dhiren Aug 14 '19 at 09:04
0

It is a dependencies issue, need to re-install dependencies.

In package.json match your angular version with "@angular/material", it should be similar. Then run 

npm install
Naresh Singh
  • 19
  • 4
0

We were having the same issue. Upgrading Angular to 6 is not yet an option for us, as we have a dependency that does not support anything over Angular 5 (currently rethinking that dependency). Taking Material down to version 5 was an option, but not ideal, because the reason we went to 6 was it fixed a pretty nasty bug on material tabs.

What worked for us was to upgrade Node to 8.10. I'm not sure why that resolved it, but it did.

Hope it helps.

jdawg73
  • 76
  • 4