Adding Facebook JavaScript SDK to an Angular project.

Recently, I wanted to try something for one of „my“ streamers and since she streams on Facebook, that would require tools to access Facebook.

Developer Facebook offers a variety of SDKs for different environments that allow easy (?) access to their API, to login etc.
Facebook doesn’t have a specific Angular package you can install via npm or other helpful tools, but they have a JS SDK that does work with Angular, if you manage to integrate it – which is the part that proved to be a bit tricky. I found different more or less helpful pages, but following them, I still was greeted by errors that basically made it impossible to use the SDK.
And Facebook themselves do not help there either, they only have a small part of their documentation about adding their JavaScript to AngularJS, which is slightly outdated.

To get started with a Facebook app, you have to create one on the developer’s page. Any app created receives a unique ID that is used to identify it and that you will need to initialise. You will probably create the app as a web app and Facebook will give you the <script> to insert what you need into your page.
Since this is about Angular, it is not really what we want; we would like to add and initialise on our Script file, not in the HTML file.
If you put the code into your component.ts or service.ts, like in the following example, it will give you an error, as FB is not defined (and window as well).

constructor() {
(function(d, s, id){
varjs, fjs=d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js=d.createElement(s); js.id=id;
js.src='//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit= () => {
console.log("fbasyncinit")
FB.init({
appId :'<your app id>',
autoLogAppEvents :true,
xfbml :true,
version :'v3.2' // current version at the time of creating this is 3.2
});
}

The trick that I finally found working was to add window and FB as vars to the component or service, for example something like this:

import { [...] } from '@angular/core';

declare var window: any;
declare var FB: any;

@Injectable({
  providedIn: 'root'
})
export class FbService {
  constructor() {
  }

  initFbService() {
    this.initFacebook();
  }

  private initFacebook() {
    window.fbAsyncInit = () => {
      FB.init({
        appId            : <secret>,
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.2'
      });

      FB.Event.subscribe('auth.statusChange', (response => {
        if (response.status === 'connected') {
          // do mysteries
        } else {
          // do other mysteries
        }
      }));
    };

    (function(d, s, id) {
      let js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = '//connect.facebook.net/en_US/sdk.js';
      fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
  }
  [...]
}

This way, the code doesn’t crash around FB or window. You will not get code completion on the calls to FB.<function>, but the calls will work, and that is what counts, right?