After installing a CDK of angular getting an error during compilation

Question

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

I did npm install and npm update but it's not worked for me. Thanks in advance.

Answer 1

This is due to the version incompatibility between angular/cdk, angular/material and angular/core. Most specifically, Angular Core version 8.x.x is not compatible with Angular CDK version 9.x.x.

Solution:

1. Delete node_modules folder
2. In package.json, change the version of cdk and material. Save.
3. npm install.

In my case, I was having:

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

and I changed this to:

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

and deleted node_modules and did npm install. Fixed.

Answer 2

Update Angular Core and CLI to latest version:

ng update @angular/core @angular/cli

After this you may get issue ModuleWithProviders not found, if you have not used generic ModuleWithProviders. The update changes this to generic one but does not imports it.

So, do import { NgModule, ModuleWithProviders } from '@angular/core';

Hopefully, this will solve the issue.

You might also need to run ng add @angular/localize if your application or one of its dependencies is using i18n.

Answer 3

The error is for version incompatibility, check the version details for angular, angular/material & angular/cdk in package.json file or ng --version command on the project.

In my case the version angular version was 8.x and when i installed angular material & cdk dependencies the version was 9.x, i updated the material & cdk version to below versions and it worked fine

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

You can view all the material versions in the material.angular.io website enter image description here