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

$(...).owlCarousel is not a function Error Pt.2 #27

Closed evabat closed 6 years ago

evabat commented 6 years ago

I have this specific issue, after doing some research I have found that owl carousel tries to get initialized at ngAfterViewInit while the carousel-child is NOT STILL LOADED, please keep in mind that I use my app inside a page with high loading time... The problem occurs mostly when I change routes in my application.

Further Info: I import in anguar-cli.json my scripts:

"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/owl.carousel/dist/owl.carousel.js" ]

Then I concat all my .js bundles at a gulpfile.js file using this specific order: gulp.task('concat-js', function () { return gulp.src([ 'dist/scripts.bundle.js', 'dist/inline.bundle.js', 'dist/polyfills.bundle.js', 'dist/vendor.bundle.js', 'dist/main.bundle.js' ])

I have to mention that my carousel loads an array of objects that it gets populated according to route params (id). The carousel is not always visible, it gets hidden when a specific param is absent. However, the problem continues to exist even if I make the carousel constantly visible. I get this error:

image

My markup is the following:

<div [hidden] = "!hideCarousel"  class="carousel-parent">
        <div class="carousel-wrapper">
            <owl-carousel [options]="owlOptions" [items]="pages" [carouselClasses]="['owl-theme']">
                <div class="item" *ngFor="let page of pages; let i = index">
                    <div class="image-wrapper" *ngIf="page">
                            <a routerLink="{{prefixUrl}}/{{page.name}}/{{page.id}}">
                                <img src="{{prefixUrl}}/{{imgUrl}}">
                            </a>
                     </div>
                 </div>
            </owl-carousel>
        </div>
    </div>

Finally, after using some console messages, I've found out that the problem occurs when the carousel element is not loaded (does not have the class 'owl-loaded'). I have tried all the available workarounds. This drives me crazy. Any help would be greatly appreciated.

evabat commented 6 years ago

Well after 3 months not to mention that I have used another module anyway, FYI closing an issue without further explanation is not quite nice. Just saying.