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?

Improve this question

1 Answer 1

Reset to default
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;

Improve this answer
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 Commented 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. Commented 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. Commented 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. Commented Aug 31, 2017 at 6:23

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.