Question

我的团队处理多个角度项目。对于代码重用，我们有很多演示性组件extracted into libraries，然后在各种项目中使用它们。

那么，既然我们所有的项目都是基于角度的，并且我们已经使用了库，那么从角度元素中还能得到什么呢？

我开始研究元素的原因是：

大多数旧项目都在使用Bootstrap3。我们希望将Bootstrap 4与我们制作的新产品一起使用。所以我想知道是否可以使用Bootstrap 4设计一个元素，并在B-3设计的地方使用它而不会发生任何问题？

有可能吗？

Answer 1

您的第二个问题。
是的，可以使用Bootstrap 4设计新元素。这是Web组件（角度元素）的优点之一，您可以在影子树中获得样式封装。

如果您的目标是创建真正独立的元素，那么缺点是，您必须在每个Angular元素中都包含Boostrap。

出于好奇，我创建了一个新的Angular项目（ng new），并从其中创建了一个包含Boostrap 4的Angular元素，并使用Webpack Bundle Analyzer检查了大小。

角度元素

All        (206.61 KB)  
main.js    (193.33 KB)  
scripts.js (13.29 KB)

这包括一个用ng new创建的Angular项目，通过Zone.js导入（因为如果您不想使用noop zone，自包含元素才能正常工作），并使用ngx-build-plus。

Angular Element + Bootstrap 4（最小CSS）

All        (418.74 KB)  
main.js    (405.46 KB)  
scripts.js (13.29 KB)

这将产生大量开销。当然可以在元素之间共享样式，但这会增加复杂性。

这会导致您使用Angular Elements时可以期待的事情

专业版：

相反

您的图书馆方法会遇到问题...
...或者至少它不能与Angular Elements很好地集成，因为：

...libraries are intended to be used by Angular apps.

我不确定是否真的没有很好的方法将Angular Elements与库功能一起使用，但是目前我不知道。也许有人会提出一个好主意here。

整个捆绑包的大小将增加
当前，您必须将整个Angular Framework（至少不会摇晃树的部分）捆绑到Angular Element中。再次强调，nx-build-plus可以帮助您共享元素之间的依赖关系，但是这种方式并未得到正式支持（但是ngx-build-plus的开发者正在为Angular团队进行实施）。因此，您可以预期，在发布Angular版本时，这一点将有所改善，但不会消失（尤其是Ivy即将登陆时）。根据您解决导入问题的方式，其他依赖项（如Bootstrap）也会加剧此问题（如上所示）。
如果必须支持IE 11
您将在支持（和捆绑包大小）方面遇到更多问题，因为所有Web组件（角度元素）功能都必须进行填充。
构建变得越来越困难（至少目前如此）。
如上所述，库中尚不支持Angular Elements，如果有解决方案，则需要一些手动配置。
此外，Angular当前不支持“外部” Angular Elements（意为Angular Context之外的元素）。尽管可以手动创建它们，也可以使用ngx-build-plus之类的工具（目前，IMHO最好的方法）来创建它们

最后一点对您的团队来说可能不是问题，因为您提到您只是在Angular环境中工作，但我认为值得一提。