Kendo with Angularjs (v1.6.2) and typescript - error

5 posts, 0 answers
  1. senthil
    senthil avatar
    3 posts
    Member since:
    Jan 2017

    Posted 01 Sep Link to this post

    Hi,

    I am using trying to use kendo chart with Angularjs (1.6.2) and typescript. I have a sample project created using Yeoman.

    I have my kendo package also in the project folder. I have run the project using npm run serve

    Gettting error: "index.js:23241 Error: The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document.
        at createWidget (index.js:117598)
        at Object.link (index.js:118233)
        at index.js:9926
        at invokeLinkFn (index.js:19086)
        at nodeLinkFn (index.js:18475)
        at compositeLinkFn (index.js:17715)
        at compositeLinkFn (index.js:17718)
        at publicLinkFn (index.js:17580)
        at index.js:10495
        at Scope.$eval (index.js:26964) "<div kendo-chart="" k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
                                     { field: 'nuclear', name: 'Nuclear electricity' },
                                     { field: 'hydro', name: 'Hydro electricity' },
                                     { field: 'wind', name: 'Wind electricity' }
                                 ]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;">""

     

     

    I have the below code in my index.html.

    -------------------------------------------------------------------------

    <div kendo-chart k-legend="{ position: 'bottom' }" k-series-defaults="{ type: 'bar' }" k-series="[
    { field: 'nuclear', name: 'Nuclear electricity' },
    { field: 'hydro', name: 'Hydro electricity' },
    { field: 'wind', name: 'Wind electricity' }
    ]" k-data-source="electricity" k-series-hover="onSeriesHover" style="height: 400px;"></div>

    -------------------------------------------------------------------------

    In my index.ts file, I have the below code

    import * as $ from "jquery";
    import * as angular from 'angular';
    import {techsModule} from './app/techs/index';
    import 'angular-ui-router';
    import routesConfig from './routes';
    import {main} from './app/main';
    import {header} from './app/header';
    import {title} from './app/title';
    import {footer} from './app/footer';
    import './index.scss';
    import '@progress/kendo-ui/';
    /// <reference path="./app/kendo/typescript/kendo.all.d.ts" />
    angular
    .module('app', [techsModule, 'ui.router','kendo.directives'])
    .config(routesConfig)
    .component('app', main)
    .component('fountainHeader', header)
    .component('fountainTitle', title)
    .component('fountainFooter', footer);

    -------------------------------------------------------------------------

    Please give suggestions. I am new to angularjs and typescript...I have attached the project without the kendo package files which was earlier inside src/app/kendo folder.

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 05 Sep Link to this post

    Hi Senthil,

    Thank you for giving Kendo UI a test run.

    Looking at the provided error, I believe that it is due to the order in which jQuery and Kendo UI are loaded. We have a repository which has a few WebPack projects.

    JQuery should be available in the global scope, so what you could do is register it a s a plugin. Check out the complete webpack.config.js file with Angular and Kendo UI here:

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

    var webpack = require('webpack');
    var jquery = require("jquery");
    module.exports = {
     plugins: [
      new webpack.ProvidePlugin({
       'window.jQuery': 'jquery'
      })
     ],
     //other settings
    }

    Kind Regards,
    Alex Hajigeorgieva
    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. senthil
    senthil avatar
    3 posts
    Member since:
    Jan 2017

    Posted 06 Sep in reply to Alex Hajigeorgieva Link to this post

    Thanks Alex, I will give this a try and will keep you posted.
  4. senthil
    senthil avatar
    3 posts
    Member since:
    Jan 2017

    Posted 07 Sep in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    Are there any sample projects that use kendo with angular and typescript together. If you can provide that, it will be very helpful for me.

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 08 Sep Link to this post

    Hi Senthil,

    The available projects we have are in the repository I shared with you.

    I suggest using this project as a starting point:

    https://github.com/telerik/kendo-ui-npm-example/tree/master/typescript-webpack

    And then adding the missing parts from the webpack.config from the Kendo Angular project:

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

    var jquery = require("jquery");
     
    plugins: [
       new webpack.ProvidePlugin({
          'window.jQuery': 'jquery'
       })
    ],

    Let me know if you do not find this approach helpful and I can create the desired project for you next week.

    Have a nice weekend.

    Kind Regards,
    Alex Hajigeorgieva
    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.
Back to Top