I have an error when implement Social sharing on ionic https://ionicframework.com/docs/native/social-sharing
I install it well ionic cordova plugin add cordova-plugin-x-socialsharing npm install @ionic-native/social-sharing
page.ts
import { Component, OnInit } from '@angular/core';
import {WordpressService} from '../services/wordpress.service';
import { ActivatedRoute } from '@angular/router';
import {HelperService} from "../services/helper.service";
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
@Component({
selector: 'app-tab5',
templateUrl: 'tab5.page.html',
styleUrls: ['tab5.page.scss'],
providers:[WordpressService]
})
export class Tab5Page implements OnInit {
items: any[];
recipeId;
type: String;
content;
title;
post: any;
public favoris: any = [];
posts: any = [];
constructor(
public helperService: HelperService,
public wordpressService: WordpressService,
private route: ActivatedRoute,
private socialSharing: SocialSharing
) {
}
loadPosts(){
this.recipeId = this.route.snapshot.paramMap.get('id');
let favored;
let index = 0;
this.wordpressService.getPostContent(this.recipeId,'posts').subscribe(res => {
favored = this.helperService.inArray(res['id'],this.favoris.favorites);
console.log(res);
res['favorisButtonText']= (favored ? "retirer" : "ajouter");
res['favorisButton']= (favored ? false: true);
this.post = res;
},
(err) => {
console.log("Catch error "+JSON.stringify(err));
this.helperService.error("Erreur de chargement article");
});
}
ngOnInit() {
if(this.helperService.is_loged()){
this.wordpressService.getFavorites(this.helperService.getUser().user_id).subscribe(res => {
this.favoris = res;
this.loadPosts();
},
(err) => {
console.log("Catch error "+JSON.stringify(err));
this.helperService.error("Erreur de chargement favoris");
});
}else{
this.loadPosts();
}
}
shareViaWhatsApp(text,image,url){
this.socialSharing.shareViaWhatsApp(text, image, url).then((res) => {
// Success
this.helperService.share("WhatsApp","partage sur WhatsApp avec succès","logo-whatsApp");
}).catch((e) => {
// Error!
this.helperService.share("WhatsApp","Erreur partage sur WhatsApp","logo-whatsApp");
});
}
shareViaFacebook(text,image,url){
this.socialSharing.shareViaFacebook(text, image, url).then((res) => {
// Success
this.helperService.share("Facebook","partage sur Facebook avec succès","logo-facebook");
}).catch((e) => {
// Error!
this.helperService.share("Facebook","Erreur partage sur Facebook","logo-facebook");
});
}
shareViaInstagram(text,image){
this.socialSharing.shareViaInstagram(text, image).then((res) => {
// Success
this.helperService.share("Instagram","partage sur Instagram avec succès","logo-instagram");
}).catch((e) => {
// Error!
this.helperService.share("Instagram","Erreur partage sur Instagram","logo-instagram");
});
}
shareViaTwitter(text,image,url){
this.socialSharing.shareViaTwitter(text, image, url).then((res) => {
// Success
this.helperService.share("Twitter","partage sur Twitter avec succès","logo-twitter");
}).catch((e) => {
// Error!
this.helperService.share("Twitter","Erreur partage sur Twitter","logo-twitter");
});
}
page.html
<ion-header>
<ion-toolbar color="light">
<ion-row>
<ion-col width-10 style="text-align: left">
<img src="./assets/logo.png" alt="logo">
</ion-col>
<ion-col width-90 style="text-align: left">
Articles
</ion-col>
<ion-col width-10 style="text-align: left">
<ion-button expand="full" size="small" fill="clear" (click)="helperService.goToCompte()">
<ion-icon slot="start" name="person"></ion-icon>
<ion-label>Compte</ion-label>
</ion-button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
<ion-content padding >
<ion-grid>
<h1 class="title-post" [innerHTML]="post?.title.rendered" padding></h1>
<ion-card-subtitle><ion-icon name="calendar"></ion-icon> {{ post?.date_gmt | date }} <ion-icon name="podium"></ion-icon> Vue : {{post?.nb_vu.affiche_cape}}</ion-card-subtitle>
<ion-row>
<ion-col>
<ion-img size="10" class="center" [src]="post?.featured_image_url"></ion-img>
</ion-col>
</ion-row>
<ion-row>
<div [innerHTML]="post?.content.rendered"></div>
</ion-row>
<ion-row>
<ion-col size="6"><ion-button (click)="helperService.openWebpage(post?.source)"><ion-icon name="document"></ion-icon>source</ion-button></ion-col>
<ion-col size="6"><ion-button [rel]="post?.favorisButton" (click)="helperService.setFavoris($event,post?.id)"><ion-icon name="star"></ion-icon>{{post?.favorisButtonText}}</ion-button></ion-col>
</ion-row>
</ion-grid>
<ion-row>
<ion-row>
Partage :
</ion-row>
<ion-row>
<ion-col size="3"><ion-button (click)="shareViaWhatsApp(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-whatsapp"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaFacebook(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-facebook"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaInstagram(post?.title.rendered,post?.featured_image_url)"><ion-icon name="logo-instagram"></ion-icon></ion-button></ion-col>
<ion-col size="3"><ion-button (click)="shareViaTwitter(post?.title.rendered,post?.featured_image_url,post?.link)"><ion-icon name="logo-twitter"></ion-icon></ion-button></ion-col>
</ion-row>
</ion-row>
</ion-content>
And i have this error
main.b73fc2529b5100057963.js:1 ERROR NullInjectorError: R3InjectorError(e)[[object Object] -> [object Object] -> [object Object] -> [object Object] -> [object Object]]:
NullInjectorError: No provider for [object Object]!
I try in app.module.ts add social sharing as provider
import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } 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 { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { JwtInterceptor } from './interceptors/jwt.interceptor';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import {HelperService} from "./services/helper.service";
import {WordpressService} from './services/wordpress.service';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, HttpClientModule,
IonicModule.forRoot(), AppRoutingModule,
IonicStorageModule.forRoot()],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
AppVersion,
HttpClientModule,
SocialSharing,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule implements OnInit {
constructor(public helperService: HelperService,
public wordpressService: WordpressService,
) {
}
public favoris: any = [];
ngOnInit() {
}
}
but i have an another error
Error: Invalid provider for the NgModule 'e' - only instances of Provider and Type are allowed, got: [..., ..., ..., ..., ..., ?[object Object]?, ..., ...]
If someone have any idea? thanks for your help
