如何導入接口在外部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';