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

[senthil]

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.

 

[Alex Hajigeorgieva]

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

[senthil]

Thanks Alex, I will give this a try and will keep you posted.

[senthil]

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.

[Alex Hajigeorgieva]

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