Angular4 Widgets在非角度Web应用程序中进行通信

Question

我想创建一个angular4应用程序，它由相互通信的独立小部件（angular4模块）组成。

举个简单的例子，ShelfWidget有ItemComponent个，可以通过点击页面上的按钮将它们添加到BucketWidget。同样，还应该有一个删除按钮，可以将ItemComponent从BucketWidget发送到ShelfWidget。

我可以在角度应用中轻松实现这一点。 因此，我请求您不要将此问题标记为另一个角度组件通信问题的副本。

我想获得此应用程序的AOT版本，并在非角度网站中导入AOT构建生成的4个脚本文件和1个css文件，例如 wamp server 索引页面。然后，我想在这个index.html页面中使用这两个小部件，如下所示。

<shelf-widget></shelf-widget>
<bucket-widget></bucket-widget>

<button (click)="takeItem()">Put into bucket</button>
<button (click)="removeItem()">Remove from bucket</button>

如果我能够获得如何在非角度环境中使用Angular4模块作为独立html标签以及示例代码和过程的答案，那将非常有用。提前谢谢。