CODEWITHSUNDEEP
angularkendo-ui
dpdragnev
dpdragnev

Reputation: 2111

Kendo UI for Angular 2 with System.js

I am trying to get the kendo UI for Angular 2 hooked up to my app and I am having some issues.

Here is my system.config.js:

map: {
    // our app is within the app folder
    app: 'app',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

    //kendo components
    '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
    '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
    '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',

    // other libraries
    'rxjs': 'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'ng-block-ui': 'npm:ng-block-ui/bundles/umd'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
    app: {
        defaultExtension: 'js'
    },
    rxjs: {
        defaultExtension: 'js'
    },
    'ng-block-ui': { main: 'index.js', defaultExtension: 'js' },
    "@progress/kendo-angular-grid": { main: './dist/npm/main.js', defaultExtension: 'js' },
    '@telerik/kendo-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
    '@progress/kendo-angular-intl': { main: './dist/npm/main.js', defaultExtension: 'js' }
}

In my module definition:

import { GridModule } from '@progress/kendo-angular-grid';

...

imports: [
	RouterModule.forRoot(appRoutes),
	BrowserModule,
	BlockUIModule,
	GridModule
],

When I try to run the app, I get:

SystemJS) Unexpected token <
SyntaxError: Unexpected token <
    at eval (<anonymous>)
    at Object.eval (http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/grid.component.js:26:28)
    at eval (http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/grid.component.js:683:4)
    at eval (http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/grid.component.js:684:3)
    at eval (<anonymous>)
Evaluating http://dev-app.com/@progress/kendo-angular-l10n
Evaluating http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/grid.component.js
Evaluating http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/grid.module.js
Evaluating http://dev-app.com/node_modules/@progress/kendo-angular-grid/dist/npm/main.js
Evaluating http://dev-app.com/app/app.module.js
Evaluating http://dev-app.com/main.js
Error loading http://dev-app.com/main.js"

Any idea what could be causing this?

Thank you.

Upvotes: 0

Views: 483

Answers (2)

HaRoLD
HaRoLD

Reputation: 447

For anyone experiencing the same problem Progress has the complete list of mappings to add in systemjs.config.js

system.js configuration

Depending on the components to be used some of the mappings will apply

Upvotes: 1

Alex Gyoshev
Alex Gyoshev

Reputation: 11967

Judging from the error message, it seems that the problem happens during evaluation of the l10n (localization) package:

Evaluating http://dev-app.com/@progress/kendo-angular-l10n

This is caused by a recent change in the Kendo components that requires the localization package to be loaded, too. Adding the following to the SystemJS configuration should help:

map: {
    '@progress/kendo-angular-l10n': 'npm:@progress/kendo-angular-l10n'
},
packages: {
    '@progress/kendo-angular-l10n': {
        main: './dist/npm/main.js',
        defaultExtension: 'js'
    }
}

Upvotes: 0

Related Questions