Angular2 Kendo UI Slider

Question

Kendo Slider throwing the following error:

I am using an older version of slider in another project. Currently using Kendo Charts in this project without any issues. Here is my setup:

Package.json

 { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "build:e2e": "tsc -p e2e/", "serve": "lite-server -c=bs-config.json", "serve:e2e": "lite-server -c=bs-config.e2e.json", "prestart": "npm run build", "start": "concurrently \\"npm run build:watch\\" \\"npm run serve\\"", "pree2e": "npm run build:e2e", "e2e": "concurrently \\"npm run serve:e2e\\" \\"npm run protractor\\" --kill-others --success first", "preprotractor": "webdriver-manager update", "protractor": "protractor protractor.config.js", "pretest": "npm run build", "test": "concurrently \\"npm run build:watch\\" \\"karma start karma.conf.js\\"", "pretest:once": "npm run build", "test:once": "karma start karma.conf.js --single-run", "lint": "tslint ./src/**/*.ts -t verbose" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "@progress/kendo-angular-charts": "^0.20.1", "@progress/kendo-angular-inputs": "^0.21.0", "@progress/kendo-angular-intl": "^0.11.1", "@progress/kendo-angular-l10n": "^0.2.1", "@progress/kendo-drawing": "^0.15.2", "@progress/kendo-theme-default": "^2.22.0", "angular-in-memory-web-api": "~0.3.0", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "rxjs": "5.0.1", "systemjs": "0.19.40", "zone.js": "^0.8.4" }, "devDependencies": { "@types/jasmine": "2.5.36", "@types/node": "^6.0.46", "angular-2-dropdown-multiselect": "^1.0.5", "canonical-path": "0.0.2", "concurrently": "^3.2.0", "jasmine-core": "~2.4.1", "karma": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-jasmine-html-reporter": "^0.2.2", "lite-server": "^2.2.2", "lodash": "^4.16.4", "protractor": "~4.0.14", "rimraf": "^2.5.4", "tslint": "^3.15.1", "typescript": "~2.1.0" }, "repository": {} } 

Systemjs.config.js

 /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder 'app': 'app', // angular bundles '@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/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js', '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js', '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.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', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' } } }, rxjs: { defaultExtension: 'js' } } }); })(this); 

systemjs.config.extras.js

 (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, map: { 'angular-2-dropdown-multiselect': 'npm:angular-2-dropdown-multiselect', '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', '@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts', '@progress/kendo-angular-inputs': 'npm:@progress/kendo-angular-inputs', '@progress/kendo-angular-popup': 'npm:@progress/kendo-angular-popup', '@progress/kendo-angular-resize-sensor': 'npm:@progress/kendo-angular-resize-sensor', '@telerik/kendo-inputs-common': 'npm:@telerik/kendo-inputs-common', '@progress/kendo-angular-l10n': 'npm:@progress/kendo-angular-l10n', '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl', '@telerik/kendo-draggable': 'npm:@telerik/kendo-draggable', '@progress/kendo-charts': 'npm:@progress/kendo-charts', '@telerik/kendo-intl': 'npm:@telerik/kendo-intl', '@progress/kendo-drawing': 'npm:@progress/kendo-drawing', '@progress/kendo-popup-common': 'npm:@progress/kendo-popup-common', // other libraries 'hammerjs': 'npm:hammerjs' }, packages: { 'npm:angular-2-dropdown-multiselect': { main: './src/multiselect-dropdown.js', defaultExtension: 'js' }, 'npm:@progress/kendo-angular-inputs': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-angular-charts': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:hammerjs': { defaultExtension: 'js', main: "./hammer.min.js" }, 'npm:@progress/kendo-angular-popup': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-angular-resize-sensor': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@telerik/kendo-inputs-common': { main: './dist/npm/main.js', defaultExtension: 'js' }, '@progress/kendo-angular-l10n': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-angular-intl': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@telerik/kendo-draggable': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-charts': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-drawing': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@telerik/kendo-intl': { main: './dist/npm/main.js', defaultExtension: 'js' }, 'npm:@progress/kendo-popup-common': { main: './dist/npm/main.js', defaultExtension: 'js' }, } }); })(this); 

app.module

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppComponent } from './app.component'; import { ActivityDashboardModule } from './activitydashboard/activitydashboard.module'; import { BudgetDashboardModule } from './budgetdashboard/budgetdashboard.module'; import { MenuComponent } from './shared/menu/menu.component'; import { WelcomeComponent } from './home/welcome.component'; import { AboutComponent } from './about/about.component'; import { DataService } from './shared/data.service'; import { ValuesService } from './shared/values.service'; @NgModule({ imports: [BrowserModule, HttpModule, BrowserAnimationsModule, RouterModule.forRoot([ { path: 'welcome', component: WelcomeComponent }, { path: '', redirectTo: 'welcome', pathMatch: 'full' }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: 'welcome', pathMatch: 'full' }, ]), NgbModule.forRoot(), ActivityDashboardModule, BudgetDashboardModule ], providers: [ DataService, ValuesService, ], declarations: [AppComponent, WelcomeComponent, AboutComponent, MenuComponent], bootstrap: [AppComponent] }) export class AppModule { } 

Feature Modlule

 import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { SharedModule } from '../shared/shared.module'; import { SliderModule } from '@progress/kendo-angular-inputs'; import { ChartModule } from '@progress/kendo-angular-charts'; import 'hammerjs'; import { AppModule } from '../app.module'; import { ActivityDashboardDataService } from './activitydashboard-data.service'; import { ActivityDashboardComponent } from './activitydashboard.component'; import { ActivityPercentComponent } from './activitypercent/activity-percent.component'; import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect'; @NgModule({ declarations: [ActivityDashboardComponent, ActivityPercentComponent, ], imports: [ NgbModule, ChartModule, SliderModule, CommonModule, SharedModule, FormsModule, SharedModule, MultiselectDropdownModule, ReactiveFormsModule, RouterModule.forChild([ { path: 'activitydashboard', component: ActivityDashboardComponent } ]) ], providers: [ ActivityDashboardDataService ] }) export class ActivityDashboardModule { } 

Trying to use the control in my component/template

  <kendo-slider></kendo-slider> 

Then the error. Any help would be greatly appreciated.

Answer 1

The error message does not seem to be Slider related as there is no croshair there. Anyway - a runnable sample would really help.

Answer 2

This seems to be related to Angular version 4.0.1? If I open the "Basic Usage" demo in Plunker and change the Angular version to 4.0.1, I can reproduce the error. Can someone @ Telerik/Progress please confirm this?

Answer 3

更新到最新版本的@ Progress库为我解决了这个问题。