Unexpected value 'Calendar' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation

Question

i am using ionic 3.9.2 , i got this error when i tried to implement the ionic-native calendar . first of all i installed the module using this two commands :

 ionic cordova plugin add cordova-plugin-calendar
 npm install --save @ionic-native/calendar@4

i have already imported this in app.module.ts :

import { Calendar } from '@ionic-native/calendar';
@NgModule({
  declarations: [
    Calendar
  ],

this is the page where i am using the calendar :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Calendar } from '@ionic-native/calendar';

@IonicPage()
@Component({
  selector: 'page-films',
  templateUrl: 'films.html',
})
export class FilmsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,private calendar: Calendar) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FilmsPage');

   this.calendar.createCalendar('MyCalendar').then(
      (msg) => { console.log(msg); },
      (err) => { console.log(err); }
    );

  }

}

i got this error :

Unexpected value 'Calendar' imported by the module 'AppModule'. Please add a @NgModule annotation.

Gérôme Grignon Gérôme Grignon · Accepted Answer · 2020-05-23T06:59:40

The declarations array of a Module is meant to only contain Directives (so @Directive, @Pipe and @Component).

You need to move Calendar to the providers array of the Module :

import { Calendar } from '@ionic-native/calendar';
@NgModule({
  providers: [
    Calendar
  ],

Unexpected value 'Calendar' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation

1 Answers