2016-11-11 54 views
0

我有一個問題讓角2的kendo-ui圖表啓動並運行。
我已經安裝了劍道,角圖表0.8.2
所示的錯誤消息是:kendo ui angular2圖表意外的令牌錯誤

(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/[email protected] 
    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

對我來說,它與色度JS沒有被加載到去做。

將此添加到您的system.config.js:

地圖:

'chroma-js':'npm:[email protected]', 

,並在包:

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

加入這個這個解決我的問題後。

當從演示網站上看到的重要人物時,我沒有看到像上面描述的那樣添加了色度js。我不知道他們爲什麼不需要這樣做。