使用 Angular cli 处理多个应用程序

Question

我对能够使用 angular cli 引导多个应用程序感兴趣。

通过 angular-cli wiki，我找到了一个示例 https://github.com/angular/angular-cli/wiki/stories-multiple-apps

我也发现 https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

我浏览了 angular-cli.json 文件并运行了

    "apps": [
    {
      "name": "app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main2.ts",
      "polyfills": "polyfills2.ts",
      "test": "test2.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app2",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

我能够使用以下命令运行它

ng serve --app 0
ng serve --app 1

我对这种方法的第一个问题是，如果我们在 angular-cli 中列出了多个应用程序，如何维护它？这将得到一些监控和跟踪。

另外，使用这种方法，您最好在每个 main.ts 文件中引导不同的模块吗？

我看到的第二种方法是在 cmets 中的一个示例中。
https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json。

这更理想，尽管我无法复制和识别所有这些应用程序如何共享相同的 dist 文件夹以及除名称之外的所有其他内容。

对于共享所有内容的第二种方法，我想知道这与创建大量模块并延迟加载它们有何不同？

我知道这个问题非常基于理论，但在线资源非常有限，我很想知道其他开发人员如何解决这个问题。

Answer 1

如果我在 angular-cli 中有多个应用程序，我会将它们命名为：

"apps": [
    {
      "name": "app1",
      "main": "main1.ts",
      ...
    },
    {
      "name": "app2",
      "main": "main2.ts"
    }
]

然后启动app1 我们可以运行任一

ng serve --app 0

或

ng serve --app app1

我更喜欢第二种方法，因为它更容易理解正在运行的应用程序。

如何监控它们？

你必须知道你在做什么:)

另外，如果采用这种方法，您是否会更好地引导一个 每个 main.ts 文件中的不同模块？

这取决于您的应用程序将做什么。我更喜欢使用不同的引导模块，因为这样我可以从一些应用程序中删除一些多余的东西。

例如，我需要两个应用程序具有几乎相同的逻辑，但第二个应用程序只是第一个应用程序的一部分，具有自己的功能。

所以我的第二个应用程序可以引导SecondModule，它将导入一些应用程序模块和它自己的功能模块之间的共享。

@NgModule({
  import: [
    SharedModule,
    SharedModule2,
    SecondFeature1,
    ...
  ]
})
export class SecondModule {}

此外，对于此类应用程序，我会创建相应的 typescript 配置以保护 ts 编译器（以及特别是 ngc 编译器）做一些多余的工作：

tsconfig.app1.json

files: [
  "main1.ts",
  "path to some lazy loaded module"
]

tsconfig.app2.json

files: [
  "main2.ts"
]

这是更理想的，虽然我无法复制和确定如何 所有这些应用程序共享相同的 dist 文件夹和所有内容 除了名字之外的其他东西。

我认为这是错误的。我会将这些应用程序输出到不同的文件夹。

由于问题是基于理论的，我会说如果你有相当大的应用程序，你可能会遇到性能构建。在一个 angular-cli 应用程序中拥有许多应用程序可能会成为一场噩梦。这只是我对此的看法和经验:)

Answer 2

CLI 版本 6 现在通过简单的脚手架命令开箱即用地支持此功能。首先，您使用ng new root-name 创建一个普通的cli 项目。然后您可以使用ng generate application sub-app-name 在其中添加项目。查看他们的维基页面here。

Answer 3

您可以使用 ng generate application 命令创建单独的应用程序。这创造了 环境与基本应用程序相同的“项目”文件夹。但是会有共享模块。您将如何在这两个地方进行参考？一种选择是使用相对路径。

本文举例说明 https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

我还发现这种方法存在一个问题。您需要从主应用程序延迟加载子应用程序。为此，需要在基本 app.routes.ts 文件中指定路由路径。如果您只想构建没有子应用程序的基础怎么办？需要维护两个版本的 app.routes.ts 文件