Я пытаюсь установить эту библиотеку календаря (https://www.npmjs.com/package/angular2-fullcalendar), однако, следуя инструкциям, получаю следующие ошибки:
ERROR in node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(8,10): error TS2305: Module '"<...>/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(9,10): error TS2305: Module '"<...>/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular2-fullcalendar/node_modules/@angular/core/src/facade/async.d.ts(10,10): error TS2305: Module '"<...>/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/angular2-fullcalendar/node_modules/@angular/core/src/util/lang.d.ts(8,10): error TS2305: Module '"<...>/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
Консоль Chrome выдает следующую ошибку:
Uncaught Error: Can't construct a query for the property "myCalendar" of "HomeComponent" since the query selector wasn't defined.
Я выполнил шаги по установке через npm, импортировал CalendarComponent в свой app.module.ts и объявил его в своих объявлениях в @NgModule.
Затем я создал компонент с именем home.component.ts и скопировал следующее, как было указано.
import { Component, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
// MatPaginator Inputs
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
constructor() { }
ngOnInit() {
}
setPageSizeOptions(setPageSizeOptionsInput: string) {
this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
calendarOptions:Object = {
height: 'parent',
fixedWeekCount : false,
defaultDate: '2016-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-09-01'
},
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-16T16:00:00'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
};
}
Я добавил этот селектор в:
<angular2-fullcalendar [options] = "calendarOptions"></angular2-fullcalendar>
Импортировал это в мой основной style.css:
@import "fullcalendar/dist/fullcalendar.min.css";
Я добавил календарь как дочерний элемент просмотра.
В моем angular.json есть следующее:
"angular2-fullcalendar": "^1.0.19",
"ap-angular2-fullcalendar": "^1.6.4",
Любая помощь приветствуется!





Это потому, что Angular 6 использует RxJS v6. Этот пакет календаря, который вы пытаетесь использовать, очень устарел и использует старую версию RxJS, где каталоги другие.
Что вы можете сделать, так это попробовать npm install rxjs@6 rxjs-compat@6 --save в каталоге продукта, который в основном установит уровень совместимости для зависимостей, которые еще не были обновлены до RxJS v6.
Надеюсь, это поможет.
Больше информации
npm i ap-angular2-fullcalendar jquery --save
Чтобы использовать jquery и fullcalendar вместе, вам понадобятся следующие типы:
npm i --save-dev @types/[email protected]
Импортируйте jquery и компонент календаря в модуль приложения. Объявите календарный компонент.
import * as $ from 'jquery'
import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";
...
declarations: [CalendarComponent],
В остальном я просто использовал предоставленный вами код - изменив только эту строку:
calendarOptions:Object = {
height: '600px',
...
}
@JonnySprouse Как говорится, я думаю, что пакет просто плохо упакован, и было бы неплохо найти другой пакет календаря, но позвольте мне посмотреть, могу ли я помочь.
Отлично, все исправлено. Спасибо.
Получил следующую ошибку:
ERROR in ./node_modules/angular2-fullcalendar/src/calendar/calendar.ts Module build failed: Error: ...\node_modules\angular2-fullcalendar\src\calendar\calendar.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.