I'm having a issue getting the kendo-ui charts for angular2 up and running.
I have installed kendo-angular-charts 0.8.2
The error message shown is:
(index):30 Error: SyntaxError: Unexpected token <(…)
my app.module.ts:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
NavBarComponent,
LoginComponent,
UserToolComponent,
ResultStatsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
routing,
ButtonsModule,
LayoutModule,
GridModule,
AccordionModule,
ChartsModule
When i leave out the imports: Chartsmodule the website just runs fine.
I have setup my system.config.js like this:
(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);Anybody who can help me with this? How can you debug errors like this?
After debugging some more.......this is the error I see:
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
Thanks,
In my case it had to do with chroma-js not being loaded.
Added this to your system.config.js:
map:
'chroma-js':'npm:[email protected]',
and in the packages:
'npm:chroma-js': {
defaultExtension: 'js',
main: "./chroma.js"
},
After adding this this solved my issue.
When looking at the plunkers from the demo website I don't see chroma-js added like described above. I don't know why they don't need to do this.