search

mujtaba01 / ngx-owl-carousel

An angular2 (4) wrapper for jquery owl-carousel library with dynamic carousel item change detection
MIT License
70 stars 25 forks source link

ngx-owl-carousel not working in angular 7.x and displaying no errors #57

Open ckailash30 opened 5 years ago

ckailash30 commented 5 years ago

Hello, I just tried everything to display Owl-Carousel but neither it's giving error nor displaying the images. If some one found any solution regarding this issue, please tell me how to resolve this issue.

junaidbinsarfraz commented 5 years ago

I also have the issue showing Owl-Carousel in Angular 7.x project. I am actually working on Angular-Universal project.

After adding the Owl-Carousel in Angular-Universal and then run the npm run ssr, it will start node server to serve the angular pages. When I try to load the page, it shows below error

ERROR ReferenceError: $ is not defined
    at OwlChild.WzYf.OwlChild.ngOnInit (webpack:///./dist-server/main.854bb442d3bcd3a5191c.js?:1:1474975)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:22442:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:23706:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:23668:16)
    at prodCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:24209:5)
    at Object.eval [as updateDirectives] (webpack:///./dist-server/main.854bb442d3bcd3a5191c.js?:1:1533278)
    at Object.updateDirectives (webpack:///./node_modules/@angular/core/fesm5/core.js?:23997:72)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:23650:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:23891:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:23833:13)

It seems like it has an issue with jQuery or $. I am sure that I have added jquery using npm install jquery, and import the jquery in angular.json

"node_modules/jquery/dist/jquery.min.js"

If someone solved the problem, do let me know.

RakeshPaiR commented 4 years ago

As per https://www.npmjs.com/package/ngx-owl-carousel You need to install script loader too. npm install script-loader It worked for me

I also have the issue showing Owl-Carousel in Angular 7.x project. I am actually working on Angular-Universal project.

After adding the Owl-Carousel in Angular-Universal and then run the npm run ssr, it will start node server to serve the angular pages. When I try to load the page, it shows below error

ERROR ReferenceError: $ is not defined
    at OwlChild.WzYf.OwlChild.ngOnInit (webpack:///./dist-server/main.854bb442d3bcd3a5191c.js?:1:1474975)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:22442:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:23706:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:23668:16)
    at prodCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:24209:5)
    at Object.eval [as updateDirectives] (webpack:///./dist-server/main.854bb442d3bcd3a5191c.js?:1:1533278)
    at Object.updateDirectives (webpack:///./node_modules/@angular/core/fesm5/core.js?:23997:72)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:23650:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:23891:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:23833:13)

It seems like it has an issue with jQuery or $. I am sure that I have added jquery using npm install jquery, and import the jquery in angular.json

"node_modules/jquery/dist/jquery.min.js"

If someone solved the problem, do let me know.

anantksingh commented 4 years ago

Hi @RakeshPaiR, @junaidbinsarfraz ,

I am facing same issue you got any solution

Angular-Universal project

How i implement and where after installed=> npm install script-loader

ERROR ReferenceError: $ is not defined at OwlChild.module.exports../node_modules/ngx-owl-carousel/src/owl-child.component.js.OwlChild.ngOnInit (/var/www/html/angular8new/dist/server.js:158539:48) at checkAndUpdateDirectiveInline (/var/www/html/angular8new/dist/server.js:21621:19) at checkAndUpdateNodeInline (/var/www/html/angular8new/dist/server.js:30019:20) at checkAndUpdateNode (/var/www/html/angular8new/dist/server.js:29981:16) at prodCheckAndUpdateNode (/var/www/html/angular8new/dist/server.js:30522:5) at Object.updateDirectives (/var/www/html/angular8new/dist/server.js:158500:732) at Object.updateDirectives (/var/www/html/angular8new/dist/server.js:30310:72) at checkAndUpdateView (/var/www/html/angular8new/dist/server.js:29963:14) at callViewAction (/var/www/html/angular8new/dist/server.js:30204:21) at execComponentViewsAction (/var/www/html/angular8new/dist/server.js:30146:13) ERROR ReferenceError: $ is not defined at OwlChild.module.exports../node_modules/ngx-owl-carousel/src/owl-child.component.js.OwlChild.ngOnInit (/var/www/html/angular8new/dist/server.js:158539:48) at checkAndUpdateDirectiveInline (/var/www/html/angular8new/dist/server.js:21621:19) at checkAndUpdateNodeInline (/var/www/html/angular8new/dist/server.js:30019:20) at checkAndUpdateNode (/var/www/html/angular8new/dist/server.js:29981:16) at prodCheckAndUpdateNode (/var/www/html/angular8new/dist/server.js:30522:5) at Object.updateDirectives (/var/www/html/angular8new/dist/server.js:158500:732) at Object.updateDirectives (/var/www/html/angular8new/dist/server.js:30310:72) at checkAndUpdateView (/var/www/html/angular8new/dist/server.js:29963:14) at callViewAction (/var/www/html/angular8new/dist/server.js:30204:21) at execComponentViewsAction (/var/www/html/angular8new/dist/server.js:30146:13)