jqueryangularnpmvisual-studio-codebxslider

"Property 'bxSlider' does not exist on type 'JQuery<HTMLElement>'" on Angular project

im getting this error on an Angular project, im trying to use bxSlider, I followed the instructions on the official web page https://bxslider.com/ to install it, but it appears that VS Code (or Angular) is not recognizing the plugin.

To install it, I did the NPM method:

npm install bxslider --save

then I included the bxslider css and js script:

<link rel="stylesheet" href="/node_modules/bxslider/dist/jquery.bxslider.min.css">
<script src="/node_modules/bxslider/dist/jquery.bxslider.min.js"></script>

and then in my component as soon as I reference it:

$('.slider').bxSlider();

I get the error: Property 'bxSlider' does not exist on type 'JQuery'.

The weird thing is that if I do this on navigator console (chrome):

$('.slider').bxSlider();

it works just fine, I can see the empty bxSlider, but VS Code is still showing me the error and ng serve command throws the same error.

In package.json, under dependencies, it appears

"bxslider": "^4.2.14",

and in package-lock.json:

 "bxslider": {
      "version": "4.2.14",
      "resolved": "https://registry.npmjs.org/bxslider/-/bxslider-4.2.14.tgz",
      "integrity": "sha512-7/OV7Jxe8yBS/7tOcxg2hYTPmACFMU1rRs3xqoljjFX/rSgMFVX0dzFqxZHWvUgl0+9TryNy5vhufB/499heFQ=="
    },

I dont know if I have to put the path to bxslider on angular.json, but I did it:

            "styles": [
              "src/assets/css/styles.css",
              "./node_modules/bxslider/dist/jquery.bxslider.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bxslider/dist/jquery.bxslider.min.js"
            ]

still, no luck.

I already tried the CDN method and download the zip file to my project, Im getting the same error.

Angular CLI: 12.2.1
Node: 14.17.1
Package Manager: npm 6.14.13
Solution

  • That's because type Jquery< HTMLElemen t> doesn't know bxSlider.

    Try casting it to any type

    ($('.slider') as any).bxSlider();

    or

    (<any>$('.slider')).bxSlider();