Angular 2/4/5: как правильно загрузить тег srcipt в компонент (Facebook или Twitter)

Question

Я интегрирую кнопку Facebook и Twitter в мои проекты Angular 2.Это нормально для загрузки в первый раз, но когда я запускаю логику в компоненте:

• Отображать похожие кнопки, когда длина массива> 0
• Скрыть кнопку «Нравится», когда длина массива = 0

скрипт не был загружен.

Мой код:

1 / component.ts

ngOnInit() {

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://platform.twitter.com/widgets.js";
    s.async = true;
    s.charset = 'utf-8';
    document.getElementsByTagName('body')[0].appendChild(s);

    if (!window['fbAsyncInit']) {
        window['fbAsyncInit'] = function () {
            window['FB'].init({
                appId: 'xxxxxxxxxx',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.0'
            });
        };
    }

    // load facebook sdk if required
    const url = 'https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.1&appId=xxxxxxxxx&autoLogAppEvents=1';
    if (!document.querySelector(`script[src='${url}']`)) {
        let script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
    }


 }


ngAfterViewInit(): void {
    // render facebook button
    window['FB'] && window['FB'].XFBML.parse();
}

2 / component.html

<div *ngIf="!(subjects?.length > 0)" class="row">
    <div class="col-4 text-center">
        <div class="fb-like" data-href="https://www.facebook.com/xxxxx"
            data-layout="button" data-action="like" data-size="small" data-show-faces="false"
            data-share="false"></div>
    </div>

    <div class="col-4 text-center ">
        <a href="https://twitter.com/xxxxxx?..." class="twitter-follow-button"
            data-show-screen-name="false" data-lang="fr" data-show-count="false">Follow</a>
    </div>

    <div class="col-4 text-center ">
        <img src='../assets/img/insta_like_button.png' style="width:auto; height:22px; cursor: pointer;"
            alt="" (click)="likeInsta()">
    </div>

</div>

Проблема:

Первая загрузка:

после запуска логики:

Я ищу в Google, и люди говорили о проблеме загрузки тега script в компонентах Angular 2, так что я до сих пор не могу найти правильный способ загрузки скрипта.

Любое предложение приветствуется.