Aspnetcore-angular-universal: How to integrate vegas.js (and other jquery plug ins)

[johnwpowell]

Mark,

Great template! I was wondering if you could help me with some client-side jquery add ins for my landing page. I am using vegas.js for animated backgrounds. Could you help me get this working on my landing page with this template?

So far I have added the node package for vegas and in main.browser.ts I have added an import for the vegas package. I also need to add the vegas.css reference and some javascript on load:

$("body").vegas({
    delay: 9000,
    timer: false,
    transitionDuration: 2000,
    slides: [
        { src: "images/0.jpg" },
        { src: "images/1.jpg" },
        { src: "images/2.jpg" },
        { src: "images/3.jpg" },
        { src: "images/4.jpg" }
    ],
    transition: "swirlRight",
    animation: "kenburns"
});

I also have a few more plug ins to add but assume the approach used to integrate vegas would be the same for any jquery plug in.

Thanks!!

[MarkPieszak]

Hey @johnwpowell

I'll have to add and fix some logic to make this easier to do, typically you'd have to add jQuery and add it to your vendors list and also let Webpack know of the $ within your code.

Once that's in there, your plugin is imported into main.browser, and the code is wrapped around isPlatformBrowser and the $ is declared with that Component, you're usually all set, but it's never an easy process when including jQuery within server-rendered apps :(

[johnwpowell]

Thanks mark. Don't suppose there are any examples?

[michael-vasyliv]

https://webpack.js.org/plugins/provide-plugin/
use in the webpack:

// client: ....
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    })
  ]

// server: ...
  plugins: [
    new webpack.ProvidePlugin({
        jQuery: 'some.fake.module.for.call.jquery.on.node.side'
    })
  ]

---

and make sure u have a wrapper for ur code, some like this:

if (isPlatformBrowser(this.platform_id)) {
     // .... ur code ...;
}

[MarkPieszak]

Closing this one out, let me know if Vas's comment didn't do the trick!