angular - 导入 Angular Material 对话框时编译错误

Question

我试图在我的应用程序中显示一个模型对话框。为此，我首先导入了 Material Dialog进入我的 component.ts 文件

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

但是在导入这个之后我得到了这样的编译错误音

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.

根据 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"
}

对这些错误一无所知。我是 Angular 本身的新手。当只删除导入行时，所有错误都消失了。编译成功

Answer 1

将 Angular/ Material 版本从 HERE 降级到 LTS 11.2.3应该可以解决这个问题。