Working on an Angular 6/7 site where AddThis is required to share pages. For starters, set up a simple HTML page as follows:
<html>
<head></head>
<body>
<div>AddThis below</div>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_compact"></a>
</div>
<div>AddThis above</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c2bf6b040727c90" async="async"></script>
</body>
</html>
This works and displays buttons as expected.
Then tried to move it into Angular. Set up a simple component to hold the HTML. Tried putting the script tag into index.html. Also tried it in the component. In no case was I able to get it to display anything.
Set up a StackBlitz angular-addthis
Then consulted with AddThis tech support. They indicated I might have to run a method (addthis.layers.refresh()) to refresh after routing ... but it never gets that far. Nothing displays.
In the StackBlitz, the AddThis code is app.component. The test HTML is in standalone.html.
Any ideas appreciated.
The problem you can't call HTTP scripts from HTTPS protocol to solve this problem
simply modify the script in the
index.htmlto be<script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c2bf6b040727c90" async></script>