Tuesday, June 20, 2017

Angular 4–Visual Studio 2017 - error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'. Property 'disabled' is missing in type 'MdButton'.

After upgrading to Angular 4, my Visual Studio turned red from all the TypeScript errors.

Some samples:

/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.
The strange thing was, that when I used the Angular CLI and ng build(or serve) no errors appeared and everything seemed to work. 
I first tried to remove my node_modules folder and do a clean install –> didn’t help Sad smile
Then I removed my globally installed node_modules and reinstalled them as well –> didn’t help Sad smile
Then I upgraded my TypeScript version and the related Visual Studio tooling –> didn’t help Sad smile
In the end I found a solution that worked for me here, I had to update to Visual Studio 2017 Update 15.2. I don’t understand why upgrading an Angular version will get Visual Studio into trouble. I hope this experience will improve as I will become hesitant to upgrade Angular in the future.
Remark: Afterwards I noticed that a colleague already sent me an email telling me to update my Visual Studio before upgrading. Better read my mails next time… Confused smile

No comments: