Запускать несколько приложений Angular на одной странице

Question

У меня есть случай, когда мне нужно запустить 2+ приложения Angular ( 6.1.10 ) на одной странице без маршрутизации. У меня есть следующая структура каталогов:

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

Приведенные выше приложения построены с использованием Angular CLI ( 6.1.2 ). В index.html я ссылаюсь на эти файлы из output. Для загрузки приложений в main.ts для a у меня есть:

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

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

для b:

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

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

в 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>

Что происходит, я вижу на странице только первое определенное приложение a второе (b) не загружается, то есть, нет bootstrap вызова из main.ts для b.

Как это можно решить?