角度：サードパーティのライブラリライブラリが見つかりません

Question

私の（最初の）AngularアプリケーションでいくつかのJQueryUIスライダを使用しています。

私のスライダの詳細を追加するには、JQuery-Ui-Slider-Pipsプラグインを使用します。このライブラリは、NPMでは利用できませんので、私は自分の資産のディレクトリにそれを追加し、私も私のindex.htmlファイルにこれを追加しました

"styles": [ 
    "styles.css", 
    "../node_modules/jqueryui/jquery-ui.css", 
    "./assets/css/pips/jquery-ui-slider-pips.css" 
], 
"scripts": [ 
    "./assets/js/pips/jquery-ui-slider-pips.min.js" 
], 

私.angular-cli.jsonファイルにこれを追加しました：

import $ from 'jquery'; 
import 'jqueryui'; 

そして、私はngOnInit（）メソッド中に特定のメソッド呼び出しで私のスライダーを初期化します：

<link rel="stylesheet" href="./assets/css/pips/jquery-ui-slider-pips.css"> 

<script src="../node_modules/jquery/dist/jquery.min.js"></script> 
<script src="../node_modules/jqueryui/jquery-ui.js"></script> 
<script src="./assets/js/pips/jquery-ui-slider-pips.min.js"></script> 

私は私のcomponent.tsにjQueryとjQueryUIをインポートした

initSlider(minValue, maxValue, stepValue, initialValue) { 
$(this.elementRef.nativeElement).find("slider").slider({ 
    range: false, 
    min: minValue, 
    max: maxValue, 
    step: stepValue, 
    value: initialValue, 
    slide: (event, ui) => { 
    this.selectedValue = ui.value; 
    this.sliderChanged(); 
    } 
}).slider("pips", { 
    rest: "label" 
}).slider("float", { 
}) 
; 
} 

しかし、私は次のようなエラーがあります。

「エラー：スライダーウィジェットインスタンスの無いような方法 『ピップ』」私は、ライブラリは、スクリプトの実行時に検出されないと思います

を、なぜか分かりません...

PS：Angular 4のJSFiddleのような編集可能なサンプルを作成する方法はわかりませんが、私はかなり新しくなっています。しかし、必要であれば適切なリンク、私はこれを提供することができます:)

Answer 1

私の問題の解決策が見つかりました。私はスライダーを初期化してコンポーネントに入れていく方法を変えました。

import { Component, ElementRef, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core'; 
declare var $: any; 
declare var noUiSlider: any; 

@Component({ 
    selector: 'app-slider', 
    template: `<div id="mySlider" class="slider"></div>`, 
    styleUrls: ['./styles/styles.css'] 
}) 

export class Slider implements OnInit { 

    @Input() minValue; 
    @Input() maxValue; 
    @Input() stepValue; 
    @Input() initialValue; 
    @Output() sliderChanged = new EventEmitter(); 

    constructor(private elementRef: ElementRef) { 
    } 

    ngOnInit() { 
     this.renderSlider(); 
    } 

    renderSlider() { 
     let that = this; 
     $(this.elementRef.nativeElement).find("#mySlider").slider({ 
      range: false, 
      min: +that.minValue, 
      max: +that.maxValue, 
      step: +that.stepValue, 
      value: +that.initialValue, 
      slide: function (event, ui) { 
       that.sliderChanged.emit(ui.value); 
      } 
     }).slider("pips", { 
      rest: "label", 
     }).slider("float", { 
     }); 
    } 
} 

：それは誰かに助けを提供することができれば

コード、