Angular 4 - Atualizar meta tags dinamicamente para o Facebook (gráfico aberto)

Como adicionamos / atualizamos meta tags dinamicamente para que sejam escolhidas pelo diálogo de compartilhamento do Facebook / Whatsapp?

Atualizei meu aplicativo angular 2 para o angular 4, a fim de usar o serviço Meta para adicionar / atualizar meta tags dinamicamente quando obtemos os dados no componente da API.

Até agora no meu componente, eu tenho

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

Estou usando o updateTag porque já adicionei tags estáticas com valores padrão. Esse código atualiza com êxito os valores das metatags quando eu os inspeciono.

Eu sei que faz sentido que as ferramentas de depuração do Facebook / Whatsapp não executem nenhum javascript, portanto provavelmente nunca serão executadas em seu ambiente.

estou a usarhttps://developers.facebook.com/tools/debug/ e sempre seleciona os valores padrão das tags, o que faz sentido.

Minha pergunta é: qual é o caminho para que o Facebook / Whatsapp pegue os valores atualizados das tags dinamicamente? Estou usando o Angular 4 e carregando todos os dados por meio de chamadas de API, portanto não é possível obter nenhum tipo de dados antes que a página seja carregada e o script seja executado.

questionAnswers(4)

yourAnswerToTheQuestion