TL;DR

I inserted the exact code that the

The Goal

In our Angular 12 Application, we want to include three things under a video:

• Facebook Like Button
• Facebook Share Button
• Pinterest Pin Button

I created components for each of them and they trigger writing a script Tag to the DOM to fetch the JS Libraries (we use NGXS for asynchronous actions).

facebook-share-button.component.ts

const SCRIPT_ID = 'facebook-share-button';

@Component(...)
export class FacebookShareButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { async: true }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-share-button.component.html

<div >
  <div id="fb-root"></div>
  <div
    
    [attr.data-href]="fullUrl$ | async"
    data-layout="button"
    data-size="large"
  ></div>
</div>

The Problem

The Facebook Share Button and Pinterest Pin Button work just fine, only the Facebook Like Button does not show. It has width and height of 0px

Full code

facebook-like-button.component.ts

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CoreActions } from 'src/app/core/core.actions';

const SCRIPT_ID = 'facebook-like-button';

@Component({
  selector: 'app-facebook-like-button',
  templateUrl: './facebook-like-button.component.html',
  styleUrls: ['./facebook-like-button.component.styl'],
})
export class FacebookLikeButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { anonymous: true, nonce: '4j5id3DJ' }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-like-button.component.html

<div >
  <div id="fb-root"></div>
  <div
    
    [attr.data-href]="fullUrl$ | async"
    data-width="77"
    data-layout="standard"
    data-action="like"
    data-size="large"
    data-share="false"
  ></div>
</div>

Things I tried

1. Removing the facebook-share-button Component (maybe the two scripts are interfering)
2. Placing the code in ngOnInit() (instead of ngAfterViewInit())
3. Setting a static data-href Attribute (i.e. removing the async-Pipe)
4. Removing <div id="fb-root"></div> in facebook-share-button.component.html or facebook-like-button.component.html or both
5. Moving <div id="fb-root"></div> to app.component.html
6. Playing around with the options of .fb-like and removing them one by one
7. Setting async, defer and crossorigin to different values in the script tag
8. Other browsers and deactivating AdBlockers
9. Manually include the script tags
10. Search on Stackoverflow for people with simlar problems
11. And a combination of all of the above

but nothing worked.

In the end, I included the exact code that