Kendo UI 2017 doesn't work with angular + angularAMD + requirejs
Question
Kendo UI 2017 doesn't seem to work with requirejs + angular + angularAMD. But when I switch to Kendo version 2015, it works fine.
Any suggestion on how I can overcome this ?
This is sample app. Please note - If I change kendo version to 2015 it works.
https://plnkr.co/edit/DjOq6BfOVSHvIuSHliH8?p=preview
Index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div kendo-tab-strip k-content-urls="[ null, null]">
<ul>
<li class="k-state-active">First tab</li>
<li>Second tab</li>
</ul>
<div style="padding: 1em">
This is the first tab
</div>
<div style="padding: 1em">
This is the second tab
</div>
</div>
</body>
</html>
main.js
require.config({
baseUrl: "",
waitSeconds: 0,
paths: {
'jquery': 'https://code.jquery.com/jquery-2.1.3.min',
'angular': 'https://code.angularjs.org/1.3.12/angular',
'angularamd': '//cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
'kendo': 'https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min',
//'kendo' : 'https://kendo.cdn.telerik.com/2015.1.429/js/kendo.all.min' --This version works
},
shim: {
'angularAMD': ['angular'],
'kendo': ['jquery', 'angular']
},
deps: ['application-configuration']
});
application-configuration.js
define(['angularamd', 'kendo'], function (angularAMD) {
var app = angular.module("mainModule", ['kendo.directives']);
angularAMD.bootstrap(app);
return app;
});
1 answers
solution1
-1 2018-01-08 14:22:42
After reference to require.js, add this code block:
<script>
define.amd = null;
</script>
define.amd is a standard way to notify javascript libraries that there is an script loader being used. I haven't searched for clue but I see some libraries check for define.amd. From the docs of Kendo UI, https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs , there is a statement indicate that Kendo UI js are already AMD module.
The minified Kendo UI JavaScript files are AMD modules and work with compatible loaders such as RequireJS. You can use this feature to load only the needed Kendo UI JavaScript files instead of kendo.all.min.js.
My workaround tricks the scripts think that there isn't any script loader existed. Hope this help
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.