在不同环境下实现Angular懒加载兄弟应用程序。

Question

在不同环境下实现Angular懒加载兄弟应用程序。

angularwebpackruntimeangular2-routinglazy-loading

5

我目前正在处理一个项目，我们的首席架构师想要在运行时动态加载不同的“兄弟”应用程序到Angular应用程序中。我已经知道如何使用延迟加载的模块来实现这一点。但在我们的情况下，这些应用程序也单独存在于它们自己的环境中。有人有关于如何以Angular方式实现这一点的建议吗？

我已经尝试将它们拆分成自己的块并像那样加载它们，这部分是有效的。但是“主”应用程序需要知道兄弟应用程序，因此它需要调整以懒加载模块。

我最感兴趣的是其他人在这些场景中使用的解决方案 :)

- Lars Meijdam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bunyamin Coskuner · Accepted Answer

最近，我开始了一个涉及多个应用的项目。我们的应用有两种不同的用户，普通用户和经理。大部分界面都是相同的，只有一些细微的差别。但是有些菜单普通用户看不到，有些操作用户也无法执行。为了避免在应用程序中使用大量的*ngIf，我们决定利用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 和 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

user-app -> ng serve --port 8081 --app=user-app

当您想要构建它们时，也适用于相同的内容，

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

user-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"
    ]
    ...
}