Angular 元素与 Angular 库？

Question

我的团队处理多个 angular 项目。为了代码重用，我们有很多展示组件 extracted into libraries，然后我们在各种项目中使用它们。

那么，鉴于我们所有的项目都在 angular 上，并且我们已经在使用库，我们还能从 angular 元素中得到什么？

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

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

可以吗？

Answer 1

首先你的第二个问题。
是的，可以使用 Bootstrap 4 设计您的新元素。这是 Web 组件（Angular 元素）的好处之一，您可以将样式封装在影子树中。

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

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

Angular 元素

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

这包括一个使用 ng new、Zone.js 导入创建的 Angular 项目（因为如果您不想使用 noop zone) and build with ngx-build-plus.

Angular元素+Bootstrap4（仅min.css）

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

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

如果您使用 Angular 元素

，这将导致您可以期待的结果

临:

魂斗罗

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

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

我不太确定是否真的没有好的方法来使用 Angular 具有库功能的元素，但目前我不知道。也许有人会提出一个好主意 here.

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

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

Angular Elements vs Angular Library?