Drag and drop across components

[doender]

Thank you for this high quality lib!

I have encountered an issue when dragging an external element to a tree, more specifically when the external element and the tree are in different components.

For example, in the template:

<p [treeDrag]="{name: 'first'}" [treeDragEnabled]="true">Drag me!</p>

And the following relevant part of the tree's options:

actionMapping: {
   mouse: {
      drop: (tree: TreeModel, node: TreeNode, $event: any, { from, to }) => {
          // 'from' is null when dropping element outside component
      }
    }
}

This works fine when the element and the tree are in the same component.
I'm using angular-tree-component 4.0.0, angular 4.2.3 and it happens in both Chrome and Firefox.

Is there a workaround or is dragging across components currently not supported?

[adamkleingit]

Maybe it's because TreeDraggedElement is a singleton service provided by the angular tree component module.
Are you importing the tree module in appModule?

[adamkleingit]

If the dragged element is in a different component but under the same module - does it work?

[KeithGillette]

We are experiencing the same issue with angular-tree-component@6.0.0 when dragging a TreeNode between trees in components that are declared in different lazy-loaded modules. Given your comment regarding the TreeDraggedElement provider of TreeModule, @adamkleingit, I believe that Angular is providing separate non-communicating TreeDraggedElement providers for each module.

Following that insight, we have worked-around this issue by modifying the angular-tree-component source code so that we can call TreeModule.forRoot() in our AppModule to get a single, application-wide instance of TreeDraggedElement for the Angular dependency injector but still import TreeModule normally in other other (lazy-loaded) modules to get the TreeComponent declarations.

I'd be happy to submit a pull request to integrate this change into angular-tree-component so that drag-and-drop can be used in applications with lazy-loaded modules, though the simplistic approach taken in this work-around introduces breaking changes for existing users.

[adamkleingit]

Hi, yes please submit the pull request, that would be fantastic. Thanks for the contribution *Adam Klein* *Chief Technology Officer* *Tel.* +972-52-7475633 <+972527475633> *Web* 500tech.com <http://www.500tech.com/> | github.com/500tech | @adamklein500 <http://twitter.com/adamklein500>

…

On Fri, Dec 1, 2017 at 5:26 PM, Keith Gillette ***@***.***> wrote: We are experiencing the same issue with ***@***.*** when dragging a TreeNode between trees in components that are declared in different (lazy-loaded) modules. Given your comment regarding the TreeDraggedElement provider of TreeModule, @adamkleingit <https://github.com/adamkleingit>, I believe that Angular is providing separate non-communicating TreeDraggedElement providers for each module. Following that insight, we have worked-around this issue by modifying the angular-tree-component source code so that we can call TreeModule.forRoot() in our AppModule to get a single, application-wide instance of TreeDraggedElement for the Angular dependency injector <https://angular-2-training-book.rangle.io/handout/modules/shared-di-tree.html> but still import TreeModule normally in other other (lazy-loaded) modules to get the TreeComponent declarations. I'd be happy to submit a pull request to integrate this change into angular-tree-component so that drag-and-drop can be used in applications with lazy-loaded modules. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#376 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2SSvuclZM3mieGG3s6SUxITypQZ-euks5s8BqvgaJpZM4OrW0L> .

[KeithGillette]

Thanks for the fast reply @adamkleingit.

It occurs to me that it may be possible to maintain backward compatibility and meet this use case of drag-and-drop between lazy-loaded modules by creating two additional modules in addition to the existing TreeModule, giving:

• TreeComponentModule: declares & exports all components but specifies no providers
• TreeProviderModule: only includes providers: [TreeDraggedElement]
• TreeModule: imports & exports TreeComponentModule & TreeProviderModule

Existing projects and new projects using only eagerly-loaded modules could continue to use TreeModule per the existing instructions. Projects with lazy-loaded modules would import TreeProviderModule in the root AppModule to get the singleton TreeDraggedElement provider and TreeComponentsModule in any module in which a TreeComponent is used.

Let me know whether you prefer the simplistic (but breaking) forRoot() approach or the backward-compatible 3-module approach.

[adamkleingit]

We have to be backwards compatible - so the 3 module approach. BTW - currently the bypass would be to import the entire TreeModule in the root and not lazy-loaded modules, correct? *Adam Klein* *Chief Technology Officer* *Tel.* +972-52-7475633 <+972527475633> *Web* 500tech.com <http://www.500tech.com/> | github.com/500tech | @adamklein500 <http://twitter.com/adamklein500>

…

On Sat, Dec 2, 2017 at 1:16 AM, Keith Gillette ***@***.***> wrote: Thanks for the fast reply @adamkleingit <https://github.com/adamkleingit>. It occurs to me that it may be possible to maintain backward compatibility and meet this use case of drag-and-drop between lazy-loaded modules by creating two additional modules in addition to the existing TreeModule, giving: - TreeComponentModule: declares & exports all components but specifies no providers - TreeProviderModule: only includes providers: [TreeDraggedElement] - TreeModule: imports & exports TreeComponentsModule & TreeProviderModule Existing projects and new projects using only eagerly-loaded modules could continue to use TreeModule per the existing instructions. Projects with lazy-loaded modules would import TreeProviderModule in the root AppModule to get the singleton TreeDraggedElement provider and TreeComponentsModule in any module in which a TreeComponent is used. Let me know whether you prefer the simplistic (but breaking) forRoot() approach or the backward-compatible 3-module approach. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#376 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2SSuVbn1FiBnTVhZqbdlVoW56Ost8yks5s8IjcgaJpZM4OrW0L> .

[KeithGillette]

Yes, the issue occurs for us when dragging across TreeComponents in separate NgModules, at least one of which is being lazy-loaded, so not lazy-loading modules should provide a work-around at the expense of losing the benefits of lazy-loading. As explained in the Angular DI link in my first message, each lazy-loaded module gets its own dependency injector. Since TreeModule must be imported in each module in which the TreeComponent is used, doing so then creates multiple, non-communicating instances of the TreeDraggedElement provider.

I'll put together a Pull Request for the backward-compatible 3-module approach. Let me know if there's a particular branch/commit on which I should base this work or whether I should just fork the current release on master.

[adamkleingit]

You can fork master *Adam Klein* *Chief Technology Officer* *Tel.* +972-52-7475633 <+972527475633> *Web* 500tech.com <http://www.500tech.com/> | github.com/500tech | @adamklein500 <http://twitter.com/adamklein500>

…

On Thu, Dec 7, 2017 at 4:37 PM, Keith Gillette ***@***.***> wrote: Yes, the issue occurs for us when dragging across TreeComponents in separate NgModules, at least one of which is being lazy-loaded, so not lazy-loading modules should provide a work-around at the expense of losing the benefits of lazy-loading. As explained in the Angular DI link in my first message <#376 (comment)>, each lazy-loaded module gets its own dependency injector. Since TreeModule must be imported in each module in which the TreeComponent is used, doing so then creates multiple, non-communicating instances of the TreeDraggedElement provider. I'll put together a Pull Request for the backward-compatible 3-module approach. Let me know if there's a particular branch/commit on which I should base this work or whether I should just fork the current release on master. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#376 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2SSijyF-EcJ_dqJzF9KWrKXiQ9cP_Bks5s9_g2gaJpZM4OrW0L> .

[KeithGillette]

I'm working on this PR, @adamkleingit, but running into the following error in the browser console when attempting to follow your contribution guidelines and test with npm run example:cli. This error occurs even with unmodified source code from the current release on master, so I think it may be related to this open Angular CLI error which occurs local libraries & the JIT compiler. Please let me know if this occurs for you, as well.

Uncaught Error: Unexpected value 'TreeModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:485)
    at eval (compiler.js:15206)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15189)
    at JitCompiler._loadModules (compiler.js:34226)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)
    at JitCompiler.compileModuleAsync (compiler.js:34081)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.bootstrapModule (core.js:5573)
    at eval (main.ts:11)

[adamkleingit]

Strange. Are you using windows / linux / mac ? Which node version + npm version? *Adam Klein* *Chief Technology Officer* *Tel.* +972-52-7475633 <+972527475633> *Web* 500tech.com <http://www.500tech.com/> | github.com/500tech | @adamklein500 <http://twitter.com/adamklein500>

…

On Mon, Dec 11, 2017 at 3:32 PM, Keith Gillette ***@***.***> wrote: I'm working on this PR, @adamkleingit <https://github.com/adamkleingit>, but running into the following error when attempting to follow your contribution guidelines <https://github.com/500tech/angular-tree-component#contributing> and test with npm run example:cli. This error occurs even with unmodified source code from the current release on master, so I think it may be related to this open Angular CLI error which occurs local libraries & the JIT compiler <angular/angular-cli#7409>. Please let me know if this occurs for you, as well. Uncaught Error: Unexpected value 'TreeModule' imported by the module 'AppModule'. Please add a @NgModule annotation. at syntaxError (compiler.js:485) at eval (compiler.js:15206) at Array.forEach (<anonymous>) at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15189) at JitCompiler._loadModules (compiler.js:34226) at JitCompiler._compileModuleAndComponents (compiler.js:34187) at JitCompiler.compileModuleAsync (compiler.js:34081) at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230) at PlatformRef.bootstrapModule (core.js:5573) at eval (main.ts:11) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#376 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2SSt6w-BSpGD1qtCDCzMIk2cJCGzOAks5s_S8AgaJpZM4OrW0L> .

[KeithGillette]

• MacOS X 10.13.1
• Node.JS 8.8.1
• NPM 5.4.2

Strangely, when I execute npm run example:cli, it automatically changes example/cli/package.json as follows:

-    "angular-tree-component": "^6",
+    "angular-tree-component": "file:../..",

[KeithGillette]

Hi, @adamkleingit,

I tried npm run example:cli off of both the HEAD of master (7.0.0) and the current release tagged commit (6.1.0) but in both cases get the same browser console error I reported earlier:

compiler.js:485 Uncaught Error: Unexpected value 'TreeModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:485)
    at eval (compiler.js:15206)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15189)
    at JitCompiler._loadModules (compiler.js:34226)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)
    at JitCompiler.compileModuleAsync (compiler.js:34081)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.bootstrapModule (core.js:5573)
    at eval (main.ts:11)

I've since updated to:

• Node.js 8.9.3
• NPM 5.5.1

FYI, my global installs are:

• @angular/cli@1.6.0
• typescript@2.6.2

Please let me know what recommendations you have for troubleshooting these errors so I can proceed with the changes for this PR.