I recently upgraded to Angular 12 and Angular Material 12 by following the guidelines provided on https://update.angular.io/. However, after the update, I started encountering numerous errors related to Angular Material. Specifically, Visual Studio 2019 shows 71 errors in the Error Window, with one example being:
“Class 'MatButton' incorrectly implements interface 'CanColor'. Type 'MatButton' is missing the following properties from type 'CanColor': color, defaultColor”
Below is an excerpt of a class causing the error:
/**
* Material design button.
*/
export declare class MatButton extends _MatButtonBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
private _focusMonitor;
_animationMode: string;
/** Whether the button is round. */
readonly isRoundButton: boolean;
// More class properties and methods...
}
All the errors seem to be similar, referring to different classes but sharing the same underlying issue. I suspect it might be related to the tsconfig settings, although I couldn't find any relevant information online.
It's worth noting that while these errors appear in the IDE, my Angular app still builds and runs perfectly fine without any issues. Here are excerpts from my tsconfig files:
tsconfig.json
{
"extends": "./tsconfig.base.json"
//"files": [],
//"references": [
// {
// "path": "./src/tsconfig.app.json"
// },
// {
// "path": "./src/tsconfig.spec.json"
// }
//]
}
tsconfig.base.json
{
"compileOnSave": false,
// Compilation options...
}
Tsconfig.app.json
{
"extends": "../tsconfig.base.json",
// Compiler options...
}
Here is an excerpt from my package.json file as well:
{
"name": "hizuko-web-app",
"version": "0.0.0",
// Dependencies...
}
If anyone has insights or suggestions regarding these errors, I would greatly appreciate the help. Thank you!