Angular 多个项目

Question

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

1. 允许每个菜单项位于不同的 Bitbucket 项目中。
2. 在不破坏其他组件的情况下构建单个组件。
3. 组件可以相互通信。
4. 如果其中一个组件更新，所有应用程序都必须自动查看该组件的最新版本。
5. 所有团队都将使用以下版本：
   • Angular 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. 您可以继续这样做，但要以一种不那么复杂的方式吗？

Answer 1

挑战在于构建单独的 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：主应用程序的 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 的环境配置。

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

ng serve –-project app1

全文为here