After installing a CDK of angular getting an error during compilation - angular6

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:
Delete node_modules folder
In package.json, change the version of cdk and material. Save.
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

Answer 4

NCU can fix the issue. Run the following command in the angular directory
ncu -u
npm install