angularcompiler-errorsfullcalendarangular6angular-module

Angular - error installing library fullcalendar


I am trying to install this calendar library (https://www.npmjs.com/package/angular2-fullcalendar), following the steps however, I get the following errors:

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 console gives me the following error:

Uncaught Error: Can't construct a query for the property "myCalendar" of "HomeComponent" since the query selector wasn't defined.

I have followed the steps of installing it via npm, imported CalendarComponent in my app.module.ts and declared it in my declarations under @NgModule.

I then created a component called home.component.ts and copied the following in, as instructed.

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'
      }
    ]
  };
}

I added this selector in:

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>

Imported this in my main style.css:

@import "fullcalendar/dist/fullcalendar.min.css";

I added the calendar as view child.

My angular.json has the following:

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

Any help is appreciated!


Solution

  • This is because Angular 6 is utilizing RxJS v6. That calendar package you are trying to use is very out of date and is using an older version of RxJS where the directories are different. What you can do is try npm install rxjs@6 rxjs-compat@6 --save in the product directory, which will basically install a compatibility layer for dependencies that have not yet been updated to RxJS v6.
    Hope this helps.
    More Info


    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
    

    To use jquery and fullcalendar in conjunction, you need the typings:

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

    Import jquery and the calendar component to app module. Declare the calendar component.

    import * as $ from 'jquery'
    import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";
    
    ...
    
    declarations: [CalendarComponent],
    

    For the rest, I just used the code you provided - only changing this line:

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


    Source