Angular 5 Datepicker（ngx-bootstrap）未显示

Question

我最近将我的应用程序从Angular 2升级到了Angular 5，一个自定义的datepicker组件在显示问题时出现了问题，我已附加了显示给我的图像。我知道它正在显示自定义组件，但是它无法呈现股票日期选择器。我已经将BsDatepickerModule导入到我的app.module，childcomponent.module和shared.module中。它不会引发任何关于指令的抱怨，也不会声称找不到组件/模块。我在这里尽头了。我觉得我已经尝试了包和导入方法的所有组合。

。

这是我的相关版本

Angular CLI: 1.7.3
Node: 10.13.0
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
ngx-bootstrap: 2.0.2

我的app.module

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";


// Components
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app.routing";
import { TabsetComponent, TabsetConfig } from "ngx-bootstrap";
import { BsDatepickerModule } from "ngx-bootstrap/datepicker";

// Custom
import { PlanningModule } from "./planning/planning.module";

// Providers
import { APP_PROVIDERS } from "./index";

// 3rd party modules
import { ModalModule } from "ngx-bootstrap";
import { FileUploadModule } from "ng2-file-upload";

@NgModule({
    imports: [
        ...
        BsDatepickerModule.forRoot()
    ],
    declarations: [AppComponent],
    exports: [ModalModule],
    bootstrap: [AppComponent],
    providers: []
    })
export class AppModule { }

我的孩子模块

import { NgModule } from "@angular/core";

import { FormsModule, ReactiveFormsModule} from "@angular/forms";
import { CommonModule } from "@angular/common";
import { NgbdDatepickerPopup } from "../component/datepicker/datepicker";
import { NgbdModalComponent }  from "../shared/modalComponent";
import { HttpModule } from "@angular/http";
import { BsDatepickerModule } from "ngx-bootstrap/datepicker";
import { ModalDirective, ModalModule } from "ngx-bootstrap";

@NgModule({
    imports: [
        ...
        BsDatepickerModule,
        ModalModule
    ],
    declarations: [
        ...
        NgbdDatepickerPopup,
        ...
    ],
    exports: [BsDatepickerModule]
})

export class PlanningModule { }

共享模块

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule }   from "@angular/forms";
import { ModalModule } from "ngx-bootstrap";

import { NotesModal} from "./notesModal";
import { TemplateNotesModal } from "./templateNotesModal";
import { NotesService } from "./notes.service";
import { AttachmentsModal } from "./attachmentsModal";
import { TemplateAttachmentModal } from "./templateAttachmentsModal";
import { MaskedPipe } from "./pipes/masked.pipe";
import { BsDatepickerModule } from "ngx-bootstrap/datepicker";


@NgModule({
    imports: [CommonModule, FormsModule, ModalModule.forRoot(), BsDatepickerModule.forRoot()],
    providers: [NotesService],
    declarations: [NotesModal, TemplateNotesModal, AttachmentsModal, TemplateAttachmentModal, MaskedPipe],
    exports: [
        BsDatepickerModule,
        CommonModule,
        ModalModule,
        NotesModal,
        TemplateNotesModal,
        AttachmentsModal,
        TemplateAttachmentModal,
        MaskedPipe],
    entryComponents: [
        AttachmentsModal,
        TemplateAttachmentModal
    ]
})
export class SharedModule { }

最后，这是自定义datepicker组件。它可以正确显示，并且只有在单击该图标以加载内部日期选择器时才会起作用

<form class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input readonly class="form-control" placeholder="mm-dd-yyyy" [(ngModel)]="stringDate" [ngModelOptions]="{standalone: true}"/>
            <div *ngIf="populationDate != null && !disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="clearDate()"><i class="glyphicon remove"></i>
            </div>
            <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="showDatepicker()">
                <i class="glyphicon calendar"></i>
            </div>
            <div *ngIf="disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" title="Start and End Dates Must First Be Chosen">
                <i class="glyphicon calendar"></i>
            </div>
        </div>
        <div *ngIf="showDatePicker" class="popup">
            <input #dpYMD="bsDatepicker" bsDatepicker [(ngModel)]="date" [ngModelOptions]="{standalone: true}" (ngModelChange)="dateChange(date)" 
                         [minDate]="minDate()" [maxDate]="maxDate()">
        </div>

    </div>
</form>

还有TS

    import { Component, Input, Output, EventEmitter, ElementRef } from "@angular/core";
import { DatePickerComponent } from "ngx-bootstrap/datepicker";

@Component({
    selector: "ngbd-datepicker-popup",
    templateUrl: "datepicker.html",
    host: {
    "(document:click)": "handleClick($event)"
    }
})

export class NgbdDatepickerPopup {
...
}