Angular 9 要素：如何创建独立的 WebComponent（具有所有依赖项）？

Question

我正在尝试基于 微前端 设计一个新应用程序 Angular 9 和 WebComponents。我想通过 WebComponents 实现的主要目标是能够让不同的团队独立工作，随时部署他们的更新，让主包装器只需下载相应的自包含包并将其注入包装页面。

至于现在我不需要处理不同的框架，但我只需要在它们之间具有非常低耦合，两者都依赖于（每个 WebComponent 应该带来它自己的依赖项，目前允许的例外是 Polyfills 和运行时）和部署（只是 deploy/expose WebComponent 捆绑包并通过 GET API 将其注入包装器）。我心目中的架构如下：

UI：这是所有其他 WebComponents
DashboardOne-UI: 注册为 WebComponent 的仪表盘
DashboardTwo-UI: 注册为WebComponent的仪表盘

我在网上找到的WebComponents的例子都是很基础的；我的意思是他们只使用标准的 html 元素（按钮、段落……），因此没有依赖项可以合并到输出包中。在我的例子中，DashboardOne-UI 依赖于 Prime-NG 和 Prime-Icons，我也会避免安装此类依赖项在 UI.

为了构建 DashboardOne-UI 并提供输出文件，我使用 NGX-Build-Plus 和 HTTP-Server 通过运行以下命令：

"scripts": {
    "start": "http-server dist/DashboardOne-UI/ --port 8084",
    "build": "ng build --prod --single-bundle"
}

构建后，dist 文件夹包含：

这是index.html的内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OrganizationUI</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <organization-dashboard></organization-dashboard>
    <script src="polyfills.js" defer></script>
    <script src="scripts.js" defer></script>
    <script src="polyfill-webcomp-es5.js" defer></script>
    <script src="polyfill-webcomp.js" defer></script>
    <script src="main.js" defer></script>
  </body>
</html>

通过运行启动脚本，我能够让 WebComponent 在浏览器中按预期工作，但是当我只注入 main.js 脚本时在 UI 应用程序中，它无法获取所有字体和样式：

我发现避免对包装 UI 产生这种依赖的唯一方法是制作 DashboardOne WebComponent 'css 指向 NPM 上的样式而不是本地 node_modules，使用：

@import url("https://unpkg.com/primeicons@2.0.0/primeicons.css");
@import url("https://unpkg.com/primeng@9.0.0/resources/primeng.min.css");
@import url("https://unpkg.com/primeng@9.0.0/resources/themes/nova-light/theme.css");
@import url("https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css");

而不是：

@import url("~primeicons/primeicons.css");
@import url("~primeng/resources/primeng.min.css");
@import url("~primeng/resources/themes/nova-light/theme.css");
@import url("~bootstrap/dist/css/bootstrap.min.css");

这种方法的问题是我需要在两个地方处理依赖关系，css 和 package.json。在 Angular 9 中是否有更好的构建自包含 WebComponents 的方法，这样我只需要在包装 UI 应用程序中导入单个 JS 文件，而不关心 WebComponents 的依赖关系？

Answer 1

我刚刚发现，一种可能的更好解决方案是提供

ng build

带有部署路径 URL（更多信息）：

"scripts": {
  "start": "http-server dist/DashboardOne-UI/ --port 8084",
  "build": "ng build --single-bundle --deploy-url http://localhost:8084/"
}

通过这种方式，DashboardOne-UI web-component 元素一旦被注入 UI 包装器，将指向它自己的服务器，在那里可以找到所有需要的资源。

Angular 9 要素：如何创建独立的 WebComponent（具有所有依赖项）？

Angular 9 Elements: how to create a standalone WebComponent (with all the dependencies)?

web-component

angular

angular-elements