JHipster: я не могу добавить зависимость от сторонней организации, например, angular-2-dropdown-multiselect

Question

Я добавил angular2-dropdown-multiselect в угловую часть Jhipster.Он не работает идеально, как в angular2-dropdwon-multi select или ngx-treeview. Я добавил зависимость, используя

 npm install angular2-multiselect-dropdown --save

Затем я добавил то же самое в app.module.ts

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
  ]
  // ...
})

Тогда попробуйте следующий пример

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    dropdownList = [];
    selectedItems = [];
    dropdownSettings = {};
    ngOnInit(){
        this.dropdownList = [
                              {"id":1,"itemName":"India"},
                              {"id":2,"itemName":"Singapore"},
                              {"id":3,"itemName":"Australia"},
                              {"id":4,"itemName":"Canada"},
                              {"id":5,"itemName":"South Korea"},
                              {"id":6,"itemName":"Germany"},
                              {"id":7,"itemName":"France"},
                              {"id":8,"itemName":"Russia"},
                              {"id":9,"itemName":"Italy"},
                              {"id":10,"itemName":"Sweden"}
                            ];
        this.selectedItems = [
                                {"id":2,"itemName":"Singapore"},
                                {"id":3,"itemName":"Australia"},
                                {"id":4,"itemName":"Canada"},
                                {"id":5,"itemName":"South Korea"}
                            ];
        this.dropdownSettings = { 
                                  singleSelection: false, 
                                  text:"Select Countries",
                                  selectAllText:'Select All',
                                  unSelectAllText:'UnSelect All',
                                  enableSearchFilter: true,
                                  classes:"myclass custom-class"
                                };            
    }
    onItemSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    OnItemDeSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    onSelectAll(items: any){
        console.log(items);
    }
    onDeSelectAll(items: any){
        console.log(items);
    }
}

с HTML

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

Но после запуска yarn serve

он просто показывает

Пожалуйста, помогите мне

Answer 1

У меня была похожая проблема с другой сторонней библиотекой (ngx-treeview), и я также получал только пустой компонент html и без ошибок в консоли javascript.

Эта проблема была решена после импорта третьейсторонняя библиотека, соответствующая структуре проекта JHipster.Если вы хотите использовать внешний модуль в более чем одном компоненте модуля, что является общим, вам нужно настроить его в shared-libs.module.ts , а также добавить его в import и export в его конфигурации @NgModule.

src \ main \ webapp \ app \ shared \ shared-libs.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgJhipsterModule } from 'ng-jhipster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { CookieModule } from 'ngx-cookie';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { TreeviewModule } from 'ngx-treeview';

@NgModule({
    imports: [
        NgbModule.forRoot(),
        NgJhipsterModule.forRoot({
            alertAsToast: false,
            i18nEnabled: true,
            defaultI18nLang: 'en'
        }),
        InfiniteScrollModule,
        CookieModule.forRoot(),
        FontAwesomeModule,
        TreeviewModule.forRoot()  // new third party lib import
    ],
    exports: [FormsModule, CommonModule, NgbModule, NgJhipsterModule, 
              InfiniteScrollModule, FontAwesomeModule, 
              TreeviewModule] // new third party lib export
})
export class MyProjectSharedLibsModule {}

Share-Модуль libs генерируется Jhipster и по умолчанию импортируется в shared.module, который импортируется app.module, а также в другие модули, которые создаются при запуске Jhipster.Подробнее о структуре проекта: https://www.jhipster.tech/using-angular/

Однако, если вы создаете новый компонент углового модуля, вам нужно добавить общий модуль импорта, чтобы иметь возможность использовать сторонние библиотеки.

@NgModule({
   ...
    imports: [MyProjectSharedModule,
              RouterModule.forChild([HOME_ROUTE])],
   ..
})
export class MyProjectAnotherModule {}