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.

Answer 1

@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.

Answer 2

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.