Run multiple Angular applications on the same page

I have a use case when I need to run 2+ Angular applications(6.1.10) on the same page, without routing. I have the following directory structure:

root
|- index.html
|- output
|  |
|   `-a
|  |   |-runtime.js
|  |   |-polyfills.js
|  |   |-main.js
|  |   `-styles.css
|   `-b
|      |-runtime.js
|      |-polyfills.js
|      |-main.js
|      `-styles.css

The applications above are built using Angular CLI (6.1.2). In the index.html I reference those files from output. To bootstrap the applications in the main.ts for a I have:

export function bootstrap(): Promise<any> {
  enableProdMode();
  return platformBrowserDynamic()
    .bootstrapModule(AppModuleA)
    .catch(err => console.error(err));
}

document.addEventListener('bootstrapAppA', () => bootstrap());

for b:

export function bootstrap(): Promise<any> {
  enableProdMode();
  return platformBrowserDynamic()
    .bootstrapModule(AppModuleB)
    .catch(err => console.error(err));
}

document.addEventListener('bootstrapAppB', () => bootstrap());

in the index.html:

<app-a></app-a>

<app-b></app-b>

<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    function bootstrapModule(name) {
      const event = document.createEvent("CustomEvent");
      event.initEvent(name, true, true);
      document.dispatchEvent(event);
    }
    bootstrapModule('bootstrapAppA');
    bootstrapModule('bootstrapAppB');
  });
</script>

What happens is I see on the page is the only first defined application a the second one (b) doesn't bootstrap, that is, there is no bootstrap call from main.ts for b.

How it could be resolved?