Question

我已经安装了Jquery和Jquery-ui

SELECT *

文件位于node_modules目录中。我有一个声明Jquery的组件

npm install --save jquery jquery-ui

我的jquery函数工作正常，但jquery-ui函数没有。

declare var $: JQueryStatic;

所以，显然我对jquery-ui的包含是不正确的。我尝试在.angular-cli.json页面中包含一些不同的东西但没有成功。

我在.angular-cli文件中尝试过的事情：

$('some-div').dropdown(); // works
$('window').draggable(); // draggable is not recognized as a function

我尝试直接导入到组件中，但这给定义$ ui带来了问题。我也得到了未定义的错误。

我查看了npm jquery-ui和Jquery-ui Upgrade guides

我出错的任何想法？

Answer 1

在angular-cli.json中定义jquery-ui的解决方案（并避免在index.html中添加它）是：

1：导入jquery-ui-dist

    npm install jquery jquery-ui-dist

2：在angular-cli.json中添加脚本

    "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/jquery-ui-dist/jquery-ui.js"
    ],

资料来源： https://stackoverflow.com/a/38795318

Answer 2

圣诞节！这个很麻烦，但经过几天的努力，我想出来了。

所以，那里有很多部分答案，但这应该是完整的。你不能从我所看到的，在你的angular-cli和索引中包含jquery-ui。插件包含将被覆盖，jquery作为全局将是未定义的。我只能使用angular-cli.json来实现它，但我确实通过仅使用索引包含来实现它。

以下是仅对jquery / jquery-ui使用索引脚本包含所需要做的事情。

1 ：卸载jquery和jquery-ui并将其从package.json中删除

npm uninstall --save jquery jquery-ui

2 ：删除node_modules文件夹

3 ：删除angular-cli.json文件中对jquery或jquery-ui的任何引用

4 ：重建node_modules文件夹（仔细检查jquery-ui不存在，但只要angular-cli.json没有包含它，它就没关系了。

npm install

5 ：在索引文件中包含jquery，然后是jquery-ui。我使用2.2.4，因为我还不信任。

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

6 ：在你想要利用jquery或jquery插件的任何组件中注入$

declare var $: any;

$('draggable').draggable(); // WORKS!

Answer 3

请像这样将jQuery ui导入index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

在你的组件中像这样判断$

声明var $：any;

Angular4无法找到Jquery-UI函数

3 个答案: