Angular Elements: How to use multiple Angular Elements in non angular application

Question

I have created multiple angular elements like below:

1. app-first-element
2. app-second-element
3. app-third-element

When I use these multiple elements and try render in non angular application (i.e a simple blank html project) only one element is being bootstrapped, rest of the elements are not being bootstrapped.

Here is the example poc I am customizing https://github.com/BioPhoton/ng-elements-poc

What I have customized?

1. seperated vendorChunk from angular.json so that I can use same vendor.js with multiple elements

2. Using common polyfills to reduce the burden or to avoid unwanted js errors

Question:

1. How to isolate the ngBootstrap to render the element to its scope alone.

What I have tried:

1. Tried creating app specific platformFactory which could theoretically solve the problem

const myPlatformFactory1 = createPlatformFactory(platformBrowserDynamic, 'app1'); myPlatformFactory1().bootstrapModule(AppModule).catch(err => console.log(err));

Thanks in Advance.