Angular - 安装库 fullcalendar 时出错

Question

我正在尝试安装此日历库 ( 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 安装它的步骤，在我的 app.module.ts 中导入了 CalendarComponent，并在我的 @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";

我将日历添加为 View 子项。

我的 angular.json 有以下内容:

"angular2-fullcalendar": "^1.0.19",
"ap-angular2-fullcalendar": "^1.6.4",

任何帮助表示赞赏!

Answer 1

这是因为 Angular 6 正在使用 RxJS v6 .您尝试使用的日历包非常过时，并且正在使用目录不同的旧版本的 RxJS。
你可以试试npm install rxjs@6 rxjs-compat@6 --save在产品目录中，它基本上会为尚未更新到 RxJS 的依赖项安装一个兼容层v6 .
希望这可以帮助。
More Info

就您评论中的错误而言，这是我安装/使用此软件包的方式。
在项目目录中:

npm i ap-angular2-fullcalendar jquery --save

要结合使用 jquery 和 fullcalendar，您需要以下类型:

npm i --save-dev @types/jquery@3.2.7

将 jquery 和日历组件导入应用模块。声明日历组件。

import * as $ from 'jquery'
import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";

...

declarations: [CalendarComponent],

其余的，我只是使用了您提供的代码 - 只更改了这一行:

calendarOptions:Object = {
    height: '600px',
    ...
}

Source