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;
});
After reference to require.js, add this code block:
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.
My workaround tricks the scripts think that there isn't any script loader existed. Hope this help