Components: Latest Material2 Types Incorrectly Implement 'CanDisable'

[LilSebastian5000]

Bug, feature request, or proposal:

Since upgrading material beta from 2.0.0-beta.3 to 2.0.0-beta.4, I'm getting multiple errors for button.d.ts, checkbox.d.ts, radio.d.ts, slide-toggle.d.ts, and slider.d.ts when building.

What is the expected behavior?

The application should build fine with no errors.

What is the current behavior?

When building, I'm getting errors similar to this:

/node_modules/@angular/material/typings/button/button.d.ts(40,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButton'.

/node_modules/@angular/material/typings/button/button.d.ts(40,39): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButtonBase' is not a constructor function type.

These errors are the same for all 5 components mentioned at the top of this issue.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.2, Material 2.0.0-beta.4, Windows 7 & 10, Chrome

Is there anything else we should know?

I have made sure to remove the deprecated "forRoot()", and I do not use HttpModule from MdIconModule, which are the only breaking changes listed in the changelog.

[willshowell]

What typescript version?

[willshowell]

Related https://github.com/angular/material2/issues/610 and https://github.com/angular/material2/pull/3944

[jelbourn]

Forgot to add this to the changelog: this now requires TypeScript 2.2

[amrinder-pal-singh]

thanks it helped me also guys

[YashGajera]

What is the solution for this issue?

[jelbourn]

Use TypeScript version >= 2.2

[YashGajera]

I'm using typescript 2.3.2 & not using the MaterialModule. Still getting the error for 5 material components. I'm Using beta 5

[ASM-SE]

I have the same problem here. I´m using the latest version.

[LilSebastian5000]

@jelbourn This issue was definitely fixed for me by upgrading to TypeScript version 2.2.2 :+1: .

But maybe >= 2.3 brings the issue back, based on the above replies?

[YashGajera]

yep, I tried creating new project with everything on latest version and still getting this error.
Typescript 2.3.2
material 2 beta 5

--update
I tried beta 4 and typescript 2.2.2 still not working. Beta 3 works for me. I'm sure I am missing something here.
-Angular 4.1.0, Material 2.0.0-beta.4, Typescript 2.2.2

• Not using forRoot()
• Not using HttpModule from MdIconModule

[Sree-001]

I am using typescript 2.2.2 and still getting the same error.

[jelbourn]

I can successfully build material.angular.io w/ beta.5 and both TypeScript 2.2 and 2.3. I suspect lingering problems are individual environment setup issues (perhaps a stale global typescript)

[ASM-SE]

Here it´s ok now:

"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22",
"angular-in-memory-web-api": "~0.3.0",
"angular2-cookie": "^1.2.6",
"angular2-toaster": "^3.0.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"moment": "^2.18.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "^2.3.2"
},

[YashGajera]

Any one who is getting this error and using visual studio IDE. Just update visual studio to version 15.2 and confirm you have Typescript version 2.2.0 in visual studio.

[sreenathkurpad123]

Problem with this error still persists in angular 4.1.x, material2.0.0-beta 6.

I installed angular material following step by step directions in https://material.angular.io/guide/getting-started. After completing all the steps, I compiled the application in Visual studio 2015 and I got below errors. Please suggest a solution to resolve this problem. Its quite frustrating!!!
1.TS2420 Class 'MdButton' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdButton'.
2.Class 'MdCheckbox' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdCheckbox'.
3.TS2420 Class 'MdRadioGroup' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdRadioGroup'.
4.TS2420 Class 'MdSlider' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdSlider'.
5.TS2420 Class 'MdSlideToggle' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdSlideToggle'.
6.TS2507 Type '(new (...args: any[]) => CanDisable) & typeof MdButtonBase' is not a constructor function type.
7.Type '(new (...args: any[]) => CanDisable) & typeof MdCheckboxBase' is not a constructor function type.

Here is my dev environment:
IDE: Visual Studio 2015 Update 3
Typescript version: 2.2.1 (same error with 2.3.x)
package.json:
"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/compiler-cli": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/material": "^2.0.0-beta.6",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/platform-server": "^4.1.3",
"@angular/router": "^4.1.3",
"angular-in-memory-web-api": "~0.3.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"typescript": "^2.3.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.2.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
},

[kittycatbytes]

I am also getting this error, using Visual Studio 2017 and I have the latest TypeScript

[stevenlauwers22]

Updating VS2017 to version 15.2 did the trick for me.

[hthimz]

I am getting the same error .
I am using atom.

<>

"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/*/.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/material": "^2.0.0-beta.7",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.3.2",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
},
"repository": {}
}

Any Help would be great !

[ravikumarbggit]

I could resolve this by uninstalling typescript

>npm uninstall typescript -g
>npm uninstall typescript

I did this repeatedly until npm start throws below error
'tsc' is not recognized as an internal or external command,

then I installed latest typescript

>npm install -g typescript

Later npm install worked fine for me

[christian-vorhemus]

Got this working with
"@angular/material": "^2.0.0-beta.3" (2.0.0-beta.7 caused errors)
and
"typescript": "^2.2.0"

with VS 2017 v15.2

[danimal521]

VS 15.2 worked for me as well..

[kittycatbytes]

I finally got 15.2 installed and accepted the notification to update my project with the latest typings and this resolved the errors for me.

[nullmicgo]

i also got this error
Property 'disabled' is missing in type 'MatOptgroup'.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}