CODEWITHSUNDEEP
cordovaangular6ionic4
Razvan
Razvan

Reputation: 617

Ionic 4 cordova cordova-plugin-facebook4: Property 'provide' is missing in type 'FacebookOriginal'

I'm having an issue with an Ionic 4, Cordova, Angular6 app. After cordova-plugin-facebook4 installation and addition to the app.module.ts file the TS compiler produces the following error:

[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ERROR in src/app/app.module.ts(13,11): error TS2345: Argument of type '{ declarations: (typeof AppComponent)[]; entryComponents: undefined[]; imports: (ModuleWithProvid...' is not assignable to parameter of type 'NgModule'.
[ng]   Types of property 'providers' are incompatible.
[ng]     Type '(typeof SplashScreen | FacebookOriginal | { provide: typeof RouteReuseStrategy; useClass: typeof ...' is not assignable to type 'Provider[]'.
[ng]       Type 'typeof SplashScreen | FacebookOriginal | { provide: typeof RouteReuseStrategy; useClass: typeof I...' is not assignable to type 'Provider'.
[ng]         Type 'FacebookOriginal' is not assignable to type 'Provider'.
[ng]           Type 'FacebookOriginal' is not assignable to type 'ClassProvider'.
[ng]             Property 'provide' is missing in type 'FacebookOriginal'.

This is my configuration:

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.1.1 ([email protected])
   Cordova Platforms     : android 7.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 4 other plugins)

This is app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Facebook } from '@ionic-native/facebook';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Facebook,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Also this package is installed and available in package.json file:

"@ionic-native/facebook": "^4.15.0"

Thanks in advance for your opinions.

Upvotes: 7

Views: 6389

Answers (1)

Razvan
Razvan

Reputation: 617

I managed to figure this out: The include should be done from the 'ngx' folder for the ionic-native Facebook module, like this:

import { Facebook } from '@ionic-native/facebook/ngx';

This is not available in any documentation of the module.

Upvotes: 41

Related Questions