Angular2 and Facebook SDK FB.ui dialog closed after clicking next

Question

I'm trying to implement Facebook live using Facebook Go Live Dialog on an angular2 apps. I have the SDK working and it makes api calls ok, but when trying to use FB.ui the dialog is not woking well because the dialog's first screen appears and ask where to publish, but when clicking on Next, the dialog dissapears and I have no feedback about what happens. (clicking next should show another dialog with the 2nd step)

Any hints to work on this?

facebooklive.ts

import {Component, OnInit} from '@angular/core';
import {FacebookService, FacebookLoginResponse, FacebookInitParams, 
FacebookApiMethod} from 'ng2-facebook-sdk/dist';

@Component({
...
template : '<button (click)="FBDialog()">Dialog</button>'
providers: [...FacebookService]
})
export class Facebook_live implements OnInit {
constructor(private fb:FacebookService) {
let fbParams:FacebookInitParams = {
appId: 'xxxxx',
xfbml: false,
version: 'v2.8'
};
this.fb.init(fbParams);
}

FBDialog() {
 this.fb.ui(
    {
        display: 'popup',
        method: 'live_broadcast',
        phase: 'create',
    }, function (response) {
        console.log(response);

        if (!response.id) {
            console.log('dialog canceled');
            return;
        }
        console.log('stream url:' + response.secure_stream_url);

        this.fb.ui(
            {
                display: 'popup',
                method: 'live_broadcast',
                phase: 'publish',
                broadcast_data: response,
            },
            function (response) {
                console.log("video status: \n" + response.status);
            });
    });


}

Edit 1: Angular-cli says Webpack is now Valid

but after a few seconds appears: [default] Supplied parameters do not match any signature of call target.

I checked FB SDK for fb.ui and it only ask for 2 params: FB.ui(params, function(response)) and I'm giving it both.

Answer 1

1. Use the ES6 arrow function => otherwise you won't be able to use this inside a function.

2. The ng2-facebook-sdk returns a promise if you read the README.md you will see ui(params: FacebookUiParams): Promise.

3. The fb.init inside the constructor does not need this

---

import {Component, OnInit} from '@angular/core';
import {FacebookService, FacebookLoginResponse, FacebookInitParams,
  FacebookApiMethod} from 'ng2-facebook-sdk/dist';

@Component({
  ...
    template : '<button (click)="FBDialog()">Dialog</button>'
    providers: [...FacebookService]
})
export class Facebook_live implements OnInit {


  constructor(private fb:FacebookService) {
    let fbParams:FacebookInitParams = {
      appId: 'xxxxx',
      xfbml: false,
      version: 'v2.8'
    };
    fb.init(fbParams);
  }

  FBDialog() {
    this.fb.ui(
      {
        display: 'popup',
        method: 'live_broadcast',
        phase: 'create',
      })
      .then(
        (response) => {
          if (!response.id) {
            console.log('dialog canceled');
            return;
          }

          console.log('stream url:' + response.secure_stream_url);

          this.fb.ui(
            {
              display: 'popup',
              method: 'live_broadcast',
              phase: 'publish',
              broadcast_data: response,
            }).then(
            (response) => {
            console.log("video status: \n" + response.status);
          },
          (error: any) => console.error(error)
          );


      },
      (error: any) => console.error(error)
    );
  }

}