'Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected

My app was working fine until I uninstalled bootstrap and installed angular material instead....Then tried to do ng serve but got this error..

Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T; ~~~ node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:69 - error TS1109: Expression expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;

node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:83 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T; ~ node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:85[0m - error TS1128: Declaration or statement expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T; ~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Size styles.css, styles.js | styles | 427.71 kB

4 unchanged chunks

Build at: 2021-05-25T16:53:03.977Z - Hash: 55aee97af2b18f6d0a38 - Time: 523ms

Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;

node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:83 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T; ~~

Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:55 - error TS2304: Cannot find name 'abstract'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                         ~~~~~~~~
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:78 - error TS2693: 'any' only refers to a type, but is being used as a value here.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                ~~~
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:88 - error TS2304: Cannot find name 'T'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                          ~
node_modules/@angular/material/core/option/optgroup.d.ts:17:22 - error TS2420: Class '_MatOptgroupBase' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type '_MatOptgroupBase' but required in type 'CanDisable'.

17 export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisable {
                        ~~~~~~~~~~~~~~~~

  node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5
    12     disabled: boolean;
           ~~~~~~~~
    'disabled' is declared here.
node_modules/@angular/material/form-field/form-field.d.ts:64:22 - error TS2420: Class 'MatFormField' incorrectly implements interface 'CanColor'.
  Type 'MatFormField' is missing the following properties from type 'CanColor': color, defaultColor

64 export declare class MatFormField extends _MatFormFieldMixinBase implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy, CanColor {
                        ~~~~~~~~~~~~
node_modules/@angular/material/input/input.d.ts:30:22 - error TS2420: Class 'MatInput' incorrectly implements interface 'CanUpdateErrorState'.
  Type 'MatInput' is missing the following properties from type 'CanUpdateErrorState': updateErrorState, errorState

30 export declare class MatInput extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges, OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
                        ~~~~~~~~
node_modules/@angular/material/input/input.d.ts:30:22 - error TS2720: Class 'MatInput' incorrectly implements class 'MatFormFieldControl<any>'. Did you mean to extend 'MatFormFieldControl<any>' and inherit its members as a subclass?
  Property 'errorState' is missing in type 'MatInput' but required in type 'MatFormFieldControl<any>'.

30 export declare class MatInput extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges, OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
                        ~~~~~~~~

  node_modules/@angular/material/form-field/form-field-control.d.ts:37:14
    37     readonly errorState: boolean;
                    ~~~~~~~~~~
    'errorState' is declared here.
node_modules/@angular/material/button/button.d.ts:22:22 - error TS2420: Class 'MatButton' incorrectly implements interface 'CanColor'.
  Type 'MatButton' is missing the following properties from type 'CanColor': color, defaultColor

22 export declare class MatButton extends _MatButtonMixinBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~
node_modules/@angular/material/button/button.d.ts:22:22 - error TS2420: Class 'MatButton' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MatButton' but required in type 'CanDisable'.

22 export declare class MatButton extends _MatButtonMixinBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~

  node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5
    12     disabled: boolean;
           ~~~~~~~~
    'disabled' is declared here.
node_modules/@angular/material/button/button.d.ts:22:22 - error TS2420: Class 'MatButton' incorrectly implements interface 'CanDisableRipple'.
  Property 'disableRipple' is missing in type 'MatButton' but required in type 'CanDisableRipple'.

22 export declare class MatButton extends _MatButtonMixinBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption {
                        ~~~~~~~~~

  node_modules/@angular/material/core/common-behaviors/disable-ripple.d.ts:12:5
    12     disableRipple: boolean;
           ~~~~~~~~~~~~~
    'disableRipple' is declared here.
node_modules/@angular/material/toolbar/toolbar.d.tsm:22:22 - error TS2420: Class 'MatToolbar' incorrectly implements interface 'CanColor'.
  Type 'MatToolbar' is missing the following properties from type 'CanColor': color, defaultColor

22 export declare class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterViewInit {
                        ~~~~~~~~~~
node_modules/@angular/material/progress-spinner/progress-spinner.d.ts:40:22 - error TS2420: Class 'MatProgressSpinner' incorrectly implements interface 'CanColor'.
  Type 'MatProgressSpinner' is missing the following properties from type 'CanColor': color, defaultColor

40 export declare class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements OnInit, CanColor {
                        ~~~~~~~~~~~~~~~~~~

Solution 1:^[1]

Solved the issue using the following version of Angular Material npm i @angular/[email protected]

Solution 2:^[2]

I had a similar issue when I was working with angular material on Stackblitz. After a bit of research, I figured out that this is due to the miss-matched version of Angular and Angular Material.

To fix this either update all of the dependencies to the latest version or choose @angular/material that is compatible with your version of Angular.

P.S.

My angular version was 11 and I was using Angular Material 12.
If you get the following error Error in turbo_modules/@angular/[email protected]/table/table-module.d.ts (8:22) disable Ivy. See this question for more details: How to fix Stackblitz ngcc error with Material Design MatTableModule?

Solution 3:^[3]

This is most likely due to a mismatch between TypeScript versions that your local project installs versus the TypeScript version that @angular/material requires. Check which TypeScript version you're on in package.json and see which TypeScript version @angular/material requires.

If your local TypeScript version is behind, you will most likely have to downgrade the version of @angular/material.

Solution 4:^[4]

Faced the same issue. angular/material version is 12 and angular is 11. Downgraded angular/material to 11 and it started working.

Solution 5:^[5]

For me, it was a TypeScript version mismatch in package.json and VS TypeScript Extension.

package.json - 4.3.5

Project -> Properties -> TypeScript Build - 4.1

Then I went to VS Menu: Extensions -> Manage Extensions -> Search and install the version as a package.json file and restart VS.

The problem was solved ;)

Solution 6:^[6]

i have resolved by installing both @angular/materials and @angular/cdk with same version. check if any one has modified package.json to have different version for each of them.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ashok Naik
Solution 2	Gopal Mishra
Solution 3	AliF50
Solution 4	Aswathi TS
Solution 5	Danil Alekseevich
Solution 6	U_R_Naveen UR_Naveen

'Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]