Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ng2-dnd not working with angular10 #292

Open
SirishaKomma opened this issue Aug 30, 2020 · 19 comments
Open

ng2-dnd not working with angular10 #292

SirishaKomma opened this issue Aug 30, 2020 · 19 comments

Comments

@SirishaKomma
Copy link

SirishaKomma commented Aug 30, 2020 •
edited
Loading

  • 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?
    image

  • 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
Copy link

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

@HitendraSinghRathore
Copy link

Any help?

@pungiish
Copy link

pungiish commented Sep 9, 2020 •
edited
Loading

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
Copy link

faizu88 commented Sep 10, 2020

ng2-dnd

Not working in Angular 10

@pungiish
Copy link

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
Copy link

niklsss commented Sep 11, 2020

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
Copy link

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
Copy link

coanpape commented Oct 2, 2020 •
edited
Loading

@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
Copy link

pungiish commented Oct 2, 2020 via email

@markostanic
Copy link

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

@coanpape
Copy link

coanpape commented Oct 6, 2020

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
Copy link

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!

@coanpape
Copy link

coanpape commented Oct 7, 2020

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
Copy link

jrood commented Nov 12, 2020

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

@robertnicjoo
Copy link

not working on angular 11

@ganthen
Copy link

ganthen commented Nov 26, 2020 •
edited
Loading

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
Copy link

ganthen commented Nov 26, 2020

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
Copy link

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
Copy link

HariPrasad-1493 commented May 24, 2021 •
edited
Loading

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests