SharePoint Framework Webpart with Kendo UI and AngularJS defined as external

[Stefan Nacke]

Hi,

I'm developing an SharePoint Framework webpart with Kendo UI and AngularJS. 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? I've also created a sample on GitHub which produces the same error: https://github.com/jbgeesink/SPFx/tree/master/ExternalWebpart

 

Thanks!

[Stefan]

Hello Stefan,

Apologies for the delayed response, we were testing the provided application.

I was able to reproduce the issue on my end, but I will need a bit more time to investigate the scenario and to test if there is a possible approach to correctly load the scripts in the required order. I noticed that both jQuery and AngularJS are loaded and available and the page, but kendo is not. Still, in the network tap, the script files are loaded as expected. I can suggest checking if Kendo UI files are imported from our NPM modules will load the modules at the correct time:

http://docs.telerik.com/kendo-ui/intro/installation/npm

Also, could you please provide more insides on the SharePoint Framework Webpart on how it is loading and requiring files as we are not experts in this framework?

In the meantime, I can suggest checking our examples with RequireJS, Kendo UI, AngularJS and Webpack, Kendo UI and AngularJS. They can be helpful in demonstrating the required steps to load jQuery, AngularJS and Kendo UI in the expected order:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs#use-angularjs-and-kendo-ui-with-requirejs

https://github.com/telerik/kendo-ui-npm-example/tree/master/kendoui-webpack-angularjs/pro

Regards,
Stefan
Progress Telerik

[Stefan]

Hello Stefan,

I'm writing to let you know that we are still trying to import Kendo UI at the right time, but for now, it is still not achievable.

Could you please strip the project to only one page containing Kendo UI as we noticed that there are multiple pages that require kendo, some of them are importing kendo and this is creating a scenario where we cannot be a 100% sure exactly from where the issue occurs.

Another possibility is to let a know which files can be removed without affecting the architecture of the application in order to leave only one page, so we can isolate the scenario as much as possible to ensure that other factors are not affecting it.

Regards,
Stefan
Progress Telerik

[Stefan Nacke]

Hello Stefan,

thanks for your response and sorry for my delay. I've stripped down my sample on GitHub to a single file. All webpart logic is now into the file ExternalWebpartWebpart.ts.

As you can see in my sample, angular is working but if I try to include the kendo directive my webpart throws the following error: Exception

Thanks for your support.

Regards,

[Stefan Nacke]

The exception link is wrong formatted. Here is the correct one:

https://docs.angularjs.org/error/$injector/modulerr?p0=ExternalWebpart&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.6.5%2F$injector%2Fmodulerr%3Fp0%3Dkendo.directives%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.5%252F%2524injector%252Fnomod%253Fp0%253Dkendo.directives%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A42%253A290%250A%2520%2520%2520%2520at%2520p%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.6.5%252Fangular.min.js%253A42%253A138)%0A%20%20%20%20at%20https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:7:76%0A%20%20%20%20at%20https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:43:70%0A%20%20%20%20at%20p%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:8:7)%0A%20%20%20%20at%20g%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:42:138)%0A%20%20%20%20at%20https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:42:322%0A%20%20%20%20at%20p%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:8:7)%0A%20%20%20%20at%20g%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:42:138)%0A%20%20%20%20at%20gb%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:46:251)%0A%20%20%20%20at%20c%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:22:19)%0A%20%20%20%20at%20Object.Uc%20%5Bas%20bootstrap%5D%20(https:%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.6.5%2Fangular.min.js:22:332

[Stefan]

Hello Stefan,

Thank you for the isolated example.

We will keep testing different scenarios to confirm if this is indeed possible.

Please have in mind that we are currently just a few days before the new release and the developers' schedule is extremely busy, still we will try to test it and provide more details as soon as possible.

Thank you for the patience.

Regards,
Stefan
Progress Telerik

[Stefan]

Hello Stefan,

Thank you for the patients.

Still, after many different tests on different approaches, either this error or other error occurred.

We inspected their documentation, but we did not find an article for integration with product libraries similar to Kendo UI:

https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-angular-1-x-applications-to-sharepoint-framework

This error indicates that the scripts are not loaded in the correct order, but even after following the approach from their documentation the scripts were not loaded as expected.

Currently, we have a limitation to import Kendo UI in SharePoint Framework Webpart due to the specifics of the framework. This does not meen that it is not possible, but we will need more information from their team in order to be able to integrate it.

If there is an official channel for SharePoint Framework Webpart support, we can recommend asking a question there for more details about the integration.

We do apologise for the inconvenience and we hope that this integration is indeed possible with a little more insight from the SharePoint Framework Webpart team.

Regards,
Stefan
Progress Telerik

[Stefan Nacke]

Hello Stefan,

sorry for my late response. There's a GitHub repository where you can post the issue:

https://github.com/SharePoint/sp-dev-fx-webparts/issues

Regards

[Stefan]

Hello, Stefan,

Thank you for the link.

In general, it will be beneficial to issue to come from the direct user of Webpart.

We will monitor it, and provide additional information from our side if required by the Webpart part team, so the integration can be achieved if possible.

Regards,
Stefan
Progress Telerik

[Ved]

Did you guys figure out the resolution? I am also facing issues loading jQuery and Kendo JS in my SharePoint Framework web part. I used external node in config.json to load javascript files from CDN. However, it doesn't recognize in my Visual Code intellisense. 

Before providing more specific details, I wanted to confirm if there is a standard way to load Kendo JS in SP Fx.

[Veselin Tsvetanov]

Hi Ved,

For description of the possible approaches to load Kendo UI in SharePoint project, I would suggest you to review the following blog post. If that does not help, please explain a bit in detail your scenario and the exact issue faced.

Regards,
Veselin Tsvetanov
Progress Telerik

[Surrendra]

I am also facing the same issue when create SPFx solution. It is throwing error "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 have followed the proper steps but still getting the same issue. 

You can find & download my solution from github : https://github.com/gauravgoyal5/RnD/tree/master/SPFx-KendoUI

Also attaching the file.

Expecting the solution from Telerik Experts asap.

[Veselin Tsvetanov]

Hello Surrendra,

I am afraid that, just like Stefen previously mentioned, we were not able so far to load the scripts using the import statement in the correct order. Thus, I won't be able to offer you a viable workaround for the missing kendo.directives module error.

Regards,
Veselin Tsvetanov
Progress Telerik