Problem when try to implement in aspnetcore-angular2-universal

[GetTaxSolutions]

Hello,

We want to add ngx-owl-carousel (https://github.com/mujtaba01/ngx-owl-carousel) in the universal .net angular project - https://github.com/MarkPieszak/aspnetcore-angular2-universal. The project using webpack build system. The module in this project require jQuery and I started to implement in with follow steps:

1. webpack.config.vendor.js - add jquery module in nonTreeShakableModules and turn on ProvidePlugin new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
2. Install carousel modules npm install owl.carousel "ngx-owl-carousel --save
3. Load CSS files - add them into app.component.scss @import "~owl.carousel/dist/assets/owl.carousel.css"; @import "~owl.carousel/dist/assets/owl.theme.default.css";
4. Register the module in app.module.ts file: import { OwlModule } from 'ngx-owl-carousel'; ..... @NgModule({ imports: [ ........ , OwlModule ]);
5. Add owl-carousel component in some of our components to use it: `<owl-carousel [options]="{items: 3, dots: false, navigation: false}">
   

         <div class="item"><img alt="" src="../../../content/images/aboutus-2.jpg"></div>
         <div class="item"><img alt="" src="../../../content/images/aboutus-3.jpg"></div>
      </owl-carousel>`

We expect to see carousel module but the result is

OwlCarousel.html:1 ERROR ReferenceError: $ is not defined at new OwlChild (owl-child.component.js?bfe4:18) at createClass (vendor.js:12486) at createDirectiveInstance (vendor.js:12331) at createViewNodes (vendor.js:13769) at createEmbeddedView (vendor.js:13647) at callWithDebugContext (vendor.js:15060) at Object.debugCreateEmbeddedView [as createEmbeddedView] (vendor.js:14390) at TemplateRef.createEmbeddedView (vendor.js:11734) at ViewContainerRef.createEmbeddedView (vendor.js:11450) at NgIf._updateView (vendor.js:20125)

Obviously it doesn't find the jQuery. But when I'm trying to use in some of our components @import * as $ from 'jQuery' and invoke $(selector), it's there. Why OwlModule doen't find it? Is my implementation correct or doing something wrong?

We want to use exact owl-carousel because migrating old product from angular 1.0 to 5.0 using your universal project. I know that adding of jQuery in Angular is not good practice but I didn't found package of owl-carousel without jQuery but have to migrate old code faster. If you can give me better advise how to do it most intelligent I will be very happy, I'm beginner with angular 5 and have some confusions yet. Will wait for your help and advises.

Thank you very much, GetTaxSolutions team.

[mujtaba01]

Hi @GetTaxSolutions

Try this.

//after installing script-loader for webpack and after that instead of doing import * as $ from jQuery
require('script!jQuery');

Or you can try this:

import * as $ from 'jQuery';
window['$'] = $;

And also ensure that this import or require is only at one place in your application like vendor.ts

[GetTaxSolutions]

The integration looks ok now.