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

[junaidbinsarfraz]

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]

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]

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)