Angular4 找不到 Jquery-UI 函数

Question

我已经安装了 Jquery 和 Jquery-ui

npm install --save jquery jquery-ui

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

declare var $: JQueryStatic;

我的 jquery 函数可以正常工作，但 jquery-ui 函数不能。

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

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

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

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

我尝试直接导入到组件中，但这给定义 $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 使其工作，但我确实通过 only 使用索引包含使其工作。

这里是只为 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，因为我还不信任 3。

<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;