素材巴巴 > 程序开发 >

angular使用material,cdk遇到的问题

程序开发 2023-09-13 23:24:48

背景

angular项目中添加使用 material,cdk两个包的时候,编译不通过,报了一大堆错误。

主要是这个:An accessor cannot be declared in an ambient context.

完成错误代码

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 | Observable | NgIterable | 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 | Observable | NgIterable | 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 | 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 | 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>);~~~~~~~~~~~~~~~~~~~~~
 node_modules/@angular/cdk/scrolling/virtual-for-of.d.ts:69:9 - error TS1086: An accessor cannot be declared in 
 an ambient context.

解决

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

从官网可以看出有很多个版本。默认安装material,cdk的时候如果未指明版本号,会安装最新的。但是我自己的angular版本没用最新的还是8.3.8.所以才导致上面的报错。
在这里插入图片描述

最后只需要修改package.json中 material,cdk版本号,重新npm install 一下就能解决了。
(我的angular8.* 所以用的 material,cdk版本 8.2.3)
在这里插入图片描述


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。