Angular follows component-based architecture. Each application is composed of multiple interconnected components. All of these components need access to the application's data or may want to share some common functionalities. So, we need to create a reusable data service that can be used to get and post data to the Facebook server. It can be used for any other functionalities that can be shared between the components. Refer to the following link to get more details about Angular 2 services: (https://angular.io/docs/ts/latest/tutorial/toh-pt4.html). Create a new source file called fbsdk.service.ts in the app directory with the following content:

 
import { Injectable } from '@angular/core'; 
@Injectable() 
export class FbSdkService { 
    constructor() { 

    } 
}

The Angular service is a simple class that is decorated using an injectable decorator. Angular's dependency injection system can recognize the @Injectables and manage the dependencies for us. The preceding code creates an empty injectable service which can be used by any other Angular component. Next, we need to add the Facebook SDK into the application and it can be done by either using script tags in an index.html file or can be included using JavaScript. Add the following content to the service to add the SDK:

import { Injectable, NgZone } from '@angular/core'; 

@Injectable() 
export class FbsdkService { 

    constructor(private zone: NgZone) { 

    } 

    public loadSdkAsync(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 = "http://connect.facebook.net/en_US/sdk.js"; 
        fjs.parentNode.insertBefore(js, fjs); 
    } 
} 

This method does nothing but it creates a script tag dynamically and includes the Facebook SDK asynchronously. Once it's loaded, the SDK will check for the fbAsyncInit method in the window object and will execute it once the SDK has loaded into the renderer process. This method can be used to initialize the Facebook SDK. If you are new to Angular 2, you may be wondering about the constructor arguments for this service. We are passing an instance of NgZone as a parameter for this service. Actually we don't have to worry about the initialization of @injectable services as Angular's built in dependency management system will take care of initializing and injecting the dependencies for us. Here, once the SDK is loaded, we trigger a callback in a separate zone. A zone is an execution context that persists across async tasks.

Open the app.component.ts file and attach the service into the app component. You should call the loadSdkAsync function from the app component and initialize the SDK as follows:

import { Component, OnInit } from '@angular/core'; 
import { FbsdkService } from './fbsdk.service'; 

declare var FB: any; 

@Component({ 
   //... 
providers: [FbsdkService] 
}) 

export class AppComponent { 
   constructor(private fbSdk: FbsdkService) { 
      this.fbSdk.loadSdkAsync(() => { 
         FB.init({ 
            appId: 'your_client_id_here', 
            secret: 'your_fb_app_password', 
            status: false, 
            xfbml: false, 
            version: 'v2.8' 
         }); 
      }); 
   } 
}

All the SDK methods are available inside the FB object. Once the SDK is loaded you should initialize the application using the FB.init method with your application's configuration, which can be found in your developer home page.