angularfacebookrenderingxfbml

Angular does not render facebook post with browser back/forward button

I have been developing profile page showing facebook posts. But my posts won't be rendered when I go and back the page with browser back/forward button.

profile.component.ts

import { Component, OnInit, OnDestroy, AfterViewInit, AfterContentInit, Renderer2, ElementRef, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ServerClientService } from '../../shared/serverclient.service';
import { AuthService } from '../../shared/auth.service';
import { FacebookService, InitParams } from 'ngx-facebook';


import { Account } from '../../shared/models/account.model';

declare const $: any;
declare var window: any;
declare var FB: any;

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit, AfterContentInit {

  myAccount: Account;
  twitterStatus: Object;
  facebookAct: Object;
  instagramAct: Object;
  youtubeAct: Object;
  accountId: string;
  isMyself: boolean = false;
  profession: string = '';
  accountCategoryLabel: string = '';

  serverErrorCode: string = '';

  @ViewChild('facebook', { static: false }) facebookDiv: ElementRef;


  constructor(private serverClient: ServerClientService,
    private authService: AuthService,
    private router: Router,
    private route: ActivatedRoute,
    private renderer2: Renderer2,
    private el: ElementRef,
    private fb: FacebookService) {


    let initParams: InitParams = {
      xfbml: true,
      version: 'v6.0'//v2.8
    };

    fb.init(initParams);
  }


  ngOnInit() {

    this.serverClient.searchFacebookPosts(this.accountId)
      .subscribe(
        facebookAct => {
          if (facebookAct && facebookAct.posts) {

            facebookAct.posts = facebookAct.posts.map(s => {
              let ids = s.id.split("_")
              s.link = 'https://www.facebook.com/' + ids[0] + '/posts/' + ids[1]
              return s;
            });
            this.facebookAct = facebookAct;
            window.FB.XFBML.parse(this.facebookDiv.nativeElement);
            console.log("window.FB.XFBML.parse(this.facebookDiv); called.")
          }
        },
        error => {
          this.serverErrorCode = error.error.code;
        });

  }

}

profile.component.html in my profile page, I have following code.

<div class="tab-pane" id="facebook">
 <app-ifm-fb-post [fbPosts]="facebookAct?.posts"></app-ifm-fb-post>
</div>

the app-ifm-fb-post directive is below.

<div class="row">
  <div *ngFor="let fbPost of fbPosts">
    <fb-post width=" auto" [href]="fbPost.link"></fb-post>
  </div>
</div>

When I run the app, I can see the html codes. the fb-post will be created with correct links and get post by sending https://www.facebook.com/v6.0/plugins/post.php?app_id=&chann(Trimed) and showing posts only for the first time that browser loads. but when I go and back to profile page, I can see fb-posts in html, but https://www.facebook.com/v6.0/plugins/post.php?app_id=&chann(Trimed) wont be called and nothing will be shown.

in the browser

<div class="row">
<div class="ng-star-inserted">
    <fb-post width=" auto" class="fb-post" data-href="https://www.facebook.com/10217956357636594/posts/10218504599782305" data-width=" auto" ng-reflect-href="https://www.facebook.com/10217" ng-reflect-width=" auto">
    </fb-post>
</div>
<div class="ng-star-inserted">
    <fb-post width=" auto" class="fb-post" data-href="https://www.facebook.com/10217956357636594/posts/10218501014532676" data-width=" auto" ng-reflect-href="https://www.facebook.com/10217" ng-reflect-width=" auto">
    </fb-post>
</div>
</div>

Could someone help me!?!?

Solution

  • I have resolved by myself.

    for someone who has same issue as me.

    I used facebook javascript sdk instead of ngx-facebook as below.

    index.html

    <script
    async
    defer
    crossorigin="anonymous"
    src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"
></script>

    facebook-sample.ts

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

  ngAfterViewChecked() {
    if (this.needToRenderFB) {
      window.FB.XFBML.parse(this.facebookDiv.nativeElement);
      this.needToRenderFB = false;
    }
  }

    facebook-sample.html

    <div id="facebook" #facebook>
    <div class="row">
        <div
            class="col-md-3"
            *ngFor="
                let fbPost of facebookAct?.posts
            "
        >
            <div
                class="fb-post"
                data-width="auto"
                [attr.data-href]="fbPost.link"
                data-show-text="true"
            ></div>
        </div>
    </div>
</div>