Angular 元素与 Angular 库？

Question

我的团队处理多个角度项目。为了代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用它们。

那么，鉴于我们所有的项目都是基于 angular 的，而且我们已经使用了库，我们还能从 angular 元素中获得什么？

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

我们的大部分旧项目都使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？

那可能吗？

Answer 1

jow*_*wey 5

首先你的第二个问题。
是的，可以使用 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, Zone.js 导入创建的 Angular 项目（因为如果您不想使用noop zone，则需要自包含元素才能工作）并使用ngx-build-plus 构建。

Angular Element + Bootstrap 4（仅 min.css）

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

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

如果你使用 Angular Elements，这会导致你可以期待的事情

亲：

反对派

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

整体捆绑包大小将增加
目前您必须将整个 Angular 框架（至少是不会被摇晃的部分）捆绑到您的 Angular 元素中。再次 nx-build-plus 来帮助您共享元素之间的依赖关系，但这种方式不受官方支持（但 ngx-build-plus 的作者正在为 Angular 团队进行实现）。所以你可以期待这一点会在即将发布的 Angular 版本中有所改善——但不会消失（尤其是当Ivy即将登陆时）。根据您解决导入问题的方式，Bootstrap 等其他依赖项会增加此问题（如上所示）。
如果您必须支持 IE 11，
您将在支持（和包大小）方面遇到更多问题，因为所有 Web 组件（Angular 元素）功能都必须是 polyfill。
构建变得更加困难（至少目前如此）。
如上所述，库中尚不支持 Angular Elements，如果有解决方案，则需要一些手动配置。
此外，Angular 目前不支持“外部”Angular 元素（意思是 Angular 上下文之外的元素）。尽管可以手动或使用 ngx-build-plus 之类的工具创建它们（恕我直言，目前最好的方法）

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