在Angular项目中，“类型‘JQuery<HTMLElement>’上不存在属性'bxSlider‘”

Question

我在一个Angular项目中遇到了这个错误，我试图使用bxSlider，我按照官方网页https://bxslider.com/上的说明安装了它，但VS代码(或Angular)似乎无法识别这个插件。

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

npm install bxslider --save

然后我添加了bxslider和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代码仍然向我显示错误，并且ng serve命令抛出相同的错误。

在package.json中，它出现在依赖项下

"bxslider": "^4.2.14",

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

我不知道是否必须将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< HTMLElemen t>不知道bxSlider。

尝试将其强制转换为任何类型

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

或

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