Question

我安装了node-4.6.0版本，npm版本是3.10.8，这似乎是Angular 2最终版本的稳定版本。我正在创建动态树结构的小POC，并将节点从一个组件拖放到另一个组件。为此，我使用以下命令安装了模块Angular2-tree-component： npm install --save angular2-tree-component

安装完成后，我使用以下代码更新了app.component.ts（因为我关注this链接:)：

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

启动服务器时，它给出了如下错误：

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

我不确定使用angular2-tree-component时我缺少哪些步骤。提前谢谢。

Answer 1

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

这部分不正确，您只是指定了一个组件类，但没有指定模块。 app.module.ts文件旁边应该有app.component.ts，如下所示：

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

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

请注意，我在此处导入TreeModule，这意味着您可以在属于AppModule的组件中使用该组件。

请记住，要在除AppModule之外的其他模块中使用TreeComponent，您还必须在那里导入它。

Answer 2

您的AppModule：

中未包含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 {
}

如果上述更改无效，请尝试在bootstrap : [AppComponent]元数据中添加@NgModule进行检查。

在Angular 2最终版本中实现angular2-tree-component时获取错误

2 个答案: