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

Question

我目前正在开展一个项目，我们的首席架构师希望在运行时动态地在 Angular 应用程序中加载不同的“兄弟”应用程序。我已经知道如何使用具有延迟加载的模块来完成此操作。但在我们的例子中，应用程序也单独存在于它们自己的环境中。有没有人有关于如何以角度方式实现这一点的建议？

我已经尝试将它们分解成自己的块并像那样加载它们，它正在部分工作。但“主”应用需要了解同级应用，因此需要对其进行调整以延迟加载模块。

我主要对其他人在这类场景中使用的解决方案感到好奇 :)

Answer 1

最近，我开始了一个包含多个应用程序的项目。我们的应用程序有两种不同类型的用户，普通用户和管理员。大多数屏幕都是相同的，只有细微的差别。但是有些菜单是普通用户看不到的，有些是用户无法执行的。我们决定利用@​​987654325@ 多应用程序支持，而不是在应用程序中使用一堆*ngIfs。你可以阅读更多关于它here

基本上，你需要做的是

在.angular-cli.json 内，将另一个应用添加到您的apps 数组中。

"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 应用程序，其中包含共享组件、服务、模块、资产文件等。

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

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

当你想并排运行它们时，

manager-app -> ng serve --port 8080 --app=manager-app

用户应用 -> ng serve --port 8081 --app=user-app

当您想要构建它们时，同样适用，

manager-app -> ng build --prod --app=manager-app

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

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

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

此外，要使 AoT 编译器与来自 common 应用程序的组件一起使用，您需要将这些模块包含在每个应用程序的 tsconfig.app.json 中。

manager-app/tsconfig.app.json

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