Reputation: 1081
I'm attempting to build a demo application that utilizes the "Kendo UI for Angular 2" controls, but I can only seem to get the Button control to work. All of the other controls either display wrong or do not display at all. I could really use some help so I can figure out if the product is worth the cost for a new long-term project we are starting up.
In the example below, I'm using Angular 2 to display their button and a dropdown list. Only the button works. Please help me get this sample working. I've spent way too long trying to figure this out. Thanks!
package.json (truncated for brevity)
"dependencies": {
...
"@progress/kendo-angular-buttons": "^0.10.2",
"@progress/kendo-angular-dropdowns": "^0.10.2",
...
systemjs.config.js (truncated for brevity)
map: {
app: 'app',
'rxjs': 'npm:rxjs',
'@progress': 'npm:@progress',
'@telerik': 'npm:@telerik',
...
},
packages: {
"@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
"@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
'@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },
...
}
app.module.ts
// Application
import { AppComponent } from './app.component';
// Misc Modules
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
// Test Pages
import { KButtonComponent } from './components/k.button.component'
import { KDropDownListComponent } from './components/k.dropdownlist.component'
@NgModule({
imports: [
BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button kendoButton (click)="onButtonClick()" [primary]=true>Button!</button> This works!
<kendo-dropdownlist [data]="listItems"></kendo-dropdownlist> This doesn't even display.
`,
styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]
})
export class AppComponent {
listItems: Array<string> = ['This', 'is', 'really', 'upsetting'];
onButtonClick() {
alert('The only working Kendo component');
}
}
Upvotes: 1
Views: 3509
Reputation: 1081
Install the default Kendo theme (https://www.npmjs.com/package/@telerik/kendo-theme-default) using the command npm install --save @telerik/kendo-theme-default
.
Specify the CSS file in your index.html and all the controls will display as intended.
<link rel="stylesheet" href="./node_modules/@telerik/kendo-theme-default/dist/all.css">
Upvotes: 2
Reputation: 61
Everything looks correct except for your systemjs.config.js configuration. Your package definitions need to match the maps to the libraries you defined. This is my configuration and works, just replace my grid component definition with your component definitions.
systemjs.config.js
// map tells the System loader where to look for things
map: {
'app': 'dist',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
...
'@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',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'app': {
main: './app.main.js',
defaultExtension: 'js'
},
...
'@progress/kendo-angular-intl': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'@progress/kendo-angular-grid': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'@telerik/kendo-intl': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
}
}
});
Upvotes: 1