ng2-dnd not working with angular10

[SirishaKomma]

ng2-dnd not working with angular10

[markostanic]

Try to install older version of ng2-dnd. It worked for me
npm i [email protected]

[HitendraSinghRathore]

Facing the same with Angular9.1.2.............

[AlbertSmit]

Try to install older version of ng2-dnd. It worked for me
npm i [email protected]

I second this; works in Angular 10 for me!

[ganthen]

Just for your interest, when using version 5.0.2, I get this working in Angular 11 as well for now, even without the skipLibCheck flag.

[HitendraSinghRathore]

Any help?

[pungiish]

I've made it work on angular 10. But, I had to replace awesome-typescript-loader with ts-loader and had made a few other changes, so I am not sure, if my PR will qualify..

[faizu88]

Not working in Angular 10

[pungiish]

Not working in Angular 10

"ng2-dnd": "github:pungiish/ng2-dnd#master", try this in your package.json. delete node_modules and do npm install.

And then remove it, after they fix the issue

[niklsss]

I see the project has been ported to Angular 9 b04ea5f, but it doesn't work with the IVY compiler.
Tried to reinstall node_modules but no success. Are there solutions?

[pungiish]

I see the project has been ported to Angular 9 b04ea5f, but it doesn't work with the IVY compiler.
Tried to reinstall node_modules but no success. Are there solutions?

Not working in Angular 10

"ng2-dnd": "github:pungiish/ng2-dnd#master", try this in your package.json. delete node_modules and do npm install.

And then remove it, after they fix the issue

[coanpape]

@pungiish sad to say I followed your steps for my angular 9.1.12 project and after waiting for the node_modules delete and the reinstall npm install ... got a bunch of errors during my app build

ERROR in node_modules/ng2-dnd/src/abstract.component.d.ts:100:12 - error TS2300: Duplicate identifier 'ɵfac'.

100 static ɵfac: ɵngcc0.ɵɵFactoryDef<AbstractComponent, never>;
~~~~
node_modules/ng2-dnd/src/abstract.component.d.ts:101:12 - error TS2300: Duplicate identifier 'ɵdir'.

101 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<AbstractComponent, never, never, {}, {}, never>;
~~~~
node_modules/ng2-dnd/src/abstract.component.d.ts:113:12 - error TS2300: Duplicate identifier 'ɵfac'.

113 static ɵfac: ɵngcc0.ɵɵFactoryDef<AbstractHandleComponent, never>;
~~~~
node_modules/ng2-dnd/src/abstract.component.d.ts:114:12 - error TS2300: Duplicate identifier 'ɵdir'.

114 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<AbstractHandleComponent, never, never, {}, {}, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:25:12 - error TS2300: Duplicate identifier 'ɵfac'.

25 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableContainer, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:26:12 - error TS2300: Duplicate identifier 'ɵdir'.

26 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableContainer, "[dnd-sortable-container]", never, { "draggable": "dragEnabled"; "sortableData": "sortableData"; "dropzones": "dropZones"; }, {}, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:63:12 - error TS2300: Duplicate identifier 'ɵfac'.

63 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableComponent, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:64:12 - error TS2300: Duplicate identifier 'ɵdir'.

64 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableComponent, "[dnd-sortable]", never, { "draggable": "dragEnabled"; "droppable": "dropEnabled"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; "index": "sortableIndex"; "dragData": "dragData"; }, { "onDragSuccessCallback": "onDragSuccess"; "onDragStartCallback": "onDragStart"; "onDragOverCallback": "onDragOver"; "onDragEndCallback": "onDragEnd"; "onDropSuccessCallback": "onDropSuccess";
}, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:70:12 - error TS2300: Duplicate identifier 'ɵfac'.

70 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableHandleComponent, never>;
~~~~
node_modules/ng2-dnd/src/sortable.component.d.ts:71:12 - error TS2300: Duplicate identifier 'ɵdir'.

71 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableHandleComponent, "[dnd-sortable-handle]", never, {}, {}, never>;
~~~~
node_modules/ng2-dnd/src/dnd.service.d.ts:18:12 - error TS2300: Duplicate identifier 'ɵfac'.

18 static ɵfac: ɵngcc0.ɵɵFactoryDef<DragDropService, never>;
~~~~
node_modules/ng2-dnd/src/dnd.service.d.ts:19:12 - error TS2300: Duplicate identifier 'ɵprov'.

19 static ɵprov: ɵngcc0.ɵɵInjectableDef;
~~~~~
node_modules/ng2-dnd/src/dnd.service.d.ts:33:12 - error TS2300: Duplicate identifier 'ɵfac'.

33 static ɵfac: ɵngcc0.ɵɵFactoryDef<DragDropSortableService, never>;
~~~~
node_modules/ng2-dnd/src/dnd.service.d.ts:34:12 - error TS2300: Duplicate identifier 'ɵprov'.

34 static ɵprov: ɵngcc0.ɵɵInjectableDef;
~~~~~
node_modules/ng2-dnd/src/draggable.component.d.ts:63:12 - error TS2300: Duplicate identifier 'ɵfac'.

63 static ɵfac: ɵngcc0.ɵɵFactoryDef<DraggableComponent, never>;
~~~~
node_modules/ng2-dnd/src/draggable.component.d.ts:64:12 - error TS2300: Duplicate identifier 'ɵdir'.

64 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DraggableComponent, "[dnd-draggable]", never, { "draggable": "dragEnabled"; "dropzones": "dropZones"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; "dragData": "dragData"; "dragImage": "dragImage"; "cloneItem": "cloneItem"; }, { "onDragStart": "onDragStart"; "onDragEnd": "onDragEnd"; "onDragSuccessCallback": "onDragSuccess"; }, never>;
~~~~
node_modules/ng2-dnd/src/draggable.component.d.ts:70:12 - error TS2300: Duplicate identifier 'ɵfac'.

70 static ɵfac: ɵngcc0.ɵɵFactoryDef<DraggableHandleComponent, never>;
~~~~
node_modules/ng2-dnd/src/draggable.component.d.ts:71:12 - error TS2300: Duplicate identifier 'ɵdir'.

71 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DraggableHandleComponent, "[dnd-draggable-handle]", never, {}, {}, never>;
~~~~
node_modules/ng2-dnd/src/droppable.component.d.ts:35:12 - error TS2300: Duplicate identifier 'ɵfac'.

35 static ɵfac: ɵngcc0.ɵɵFactoryDef<DroppableComponent, never>;
~~~~
node_modules/ng2-dnd/src/droppable.component.d.ts:36:12 - error TS2300: Duplicate identifier 'ɵdir'.

36 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DroppableComponent, "[dnd-droppable]", never, { "droppable": "dropEnabled"; "allowdrop": "allowDrop"; "dropzones": "dropZones"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; }, { "onDropSuccess": "onDropSuccess"; "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; }, never>;
~~~~
node_modules/ng2-dnd/src/dnd.module.d.ts:31:12 - error TS2300: Duplicate identifier 'ɵmod'.

31 static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<DndModule, [typeof ɵngcc1.DraggableComponent, typeof ɵngcc1.DraggableHandleComponent, typeof ɵngcc2.DroppableComponent, typeof ɵngcc3.SortableContainer, typeof ɵngcc3.SortableComponent, typeof ɵngcc3.SortableHandleComponent], never, [typeof ɵngcc1.DraggableComponent, typeof ɵngcc1.DraggableHandleComponent, typeof ɵngcc2.DroppableComponent, typeof ɵngcc3.SortableContainer, typeof ɵngcc3.SortableComponent, typeof ɵngcc3.SortableHandleComponent]>;
~~~~
node_modules/ng2-dnd/src/dnd.module.d.ts:32:12 - error TS2300: Duplicate identifier 'ɵinj'.

32 static ɵinj: ɵngcc0.ɵɵInjectorDef;
~~~~

[pungiish]

Try running npm i -D @types/node and adding "skipLibCheck":true to youd compiler options in tsconfig.json.

…

On Fri, Oct 2, 2020, 16:55 coanpape ***@***.***> wrote: ERROR in node_modules/ng2-dnd/src/abstract.component.d.ts💯12 - error TS2300: Duplicate identifier 'ɵfac'. 100 static ɵfac: ɵngcc0.ɵɵFactoryDef<AbstractComponent, never>; ~~~~ node_modules/ng2-dnd/src/abstract.component.d.ts:101:12 - error TS2300: Duplicate identifier 'ɵdir'. 101 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<AbstractComponent, never, never, {}, {}, never>; ~~~~ node_modules/ng2-dnd/src/abstract.component.d.ts:113:12 - error TS2300: Duplicate identifier 'ɵfac'. 113 static ɵfac: ɵngcc0.ɵɵFactoryDef<AbstractHandleComponent, never>; ~~~~ node_modules/ng2-dnd/src/abstract.component.d.ts:114:12 - error TS2300: Duplicate identifier 'ɵdir'. 114 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<AbstractHandleComponent, never, never, {}, {}, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:25:12 - error TS2300: Duplicate identifier 'ɵfac'. 25 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableContainer, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:26:12 - error TS2300: Duplicate identifier 'ɵdir'. 26 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableContainer, "[dnd-sortable-container]", never, { "draggable": "dragEnabled"; "sortableData": "sortableData"; "dropzones": "dropZones"; }, {}, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:63:12 - error TS2300: Duplicate identifier 'ɵfac'. 63 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableComponent, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:64:12 - error TS2300: Duplicate identifier 'ɵdir'. 64 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableComponent, "[dnd-sortable]", never, { "draggable": "dragEnabled"; "droppable": "dropEnabled"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; "index": "sortableIndex"; "dragData": "dragData"; }, { "onDragSuccessCallback": "onDragSuccess"; "onDragStartCallback": "onDragStart"; "onDragOverCallback": "onDragOver"; "onDragEndCallback": "onDragEnd"; "onDropSuccessCallback": "onDropSuccess"; }, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:70:12 - error TS2300: Duplicate identifier 'ɵfac'. 70 static ɵfac: ɵngcc0.ɵɵFactoryDef<SortableHandleComponent, never>; ~~~~ node_modules/ng2-dnd/src/sortable.component.d.ts:71:12 - error TS2300: Duplicate identifier 'ɵdir'. 71 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<SortableHandleComponent, "[dnd-sortable-handle]", never, {}, {}, never>; ~~~~ node_modules/ng2-dnd/src/dnd.service.d.ts:18:12 - error TS2300: Duplicate identifier 'ɵfac'. 18 static ɵfac: ɵngcc0.ɵɵFactoryDef<DragDropService, never>; ~~~~ node_modules/ng2-dnd/src/dnd.service.d.ts:19:12 - error TS2300: Duplicate identifier 'ɵprov'. 19 static ɵprov: ɵngcc0.ɵɵInjectableDef; ~~~~~ node_modules/ng2-dnd/src/dnd.service.d.ts:33:12 - error TS2300: Duplicate identifier 'ɵfac'. 33 static ɵfac: ɵngcc0.ɵɵFactoryDef<DragDropSortableService, never>; ~~~~ node_modules/ng2-dnd/src/dnd.service.d.ts:34:12 - error TS2300: Duplicate identifier 'ɵprov'. 34 static ɵprov: ɵngcc0.ɵɵInjectableDef; ~~~~~ node_modules/ng2-dnd/src/draggable.component.d.ts:63:12 - error TS2300: Duplicate identifier 'ɵfac'. 63 static ɵfac: ɵngcc0.ɵɵFactoryDef<DraggableComponent, never>; ~~~~ node_modules/ng2-dnd/src/draggable.component.d.ts:64:12 - error TS2300: Duplicate identifier 'ɵdir'. 64 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DraggableComponent, "[dnd-draggable]", never, { "draggable": "dragEnabled"; "dropzones": "dropZones"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; "dragData": "dragData"; "dragImage": "dragImage"; "cloneItem": "cloneItem"; }, { "onDragStart": "onDragStart"; "onDragEnd": "onDragEnd"; "onDragSuccessCallback": "onDragSuccess"; }, never>; ~~~~ node_modules/ng2-dnd/src/draggable.component.d.ts:70:12 - error TS2300: Duplicate identifier 'ɵfac'. 70 static ɵfac: ɵngcc0.ɵɵFactoryDef<DraggableHandleComponent, never>; ~~~~ node_modules/ng2-dnd/src/draggable.component.d.ts:71:12 - error TS2300: Duplicate identifier 'ɵdir'. 71 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DraggableHandleComponent, "[dnd-draggable-handle]", never, {}, {}, never>; ~~~~ node_modules/ng2-dnd/src/droppable.component.d.ts:35:12 - error TS2300: Duplicate identifier 'ɵfac'. 35 static ɵfac: ɵngcc0.ɵɵFactoryDef<DroppableComponent, never>; ~~~~ node_modules/ng2-dnd/src/droppable.component.d.ts:36:12 - error TS2300: Duplicate identifier 'ɵdir'. 36 static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<DroppableComponent, "[dnd-droppable]", never, { "droppable": "dropEnabled"; "allowdrop": "allowDrop"; "dropzones": "dropZones"; "effectallowed": "effectAllowed"; "effectcursor": "effectCursor"; }, { "onDropSuccess": "onDropSuccess"; "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; }, never>; ~~~~ node_modules/ng2-dnd/src/dnd.module.d.ts:31:12 - error TS2300: Duplicate identifier 'ɵmod'. 31 static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<DndModule, [typeof ɵngcc1.DraggableComponent, typeof ɵngcc1.DraggableHandleComponent, typeof ɵngcc2.DroppableComponent, typeof ɵngcc3.SortableContainer, typeof ɵngcc3.SortableComponent, typeof ɵngcc3.SortableHandleComponent], never, [typeof ɵngcc1.DraggableComponent, typeof ɵngcc1.DraggableHandleComponent, typeof ɵngcc2.DroppableComponent, typeof ɵngcc3.SortableContainer, typeof ɵngcc3.SortableComponent, typeof ɵngcc3.SortableHandleComponent]>; ~~~~ node_modules/ng2-dnd/src/dnd.module.d.ts:32:12 - error TS2300: Duplicate identifier 'ɵinj'. 32 static ɵinj: ɵngcc0.ɵɵInjectorDef; ~~~~ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#292 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFNMHFB4XZPT2NZVXMMUOP3SIXSUNANCNFSM4QPWHF5Q> .

[coanpape]

I combined the skipLibCheck with @pungiish 's version and I'm up and going for now... I am hoping for a new official version before this NG 9 upgrade project goes to production. Thanks @Marko131 If worse comes to worst, 5.0.2 with skipLibCheck may be my production solution ... I had been presented with an Ivy compatibility error with the version you recommend, but skipLibCheck may just get past the issue.

[coanpape]

It seems my previous issue with 5.0.2 may have been due to the fact that styles.css had been moved up a level in the more recent "beta" releases, and I may have missed that was the error being reported against my baseline build when I had tried to build with 5.0.2 after having tried one of the beta versions... I leave this behind as a note just in case it helps somebody else

[jrood]

It seems like the real compatibility issue here is with Ivy, not with Angular 9 or 10.

[robertnicjoo]

not working on angular 11

[ganthen]

Hello, I'm also trying to get this working in angular 11, but no success. Made the change to point the library to the master branch, and made change to tsconfig, but when running my project I get this error :

createForOfIteratorHelper.js:53 Uncaught Error: Type DndModule does not have 'ɵmod' property.

[AlexanderStromer]

Just for your interest, when using version 5.0.2, I get this working in Angular 11 as well for now, even without the skipLibCheck flag.

ng build --prod fails with
"ERROR in Cannot read property 'map' of null"
because of the Angular AOT compilation

Don't know how legible it is for you, but AOT: false + buildOptimizer: false will resolve the problem

[HariPrasad-1493]

I'm trying to Upgrade to Ang11 but above comments deters me to do so...

Any solution so far since version 5.0.2 causes "ng build --prod" to fail & turning off AOT might cut back on performance of ANG11 as mentioned by @AlexanderStromer

Did it work for you @ganthen && @AlbertSmit ?