Cannot read property 'socialSharing' of undefined in Ionic 4

Question

import { Component, OnInit } from '@angular/core';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@Component({
  selector: 'app-video',
  templateUrl: './video.page.html',
  styleUrls: ['./video.page.scss'],
})
export class VideoPage implements OnInit {

  constructor(private socialSharing: SocialSharing) { }

  ngOnInit() {
  }

}

this.socialSharing.shareViaWhatsApp(Text, Image, URL).then((res) => {
  // Success
}).catch((e) => {
  // Error!
});

this.socialSharing.shareViaFacebook(Text, Image, URL).then((res) => {
  // Success
}).catch((e) => {
  // Error!
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

getting error message when console log: Cannot read property 'socialSharing' of undefined at Module../src/app/video/video.page.ts (video.page.ts:19) at webpack_require (bootstrap:84) at Module../src/app/video/video-routing.module.ts (video-video-module.js:27)

have followed instruction on: https://enappd-apps.gitbook.io/apps/ionic-4-full-app/pro-pack-features/social-logins

Without your code this is going to be very difficult for us to help you solve. Please add it to the post. Having said that, and looked at the tutorial you linked, 'socialSharing' is always accessed as element of 'this'. 'This' should always be something as it refers to the current class. That suggest you've done something wrong in the initial project setup. — Steve, Dec 10 '19 at 23:03

score 1 · Answer 1 · edited Dec 11 '19 at 05:16

Try this code :

import { Component, OnInit } from '@angular/core';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

@Component({
  selector: 'app-video',
  templateUrl: './video.page.html',
  styleUrls: ['./video.page.scss'],
})
export class VideoPage implements OnInit {

  constructor(private socialSharing: SocialSharing) { }

  ngOnInit() {
  }

    this.socialSharing.shareViaWhatsApp(Text, Image, URL).then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });

    this.socialSharing.shareViaFacebook(Text, Image, URL).then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });
}

you should put all function inside of component class.

score 0 · Answer 2 · answered Dec 11 '19 at 13:00

Thanks for the response, but it is not really working. Getting error messages (see screenshots)enter image description here

import { Component, OnInit } from '@angular/core';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';

import { url } from 'inspector';
import { Subject } from 'rxjs/internal/Subject';

@Component({
  selector: 'app-video',
  templateUrl: './video.page.html',
  styleUrls: ['./video.page.scss'],
})
export class VideoPage implements OnInit {

  constructor(private socialSharing: SocialSharing) { }

  ngOnInit() {


this.socialSharing.shareViaWhatsApp(Text, Image, URL).then((res) => {
    // Success
  }).catch((e) => {
    // Error!
  });

this.socialSharing.shareViaInstagram(Text, Image).then((res) => {
    // Success
  }).catch((e) => {
    // Error!
  });


this.socialSharing.shareViaFacebook(Text, Image, URL).then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });

this.socialSharing.shareViaTwitter(Text, Image, url).then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });

this.socialSharing.canShareViaEmail().then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });

this.socialSharing.shareViaEmail(Body, Subject, ['recipient@example.org']).then((res) => {
      // Success
    }).catch((e) => {
      // Error!
    });

  }
}

![{ "resource": "/c:/Users/Owner/ionic4-background-video-app/src/app/video/video.page.ts", "owner": "typescript", "code": "2693", "severity": 8, "message": "'Body' only refers to a type, but is being used as a value here.", "source": "ts", "startLineNumber": 50, "startColumn": 34, "endLineNumber": 50, "endColumn": 38 }]1

Cannot read property 'socialSharing' of undefined in Ionic 4

2 Answers2