Angular uses material, problems encountered by cdk

background

When the two packages of material and cdk are added to the angular project, the compilation fails and a lot of errors are reported.

Mainly this:An accessor cannot be declared in an ambient context.

complete error code

ERROR in 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/drag-drop/directives/drag-handle.d.ts:25:9 - error TS1086: An accessor cannot be declared in an ambient context.

25     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-handle.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-preview.d.ts:25:9 - error TS1086: An accessor cannot be declared in an ambient context.

25     get matchSize(): boolean;
           ~~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag-preview.d.ts:26:9 - error TS1086: An accessor cannot be declared in an ambient context.

26     set matchSize(value: boolean);
           ~~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag.d.ts:72:9 - error TS1086: An accessor cannot be declared in an ambient context.

72     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drag.d.ts:73:9 - error TS1086: An accessor cannot be declared in an ambient context.

73     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list-group.d.ts:26:9 - error TS1086: An accessor cannot be 
declared in an ambient context.

26     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list-group.d.ts:27:9 - error TS1086: An accessor cannot be 
declared in an ambient context.

27     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list.d.ts:69:9 - error TS1086: An accessor cannot be declared in an ambient context.

69     get disabled(): boolean;
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/directives/drop-list.d.ts:70:9 - error TS1086: An accessor cannot be declared in an ambient context.

70     set disabled(value: boolean);
           ~~~~~~~~
node_modules/@angular/cdk/drag-drop/drag-ref.d.ts:172:9 - error TS1086: An accessor cannot be declared in an ambient context.

172     get disabled(): boolean;
            ~~~~~~~~
node_modules/@angular/cdk/drag-drop/drag-ref.d.ts:173:9 - error TS1086: An accessor cannot be declared in an ambient context.

173     set disabled(value: boolean);
            ~~~~~~~~
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:53:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

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

54     set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T> | null | 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     get cdkVirtualForTrackBy(): TrackByFunction<T> | undefined;
           ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:61:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

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

64     set cdkVirtualForTemplate(value: TemplateRef<CdkVirtualForOfContext<T>>);
           ~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:69:9 - error TS1086: An accessor cannot be declared in 
an ambient context.

solve

reason:angular版本号 与 material cdk 版本号不匹配。

It can be seen from the official website that there are many versions. Material is installed by default. If the version number is not specified when cdk is installed, the latest version will be installed. But my own angular version is useless and the latest is 8.3.8. That's why the above error is reported.
insert image description here

Finally, you only need to modify the material and cdk version numbers in package.json, and re-npm install to solve the problem.
(My angular8.* uses material, cdk version 8.2.3)
insert image description here

Guess you like

Origin blog.csdn.net/qwe1314225/article/details/109055740