I've created an Angular app and and Angular parcel. This parcel will be used by other apps within the organization with different frameworks. When I render the parcel component directly in another component using the async config function from the import map (System.import('angular-parcel')), everything works as I would expect. However, when I attempt to render the parcel within a mat-dialog modal, the modal opens with no content then immediately closes. I'm assuming this is because of how a mat-dialog loads, but I cannot figure out how to overcome. Is there a different config object I should be using? Or maybe a timing delay on attempting to load parcel? Any thoughts or dialogue on potential fixes would be greatly appreciated. Some apps will load this parcel in a drawer, some in a modal and some on a separate tab, so flexibility in how I can load this parcel is desired.
Looks like I have found the issue. When I created my Angular parcel, I accepted the defaults, which added routing. I followed the steps for adding in the EmptyRouteComponent for path '**' and continued from there. After some thought today, I decided to create another parcel but this time I skipped adding Angular routing. I added this new parcel to my import map and added the component to my mat-dialog. The parcel now renders fine. My assumption here is that single-spa, under the hood, routed to the EmptyRouteComponent at some point which would then signal the modal to close. By removing the route and only rendering the parcel after the config has loaded successfully, I am able to use and view the parcel, in a modal or otherwise.