1

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

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

4

2 回答 2

4

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

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

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

于 2019-02-04T08:42:46.827 回答
3

您可以使用 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 包，但它确实创建了任何全局变量，就像它为角度组件所做的那样。我被困在这里并寻找想法。谢谢！

于 2019-08-14T15:40:26.373 回答