Question

我在Angular 6应用程序中导入了Jquery roundslider，但是显示以下错误。

jquery__WEBPACK_IMPORTED_MODULE_5 __（...）。roundSlider不是功能。

我已点击以下链接：How to use RoundSliderUI in Angular 6

但是我仍然面临着这个问题。

Answer 1

@s Vivekanandan Can you try this.

    **Install jQuery: npm install jquery --save  
    Install typings for jQuery: npm install @types/jquery --save-dev  
    Install RoundSliderUI npm i round-slider see npm round-slider**

 In tsconfig.app.json add jQuery under types; the result for me looks like this:

    {  
      "extends": "../tsconfig.json",  
      "compilerOptions": {  
        "outDir": "../out-tsc/app",  
        "types": [ 
          "jquery"  
         ]  
     },   
      "exclude": [  
        "src/test.ts",  
        "**/*.spec.ts"  
      ]
     }

在angular.json中，将路径添加到脚本：

    "scripts": [ 
      "./node_modules/jquery/dist/jquery.min.js",   
      "./node_modules/round-slider/dist/roundslider.min.js"
     ]

还要在angular.json中添加样式下css文件的路径：

"styles": [
  "src/styles.scss",
  "./node_modules/round-slider/dist/roundslider.min.css"
 ]

在types.d.ts中添加以下内容，如果该文件不存在，请在index.html所在的文件夹中创建该文件。

interface JQuery {
   roundSlider(options?: any): any;
 }

现在检查是否在任何地方都包含一个滑块

Answer 2

我有同样的问题。我的错误是，在我需要的文件中，我这样导入了它

import * as $ from 'jquery';

当我将其更改为

时，一切正常

declare const $: any;

带有角度6的jQuery Roundslider

2 个答案: