Angular 角度延迟加载不同环境中的同级应用程序。

我目前正在从事一个项目，我们的首席架构师希望在运行时在angular应用程序中动态加载不同的“兄弟”应用程序。我已经知道如何使用延迟加载的模块来实现这一点。但在我们的例子中，应用程序也分别存在于它们自己的环境中。有没有人对如何以角度的方式实现这一点提出建议

我已经试着把它们分解成自己的块，然后像那样把它们装载起来，这部分是有效的。但是“主”应用程序需要知道同级应用程序，因此需要调整以延迟加载模块

我对其他人在这类场景中使用的解决方案非常好奇：）

---

最近，我启动了一个有多个应用程序的项目。我们的应用程序有两种不同的用户，普通用户和管理员。大多数屏幕都是相同的，只是有一些细微的差别。但有些菜单是普通用户看不到的，有些操作是用户无法执行的。我们决定利用

angularcli

多应用程序支持，而不是在应用程序中使用大量的

*ngIf

s。你可以阅读更多关于它的内容

基本上，你需要做的是

在

.angular cli.json

中，将另一个应用程序添加到您的

应用程序

阵列中

"apps": [
  {
    "name": "manager-app",
    "root": "src/manager-app",
    "assets": [
      "assets",
      {
        "glob": "**/*",
        "input": "../common/assets/",
        "output": "./assets",
        "allowOutsideOutDir": true
      }
    ],
    .... // bunch of other configs
  },
  {
    "name": "user-app",
    "root": "src/user-app",
    "assets": [
      "assets",
      {
        "glob": "**/*",
        "input": "../common/assets/",
        "output": "./assets",
        "allowOutsideOutDir": true
      }
    ],
    ....
  },
  {
    "name": "common",
    "root": "src/common",
    "tsconfig": "tsconfig.app.json",
    "appRoot": "src"
  }
]

所以，我有三个应用程序，

manager-app

，

user-app

，

common

manager

和

user

应用程序都有自己的环境、配置、路由设置等。我分别为它们运行

ng build

此外，我还有

通用
应用程序，其中包含共享组件、服务、模块、资产文件等

为了从两个应用程序访问
common
资产，您需要将以下json添加到
.angular cli.json

{
    "glob": "**/*",
    "input": "../common/assets/",
    "output": "./assets",
    "allowOutsideOutDir": true
}

{
    ...
    "include": [
        "**/*.ts",
        "../common/app/my-component/my-component.module.ts"
    ]
    ...
}

当你想让它们并排运行时

manager应用程序->
ng serve--端口8080--应用程序=manager应用程序

用户应用程序->
ng服务--端口8081--应用程序=用户应用程序

当你想建造它们时，同样的事情也适用

管理器应用程序->
ng构建--prod--app=manager应用程序

用户应用程序->
ng build--prod--app=user-app

这将生成两个不同的
dist
文件夹，您可以在
.angular cli.json
中为每个文件夹定义它们。i、 e
apps[0]。outDir

此外，还有一个名为Nx的工具，可以帮助您同时管理多个应用程序。
你可以看看这个。
有关Nx的更多信息，请查看它

另外，要让AoT编译器使用
common
app中的组件，您需要在每个应用程序的
tsconfig.app.json
中包含这些模块

manager应用程序/tsconfig.app.json

{
    "glob": "**/*",
    "input": "../common/assets/",
    "output": "./assets",
    "allowOutsideOutDir": true
}

{
    ...
    "include": [
        "**/*.ts",
        "../common/app/my-component/my-component.module.ts"
    ]
    ...
}

嘿，伙计！谢谢你的快速回复！听起来确实可靠！我尝试在我自己的情况下使用Nx，但在我们的情况下，它更像是一个应用程序，充当其他应用程序的“外壳”，在这些应用程序中，我们希望将特定的应用程序延迟加载到外壳中。如果“用户”应用程序中有需要在“管理器”应用程序中访问的组件，默认情况下，您会将它们放在通用应用程序中吗？在不重建/重新处理整个应用程序的情况下，您如何更新特定的模块（我甚至不确定这在webpack中是否可行）？我会将这些模块和组件放在通用应用程序中。实际上，我有一个大页面，几乎完全适合用户和经理。该页面有自己的路线和所有内容。我把它放在公共应用程序中，并通过路由从每个应用程序传递一些配置。此外，angular cli只能重建应用程序的智能部分。因此，我假设，当您在通用应用程序中更改某些内容时，angular cli只会更新该部分并快速重新加载应用程序。酷哥，让我与团队讨论这一问题，作为一种解决方案！我自己甚至看不到，如果不将组件放在共享/公共模块中，跨“应用程序”共享组件的意义。。如果你问我的话，那就是它的用途。谢谢我已经确定了公司的组织方式，他们希望能够及时更新应用程序或安装新应用程序。我想我们正在寻找一种微服务/微前端方法，你有这方面的经验吗？没有，我没有。