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

Question

I am trying to use FCM Cordova plugin to implement Push notifications. However I am facing this weird issue.

I followed this URL https://ionicframework.com/docs/native/fcm/ and installed it and also imported it correctly in app.component.ts(this where I am trying to use ) and app.module.ts

This is my app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import {Facebook} from 'ionic-native';
import { StudentPage } from '../pages/student/student';
import { ContactPage } from '../pages/contact/contact';
import { TutorPage } from '../pages/tutor/tutor';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { ChatPage } from '../pages/chat/chat';
import { UserChatPage } from '../pages/userchat/userchat';
import { NativeStorage } from '@ionic-native/native-storage';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { GooglePlus } from '@ionic-native/google-plus';
import { IntroPage } from '../pages/intro/intro';
import { NotifyPage } from '../pages/notification/notification';
import { FCM } from '@ionic-native/fcm';
@NgModule({
  declarations: [
    ClassetteApp,
    StudentPage,
    ContactPage,
    TutorPage,
    TabsPage,
    LoginPage,
    ProfilePage,
    ChatPage,
    IntroPage,
    UserChatPage,
    NotifyPage,
    FCM   
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(ClassetteApp,{tabsPlacement:'top',tabsLayout:'icon-right',tabsHideOnSubPages:true})    
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ClassetteApp,
    StudentPage,
    ContactPage,
    TutorPage,
    TabsPage,
    LoginPage,
    ProfilePage,
    ChatPage,
    IntroPage,
    UserChatPage,
    NotifyPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Facebook,
    NativeStorage,
    GooglePlus,
    FCM  
    ]
})
export class AppModule {}

this my package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "start": "node ./bin/www"
  },
  "dependencies": {
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/compiler-cli": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@ionic-native/core": "3.10.2",
    "@ionic-native/facebook": "^3.10.2",
    "@ionic-native/fcm": "^4.1.0",
    "@ionic-native/google-plus": "^3.12.1",
    "@ionic-native/native-storage": "^3.10.3",
    "@ionic-native/splash-screen": "3.10.2",
    "@ionic-native/status-bar": "3.10.2",
    "@ionic/storage": "2.0.1",
    "body-parser": "^1.17.2",
    "cordova-android": "^6.2.3",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-facebook4": "^1.9.0",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-googleplus": "^5.1.1",
    "cordova-plugin-nativestorage": "^2.2.2",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "express": "^4.15.3",
    "ionic-angular": "3.3.0",
    "ionic-native": "^2.5.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "mongoose": "^4.11.4",
    "morgan": "^1.8.2",
    "rxjs": "5.1.1",
    "serve-favicon": "^2.4.3",
    "socket.io": "^2.0.3",
    "socket.io-client": "^2.0.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.7.0",
    "typescript": "2.3.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "3xxxxxxxx75862",
        "APP_NAME": "myapp"
      },
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "4xsdsdxxxxxxx7dsgct91usuntkmomme1n8rq5i7oipq8.apps.googleusercontent.com"
      },
      "cordova-plugin-fcm": {}
    },
    "platforms": [
      "android"
    ]
  },
  "main": "index.js",
  "keywords": [
    "server"
  ],
  "license": "ISC"
}

Note: I have tried adding FCM under imports in app.module.ts but then I get a different error

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

Answer 1

You don't need to import FCM to declarations array, in there you'll only declare modules (like pages, pipes, services, and more). All plugins must be declared only in providers.