Using single-spa-parcel within another AngularJS app causes ng:btstrpd error

[angelorbastos]

I'm using single-spa-angularjs to ease process of migrating my legacy AngularJS apps to newer technologies. I know this is probably not the intended use of the single-spa-parcel directive but, as I'm taking baby steps with this migration, I'm also interested in integrating the legacy apps with each other while still using AngularJS.

I followed the migration steps with two AngularJS apps - so they're both working fine in isolation - and then proceeded to try using one of them as a parcel inside the other, but I keep getting the ng:btstrpd error.

To better describe the issue, I'm using SystemJS to import App2 from a controller on App1, so it looks something like:

self.$onInit = function() {
  await System.import('app2').then(app => {
    self.parcelConfig = app;
  });
}

Then, I'm simply using the single-spa-parcel directive on App1's template, which then throws the error as it tries to mount App2:

<single-spa-parcel
  ng-if="$ctrl.parcelConfig"
  parcel-config="$ctrl.parcelConfig"
></single-spa-parcel>

I searched for some solutions to nesting AngularJS apps, in particular I found this StackOverflow question which was very insightful, but couldn't get any solution to work (the ng-non-bindable directive does stop the error but also prevents the parcel from loading).

Are there any suggested solutions to this?

Thanks for the great work!

[joeldenning]

It sounds like you're trying to nest AngularJS apps within AngularJS apps? This is something I've never attempted with single-spa-angularjs or just AngularJS in general, so I don't know the complications of it. Normally, I've used single-spa-angularjs' parcel component to render react, angular, or vue components (not other angularjs components).