Angular 2 - Verwenden Sie externe Bibliothek mit Jquery

Question

Ich benutze Angular 2 mit jQuery und es funktioniert gut. Ich möchte einige externe Bibliotheken wie masonry-layout verwenden, aber ich habe ein Problem.

jQuery (...) Mauerwerk() ist keine Funktion

I webpack verwenden JQuery Arbeit zu bekommen .

new ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    }) 

test.component.ts

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

import 'masonry-layout'; 

@Component({ 
    selector: 'test', 
    template: ` 
     <div class="container-fluid grid"> 
      <div class="grid-item">...</div> 
      <div class="grid-item">...</div> 
      <div class="grid-item">...</div> 
      <div class="grid-item">...</div> 
     </div> 
    ` 
}) 
export class TestComponent { 
    ngOnInit() { 
     jQuery('.grid').masonry(); 
    } 
} 

Jeder Vorschlag? Vielen Dank !

Answer 1

Zunächst sollten Sie Ihren Import ändern:

import 'masonry-layout/dist/masonry.pkgd'; 

Scheint Konfigurationsänderungen für diese Bibliothek nicht funktionieren:

new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    'window.jQuery': 'jquery' <== this line 
}), 

So können Sie versuchen, die folgenden:

window.jQuery = jQuery; 
import 'masonry-layout/dist/masonry.pkgd';