single-spa / single-spa-angular

Helpers for building single-spa applications which use Angular
Apache License 2.0
203 stars 78 forks source link

Is there a way to create multiple parcels with the same config using Angular/React Elements? #496

Open VannyFasanix opened 1 year ago

VannyFasanix commented 1 year ago

I've only found one thread-discussion about this issue dating back to 2022 ended with nothing done. Here i am asking if anyone here found a solution to my question.

Example:

const Parcel = ({remoteImport: remoteImportSource, component, props}) => {

    return (!_.isEmpty(remoteImportSource) && !_.isEmpty(component) )? <ParcelComponent
        key={uuidv4()}
        config={remoteImport(remoteImportSource)}
        mountParcel={mountRootParcel}
        wrapWith="section"
        mode="parcel"
        component={component}
        props={props}
        handleError={(err) => {
            console.log("Error Parcel Widget ", err)
        }}
    /> : <></>
}

This is my code, written with React syntax, calling a config associated to an Angular application. Lets refer to remoteImportSource as 'app-1'. If i try to invoke my React Parcel component multiple times passing the same config ('app-1') but with different props, it results in multiple parcels with only one of them working (the others result in blank pages).

The same thing happens if i try to use the parcel through Angular, here's my code:

<div #parcelContainer id="parcelContainer">
  <parcel *ngIf="readyToLoad"
          [id]="id"
          [config]="config"
          [mountParcel]="mountParcel"
          [customProps]="parcelProps"
          (updateHeight)="updateHeightParcel($event)"
          wrapWith="div"
          mode="parcel">
  </parcel>
</div>

Config is queal to "window.System.import('app-1') and again, only one parcel works, the other appear as blank pages.

What am i doing wrong? I'm desperately trying to find a way to fix this issue but i see no way out.

Thanks in advance