Error TS2305: Module ''fullcalendar'' has no exported member 'Options'. Angular

Question

I am using fullCalendar & its fullcalendar-scheduler in Angular 5

app.module.ts

    import { CalendarModule } from "ap-angular2-fullcalendar";
@NgModule({
  imports: [
    CalendarModule,

home.component.ts

    import { CalendarComponent } from 'ap-angular2-fullcalendar';
    import * as $ from 'jquery';
    import 'fullcalendar';
    import 'fullcalendar-scheduler';

export class HomeComponent implements OnInit {

 calendarOptions: Object = {
    defaultView: 'agendaDay',

    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    resources: [
      { id: 'a', title: 'Resource 1' },
      { id: 'b', title: 'Resource 2', eventColor: 'green' },
      { id: 'c', title: 'Resource 3', eventColor: 'orange' },
      { id: 'd', title: 'Resource 4', eventColor: 'red' }
    ],
    events: [
      { id: '1', resourceId: 'a', start: '2018-03-07T09:00:00', end: '2018-03-07T10:00:00', title: 'event 1' },
      { id: '2', resourceId: 'b', start: '2018-03-07T07:30:00', end: '2018-03-07T08:30:00', title: 'event 2' },
      { id: '3', resourceId: 'c', start: '2018-03-07T07:30:00', end: '2018-03-07T08:30:00', title: 'event 3' },
      { id: '4', resourceId: 'd', start: '2018-03-07T10:10:00', end: '2018-03-07T10:40:00', title: 'event 4' },
      { id: '5', resourceId: 'a', start: '2018-03-07T10:10:00', end: '2018-03-07T10:40:00', title: 'event 5' }
    ]
  };

I receive the following error:

ERROR in node_modules/ap-angular2-fullcalendar/src/calendar/calendar.d.ts(3,10): error TS2305: Module ''fullcalendar'' has no exported member 'Options'. node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.d.ts(2525,10): error TS2717: Subsequent property declarations must have the same type. Property 'fullCalendar' must be of type 'Calendar', but here has type 'object'.

on

ng build

This solution does not worked for me

package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "rm -Rf ./node_modules/app-angular2-fullcalendar/node_modules"
  },

any help would be greatly appreciated.

see this https://stackoverflow.com/questions/43304008/not-use-an-angular2-fullcalendar — Vikas, Mar 26 '18 at 12:21

score 0 · Answer 1 · answered Apr 19 '18 at 11:50

I have fixed this issue.

Error: Full Calendar can not be added in Angular 5 and it shows following errors.

ERROR in node_modules/ap-angular2-fullcalendar/src/calendar/calendar.d.ts(3,10): error TS2305: Module ''fullcalendar'' has no exported member 'Options'. node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.d.ts(2525,10): error TS2717: Subsequent property declarations must have the same type. Property 'fullCalendar' must be of type 'Calendar', but here has type 'object'.

Problem: There is a different way to use full-calendar scheduler by using Typescript. It is not same as it was in AngularJs

Solution:

Step 1: Install following packages

npm install --save jquery fullcalendar fullcalendar-scheduler
npm install --save-dev typescript webpack awesome-typescript-loader source-map-loader
npm install --save-dev @types/jquery

Step 2: Add following code in view/html

<div id='calendar'></div>

Step 3: In component.ts

import * as $ from 'jquery';
import 'fullcalendar';
import 'fullcalendar-scheduler';

@Component({
  moduleId: module.id,
  templateUrl: 'calendar.view.html'
})
export class CalendarComponent implements OnInit {
  containerEl: JQuery = $('#calendar');;

ngOnInit() {

  calendarOptions: Object = {
    defaultView: 'agendaDay',
    editable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    resources: [
      { id: 'a', title: 'Resource 1' },
      { id: 'b', title: 'Resource 2', eventColor: 'green' },
      { id: 'c', title: 'Resource 3', eventColor: 'orange' },
      { id: 'd', title: 'Resource 4', eventColor: 'red' }
    ],
    events: [
      { id: '1', resourceId: 'a', start: '2018-04-18T09:00:00', end: '2018-04-18T10:00:00', title: 'event 1' },
      { id: '2', resourceId: 'b', start: '2018-04-18T07:30:00', end: '2018-04-18T08:30:00', title: 'event 2' },
      { id: '3', resourceId: 'c', start: '2018-04-18T07:30:00', end: '2018-04-18T08:30:00', title: 'event 3' },
      { id: '4', resourceId: 'd', start: '2018-04-18T10:10:00', end: '2018-04-18T10:40:00', title: 'event 4' },
      { id: '5', resourceId: 'a', start: '2018-04-18T10:10:00', end: '2018-04-18T10:40:00', title: 'event 5' }
    ]                                                                         
  };
}

Most Important

No need to add any module reference in app.module.ts

import { CalendarModule } from "ap-angular2-fullcalendar"; @NgModule({ imports: [ CalendarModule,
No need to add any component reference in your component.ts

import { CalendarComponent } from 'ap-angular2-fullcalendar';

Error TS2305: Module ''fullcalendar'' has no exported member 'Options'. Angular

1 Answers1