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?

1 Answer 1

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;

4
  • 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, 2017 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. Aug 29, 2017 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, 2017 at 10:58
  • Awesome! I'd be curious to learn why it's not working. Sorry I couldn't be of more help. Aug 31, 2017 at 6:23

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