SharePoint Framework Webpart with Kendo UI and AngularJS defined as external

9 posts, 0 answers
  1. Stefan Nacke
    Stefan Nacke  avatar
    4 posts
    Member since:
    Dec 2009

    Posted 29 Aug Link to this post

    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": {
            "globalName": "jquery"
        },
        "angular": {
            "globalName": "angular",
            "globalDependencies": [
                "jquery"
            ]
        },
        "kendo": {
            "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!

  2. Stefan
    Admin
    Stefan avatar
    1131 posts

    Posted 01 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Stefan
    Admin
    Stefan avatar
    1131 posts

    Posted 04 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Stefan Nacke
    Stefan Nacke  avatar
    4 posts
    Member since:
    Dec 2009

    Posted 07 Sep Link to this post

    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,

  5. Stefan Nacke
    Stefan Nacke  avatar
    4 posts
    Member since:
    Dec 2009

    Posted 07 Sep Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    1131 posts

    Posted 12 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Stefan
    Admin
    Stefan avatar
    1131 posts

    Posted 19 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Stefan Nacke
    Stefan Nacke  avatar
    4 posts
    Member since:
    Dec 2009

    Posted 4 days ago in reply to Stefan Link to this post

    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

  9. Stefan
    Admin
    Stefan avatar
    1131 posts

    Posted 14 hours ago Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top