Angular календарная ошибка: ошибка: ошибка шаблона: невозможно связать с 'days', так как это не известное свойство mwl-calendar-month-view-header '

Question

Я внедрил angular календарь по этой ссылке https://mattlewis92.github.io/angular-calendar/# / kitchen-sink в мой проект. Я сделал это немного по-другому (имена файлов разные, module.ts на самом деле app.module.ts).

У меня calendar.component. html:

<code><div class="row text-center">
  <div class="col-md-4">
    <div class="btn-group">
      <div class="btn btn-primary"
        mwlCalendarPreviousView
        [view]="view"
        [(viewDate)]="viewDate"
        (viewDateChange)="closeOpenMonthViewDay()">
        Previous
      </div>
      <div class="btn btn-outline-secondary"
        mwlCalendarToday
        [(viewDate)]="viewDate">
        Today
      </div>
      <div class="btn btn-primary"
        mwlCalendarNextView
        [view]="view"
        [(viewDate)]="viewDate"
        (viewDateChange)="closeOpenMonthViewDay()">
        Next
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
  </div>
  <div class="col-md-4">
    <div class="btn-group">
      <div class="btn btn-primary"
        (click)="setView(CalendarView.Month)"
        [class.active]="view === CalendarView.Month">
        Month
      </div>
      <div class="btn btn-primary"
        (click)="setView(CalendarView.Week)"
        [class.active]="view === CalendarView.Week">
        Week
      </div>
      <div class="btn btn-primary"
        (click)="setView(CalendarView.Day)"
        [class.active]="view === CalendarView.Day">
        Day
      </div>
    </div>
  </div>
</div>
<br />
<div [ngSwitch]="view">
  <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month"
                       [viewDate]="viewDate"
                       [events]="events"
                       [refresh]="refresh"
                       [activeDayIsOpen]="activeDayIsOpen"
                       (dayClicked)="dayClicked($event.day)"
                       (eventClicked)="handleEvent('Clicked', $event.event)"
                       (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-month-view>
  <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week"
                      [viewDate]="viewDate"
                      [events]="events"
                      [refresh]="refresh"
                      (eventClicked)="handleEvent('Clicked', $event.event)"
                      (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-week-view>
  <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day"
                     [viewDate]="viewDate"
                     [events]="events"
                     [refresh]="refresh"
                     (eventClicked)="handleEvent('Clicked', $event.event)"
                     (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-day-view>
</div>

<!-- Everything you see below is just for the demo, you don't need to include it in your app -->

<br />
<br />
<br />

<h3>
  Edit events
  <button class="btn btn-primary pull-right" (click)="addEvent()">
    Add new
  </button>
  <div class="clearfix"></div>
</h3>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Title</th>
        <th>Primary color</th>
        <th>Secondary color</th>
        <th>Starts at</th>
        <th>Ends at</th>
        <th>Remove</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let event of events">
        <td>
          <input type="text"
             class="form-control"
             [(ngModel)]="event.title"
             (keyup)="refresh.next()" />
        </td>
        <td>
          <input type="color"
             [(ngModel)]="event.color.primary"
             (change)="refresh.next()" />
        </td>
        <td>
          <input type="color"
             [(ngModel)]="event.color.secondary"
             (change)="refresh.next()" />
        </td>
        <td>
          <input class="form-control"
             type="text"
             mwlFlatpickr
             [(ngModel)]="event.start"
             (ngModelChange)="refresh.next()"
             [altInput]="true"
             [convertModelValue]="true"
             [enableTime]="true"
             dateFormat="Y-m-dTH:i"
             altFormat="F j, Y H:i"
             placeholder="Not set" />
        </td>
        <td>
          <input class="form-control"
             type="text"
             mwlFlatpickr
             [(ngModel)]="event.end"
             (ngModelChange)="refresh.next()"
             [altInput]="true"
             [convertModelValue]="true"
             [enableTime]="true"
             dateFormat="Y-m-dTH:i"
             altFormat="F j, Y H:i"
             placeholder="Not set" />
        </td>
        <td>
          <button class="btn btn-danger" (click)="deleteEvent(event)">
            Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<ng-template #modalContent let-close="close">
  <div class="modal-header">
    <h5 class="modal-title">Event action occurred</h5>
    <button type="button" class="close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div>
      Action:
        <pre>{{ modalData?.action }}

Событие:

{{ modalData?.event | json }}

ОК

Calendar.comp onet .ts:

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef
} from '@angular/core';
import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarView
} from 'angular-calendar';

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'app-calendar',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['./calendar.component.css'],
  templateUrl: './calendar.component.html'
})

export class CalendarComponent {
  @ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;

  view: CalendarView = CalendarView.Month;

  CalendarView = CalendarView;

  viewDate: Date = new Date();

  modalData: {
    action: string;
    event: CalendarEvent;
  };

  actions: CalendarEventAction[] = [
    {
        label: '<i class="fa fa-fw fa-pencil"></i>',
        a11yLabel: 'Edit',
        onClick: ({ event }: { event: CalendarEvent }): void => {
            this.handleEvent('Edited', event);
        }
    },
    {
        label: '<i class="fa fa-fw fa-times"></i>',
        a11yLabel: 'Delete',
        onClick: ({ event }: { event: CalendarEvent }): void => {
            this.events = this.events.filter(iEvent => iEvent !== event);
            this.handleEvent('Deleted', event);
        }
    }
  ];

  refresh: Subject<any> = new Subject();

  events: CalendarEvent[] = [
    {
        start: subDays(startOfDay(new Date()), 1),
        end: addDays(new Date(), 1),
        title: 'A 3 day event',
        color: colors.red,
        actions: this.actions,
        allDay: true,
        resizable: {
            beforeStart: true,
            afterEnd: true
        },
        draggable: true
    },
    {
        start: startOfDay(new Date()),
        title: 'An event with no end date',
        color: colors.yellow,
        actions: this.actions
    },
    {
        start: subDays(endOfMonth(new Date()), 3),
        end: addDays(endOfMonth(new Date()), 3),
        title: 'A long event that spans 2 months',
        color: colors.blue,
        allDay: true
    },
    {
        start: addHours(startOfDay(new Date()), 2),
        end: addHours(new Date(), 2),
        title: 'A draggable and resizable event',
        color: colors.yellow,
        actions: this.actions,
        resizable: {
            beforeStart: true,
            afterEnd: true
        },
        draggable: true
    }
  ];

  activeDayIsOpen: boolean = true;

  constructor(private modal: NgbModal) { }

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
        if (
            (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
            events.length === 0
        ) {
            this.activeDayIsOpen = false;
        } else {
            this.activeDayIsOpen = true;
        }
        this.viewDate = date;
    }
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd
  }: CalendarEventTimesChangedEvent): void {
       this.events = this.events.map(iEvent => {
        if (iEvent === event) {
            return {
                ...event,
                start: newStart,
                end: newEnd
            };
        }
        return iEvent;
    });
    this.handleEvent('Dropped or resized', event);
  }

  handleEvent(action: string, event: CalendarEvent): void {
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: 'lg' });
  }

  addEvent(): void {
    this.events = [
        ...this.events,
        {
            title: 'New event',
            start: startOfDay(new Date()),
            end: endOfDay(new Date()),
            color: colors.red,
            draggable: true,
            resizable: {
                beforeStart: true,
                afterEnd: true
            }
        }
    ];
  }

  deleteEvent(eventToDelete: CalendarEvent) {
    this.events = this.events.filter(event => event !== eventToDelete);
  }

  setView(view: CalendarView) {
    this.view = view;
  }

  closeOpenMonthViewDay() {
    this.activeDayIsOpen = false;
  }
}

Calendar.component. css:

h3 {
  margin: 0 0 10px;
}

pre {
  background-color: #f5f5f5;
  padding: 15px;
}

В моем app.component. ts, у меня есть этот код:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import {
  MatButtonModule, MatCheckboxModule, MatToolbarModule, MatInputModule, MatProgressSpinnerModule,
  MatCardModule, MatMenuModule, MatIconModule, MatDialogModule, MatNativeDateModule, 
  MatDatepickerModule
} from '@angular/material';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FlatpickrModule } from 'angularx-flatpickr';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HeaderComponent } from './standard-page/header/header.component';
import { FooterComponent } from './standard-page/footer/footer.component';
import { ContentComponent } from './standard-page/content/content.component';
import { GymComponent } from './standard-page/gym/gym.component';
import { AddGymComponent } from './authentication-page/add-gym/add-gym.component';
import { RegisterComponent } from './authentication-page/register/register.component';
import { LoginComponent } from './authentication-page/login/login.component'
import { GymHomeComponent } from './standard-page/gym/gym-home/gym-home.component';
import { UserComponent } from './standard-page/gym/user/user.component';
import { UsersComponent } from './standard-page/gym/users/users.component';
import { UserService } from './shared/services/user.service';
import { AuthService } from './shared/services/auth.service';
import { GymService } from './shared/services/gym.service';
import { CodebookService } from './shared/services/codebook.service';
import { ErrorHandlerService } from './shared/services/error-handler.service';
import { AppRoutingModule } from './app-routing.module';
import { StandardPageComponent } from './standard-page/standard-page.component';
import { TokenInterceptorService } from './auth/token-interceptor.service';
import { GymHallsComponent } from './standard-page/gym/gym-halls/gym-halls.component';
import { AddGymHallComponent } from './standard-page/gym/add-gym-hall/add-gym-hall.component';
import { LockScreenComponent } from './authentication-page/lock-screen/lock-screen.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { ContactComponent } from './standard-page/gym/contact/contact.component';
import { AddAccountComponent } from './standard-page/gym/add-account/add-account.component';
import { CalendarComponent } from './shared/calendar/calendar.component';
import { FullCalendarModule } from '@fullcalendar/angular';
import { TrainingSchedulerComponent } from './standard-page/gym/training-scheduler/training- 
  scheduler.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    UserComponent,
    UsersComponent,
    RegisterComponent,
    AddGymComponent,
    GymComponent,
    GymHomeComponent,
    LoginComponent,
    StandardPageComponent,
    GymHallsComponent,
    AddGymHallComponent,
    ContentComponent,
    LockScreenComponent,
    ContactComponent,
    AddAccountComponent,
    CalendarComponent,
    TrainingSchedulerComponent
  ],
  entryComponents: [LoginComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    CommonModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatDialogModule,
    BrowserAnimationsModule,
    BsDatepickerModule.forRoot(),
    AppRoutingModule,
    MatNativeDateModule,
    MatDatepickerModule,
    NgxPaginationModule,        
    FullCalendarModule,
    NgbModalModule,
    FlatpickrModule.forRoot(),
    CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory
    })
  ],
  providers: [
    UserService,
    AuthService,
    GymService,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptorService,
        multi: true
    },
    CodebookService,
    ErrorHandlerService
  ],
  bootstrap: [AppComponent]   
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;

  // Otherwise, log the boot error
}).catch(err => console.error(err));

Из моего обучения-scheduler.component. html Я называю этот календарь:

<div class="row">
  <app-calendar></app-calendar>
</div>

Когда я перестраиваю проект, все в порядке , Но когда я захожу на страницу, где вызывается comp-планировщик тренировок onet, я получаю эту ошибку:

Ошибка: Ошибка шаблона: невозможно связать с 'days', так как это не известное свойство 'mwl-calendar-month-view-header'.

Вот изображение, как выглядит этот календарь:

Есть идеи, чего не хватает?