Null Injector Error - [TreeDragDirective -> TreeDraggedElement]

[Eddie541]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Upgrading from version 8.3 to 10.0.0 In 8.3.0 simply adding forRoot() to the TreeModule import solved this issue. In 10.0.0 there is no static forRoot() method

Expected behavior:

The Drag Directive and Drag Element should be imported with the module and no errors should occur

Minimal reproduction of the problem with instructions:

Include drag and drop functionality in tree Upgrade from 8.3.0 and change paths where used to '@circlon/angular-tree-component' Load tree component

Version of affected browser(s),operating system(s), npm, node and angular-tree-component:

    Win10 (Version 10.0.17763 Build 17763)
    npm 6.13.4
Node.js v12.14.1
Chrome: Version 85.0.4183.102 

[tobiasengelhardt]

Hi @Eddie541, are you importing the TreeDragDirective or TreeDraggedElement into your project? Can you share some example what you do with the tree? You just need to import the TreeModule, there is no need to include .forRoot() anymore.

[Eddie541]

I'm just now circling back to this. Thanks for the response.

I can't show full code but here are some details and information including a screenshot (may not be able to post) of the error:

// In a 'common module' our tree component // line 44 is here -> <tree-root #treeRoot [(state)]="state" [nodes]="dataLoaded$ | async" [options]="options"

                 // in component.ts file

@ViewChild('treeRoot', { static: true }) public treeRoot: TreeComponent;

// common module import import {TreeModule} from '@circlon/angular-tree-component';

@NgModule({ imports: [ ... TreeModule,
... ]

Also The app builds and runs, even in prod but running tests that have the tree included fail with many errors like this:

ERROR in ../node_modules/@circlon/angular-tree-component/lib/components/tree-node-collection.component.d.ts:5:9 - error TS1086: An accessor cannot be declared in an ambient context.

5 get nodes(): any;

It's my understanding is that this is either a typescript or angular version mismatch. I tried updating Typescript (to 4.0.5 - no luck) but I can't yet upgrade to Angular 9 if that is what is required. We are on the 8.2.0 version of Angular.

I've removed node_modules cache verified and re-installed everything but still no luck

[kwbonte]

This is an issue for me as well, a blocking issue for upgrading my app from angular 8 to angular 9. I have tried the above steps of moving from 8.3.0 to 9.0.1, 9.0.2, and 9.0.3

I had to add "skipLibCheck": true, to my tsconfig.json just to get the project to compile and even on trees where I am not using or leveraging the dragging functionality the TreeDraggedElement is causing the entire component to fail.

[tobiasengelhardt]

Version 9.0.3 is made for Angular 9. If you are still on Angular 8 and switched the Tree to Version 9 that probably will not work correctly due to the mayor changes between Angular 8 and 9. If you have those issues still after beeing on Angular 9 and Version 9 of the tree, then I would need a bit more information. I have build a simple demo project in Angular 9 and that works fine including the unit tests. But it's just a simple project, to recreate your use cases I need some help.

[kwbonte]

Moving to Angular 9 resolved the issue with TreeDraggedElement for me.