tree-root drag and drop doesn't work if it's the first route visited in a lazy loaded module

[robotdevil]

Our application has four modules (AppModule, CoreModule, LazyLoadedModule1 and LazyLoadedModule2).

There is a component in LazyLoadedModule1 that has a tree-root setup for drag and drop using the example code from the docs (https://angular2-tree.readme.io/docs/drag-drop).

AppModule has the import TreeModule.forRoot() The other three modules have the import TreeModule

Visiting the route assigned to the component with the tree-root in LazyLoadedModule1 either directly or via a core module route then the drag and drop doesn't function.

Visiting a route assigned to a component in LazyLoadedModule2 and then visiting the route assigned to the component with the tree-root in LazyLoadedModule1 then the drag and drop works fine.

It also seems to be the case that if you visit another component first in LazyLoadedModule1 then visit the tree-root component it also works fine.

Additional Info

Tested in chrome

Package.json:

{ "name": "platform-dash", "version": "0.0.0", "license": "MIT", "scripts": { ... }, "private": true, "dependencies": { "@angular/animations": "^7.2.1", "@angular/cdk": "^7.2.1", "@angular/common": "^7.2.1", "@angular/compiler": "^7.2.1", "@angular/core": "^7.2.1", "@angular/forms": "^7.2.1", "@angular/http": "^7.2.1", "@angular/material": "^7.3.5", "@angular/material-moment-adapter": "^7.2.1", "@angular/platform-browser": "^7.2.1", "@angular/platform-browser-dynamic": "^7.2.1", "@angular/router": "^7.2.1", "@ngrx/core": "^1.2.0", "@ngrx/effects": "^7.1.0", "@ngrx/router-store": "^7.1.0", "@ngrx/store": "^7.1.0", "@ngrx/store-devtools": "^7.1.0", "@stomp/ng2-stompjs": "^6.0.0", "@swimlane/dragula": "^3.7.3", "@swimlane/ngx-dnd": "^5.0.6", "@types/auth0-js": "^8.11.10", "@types/dragula": "^2.1.33", "@types/filesize": "^3.6.0", "@types/moment-duration-format": "^2.2.2", "@types/moment-timezone": "^0.5.5", "@types/pluralize": "0.0.28", "@types/sockjs-client": "^1.1.0", "angular-svg-icon": "^7.2.0", "angular-tree-component": "^8.0.0", "angular2-moment": "^1.9.0", "angular2-text-mask": "^8.0.5", "angulartics2": "^6.2.0", "array-to-tree": "^2.2.1", "auth0-js": "^9.10.1", "clooneyjs": "^0.7.0", "color-js": "^1.0.5", "core-js": "^2.4.1", "css-loader": "^2.1.1", "file-loader": "^1.1.6", "filesize": "^3.6.1", "gulp-if": "^2.0.2", "gulp-rename": "^1.3.0", "gulp-replace": "^1.0.0", "hammerjs": "^2.0.8", "http-status-codes": "^1.3.0", "jwt-decode": "^2.2.0", "lodash": "^4.17.11", "lodash-es": "^4.17.5", "moment": "^2.24.0", "moment-duration-format": "^2.2.2", "moment-timezone": "^0.5.17", "ngx-color-picker": "^7.0.2", "ngx-permissions": "^6.0.5", "ngx-toastr": "^9.1.1", "ngx-virtual-scroller": "^2.0.7", "pica": "^4.1.1", "pluralize": "^7.0.0", "queue": "^4.4.2", "resize-observer": "^1.0.0-alpha.1", "rxjs": "^6.3.3", "sass-loader": "^6.0.6", "sass-mq": "^5.0.0", "saturn-datepicker": "^7.2.0", "sockjs-client": "^1.1.5", "style-loader": "^0.19.1", "svg-url-loader": "^2.3.1", "threadpool-js": "^0.5.0", "timer-stopwatch": "^0.2.0", "to-string-loader": "^1.1.5", "tslib": "^1.9.3", "url-loader": "^0.6.2", "web-animations-js": "^2.3.1", "workerpool": "^3.0.0", "zone.js": "^0.8.28" }, "devDependencies": { "@angular-devkit/build-angular": "^0.13.8", "@angular/cli": "^7.2.2", "@angular/compiler-cli": "^7.2.1", "@angular/language-service": "^7.2.1", "@types/hammerjs": "^2.0.35", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/lodash-es": "^4.17.0", "@types/node": "^6.0.96", "@types/workerpool": "^2.3.0", "angular-playground": "^5.0.1", "babel-core": "^6.26.3", "codelyzer": "^4.0.1", "gulp": "^4.0.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "^4.0.1", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "ng2-mock-component": "^0.1.0", "ngrx-store-freeze": "^0.2.4", "protractor": "^5.3.2", "puppeteer": "^1.13.0", "puppeteer-core": "^1.11.0", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", "stylelint-order": "^1.0.0", "stylelint-scss": "^3.1.0", "ts-mockito": "^2.2.7", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "3.2.4" } }

[rogerdtaylor]

We are also seeing this issue, would be nice to have an update

[KeithGillette]

I'd be curious to know whether my open PR#780, which changes the way the TreeDraggedElement service is provided, corrects this issue.