安装angular的CDK后编译出错

After installing a CDK of angular getting an error during compilation

ERROR in node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:29:9 - error TS1086: An accessor cannot be declared in an ambient context.

29 get enabled(): boolean; ~~~~~~~ node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:30:9 - error TS1086: An accessor cannot be declared in an ambient context.

30 set enabled(value: boolean); ~~~~~~~ node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:128:9 - error TS1086: An accessor cannot be declared in an ambient context.

128 get enabled(): boolean; ~~~~~~~ node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:129:9 - error TS1086: An accessor cannot be declared in an ambient context.

129 set enabled(value: boolean); ~~~~~~~ node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:134:9 - error TS1086: An accessor cannot be declared in an ambient context.

134 get autoCapture(): boolean; ~~~~~~~~~~~ node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:135:9 - error TS1086: An accessor cannot be declared in an ambient context.

135 set autoCapture(value: boolean); ~~~~~~~~~~~ node_modules/@angular/cdk/a11y/key-manager/list-key-manager.d.ts:96:9 - error TS1086: An accessor cannot be declared in an ambient context.

96 get activeItemIndex(): number | null; ~~~~~~~~~~~~~~~ node_modules/@angular/cdk/a11y/key-manager/list-key-manager.d.ts:98:9 - error TS1086: An accessor cannot be declared in an ambient context.

98 get activeItem(): T | null; ~~~~~~~~~~ node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:69:9 - error TS1086: An accessor cannot be declared in an ambient context.

69 get politeness(): AriaLivePoliteness; ~~~~~~~~~~ node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.

70 set politeness(value: AriaLivePoliteness); ~~~~~~~~~~ node_modules/@angular/cdk/bidi/dir.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26 get dir(): Direction; ~~~ node_modules/@angular/cdk/bidi/dir.d.ts:27:9 - error TS1086: An accessor cannot be declared in an ambient context.

27 set dir(value: Direction); ~~~ node_modules/@angular/cdk/bidi/dir.d.ts:29:9 - error TS1086: An accessor cannot be declared in an ambient context.

29 get value(): Direction; ~~~~~ node_modules/@angular/cdk/collections/selection-model.d.ts:24:9 - error TS1086: An accessor cannot be declared in an ambient context.

24 get selected(): T[]; ~~~~~~~~ node_modules/@angular/cdk/observers/observe-content.d.ts:62:9 - error TS1086: An accessor cannot be declared in an ambient context.

62 get disabled(): any; ~~~~~~~~ node_modules/@angular/cdk/observers/observe-content.d.ts:63:9 - 39m91merror TS1086: An accessor cannot be declared in an ambient context.

63 set disabled(value: any); ~~~~~~~~ node_modules/@angular/cdk/observers/observe-content.d.ts:66:9 - error TS1086: An accessor cannot be declared in an ambient context.

66 get debounce(): number; ~~~~~~~~ node_modules/@angular/cdk/observers/observe-content.d.ts:67:9 - error TS1086: An accessor cannot be declared in an ambient context.

67 set debounce(value: number); ~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:60:9 - error TS1086: An accessor cannot be declared in an ambient context.

60 get offsetX(): number; ~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:61:9 - error TS1086: An accessor cannot be declared in an ambient context.

61 set offsetX(offsetX: number); ~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:63:9 - error TS1086: An accessor cannot be declared in an ambient context.

63 get offsetY(): number; ~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:64:9 - error TS1086: An accessor cannot be declared in an ambient context.

64 set offsetY(offsetY: number); ~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:86:9 - error TS1086: An accessor cannot be declared in an ambient context.

86 get hasBackdrop(): any; ~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:87:9 - error TS1086: An accessor cannot be declared in an ambient context.

87 set hasBackdrop(value: any); ~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:89:9 - error TS1086: An accessor cannot be declared in an ambient context.

89 get lockPosition(): any; ~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:90:9 - error TS1086: An accessor cannot be declared in an ambient context.

90 set lockPosition(value: any); ~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:92:9 - error TS1086: An accessor cannot be declared in an ambient context.

92 get flexibleDimensions(): boolean; ~~~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:93:9 - error TS1086: An accessor cannot be declared in an ambient context.

93 set flexibleDimensions(value: boolean); ~~~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:95:9 - error TS1086: An accessor cannot be declared in an ambient context.

95 get growAfterOpen(): boolean; ~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:96:9 - error TS1086: An accessor cannot be declared in an ambient context.

96 set growAfterOpen(value: boolean); ~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:98:9 - error TS1086: An accessor cannot be declared in an ambient context.

98 get push(): boolean; ~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:99:9 - error TS1086: An accessor cannot be declared in an ambient context.

99 set push(value: boolean); ~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:112:9 - error TS1086: An accessor cannot be declared in an ambient context.

112 get overlayRef(): OverlayRef; ~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-directives.d.ts:114:9 - error TS1086: An accessor cannot be declared in an ambient context.

114 get dir(): Direction; ~~~ node_modules/@angular/cdk/overlay/overlay-ref.d.ts:55:9 - error TS1086: An accessor cannot be declared in an ambient context.

55 get overlayElement(): HTMLElement; ~~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-ref.d.ts:57:9 - error TS1086: An accessor cannot be declared in an ambient context.

57 get backdropElement(): HTMLElement | null; ~~~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/overlay-ref.d.ts:63:9 - error TS1086: An accessor cannot be declared in an ambient context.

63 get hostElement(): HTMLElement; ~~~~~~~~~~~ node_modules/@angular/cdk/overlay/position/connected-position-strategy.d.ts:36:9 - error TS1086: An accessor cannot be declared in an ambient context.

36 get _isRtl(): boolean; ~~~~~~ node_modules/@angular/cdk/overlay/position/connected-position-strategy.d.ts:40:9 - error TS1086: An accessor cannot be declared in an ambient context.

40 get onPositionChange(): Observable; ~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/overlay/position/connected-position-strategy.d.ts:43:9 - error TS1086: An accessor cannot be declared in an ambient context.

43 get positions(): ConnectionPositionPair[]; ~~~~~~~~~ node_modules/@angular/cdk/overlay/position/flexible-connected-position-strategy.d.ts:91:9 - error TS1086: An accessor cannot be declared in an ambient context.

91 get positions(): ConnectionPositionPair[]; ~~~~~~~~~ node_modules/@angular/cdk/portal/portal-directives.d.ts:49:9 - error TS1086: An accessor cannot be declared in an ambient context.

49 get portal(): Portal | null; ~~~~~~ node_modules/@angular/cdk/portal/portal-directives.d.ts:50:9 - error TS1086: An accessor cannot be declared in an ambient context.

50 set portal(portal: Portal | null); ~~~~~~ node_modules/@angular/cdk/portal/portal-directives.d.ts:54:9 - error TS1086: An accessor cannot be declared in an ambient context.

54 get attachedRef(): CdkPortalOutletAttachedRef; ~~~~~~~~~~~ node_modules/@angular/cdk/portal/portal.d.ts:24:9 - error TS1086: An accessor cannot be declared in an ambient context.

24 get isAttached(): boolean; ~~~~~~~~~~ node_modules/@angular/cdk/portal/portal.d.ts:63:9 - error TS1086: An accessor cannot be declared in an ambient context.

63 get origin(): ElementRef; ~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:75:9 - error TS1086: An accessor cannot be declared in an ambient context.

75 get itemSize(): number; ~~~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:76:9 - error TS1086: An accessor cannot be declared in an ambient context.

76 set itemSize(value: number); ~~~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:82:9 - error TS1086: An accessor cannot be declared in an ambient context.

82 get minBufferPx(): number; ~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:83:9 - error TS1086: An accessor cannot be declared in an ambient context.

83 set minBufferPx(value: number); ~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:88:9 - error TS1086: An accessor cannot be declared in an ambient context.

88 get maxBufferPx(): number; ~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/fixed-size-virtual-scroll.d.ts:89:9 - error TS1086: An accessor cannot be declared in an ambient context.

89 set maxBufferPx(value: number); ~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:49:9 - error TS1086: An accessor cannot be declared in an ambient context.

49 get cdkVirtualForOf(): DataSource | Observable | NgIterable | null | undefined; ~~~~~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:50:9 - error TS1086: An accessor cannot be declared in an ambient context.

50 set cdkVirtualForOf(value: DataSource | Observable | NgIterable | null | undefined); ~~~~~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:56:9 - error TS1086: An accessor cannot be declared in an ambient context.

56 get cdkVirtualForTrackBy(): TrackByFunction | undefined; ~~~~~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:57:9 - error TS1086: An accessor cannot be declared in an ambient context.

57 set cdkVirtualForTrackBy(fn: TrackByFunction | undefined); ~~~~~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:60:9 - error TS1086: An accessor cannot be declared in an ambient context.

60 set cdkVirtualForTemplate(value: TemplateRef>); ~~~~~~~~~~~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-scroll-viewport.d.ts:27:9 - error TS1086: An accessor cannot be declared in an ambient context.

27 get orientation(): 'horizontal' | 'vertical'; ~~~~~~~~~~~ node_modules/@angular/cdk/scrolling/virtual-scroll-viewport.d.ts:28:9 - error TS1086: An accessor cannot be declared in an ambient context.

28 set orientation(orientation: 'horizontal' | 'vertical'); ~~~~~~~~~~~

我执行了 npm install 和 npm update,但对我不起作用。提前致谢。

将 Angular 核心和 CLI 更新到最新版本:

ng update @angular/core @angular/cli

在此之后,如果您没有使用通用 ModuleWithProviders,您可能会遇到问题 ModuleWithProviders not found。此更新将其更改为通用的,但不会导入它。

那么,import { NgModule, ModuleWithProviders } from '@angular/core';

希望这能解决问题。

如果您的应用程序或其依赖项之一正在使用 i18n,您可能还需要 运行 ng add @angular/localize

这是由于 angular/cdk、angular/material 和 angular/core 之间的版本不兼容造成的。最具体地说,Angular 核心版本 8.x.x 与 Angular CDK 版本 9.x.x 不兼容。

解决方案:

  1. 删除 node_modules 文件夹
  2. 在package.json中,更改cdk和material的版本。保存。
  3. npm install.

就我而言,我有:

"@angular/cdk": "~9.0.0",
"@angular/core": "~8.2.14",
"@angular/material": "~9.0.0"

我将其更改为:

"@angular/cdk": "~8.2.3",
"@angular/core": "~8.2.14",
"@angular/material": "~8.2.3"

并删除了 node_modules 并删除了 npm install。固定。

错误是版本不兼容,检查angular的版本详情, angular/material & angular/cdk 在 package.json 文件或项目上的 ng --version 命令中。

在我的例子中,版本 angular 版本是 8.x,当我安装 angular material & cdk 依赖时,版本是 9.x,我更新了 material & cdk 版本到以下版本并且工作正常

"@angular/cdk": "^8.2.3"
"@angular/material": "^8.2.3"

您可以在 material.angular.io 网站查看所有 material 版本 enter image description here

NCU 可以解决这个问题。 运行在angular目录下执行以下命令

ncu -u
npm install