Блог

Я установил версию node-4.6.0, а версия npm — 3.10.8, которая кажется стабильной версией для финальной версии Angular 2. Я выполняю небольшую работу по созданию динамической древовидной структуры и перетаскиванию узлов из одного компонента в другой. Для этого я установил модуль Angular2-tree-component с помощью следующей команды: npm install —save angular2-tree-component

После установки я обновил app.component.ts приведенным ниже кодом (так как я перехожу по этой ссылке:):

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:StashangularTreeComponentTreeComponentsrcapp'
resolve './<Tree [nodes]="nodes"></Tree>' in 'C:StashangularTreeComponentTreeComponentsrcapp'
  using description file: C:StashangularTreeComponentTreeComponentpackage.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:StashangularTreeComponentTreeComponentpackage.json (relative path: ./src/app)
    using description file: C:StashangularTreeComponentTreeComponentpackage.json (relative path: ./src/app/<Tree [nodes]="nodes"></Tree>)
      as directory
        C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree> doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree> doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree>.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree>.js doesn't exist
[C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree>]
[C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree>]
[C:StashangularTreeComponentTreeComponentsrcapp<Tree [nodes]="nodes"><Tree>.ts]
[C:StashangularTreeComponentTreeComponentsrcapp<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. Заранее спасибо.

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

Помните, что для использования TreeComponent в другом модуле, отличном от AppModule, вам также придется импортировать его туда.

Вы не включили 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 метаданные.