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

Question

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

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

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

Answer 1

最近，我开始了一个在工作中使用多个应用程序的项目。我们的应用程序有两种不同类型的用户：普通用户和管理员。大多数屏幕都是相同的，只有细微的差别。但有些菜单是普通用户看不到的，有些操作是用户无法执行的。*ngIf我们决定利用多个应用程序支持，而不是在应用程序中使用大量的s angular-cli。你可以在这里读更多关于它的内容

基本上，你需要做的是

在 中.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。应用程序有自己的环境、配置、路由设置等。我分别为每个应用程序运行。commonmanageruserng build

另外，我有一个common包含共享组件、服务、模块、资产文件等的应用程序。

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

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

当你想并排运行它们时，

管理器应用程序->ng serve --port 8080 --app=manager-app

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

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

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

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

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

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

此外，为了使 AoT 编译器能够使用common应用程序中的组件，您需要将这些模块包含在tsconfig.app.json每个应用程序中。

manager-app/tsconfig.app.json

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