Angular 6树形图

Question

我想实现一个树形图-类似于angular2-tree-diagram。精确地，我的任务是一个问答层次结构，其中将根据当前节点的问答来传播问答。

但是，this软件包是为Angular 2制作的。我正在尝试将其与Angular 6集成，在这种情况下无法成功。

主模块[app.module.ts]脚本：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppMaterialModule } from './app-material.module';
import {
  FormsModule,
  ReactiveFormsModule
} from '../../node_modules/@angular/forms';
import { HeaderComponent } from './navigation/header/header.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FooterComponent } from './navigation/footer/footer.component';
import { MobileSidemenuComponent } from './navigation/sidemenu/mobile-sidemenu/mobile-sidemenu.component';
import { LoginComponent } from './login/login.component';
import { PhonebookComponent } from './phonebook/phonebook.component';
import { TestWelcomePageComponent } from './test-welcome-page/test-welcome-page.component';
import { AppRoutingModule } from './app-routing.module';

import { FlashMessagesModule } from 'angular2-flash-messages';
import { FlashMessagesService } from 'angular2-flash-messages';

import { NgFlashMessagesModule } from 'ng-flash-messages';

import { MatDialogModule } from '@angular/material';
import { HttpModule } from '@angular/http';
import { TasksComponent } from './tasks/tasks.component';
import { NewsComponent } from './news/news.component';

import { AuthTokenInterceptor, ErrorInterceptor } from './interceptor';
import { RecordTaskFormInterceptor } from './interceptor';
import { PerformanceDialogComponent } from './performance-dialog/performance-dialog.component';
import { ProblemOverviewComponent } from './problem-overview/problem-overview.component';
import { TaskOrProblemTrackingComponent } from './task-or-problem-tracking/task-or-problem-tracking.component';
import { RecordDeviationComponent } from './record-deviation/record-deviation.component';
import { CreateInformationComponent } from './create-information/create-information.component';
import { AdminDomainSettingComponent } from './admin-domain-setting/admin-domain-setting.component';
import { AccountSettingComponent } from './account-setting/account-setting.component';

import { DashboardComponent } from './dashboard/dashboard.component';
import { NewsDialogComponent } from './news/news-dialog/news-dialog.component';
import { HomeComponent } from './home/home.component';
import { ProblemSolvingComponent } from './problem-solving/problem-solving.component';
import { ProblemStepperComponent } from './problem-solving/problem-stepper/problem-stepper.component';
import { DeviationFormComponent } from './problem-solving/deviation-form/deviation-form.component';
import { SpecificationFormComponent } from './problem-solving/specification-form/specification-form.component';
import { DescriptionFormComponent } from './problem-solving/description-form/description-form.component';
import { DirectcauseFormComponent } from './problem-solving/directcause-form/directcause-form.component';
import { AnalysisFormComponent } from './problem-solving/analysis-form/analysis-form.component';
import { ImplementationFormComponent } from './problem-solving/implementation-form/implementation-form.component';
import { FishboneDiagramComponent } from './problem-solving/fishbone-diagram/fishbone-diagram.component';
import { RecordTaskFormComponent } from './record-deviation/record-task-form/record-task-form.component';
import { RecordProblemFormComponent } from './record-deviation/record-problem-form/record-problem-form.component';


import { TreeDiagram } from 'angular2-tree-diagram';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MobileSidemenuComponent,
    FooterComponent,
    LoginComponent,
    PhonebookComponent,
    TestWelcomePageComponent,
    TasksComponent,
    NewsComponent,
    RecordTaskFormComponent,
    PerformanceDialogComponent,
    ProblemOverviewComponent,
    TaskOrProblemTrackingComponent,
    RecordDeviationComponent,
    CreateInformationComponent,
    AdminDomainSettingComponent,
    AccountSettingComponent,
    RecordProblemFormComponent,
    DashboardComponent,
    HomeComponent,
    NewsDialogComponent,
    ProblemSolvingComponent,
    ProblemStepperComponent,
    DeviationFormComponent,
    SpecificationFormComponent,
    DescriptionFormComponent,
    DirectcauseFormComponent,
    AnalysisFormComponent,
    ImplementationFormComponent,
    FishboneDiagramComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppMaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpModule,
    HttpClientModule,
    FlashMessagesModule.forRoot(),
    NgFlashMessagesModule.forRoot(),
    TreeDiagram
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: RecordTaskFormInterceptor, multi: true },
    FlashMessagesService,
    MatDialogModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [LoginComponent, PhonebookComponent, NewsDialogComponent]
})
export class AppModule { }

任何帮助将不胜感激。谢谢