我是angular 4
的新手，我创建了一个ngModule包，名称mds.angular.bootstrap.datetimepicker如下package.json
{
"name": "mds.angular.bootstrap.datetimepicker",
"version": "0.9.8",
"description": "Persian and gregorian DateTimePicker with angular 4",
"license": "MIT",
"main": "./mds-datetimePicker.module.js",
"types": [
"./mds-datetimePicker.module.d.ts",
"./assests/date.interface.d.ts",
"./assests/day.interface.d.ts",
"./assests/rangeDate.interface.d.ts"
],
"moduleResolution": "node",
"author": {
"email": "[email protected]",
"name": "Mohammad Dayyan",
"url": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker"
},
"repository": {
"type": "public",
"url": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker"
},
"homepage": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker",
"dependencies": {
"@angular/animations": "^4.1.2",
"@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",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"mds.persian.calendar": "^0.9.69",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
}
}
我发布在npm它的OK
现在我想消费包装在另一个角4项目。
所以我安装了软件包npm install mds.angular.bootstrap.datetimepicker --save
，如下所示
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdsDatetimePickerModule } from 'mds.angular.bootstrap.datetimepicker';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MdsDatetimePickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
直到这里都可以，但是我必须IDate从mds.angular.bootstrap.datetimepicker包中导入才能在组件中使用它，
但是会引发异常：
ERROR in D:/Sources/sample/src/app/app.component.ts (2,23): Cannot find module 'date.interface'.
import { Component } from '@angular/core';
import { IDate } from 'date.interface'; //ERROR
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Mds Angular Bootstrap DateTimePicker';
viewInit = false;
inLinePersianDateTimePicker = '';
inlinePersianDatePickerChanged(selectedDate: IDate) {
if (!this.viewInit) return;
this.inLinePersianDateTimePicker = selectedDate.formatString;
}
inLineGregorianDateTimePicker = '';
inlineGregorianDatePickerChanged(selectedDate: IDate) {
if (!this.viewInit) return;
this.inLineGregorianDateTimePicker = selectedDate.formatString;
}
popoverPersianDateTimePicker = '';
popoverPersianDateTimePickerChanged(selectedDate: IDate) {
if (!this.viewInit) return;
this.popoverPersianDateTimePicker = selectedDate.formatString;
}
popoverGregorianDateTimePicker = '';
popoverGregorianDateTimePickerChanged(selectedDate: IDate) {
if (!this.viewInit) return;
this.popoverGregorianDateTimePicker = selectedDate.formatString;
}
ngAfterViewInit() {
this.viewInit = true;
}
}
以下是IDate在mds.angular.bootstrap.datetimepicker包
export interface IDate {
year: number;
month: number;
day: number;
hour: number;
minute: number;
second: number;
millisecond: number;
formatString: string;
}
我应该如何IDate在外部应用程序中使用？
最后，我找到了解决方案：
首先：创建index.ts（我将其命名为index，可以更改名称）并export为我们要在外部库中使用的每种类型编写。
export * from "./mds-datetimePicker.module";
export * from "./services/mds-datetime-picker-resources.service";
export * from "./components/mds-datetime-picker.component";
export * from "./components/core/mds-datetime-picker-core.component";
export * from "./assests/date.interface";
export * from "./assests/day.interface";
export * from "./assests/mds-datetime-picker.utility";
export * from "./assests/rangeDate.interface";
第二：打开命令提示符并选择package.json路径，然后编写以下命令：
tsc --declaration
你可以写tsc -d。
该命令编译打字稿文件并创建*.d.ts文件
最后：在其中package.json添加以下行：
"main": "./index.js",
"types": "./index.d.ts"
现在，我们可以index.ts按以下方式导入所有类型：
import { MdsDatetimePickerModule, IDate } from 'mds.angular.bootstrap.datetimepicker';
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句