无法为 Angular 导入 Kendo TimePicker 组件 2+

Not able to import Kendo TimePicker component for Angular 2+

根据我在本周三(2017 年 9 月 13 日)通过电子邮件收到的 KendoUI 时事通讯,新的 TimePicker 已经发布。我正在尝试在我的项目中导入 TimePicker 组件,但我无法这样做。根据 API 我们的 kendo-angular-dateinputs 版本为 1.2.0,它应该包含 TimePickerModule。我尝试通过指定该版本 (1.2.0) 来执行 npm 安装,但出现以下错误消息。

fetchPackageMetaData error for @progress/kendo-angular-dateinputs@^1.2.0 { Error: No compatible version found: @progress/kendo-angular-dateinputs@^1.0.6
37 silly fetchPackageMetaData Valid install targets:
37 silly fetchPackageMetaData 1.0.5, 1.0.5-dev.201706261326, 1.0.4, 1.0.4-dev.201706150809, 1.0.4-dev.201706131239, 1.0.3, 1.0.3-dev.201706051028, 1.0.2, 1.0.2-dev.201705311506, 1.0.2-dev.201705261318, 1.0.2-dev.201705240946, 1.0.2-dev.201705240940, 1.0.2-dev.201705221449, 1.0.1, 1.0.0, 0.9.0, 0.8.3, 0.8.2, 0.8.1, 0.8.0, 0.7.0, 0.6.1, 0.6.0, 0.5.3, 0.5.2, 0.5.1, 0.5.0, 0.4.1, 0.4.0, 0.3.7, 0.3.6, 0.3.5, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.0, 0.1.0

在包 json 中,我将依赖项添加为“@progress/kendo-angular-dateinputs”:“^1.2.0”。我只能获得最新版本的 1.0.5,当我在我的 html 中添加 timepicker 标签时,我收到错误消息:

Uncaught Error: Template parse errors: 'kendo-timepicker' is not a known element: 1. If 'kendo-timepicker' is an Angular component, then verify that it is part of this module. 2. If 'kendo-timepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]

谁能检查一下 V1.2.0 是否确实可供人们使用?

同时复制包json

    {
  "name": "test-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "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",
    "@progress/kendo-angular-dateinputs": "^1.2.0",
    "@progress/kendo-angular-intl": "^1.2.1",
    "@progress/kendo-angular-l10n": "^1.0.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

我注意到我无法通过 NPM 获得任何新的更新,但是我最近在 http://docs.telerik.com/kendo-ui/intro/installation/npm#kendo-ui-professional

的 NPM 包页面上发现了以下内容

Important

The Progress NPM registry was retired in favor of npmjs.com. To start using the default registry, remove the two lines which contain registry.npm.telerik.com from your .npmrc file.

为了解决这个问题,我从 ~/.npmrc 文件中删除了以下行

@progress:registry=https://registry.npm.telerik.com/

之后所有新包都可用

我把package.json中的依赖设置为"@progress/kendo-angular-dateinputs": "^1.0.5",安装的版本是@progress/kendo-angular-dropdowns 1.2.0,这样就可以了。

您可以安装版本检查器:

npm install -g version-check

然后运行命令查看你的版本:

version-check

您是否在根模块中导入了模块?

import { TimePickerModule } from '@progress/kendo-angular-dateinputs';

@NgModule({
    declarations: [HomeComponent],
    imports: [
        BrowserModule,
        ButtonsModule,
        TimePickerModule
    ],
    providers: []
})
export class HomeModule { }

在html中:

<kendo-timepicker 
    [format]="'HH:mm'" 
    name="workingTimeFrom" 
    [(ngModel)]="workingDay.startTime"
    (valueChange)="updateStartTime(i,$event)">
</kendo-timepicker>