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 {
...
}