Angular2 Kendo UI 滑块

Question

Kendo 滑块抛出以下错误：

我在另一个项目中使用旧版本的滑块。当前在此项目中使用 Kendo 图表没有任何问题。这是我的设置：

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 { }

功能模块

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 { }

正在尝试使用我的 component/template

中的控件

  <kendo-slider></kendo-slider>

然后报错。任何帮助将不胜感激。

Answer 1

错误消息似乎与 Slider 无关，因为那里没有十字线。无论如何 - 一个可运行的示例真的很有帮助。

Answer 2

这似乎与Angular 4.0.1 版本有关？如果我在 Plunker 中打开 "Basic Usage" 演示并将 Angular 版本更改为 4.0.1，我可以重现该错误。有人@Telerik/Progress可以确认一下吗？

Answer 3

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

Angular2 Kendo UI 滑块

Angular2 Kendo UI Slider

kendo-ui

angular-kendo

kendo-ui-angular2

angular