2

我正在使用以下标准进行概念验证：

在此处输入图像描述

  1. 允许每个菜单项位于不同的 Bitbucket 项目中。
  2. 在不破坏其他组件的情况下构建单个组件。
  3. 组件可以相互通信。
  4. 如果其中一个组件更新，所有应用程序都必须自动查看该组件的最新版本。
  5. 所有团队都将使用以下版本：
    • 角 CLI：7.0.7
    • 节点：10.13.0
    • 角度：7.0.4

我使用 Angular 元素做了一个示例，扩展了 HTML。
每个 Angular 团队通过注册其标签生成 JavaScript 文件（team1.js、team2.js、team3.js）来进行部署。

例子：

<team1> </ team1>  customElements.define("team1", ....); 
<team2> </ team2>  customElements.define("team2", ....); 
<team3> </ team3>  customElements.define("team3", ....);

具有菜单的主 Angular 应用程序导入 JavaScript 文件（team1.js、team2.js、team3.js），当单击每个菜单时，标签会在 div 主目录中动态创建。

menu team1 >> this.renderer.createElement ("team1")
menu team2 >> this.renderer.createElement ("team2")
menu team3 >> this.renderer.createElement ("team3")

例如，如果任何团队需要访问 Web 服务来填充表格，则表格会在之前呈现。
因此，我在 web 服务中执行请求，然后动态创建表标记并将参数传递给流行。
在 Angular 项目中，它可以正常工作而无需此操作。但是对于 Angular 元素，我就是这样：

this.data = data returned from webservice
const element = this.renderer.createElement ("component-table");
this.renderer.setProperty (element, "data", this.data);

所有这些都有效，但我发现很难使用 createElement。

我可以在主项目中提出这个网络服务请求并通过参数：

<team1 data = "data"> </ team1>

有了这个，对 web 服务的所有请求都将在主项目中，所有团队都必须在这个项目中编码。

  1. 还有其他可能性吗？
  2. 你能继续那样做吗，但用一种不那么复杂的方式？
4

1 回答 1

3

挑战在于构建单独的 UI 应用程序，这些应用程序可以相互独立地开发和部署，但仍可以组合成一个单元进行部署。这是我们如何做到的。

您需要安装 Angular CLI，创建 Angular 工作区：

ng new my-app --routing

然后运行它：

cd my-app

ng serve -o

创建您的子应用程序

多应用程序功能现在直接集成到 Angular CLI 中，因此本文将重点介绍这一点。我们不想使用 ng new 创建工作区，而是使用ng generate application. 这将创建一个新应用程序，位于默认应用程序旁边：

ng generate application app1 --routing

ng generate application app2 --routing

这可能看起来像您对 Angular 项目的期望：

  • e2e：端到端测试
  • node_modules：为运行应用程序而必须安装的所有包。
  • src：主应用程序的源
  • src/app：主要的应用程序代码。
  • src/assets：主应用程序的资产文件夹
  • src/environments：环境配置

项目目录包括：

app1：您的第一个自定义子应用程序的源代码

  • app1/app：app1 的源代码。
  • app1/assets app1 的资产。
  • app1/environments：app1 的环境配置。
  • app1-e2e：app1 的端到端测试。
  • app2：您的第二个自定义子应用程序的源代码。
  • app2/app：app2 的源代码。
  • app2/assets app2 的资产。
  • app2/environments：app2 的环境配置。

要运行其中一个子应用程序，您只需使用 project 参数即可ng serve，如下所示：

ng serve –-project app1

整篇文章在这里

于 2019-04-19T05:07:26.803 回答