如何导入接口在外部ngModule库

Question

我对角新4
我创建了一个名为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": "mds_soft@yahoo.com", 
    "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一个ngModule包，这是确定现在
我想在另一个角度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 { } 

这是确定的，直到这里，但我必须从mds.angular.bootstrap.datetimepicker包导入IDate在我的组件
使用它，但它抛出异常：

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？

Answer 1

最后，我找到了解决办法：

第一：创建index.ts（我把它命名为索引，您可以更改名称）和写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';