5

I'm developing an SPFx webpart with AngularJS and Kendo UI. Kendo UI requires jQuery before AngularJS. As I want to develop multiple webparts with AngularJS and Kendo UI I decided to reference AngularJS and Kendo UI from external cdns.

This is the externals section in my config.json:

"externals": {
"jquery": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
  "globalName": "jquery"
},
"angular": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js",
  "globalName": "angular",
  "globalDependencies": [
    "jquery"
  ]
},
"kendo": {
  "path": "https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js",
  "globalName": "kendo",
  "globalDependencies": [
    "jquery",
    "angular"
  ]
}
},

I load AngularJS and Kendo UI in my Webpart.ts file:

import * as angular from "angular";
import "kendo";

My Angular app is working and the kendo.all.min.js file is loaded. I try to load the Kendo module like this:

angular.module("TestExternalWebpart", [ "kendo.directives" ]);

I get the following error from AngularJS:

Module 'kendo.directives' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I've already tried to load Kendo with the following code in my webpart but I get same error:

import * as angular from "angular";
require("kendo");

How can I load Kendo UI from external cdn in a SPFx webpart?

2

If I follow the steps you mentioned, I'm getting an error that 'jquery' is an unknown component or is not defined in the manifest. After changing your code to:

import "jquery";
import * as angular from "angular";
import "kendo";

everything works as expected;

  • Thanks for your answer, Waldek but it doesn't work for me. Still getting the same error. I've uploaded my webpart here: link – Jan-Bernd Aug 29 '17 at 8:23
  • I can reproduce your issue. From the SPFx point of view, your code is correct. This seems to be something related specifically to Kendo and how it works with AngularJS and webpack. Unfortunately at this point I don't know how to fix your issue. Perhaps you could try contacting Progress. – Waldek Mastykarz - MVP Aug 29 '17 at 10:09
  • Thanks Waldek, I've created a post in the Kendo forum here. If I'll get an answer, i'll update this post. – Jan-Bernd Aug 30 '17 at 10:58
  • Awesome! I'd be curious to learn why it's not working. Sorry I couldn't be of more help. – Waldek Mastykarz - MVP Aug 31 '17 at 6:23

protected by Community Nov 5 '18 at 12:19

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.