Kendo UI Angular2 Диаграммы неожиданная ошибка токена

У меня проблема с получением графиков кендо-интерфейса для angular2.
Я установил кендо-угловые диаграммы 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

Спасибо,

1 ответ

Решение

В моем случае это было связано с загрузкой chroma-js.

Добавил это в ваш system.config.js:

карта:

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

и в пакетах:

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

После добавления это решило мою проблему.

Глядя на плунжеры с демонстрационного сайта, я не вижу добавленных chroma-js, как описано выше. Я не знаю, почему им не нужно это делать.

Другие вопросы по тегам