モジュール '' /Users/***/my-app4/src/app/datepicker/datepicker.component ''にエクスポートされたメンバ 'DatepickerModule'がありません

Question

私は既に次の質問をしました。 ngx-bootstrap datepicker doesnt work 今、私は新しい問題に直面しています。ファイルを分割して新しいエラーが表示されました。 ERROR in/Users//my-app4/src/app/app.component.ts（2,10）：モジュール '' '/ Users/ /my-app4/src/app/datepicker/datepicker.component "'には、エクスポートされたメンバ' DatepickerModule 'がありません。

お手伝いできますか？

app.component.ts

import { Component } from '@angular/core'; 
import { DatepickerModule } from './datepicker/datepicker.component'; 



@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 
} 

app.module.ts

<style> 
    .full button span { 
    background-color: limegreen; 
    border-radius: 32px; 
    color: black; 
    } 
    .partially button span { 
    background-color: orange; 
    border-radius: 32px; 
    color: black; 
    } 
</style> 

<div> 
    <div class="card"> 
    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre> 
    </div> 
    <h4>Inline</h4> 
    <div style="display:inline-block; min-height:290px;"> 
    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker> 
    </div> 

    <hr /> 
    <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button> 
    <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button> 
    <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button> 
    <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button> 
    <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button> 
</div> 

./datepicker/datepicker ./datepicker/datepicker.component.html

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import { DatepickerModule } from 'ngx-bootstrap/datepicker'; 
import { DatepickerComponent } from './datepicker/datepicker.component'; 

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 
import { ModalModule } from 'ngx-bootstrap/modal'; 
import { PaginationModule } from 'ngx-bootstrap/pagination'; 
import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; 
import { ButtonsModule } from 'ngx-bootstrap/buttons'; 
import { FormsModule } from '@angular/forms'; 




@NgModule({ 
    declarations: [ 
    AppComponent, 
    DatepickerComponent 
    ], 
    imports: [ 
    DatepickerModule.forRoot(), ButtonsModule.forRoot(), TypeaheadModule.forRoot(), PaginationModule.forRoot(), ModalModule.forRoot(), BsDropdownModule.forRoot(), BrowserModule, FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

。コンポーネント.ts

import { Component } from '@angular/core'; 
import * as moment from 'moment'; 

@Component({ 
    selector: 'datepicker', 
    templateUrl: './datepicker.component.html' 
}) 
export class DatepickerComponent { 
    public dt: Date = new Date(); 
    public minDate: Date = void 0; 
    public events: any[]; 
    public tomorrow: Date; 
    public afterTomorrow: Date; 
    public dateDisabled: {date: Date, mode: string}[]; 
    public formats: string[] = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 
    'shortDate']; 
    public format: string = this.formats[0]; 
    public dateOptions: any = { 
    formatYear: 'YY', 
    startingDay: 1 
    }; 
    private opened: boolean = false; 

    public constructor() { 
    (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1); 
    (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2); 
    (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000); 
    (this.dateDisabled = []); 
    this.events = [ 
     {date: this.tomorrow, status: 'full'}, 
     {date: this.afterTomorrow, status: 'partially'} 
    ]; 
    } 

    public getDate(): number { 
    return this.dt && this.dt.getTime() || new Date().getTime(); 
    } 

    public today(): void { 
    this.dt = new Date(); 
    } 

    public d20090824(): void { 
    this.dt = moment('2009-08-24', 'YYYY-MM-DD') 
     .toDate(); 
    } 

    public disableTomorrow(): void { 
    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}]; 
    } 

    // todo: implement custom class cases 
    public getDayClass(date: any, mode: string): string { 
    if (mode === 'day') { 
     let dayToCheck = new Date(date).setHours(0, 0, 0, 0); 

     for (let event of this.events) { 
     let currentDay = new Date(event.date).setHours(0, 0, 0, 0); 

     if (dayToCheck === currentDay) { 
      return event.status; 
     } 
     } 
    } 

    return ''; 
    } 

    public disabled(date: Date, mode: string): boolean { 
    return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
    } 

    public open(): void { 
    this.opened = !this.opened; 
    } 

    public clear(): void { 
    this.dt = void 0; 
    this.dateDisabled = undefined; 
    } 

    public toggleMin(): void { 
    this.dt = new Date(this.minDate.valueOf()); 
    } 
} 

Answer 1

代わりDatepickerComponent内部app.component.tsのDatepickerModuleを輸入しています。 DatepickerComponentへ

は

import { DatepickerModule } from './datepicker/datepicker.component';

変更に。

ただし、別のエラーが発生することがあります。

カスタムセレクタの前に、のアプリケーションを接頭辞として使用することをお勧めします。私たちの場合datepickerセレクタはngx-bootstrapと衝突し、エラーを再びスローします。したがって、正常に動作するはずのDatepickerComponentのセレクタをapp-datepickerに変更してください。 app.component.htmlのセレクタも更新することを忘れないでください。