Angular iubenda-cs-preferences-link not work after routing

In my Angular project I need to add iubenda, after inserting the scripts with all my correct public and private keys, everything seems to work correctly.

At this point I need to add a button to change cookie preferences, so I’m going to insert <a mat-button class="iubenda-cs-preferences-link"> Update Cookie Preferences </ a>

At the first loading of the page, everything seems to work correctly but subsequently as soon as the rooting on another page is performed, the button is deleted, returning to the page of the button for the change of cookies and clicking it, nothing more happens.

I think the problem is that when the iubenda page loads, somewhere you call an onReady that goes to modify the dom to interact with the classes you know.

Do you have any solution to this problem?

Answer

After a day of work, i solved this problem.

I create an injectable service which include and removes iubenda script. When script is inserted, _iub.csLoaded is set to false (this is the trick).

import { Injectable } from "@angular/core";

@Injectable()
export class IubendaService {

    constructor() { }

    public loadScript() {
        let isFound = false;
        const iubendaCs = '//cdn.iubenda.com/cs/iubenda_cs.js';

        const scripts = document.getElementsByTagName("script")
        for (let i = 0; i < scripts.length; ++i) {
            if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes(iubendaCs)) {
                isFound = true;
            }
        }

        if (!isFound) {
            let node = document.createElement('script');
            node.dataset.myiub = "myiub";
            node.type = 'text/javascript';
            node.innerText = 'var _iub = _iub || [];' +
            '_iub.csLoaded = false; ' +
            '_iub.csConfiguration = {' +
                '"consentOnContinuedBrowsing":false,' +
                '"countryDetection":true,' +
                '"gdprAppliesGlobally":false,' +
                '"invalidateConsentWithoutLog":true,' +
                '"perPurposeConsent":true,' +
                '"siteId":XXXX,' +
                '"whitelabel":false,' +
                '"cookiePolicyId":XXXX,' +
                '"lang":"it", ' +
                '"banner": { ' +
                '  "acceptButtonDisplay":true,' +
                '  "closeButtonRejects":true,' +
                '  "customizeButtonDisplay":true,' +
                '  "explicitWithdrawal":true,' +
                '  "listPurposes":true,' +
                '  "position":"float-top-center" ' +
                '},' +
            '};';
            document.getElementsByTagName('head')[0].appendChild(node);

            node = document.createElement('script');
            node.src = iubendaCs;
            node.type = 'text/javascript';
            node.async = true;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
        }
    }

    public removeScript() {
        const srcToDelete = [
            "//cdn.iubenda.com/cs/iubenda_cs.js",
            "//cdn.iubenda.com/cookie_solution/iubenda_cs/1.37.2/core-{insert your lang}.js"
        ];

        let scripts: HTMLCollectionOf<HTMLScriptElement>;
        for(let x = 0; x < srcToDelete.length; x++){
            scripts = document.getElementsByTagName("script");

            for (let i = 0; i < scripts.length; ++i) {
                if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes(srcToDelete[x])) {
                    document.getElementsByTagName('head')[0].removeChild(scripts[i]);
                }
            }
        }

        // Remove Custom Attribute
        scripts = document.getElementsByTagName("script");
        for (let i = 0; i < scripts.length; ++i) {
            if (scripts[i].hasAttribute('data-myiub')) {
                document.getElementsByTagName('head')[0].removeChild(scripts[i]);
            }
        }
    }
}

After create this component you need to call this method, in ngOnInit and ngOnDestroy method of the component that use them.

 ngOnInit(): void {
    this.iubendaService.loadScript();
  }

  ngOnDestroy(): void {
    this.iubendaService.removeScript();
  }

I hope this workaround need to someone.