SPA only supports loading builder component once

[jaredtbates]

For some reason, in our Angular SPA, we can only load the form builder component one time. At a high level, this SPA is a CMS for one of our applications, and we are integrating the form builder into it. I have a very basic component that loads the component like this:

  <ng-container *ngIf="editorToken$ | async as editorToken">
    <docuseal-builder
      [attr.data-token]="editorToken"
      data-with-send-button="false"
      data-with-sign-yourself-button="false"
      data-with-title="false"
    >
    </docuseal-builder
  ></ng-container>

However, when we navigate away from that page within the SPA and then return within the same session, the component fails to load. I get the following error in the browser console:

It appears it's not picking up the token for some reason in this code this.replaceToken and this.token are empty:

Is it something to do with the component being destroyed and re-created? We load the script one time in the head of our page at page load. Should I be loading the script at the same time as the component each time the component is created? Would appreciate any advice if it's something on my end. I can also create a minimal example to try and demonstrate what I'm seeing if it would be of use. Thank you!

[jaredtbates]

I want to note that it works for multiple loads in an iframe if I do something like this, so we'll proceed with this as a workaround for now. It's not a terrible solution.

  <ng-container *ngIf="editorHtml$ | async as editorHtml">
    <iframe [srcdoc]="editorHtml"></iframe>
  </ng-container>

export class ExampleComponent {
  editorHtml$ = new BehaviorSubject<SafeHtml | undefined>(undefined);

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.editorHtml$.next(
      this.sanitizer.bypassSecurityTrustHtml(`
    <script type="text/javascript" src="https://cdn.docuseal.co/js/builder.js"></script>
    <docuseal-builder
      data-token="${token}"
      data-with-send-button="false"
      data-with-sign-yourself-button="false"
      data-with-title="false">
    </docuseal-builder>`)
    );
  }
}

[omohokcoj]

@jaredtbates we made <docuseal-builder attributes reactive so now when data-token attr is updated the form will be automatically reloaded. I think this bug might be caused by how angular manages/updates DOM - it actually might be fixed now with reactive attribute in the <docuseal-builder.

Please let me know if the issue still persists (you might need to test with developer console and js cache turned off)

[omohokcoj]

@jaredtbates can you please confirm if the issue is still present?

[omohokcoj]

@jaredtbates please reopen if the issue still persists