Angular - ошибка при установке библиотеки fullcalendar

Я пытаюсь установить эту библиотеку календаря (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",

Любая помощь приветствуется!

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
2 074
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что Angular 6 использует RxJS v6. Этот пакет календаря, который вы пытаетесь использовать, очень устарел и использует старую версию RxJS, где каталоги другие. Что вы можете сделать, так это попробовать npm install rxjs@6 rxjs-compat@6 --save в каталоге продукта, который в основном установит уровень совместимости для зависимостей, которые еще не были обновлены до RxJS v6.
Надеюсь, это поможет.
Больше информации


As far as your the error in your comment goes, here's how I installed/used this package.
In project directory:
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',
    ...
}


Источник

Получил следующую ошибку: ERROR in ./node_modules/angular2-fullcalendar/src/calendar/calendar.t‌​s 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.

Idris.AH 06.08.2018 16:32

@JonnySprouse Как говорится, я думаю, что пакет просто плохо упакован, и было бы неплохо найти другой пакет календаря, но позвольте мне посмотреть, могу ли я помочь.

Brad Axe 06.08.2018 18:47

Отлично, все исправлено. Спасибо.

Idris.AH 06.08.2018 22:51

Другие вопросы по теме