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。

如何解决？

在同一页面上运行多个Angular应用程序

0 个答案: