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

Question

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:82 - error TS1011: An element access expression should take an argument.

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: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:82 - error TS1011: An element access expression should take an argument.

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; ~~

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 {
                        ~~~~~~~~~~~~~~~~~~

I'm using angular 9, so matching both angular cdk and angular material to version 9.1.1 solved it pretty well. I ran the following two commands: 1. npm i @angular/cdk@9.1.1 , 2. npm i @angular/material@9.1.1 — barper, Jun 03 '22 at 14:38

score 15 · Accepted Answer · answered Jun 14 '21 at 13:15

15

Solved the issue using the following version of Angular Material npm i @angular/material@11.2.13

answered Jun 14 '21 at 13:15

Ashok Naik

206
1
7

1

thanks yes my angular version is 11 and material version is 12 that's why I got error...saved my day. – Dinesh Gurjar Sep 05 '21 at 05:26

score 3 · Answer 2 · answered Jun 06 '21 at 09:56

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/material@12.0.3/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?

score 1 · Answer 3 · answered May 25 '21 at 17:53

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.

score 0 · Answer 4 · answered Oct 08 '21 at 05:45

0

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

answered Oct 08 '21 at 05:45

Aswathi TS

1

score 0 · Answer 5 · answered Dec 23 '21 at 16:31

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

score 0 · Answer 6 · answered Apr 17 '22 at 21:37

0

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.

answered Apr 17 '22 at 21:37

U_R_Naveen UR_Naveen

720
7
8

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

6 Answers6

Linked