Launching an extrernal bundled app in Aurelia Component

1

Hello guys,
I havce a case where I need somehow to launch an Anguilar application in one of my views / component.
With this post I’m researching for the best way to do that. I see much more complication in integrating Angular in Aurelia as it is a platform. I see few scenarios and probably the most simple one (and definitely not the best) is projecting the bundled Angular app in an IFrame. I think there should be more elegant way, but still keeping the line of separation.
I imagine I have A component for projection and on bind or activate I’m attaching an external bundled js, CSS on a custom HTML tag. What is the best way to load such content?
I have literally pasted this I’m my template. trying to mimic the markup fro the bundled Angular app.

<template>
  <h1>${message}</h1>
  <p>${value}</p>
  <link rel="stylesheet" href="../../lib/third-parties/my-app/styles.css" media="print" onload="this.media='all'">
  <script src="../../lib/third-parties/my-app/polyfills.js" type="module"></script>
  <script src="../../lib/third-parties/my-app/scripts.js" defer></script>
  <script src="../../lib/third-parties/my-app/main.js" type="module"></script>
</template>
2

I did it by creating an element and attaching it to the Shadow DOM. This way, you have good encapsulation. However, the problem I hit is that the bundled Angular app has a polyfill containing Zone.js, which is messing up the whole Aurelia framework. This breaks the main app. Another workaround is to try to bundle without zone.js. Same goes when I export it as Angular Custom Element, which exports fully functional web component. But again, you need to include the polyfill. Seems that the shadow DOM doesn’t prevent it’s JS of messing around with the parent App scripts.

1 Like