ng2-dnd not working with angular10

[SirishaKomma]

• I'm submitting a ... [ ] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? reporting a bug

• What is the current behavior?

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

  1. create an angular10 application, install ng2-dnd and import its module into app.module, and use it in any component, and do ng serve.

• What is the expected behavior?

shoulf work properly

• What is the motivation / use case for changing the behavior?

• Please tell us about your environment:

• Angular version: 10.0.7

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[HitendraSinghRathore]

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

[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 https://github.com/akserg/ng2-dnd/commit/b04ea5fb84168d8dc9b8113f31223f0f7ba249ff, 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<DragDropService>;

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<DragDropSortableService>;

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<DndModule>;

[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 notifications@github.com 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 https://github.com/akserg/ng2-dnd/issues/292#issuecomment-702781588, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFNMHFB4XZPT2NZVXMMUOP3SIXSUNANCNFSM4QPWHF5Q .

[markostanic]

Try to install older version of ng2-dnd. It worked for me npm i ng2-dnd@5.0.2

[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.

[AlbertSmit]

Try to install older version of ng2-dnd. It worked for me npm i ng2-dnd@5.0.2

I second this; works in Angular 10 for me!

[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.

[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.

[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 ?