带有System.js的Angular 2的Kendo UI

时间:2017-03-09 21:11:13

标签: angular kendo-ui

我正在尝试将Angular 2的kendo UI连接到我的应用程序,我遇到了一些问题。

这是我的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' }
}

在我的模块定义中:

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

...

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

当我尝试运行该应用时,我得到:

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"

知道可能导致这种情况的原因吗?

谢谢。

2 个答案:

答案 0 :(得分:1)

对于遇到相同问题的任何人,Progress都会在systemjs.config.js

中添加完整的映射列表

system.js configuration

根据要使用的组件,将应用某些映射

答案 1 :(得分:0)

从错误消息判断,似乎在评估l10n(本地化)包时出现问题:

  

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

这是由于最近需要加载本地化软件包的Kendo组件的变化引起的。将以下内容添加到SystemJS配置应该有所帮助:

XmlNodeList nodelist = xdr.SelectNodes("/*/*/*/processResponse/processResult/returnedResponse");