角元素：包括一次角核心答案

【问题标题】：Angular Elements: include once tha angular core角元素：包括一次角核心
【发布时间】：2019-06-27 22:43:39
【问题描述】：

Angular Elements 是封装为 custom elements 的 Angular 组件。每个 Angular Elements 都附带有角核心。如果在标准 html 页面中我包含 5 个 Angular Elements 组件，则此页面下载 5 倍 Angular 核心。

有没有一种方法可以包含一次角核心 e 只下载组件代码？

【问题讨论】：

是从浏览器缓存加载的吗？如果是这样，应该问题不大吧？
@DhananjaiPai 第一个请求是个大问题，因为需要下载一个大包。

标签： angular custom-element angular-elements

【解决方案1】：

这个问题应该在 ivy 渲染器最终发布时消除（https://is-angular-ivy-ready.firebaseapp.com/#/status - 在过去几个月里状态没有改变......），因为它应该对任何未使用的代码进行 treeshake，因此减小每个元素的大小。

与此同时，您可以使用https://github.com/manfredsteyer/ngx-build-plus#advanced-example-externals-and-angular-elements 从您的自定义元素构建中排除基础包并在您的基础应用程序中提供这些包，因此例如角核心、rxjs 等仅加载一次。

编辑：确保在主应用程序之后加载自定义元素（通过使用延迟或动态加载它们）以确保加载所需的基本脚本。您不需要像项目自述文件中提到的那样添加 umd 库，只需确保您的基础应用程序具有所有这些脚本（如果尚未导入，则将它们添加到 angular.json）

【讨论】：

【解决方案2】：

您可以使用 ngx-build-plus 并将它们设为外部。阅读：https://www.npmjs.com/package/ngx-build-plus

这是最终的 html 的样子：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ElementsLoading</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<!-- Consider putting the following UMD (!) bundles -->
<!-- into a big one -->

<!-- core-js for legacy browsers -->
<script src="./assets/core-js/core.js"></script>

<!-- Zone.js -->
<!-- 
    Consider excluding zone.js when creating
    custom Elements by using the noop zone.
-->
<script src="./assets/zone.js/zone.js"></script>


<!-- Polyfills for Browsers supporting 
        Custom Elements. Needed b/c we downlevel
        to ES5. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/src/native-shim.js"></script>

<!-- Polyfills for Browsers not supporting
        Custom Elements. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/custom-elements.min.js"></script>


<!-- Rx -->
<script src="./assets/rxjs/rxjs.umd.js"></script>

<!-- Angular Packages -->
<script src="./assets/core/bundles/core.umd.js"></script>
<script src="./assets/common/bundles/common.umd.js"></script>
<script src="./assets/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="./assets/elements/bundles/elements.umd.js"></script>

<!-- Calling Custom Element -->
<custom-element></custom-element>

</body>
</html>

我能够做到这一点并且能够外部化角度模块。但我想知道如何外部化以角度创建的自定义库？我看到的一件事是 Angular 创建了 UMD 包，其中 ng.core、ng.common 被定义为全局变量（以便我可以通过窗口对象访问它们）。我尝试使用 rollupjs 创建 umd 包，但它确实创建了任何全局变量，就像它为角度组件所做的那样。我被困在这里并寻找想法。谢谢！

【讨论】：

我找到了我的问题的答案。我没有注意到 ng build --prod 创建了 umd 包。这解决了我的问题。谢谢！
请在回答现有问题时不要再问其他问题。如果您有一个新问题，您应该提出一个全新的问题。