Dynamic loading jsm widget in Angular 2+ application

JSM Development JSM Cloud
,
1

I’m encountering an issue when attempting to dynamically load the JSM widget within my Angular application. While I’ve found workarounds involving the index.html file , this doesn’t align with my project’s requirements as I need to conditionally display the widget on specific pages. As mentioned by Khizer Rehan in this article , the script does not perform the following call when dynamically loaded:

https://jsd-widget.atlassian.com/api/embeddable/${key}/widget)

After perfoming this call myself, it is clear it loads json configuration to actually create the menu shown by widget.

Articles indicate this has been a persistent issue for developers since at least 2020. Currently, it seems the only workaround is to avoid dynamic loading. Has anyone found a more flexible solution, or are there plans from Atlassian to address this limitation?

1 Like
2

Hey,
had the same problem within a React app. Solved it by manually dispatching the “DOMContentLoaded” event once the script is loaded.

document.body.appendChild(script);

script.onload = () => {
    window.document.dispatchEvent(
        new Event("DOMContentLoaded", {
            bubbles: true,
            cancelable: true,
        })
    );
};