Dropbox embedder in Angular 12

Question

I want to show dropbox embedder inside of an Angular component. I was able to show it, but it only works without guards and refreshing the browser after navigate to the component.

 this.router.navigate(['/files']).then(() => {
        window.location.reload();
      });

I included Dropbox embedder script in index.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Dropbox files</title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <link
          href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet"
        />
        <script
          type="text/javascript"
          src="https://www.dropbox.com/static/api/2/dropins.js"
          id="dropboxjs"
          data-app-key="dropboxkey"
        ></script>
      </head>
      <body>
        <app-root></app-root>
      </body>
    </html>

And files component only has Dropbox embedder code

<a
  href="https://www.dropbox.com/sh/rsc2ecvsiyacmfe/iuiuhjhjhkjkjhkjhkjh_e9a?dl=0"
  class="dropbox-embed"
  data-height="100vh"
  >Folder</a
>

I wonder if there is another way to use embedder without page refreshing and angular guards. I do not want to use Dropbox API because embedder is perfect in my situation.

Thanks!

Edit: I was able to load JS file using this way

Now it only works first time the component loads, if you navigate to another component and navigate back to files console shows

zone.js:182 Uncaught Error: iframe does not contain a contentWindow
    at VM4414 dropins.js:2
    at t (VM4414 dropins.js:2)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Zone.runTask (zone.js:178)
    at ZoneTask.invokeTask [as invoke] (zone.js:487)
    at invokeTask (zone.js:1600)
    at globalZoneAwareCallback (zone.js:1637)

Dropbox embedder in Angular 12

0 Answers0