0

我在启动和运行 angular2 的 kendo-ui 图表时遇到问题。
我已经安装了 kendo-angular-charts 0.8.2
显示的错误消息是：

(index):30 Error: SyntaxError: Unexpected token <(…)

我的 app.module.ts：

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        AboutComponent,
        NavBarComponent,
        LoginComponent,
        UserToolComponent,
        ResultStatsComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        routing,
        ButtonsModule,
        LayoutModule,
        GridModule,
        AccordionModule,
        ChartsModule

当我忽略导入时： Chartsmodule 网站运行良好。

我已经像这样设置了我的 system.config.js：

(function(global) {
    var paths = {
        'npm:': '/node_modules/'
    };

    var map = {
        'app': 'app',
        'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
        "ng2-accordion": "node_modules/ng2-accordion",
        '@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',
        '@progress/kendo-angular-buttons': 'npm:@progress/kendo-angular-buttons',
        '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
        '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
        '@progress/kendo-angular-layout': 'npm:@progress/kendo-angular-layout',
        '@progress/kendo-data-query': 'npm:@progress/kendo-data-query',
        //from here is new
        '@progress/kendo-angular-buttons': 'npm:@progress/kendo-angular-buttons',
        '@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts',
        '@progress/kendo-charts': 'npm:@progress/kendo-charts',
        '@progress/kendo-angular-popup': 'npm:@progress/kendo-angular-popup',
        '@progress/kendo-angular-resize-sensor': 'npm:@progress/kendo-angular-resize-sensor',
        '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
        '@progress/kendo-popup-common': 'npm:@progress/kendo-popup-common',
        '@progress/kendo-drawing': 'npm:@progress/kendo-drawing',
        '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
        '@telerik/kendo-draggable': 'npm:@telerik/kendo-draggable',
        'rxjs': 'npm:rxjs'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        
        "ng2-accordion": { "main": "index.js", "defaultExtension": "js"
        },
        'npm:@progress/kendo-angular-buttons': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        'npm:@progress/kendo-angular-grid': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        'npm:@progress/kendo-data-query': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        'npm:@progress/kendo-angular-intl': {
            defaultExtension: 'js',
            main: "./dist/npm/js/main.js"
        },
        'npm:@telerik/kendo-intl': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        app: { main: 'main.js',  defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
         'npm:@progress/kendo-angular-layout': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        //new from here
        'npm:@progress/kendo-angular-buttons': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
        'npm:@progress/kendo-angular-charts': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
        'npm:@progress/kendo-angular-resize-sensor': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
        'npm:@progress/kendo-charts': {
           main: './dist/npm/js/main.js',
           defaultExtension: 'js'
         },
         '@progress/kendo-angular-popup': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
         },
         '@progress/kendo-popup-common': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
         },
         '@progress/kendo-drawing': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
        },
        '@telerik/kendo-draggable': {
          defaultExtension: 'js',
          main: "./dist/npm/js/main.js"
        }
    };

    var config = {
        paths: paths,
        map: map,
        packages: packages
    };

    System.config(config);
})(this);

谁能帮我解决这个问题？你怎么能调试这样的错误？

在调试了一些之后.......这是我看到的错误：

Error: SyntaxError: Unexpected token <
        at eval (<anonymous>)
        at Object.81 (http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas/path-node.js:330:19)
        at __webpack_require__ (http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas/path-node.js:21:30)
        at Object.75 (http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas/path-node.js:116:18)
    Evaluating http://localhost:3000/node_modules/chroma-js@1.2.1
    Evaluating http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas/path-node.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas/arc-node.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/canvas.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/drawing.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-drawing/dist/npm/js/main.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-charts/dist/npm/js/core/box.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-charts/dist/npm/js/core.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-charts/dist/npm/js/main.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-angular-charts/dist/npm/js/chart/chart-auto-theme.component.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-angular-charts/dist/npm/js/chart.directives.js
    Evaluating http://localhost:3000/node_modules/@progress/kendo-angular-charts/dist/npm/js/main.js
    Evaluating http://localhost:3000/app/app.module.js
    Evaluating http://localhost:3000/app/main.js
    Error loading http://localhost:3000/app/main.js

谢谢，

4

1 回答 1

1

就我而言，这与未加载 chroma-js 有关。

将此添加到您的 system.config.js 中：

地图：

'chroma-js':'npm:chroma-js@1.2.1',

并在包中：

'npm:chroma-js': {
          defaultExtension: 'js',
          main: "./chroma.js"
        },

添加后，这解决了我的问题。

从演示网站查看 plunkers 时，我没有看到像上面描述的那样添加了 chroma-js。我不知道他们为什么不需要这样做。

于 2016-11-11T19:31:54.547 回答