Angular 2 and Owl carousel 2 / erro : $(...).owlCarousel is not a function

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.28.3 node: 6.9.4 os: win32 x64

Repro steps.

I put this in angular-cli.json :

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/owl.carousel/dist/owl.carousel.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

• In file component i put this :

import { Component, OnInit, AfterViewInit } from '@angular/core';
import 'rxjs';

declare var $:any;

@Component({
  selector: 'app-owl-carousel',
  templateUrl: './owl-carousel.component.html',
  styleUrls: ['./owl-carousel.component.css']
})
export class OwlCarouselComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
    
  }

  ngAfterViewInit(): void {
     $('.owl-example').owlCarousel();
  }

}

The log given by the failure.

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: $(…).owlCarousel is not a function TypeError: $(…).owlCarousel is not a function at OwlCarouselComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:28:27) at CompiledTemplate.proxyViewClass.View_OwlCarouselComponent_Host0.detectChangesInternal (/AppModule/OwlCarouselComponent/host.ngfactory.js:32:79) at CompiledTemplate.proxyViewClass.AppView.detectChanges

Any idea ?

[dereklin]

This is how I fixed the problem and made it work: https://github.com/dereklin/angular-cli-owl-carousel/commit/bd6b30acfee00f60516b541a4da6c5608a2b7b25

[RicardoVaranda]

@kamalkech @rajeshtandukar

You will be able to fix this issue by using:

npm install --save-dev @types/owlcarousel