gpt4 book ai didi

angularjs - 尝试将 Kendo UI 与 AngularJS 和 Webpack 一起使用时出错

转载 作者:行者123 更新时间:2023-12-02 20:49:05 26 4
gpt4 key购买 nike

我知道以前有人问过这个问题,但我似乎无法弄清楚。

我有一个非常简单的项目设置,我想将 Kendo UI 与 AngularJS 结合使用,并将其与 Webpack 捆绑在一起。

代码如下:

app.js

import * as $ from 'jquery';
import 'angular';
import 'kendo-ui-core';

var app = angular.module('app', ['kendo.directives']);

index.html

<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<input kendo-date-picker />

<script src="bundle.js"></script>
</body>
</html>

webpack.config.js

var webpack = require('webpack');

module.exports = {
entry: "./app.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': "jquery"
})
]
};

但是当我运行该应用程序时,我收到以下错误消息:

The Kendo UI directives require jQuery to be available before AngularJS. 
Please include jquery before angular in the document.

我不确定这里的问题是什么......有人吗?

最佳答案

产生此错误的断言是(来自 Kendo UI):

if (!(element instanceof jQuery)) {
throw new Error("The Kendo UI directives require...");
}

如果你在该行上放置一个断点并将 element.constructorjQuery 进行比较,它们将是不同的实例,因此 webpack 可能正在加载 jQuery > 不止一次(也许查看不同的文件夹)。

要解决此问题,您可以添加 resolve option到您的 webpack 配置,将其路径传递给您的 node_modules 文件夹,以便它只在那里搜索模块:

resolve: {
modules: [__dirname + '/node_modules']
},

关于angularjs - 尝试将 Kendo UI 与 AngularJS 和 Webpack 一起使用时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42971483/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com