我想创建一个angular4应用程序，它由独立的小部件（angular4模块）组成，它们相互通信 .
举个简单的例子， ShelfWidget 有 ItemComponent s，可以通过点击页面上的按钮将它们添加到 BucketWidget . 同样，还应该有一个删除按钮，将 BucketWidget 从 BucketWidget 放置到 ShelfWidget .
我可以在角度应用程序中轻松实现此功能 . So I request you not to label this question as a duplicate of another angular component communication question.
我想得到这个应用程序的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标签的答案，将会非常有用 . 提前致谢 .