Angular 2の最終リリースでangle2-tree-componentを実装中にエラーが発生しました

Question

ノード4.6.0のバージョンがインストールされていて、npmのバージョンが3.10.8で、Angular 2の最終リリースの安定版です。 私は動的なツリー構造を作成し、あるコンポーネントから別のコンポーネントにノードをドラッグ・アンド・ドロップする際に小さなPOCを実行しています。そのために私は、コマンド以下にモジュールAngular2ツリー・コンポーネントをインストールしている： インストール後--save angular2ツリー成分

をNPMをインストールし、私は以下のコードでapp.component.tsを更新しました（私はと

App.component.ts：thisリンク:)次

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 { } 

サーバを起動する際のように、それは私にエラーを与えている：私はangular2ツリー・コンポーネントを使用することが行方不明です手順わからないよ

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 

。前もって感謝します。

Answer 1

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

この部分は正しくありませんが、コンポーネントクラスのみを指定していますが、モジュールは指定していません。次のようになります。あなたのapp.component.tsファイル、隣app.module.tsがあるはず ：私はここにTreeModuleをインポート

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

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

お知らせ、これはあなたがAppModuleに属しているコンポーネントの内部でそのコンポーネントを使用できることを意味します。

AppComodule以外のモジュールでTreeComponentを使用する場合は、そのモジュールもインポートする必要があります。

Answer 2

あなたapp.component.tsでAppModuleクラスが含まれていない：

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 { 
} 

上記の変更はbootstrap : [AppComponent]@NgModule内のメタデータを追加することにより、チェックしてみてください、その後に動作しない場合。