Angular4 找不到 Jquery-UI 函数

Posted 2023-03-07

【中文标题】Angular4 找不到 Jquery-UI 函数

【英文标题】：Angular4 can't find Jquery-UI functions

【发布时间】：2018-01-12 17:27:10

【问题描述】：

我已经安装了 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

任何想法我哪里出错了？

【参考方案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://***.com/a/38795318

【参考方案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!

【讨论】：

我在 .ts 文件中的 .html 文件中的 script 标签中究竟应该放在哪里？

@DanChase 在你要访问jquery的组件的.ts文件中。

它可以工作，但它会抛出一个错误 "$" not found。这将在稍后的部署过程中导致构建错误。

【参考方案3】：

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

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

像这样在你的组件中去掉 $

声明 var $: any;

【讨论】：

有没有办法将它包含在 .angular-cli.json 文件中而不是网络导入？应用程序也需要离线工作。

嗨，克里斯，您可以使用 bower。像这样： bower install jquery-ui 然后你可以将它导入到 index.html 和 angular.cli.json 中。

我没有凉亭。我正在使用 npm。我 npm 安装了 jquery-ui。我需要知道如何正确地将它包含在 .angular-cli 文件中，以及如何在我的脚本中使用它，如上面的示例。当我直接包含文件时，仍然无法识别可拖动功能的错误。

嗨，克里斯，您是否在特定组件中导入了 jquery 和 jquery ui？像这个 import var $: any; // 导入 jquery import 'jquery-ui';

你能给我看一个正确导入Jquery-ui的例子吗