首页 > 解决方案 > 自定义元素未在另一个角度应用程序中加载

问题描述

我在一个项目中以角度创建了简单的自定义元素,并使用 npx-build-plus 创建了包并生成了如下图所示的文件,

在此处输入图像描述

从这些文件中,我取出了 main.js 文件。我创建了另一个 Angular cli 项目,并将生成的 js 文件包含在根文件夹中,如下所示

在此处输入图像描述

在 index.html 我这样使用

   <!doctype html>
<html lang="en">
<head>
  <title>Custom Angular Element</title>
</head>
<body>
<script src="elements/main.f23021e9a099929ed5cb.js"></script>
<h1 id="result" style="text-align: center"> Angular elements !!!</h1>
<value-button text="Value Button" value="1"></value-button>
</body>
</html>

但是该元素没有显示。我也尝试提供应用程序组件 html,但也没有在那里工作

我应该在 package.json 中进行任何配置吗?你能告诉我帮助吗?

标签: javascripthtmlangularangular-elements

解决方案


您可以尝试关注这篇文章https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

此外,如果尝试在没有哈希的情况下构建它,以便始终易于阅读。此外,您应该在 index.html 中添加自定义元素(例如)。

这篇文章更详细地讨论了这些设置。


推荐阅读