Use angular-tree-component in "dotnet new angular" project?

Question

When trying to integrate angular-tree-component into a project created with dotnet new angular, I consistently run into an exception:

void(0) is not a function.

Either the tree never appears, or it appears briefly, but then the error happens and it disappears. I imagine this is due to a package versioning issue, as the component's own demo works fine. But I have no idea which package, or what a work-around might be.

I've cross-posted this as an issue to the angular-tree-component forums and also made various attempts available as a public repo.

Any ideas?

Answer 1

I have just tested it myself and it was working on chrome version 73.0.3683.86. I have used Visual studio code, but you can use anything you want.

1. Create a folder and open it with VS Code
2. Open a terminal and execute dotnew new angular command - this will create a .net core application
3. Execute ng new tree-test command - it creates an angular app names tree-test. Select yes, when prompted and then choose scss format
4. Execute cd tree-test - to change working folder to a newly created angular app
5. Execute npm install --save angular-tree-component - this will install your component to the application
6. Open tree-test>src>styles.scss file and add a line in there: @import '~angular-tree-component/dist/angular-tree-component.css'; - this will make your tree styles work
7. Open app.module.ts file and add import { TreeModule } from 'angular-tree-component'; to the header and set up import like this: imports: [..., TreeModule.forRoot()]
8. Open app.component.html file and replace everything with <tree-root [nodes]="nodes" [options]="options"></tree-root>
9. Open app.component.ts and replace all AppComponent class content with the following:

nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};

10. run ng serve command, wait until it completes and open your browser in http://localhost:4200. You will see a nice tree there.