简体   繁体   中英

AddThis Not Working in Angular 6/7 Project

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.html to be <script src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c2bf6b040727c90" async></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM