Angular 2 - Use external library with jquery

Question

I'm using Angular 2 with jQuery and it works well. I'd like to use some external libraries like masonry-layout but i have a problem:

jQuery(...).masonry() is not a function

I use webpack to get JQuery work.

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();
    }
}

Any suggestion ? Thanks !

Answer 1

Firstly you should change your import to:

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

Seems configuration changes don't work for this library:

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

So you can try the following:

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