"Property 'bxSlider' does not exist on type 'JQuery<HTMLElement>'" 在 Angular 项目上

Question

我在 Angular 项目上遇到这个错误，我正在尝试使用 bxSlider，我按照官方网页 https://bxslider.com/ 上的说明进行了安装，但似乎 VS Code（或Angular) 无法识别插件。

要安装它，我使用了 NPM 方法：

npm install bxslider --save

然后我包含了 bxslider css 和 js 脚本：

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

然后在我的组件中引用它：

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

我收到错误消息：属性 'bxSlider' 在类型 'JQuery' 上不存在。

奇怪的是，如果我在导航器控制台 (chrome) 上执行此操作：

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

它工作得很好，我可以看到空的 bxSlider，但是 VS Code 仍然向我显示错误并且 ng serve 命令抛出同样的错误。

在package.json的dependencies下，出现

"bxslider": "^4.2.14",

在包中-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=="
    },

我不知道是否必须将 bxslider 的路径放在 angular.json 上，但我做到了：

            "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"
            ]

还是不行。

我已经尝试过 CDN 方法并将 zip 文件下载到我的项目中，我得到了同样的错误。

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

Answer 1

那是因为类型 Jquery 不知道 bxSlider。

尝试将其转换为任何类型

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

或

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

"Property 'bxSlider' does not exist on type 'JQuery<HTMLElement>'" 在 Angular 项目上

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

jquery

angular

npm

visual-studio-code

bxslider