How to access FB global from Angular2 service?

Question

I'm trying to use FB SDK from an Angular2 project created with the new angular CLI. I created the following service to initialize the Facebook library, added fbsdk typings and everything compiles but I cant access the FB global variable from anywhere in the project but the "winwow.fbAsyncInit" function. I can check FB object from console perfectly, but cant access it from NG2 code. ¿Any idea of where the problem might be?

import { Injectable, OnInit } from '@angular/core'
import { FACEBOOK_APPID } from '../constants'

@Injectable()
export class fbService implements OnInit{
  constructor(){}
  ngOnInit(){
    if (!window.fbAsyncInit) {
        window.fbAsyncInit = function () {
            FB.init({
                appId: FACEBOOK_APPID,
                xfbml: false,
                version: 'v2.6'
            });
            FB.api("/me",null,()=>{})
            console.log(FB)
        };
    }
    this.initFB()           
}
initFB(){
  var js, id = 'facebook-jssdk', ref = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) {
        return;
    }
    js = document.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    ref.parentNode.insertBefore(js, ref);
}
getPost(page:string){
     FB.api(`/${page}/feed?limit=1`,null,(response)=>{console.log(response)})
}
}

Answer 1

I had similar issue and this source helped me a lot- Building CrossPlatform Desktop Applications with Electron

import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject } from "rxjs/Rx";
import { Http } from '@angular/http';

declare var FB: any;

@Injectable()
export class FbsdkService {
    public ready = new BehaviorSubject<boolean>(false);
    public endpointBase = 'http://graph.facebook.com';
    constructor(private zone: NgZone, private http: Http) {
    }

    public loadSdk() {
        this.loadAsync(() => { });
    }

    public loadAsync(callback: () => void) {
        window.fbAsyncInit = () => this.zone.run(callback);

        const s = "script";
        const id = "facebook-jssdk";
        var js: any, fjs = document.getElementsByTagName(s)[0];
        if (document.getElementById(id)) return;
        js = document.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }

    public getLoginStatus() {
        FB.getLoginStatus((response: any) => { console.log(response); });
    }

    public getProfile() {
        return new Promise((resolve, reject) => {
            let fields = [
                "id", "name", "email", "cover", "birthday"
            ];
            FB.api(`/me?fields=${fields.toString()}`, (response: any) => {
                resolve(response);
            });
        });
    }

}

Answer 2

The key is in the call to this.zone.run(callback) to wrap the callback and reinsert it in the Angular 2 lifecycle.

I initialize the SDK in the service constructor, which may introduce some delay compared to loading it right away. Haven't found a workaround yet.

I still haven't decided if I'll provide an accessor to FB once initialized or wrapper methods, I'll leave that to you.

@Injectable()
export class FbsdkService {
    public ready = new BehaviorSubject<boolean>(false);

    constructor(
        private zone: NgZone) {
        this.loadSdkAsync(() => {
            FB.init({
                appId: "XXXXXXXXXXX",
                status: false,
                xfbml: false,
                version: "v2.7"
            });
            this.ready.next(true);
        });
    }

    loadSdkAsync(callback: () => void) {
        window.fbAsyncInit = () => this.zone.run(callback);
        // Load the Facebook SDK asynchronously
        const s = "script";
        const id = "facebook-jssdk";
        var js, fjs = document.getElementsByTagName(s)[0];
        if (document.getElementById(id)) return;
        js = document.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs)
    }
}