<a href="https://angular.io/docs/ts/latest/guide/webpack.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/webpack.html</a>によると、あなたはファイルvendor.tsにjqueryのようにベンダーを追加することができる必要がありhttps://angular.io/docs/ts/latest/guide/webpack.html

Question

からvendor.tsを使用する方法

私はこれまで

typings install dt~jquery --global --save 
npm install jquery --save 

を行っていると私は

import 'jquery' 

のWebPACKがで実行vendor.tsするために、この行を追加したものを

// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ... 

エラーを出します。しかし、コンポーネントでjQueryを使用することはできません。

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

@Component({ 
    selector: 'table-widget', 
    templateUrl: 'table-widget.component.html' 
}) 

export class TableWidgetComponent implements OnInit { 

constructor(private _elRef: ElementRef) { 

} 

ngOnInit() : void { 
    $(this._elRef.nativeElement).find('button').on('click', function() { alert("it works"); }); 
} 
} 

私はここで間違っていますか？

Answer 1

jQueryをグローバルコンテキストに公開する必要があります。

これらのオプションのいずれかを使用して、必要な処理を達成できます。あなたのWebPACKの設定で

：

plugins: [ 
    .... //your other configs 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery' 
    }) 
] 

それともexpose-loader

module: { 
    loaders: [ 
     { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }, 
    ] 
}