Compile error when Angular Material dialog is imported

Question

I am trying to show a model dialog in my application. For that as a first step I imported Material Dialog into my component.ts file

import {MatDialog} from '@angular/material/dialog';

But after importing this I am getting tones of compile errors like this

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


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


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


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


Error: 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;
   


Error: 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:85 - 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:88 - error TS2304: Cannot find name 'T'.
m
14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                          ~


Error: 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.

These are my dependencies according to package.json

"dependencies": {
  "@angular/animations": "^11.2.14",
  "@angular/cdk": "^12.0.1",
  "@angular/common": "~11.2.0",
  "@angular/compiler": "~11.2.0",
  "@angular/core": "~11.2.0",
  "@angular/forms": "~11.2.0",
  "@angular/material": "^12.0.1",
  "@angular/platform-browser": "~11.2.0",
  "@angular/platform-browser-dynamic": "~11.2.0",
  "@angular/router": "~11.2.0",
  "admin-lte": "^3.1.0",
  "angular-datatables": "^11.2.0",
  "bootstrap": "^4.6.0",
  "datatables.net": "^1.10.24",
  "datatables.net-dt": "^1.10.24",
  "jquery": "^3.6.0",
  "ng-wizard": "^1.3.0",
  "ngx-toastr": "^13.2.1",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.11.3"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1102.0",
  "@angular/cli": "~11.2.0",
  "@angular/compiler-cli": "~11.2.0",
  "@types/datatables.net": "^1.10.19",
  "@types/jasmine": "~3.6.0",
  "@types/jquery": "^3.5.5",
  "@types/node": "^12.11.1",
  "codelyzer": "^6.0.0",
  "jasmine-core": "~3.6.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~6.1.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.0.3",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~4.1.2"
}

Havent got an idea about these error. I am new to Angular itself. When just removing the import line, all errors are gone.. Compiles successfully

Answer 1

In my case it was because I was opening a new project with an out of date angular cli, npm i @angular/cli@latest and creating the project again fixed it.

Answer 2

Downgrading the angular/material version to the LTS 11.2.3 from HERE should fix this issue.