Error TS2315: Type 'ElementRef' is not generic

Question

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

Solution 1

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).

Solution 2

npm uninstall @angular/material  --save
npm install @angular/[email protected] --save

It worked for me.

Angular version is 5.2.1.

Comments

[Oscar Bravo]

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/[email protected] and npm install --save @angular/[email protected]. (I think it's just a coincidence that the latest version 5's of material and cdk are both 5.2.4).

[kvetis]

I don't think it is a coincidence since they're developed together.

[Dhiren]

if anyone using sdk and animations with that then install both their version as 5.2.1 as well.