Getting error while implementing angular2-tree-component in Angular 2 final release

Question

I have installed node-4.6.0 version and npm version is 3.10.8 which seems stable version for Angular 2 final release. I am doing small POC on creating dynamic tree structure and drag and drop nodes from one component to another. For that I have installed module Angular2-tree-component with below command: npm install --save angular2-tree-component

After installation, I have updated app.component.ts with below code (as I am following this link:):

App.component.ts:

import { Component,NgModule } from '@angular/core';
import { TreeModule } from 'angular2-tree-component';

@NgModule({
  imports: [TreeModule]
})

@Component({
  selector: 'app-root',
  templateUrl: '<Tree [nodes]="nodes"></Tree>'
})
export class AppComponent {
  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' }
          ]
        }
      ]
    }
  ];
}

App.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TreeModule } from 'angular2-tree-component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TreeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

While starting the servers, it is giving me error like:

Module not found: Error: Can't resolve './<Tree [nodes]="nodes"></Tree>' in 'C:\Stash\angularTreeComponent\TreeComponent\src\app'
resolve './<Tree [nodes]="nodes"></Tree>' in 'C:\Stash\angularTreeComponent\TreeComponent\src\app'
  using description file: C:\Stash\angularTreeComponent\TreeComponent\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Stash\angularTreeComponent\TreeComponent\package.json (relative path: ./src/app)
    using description file: C:\Stash\angularTreeComponent\TreeComponent\package.json (relative path: ./src/app/<Tree [nodes]="nodes"></Tree>)
      as directory
        C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree> doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree> doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>.js doesn't exist
[C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>]
[C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>]
[C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>.ts]
[C:\Stash\angularTreeComponent\TreeComponent\src\app\<Tree [nodes]="nodes"><\Tree>.js]
 @ ./src/app/app.component.ts 45:22-64
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

I am not sure what steps I am missing to use angular2-tree-component. Thanks in advance.

Can we change structure of nodes ?

Pheonix
– Pheonix

2016-11-30 09:04:08 +00:00
Commented Nov 30, 2016 at 9:04 — Pheonix
– Pheonix, Commented Nov 30, 2016 at 9:04

Alexander Ciesielski · Accepted Answer · 2016-10-15 07:21:53Z

3

@NgModule({
  imports: [TreeModule]
})
@Component({
  selector: 'app-root',
  templateUrl: '<Tree [nodes]="nodes"></Tree>'
})
export class AppComponent { ... }

This part is incorrect, you are only specifying a component class, but no module. There should be an app.module.ts next to your app.component.ts file, which should look like this:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

@NgModule({
  imports: [BrowserModule, TreeModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Notice that I import TreeModule here, this means you can use that component inside components that belong to AppModule.

Remember that to use TreeComponent in another module than AppModule, you will have to import it there as well.

answered Oct 15, 2016 at 7:21

Alexander Ciesielski

10.8k5 gold badges48 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mayank Bansal Over a year ago

I have made changes in app.module.ts as you mentioned but still the same error, below are both files, app.component.ts and app.module.ts:

Alexander Ciesielski Over a year ago

You should remove the NgModule decorator from your component.

Mayank Bansal Over a year ago

I am updating both the files in my question, seems I cant paste code here.

Mayank Bansal Over a year ago

I removed NgModule from app.component.ts but still the same issue. Am I doing some blunder with the logic.

Alexander Ciesielski Over a year ago

Your error happens on line 45 in app.component.ts. Please paste that line into your question.

|

ranakrunal9 · Accepted Answer · 2016-10-15 07:15:25Z

0

You have not included AppModule class in your app.component.ts :

import { Component,NgModule } from '@angular/core';
import { TreeModule } from 'angular2-tree-component';

@Component({
  selector: 'app-root',
  templateUrl: '<Tree [nodes]="nodes"></Tree>'
})
export class AppComponent {
  // your component code
}

@NgModule({
  imports: [TreeModule],
  declarations: [AppComponent]
})
export class AppModule {
}

If above changes not work then try to check by adding bootstrap : [AppComponent] in @NgModule metadata.

answered Oct 15, 2016 at 7:15

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Collectives™ on Stack Overflow

Getting error while implementing angular2-tree-component in Angular 2 final release

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related