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

[kamalkech]

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 ?

[rajeshtandukar]

Same Problem here :(

[RicardoVaranda]

@kamalkech @rajeshtandukar

You will be able to fix this issue by using:

npm install --save-dev @types/owlcarousel

[filipesilva]

Closing as answered.

[dereklin]

This is failing at runtime for me:

__WEBPACK_IMPORTED_MODULE_2_jquery__(...).owlCarousel is not a function

How did you guys work owlCarousel work with cli?

[amitgaur208]

Problem not solved with npm install --save-dev @types/owlcarousel

[RicardoVaranda]

Do you also have jquery types installed?

[amitgaur208]

@RicardoVaranda Yes. I have installed it already with command npm install script-loader

[RicardoVaranda]

@amitgaur208 Could you create a repo project and upload it to github so I can pull and fix it, will be easier this way to see what modifications are required, thanks!

[dereklin]

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

[filipesilva]

Closing as inactive.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}