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

Question

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

13

我希望能使用 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文件中引导不同的模块？

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

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

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

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

- Winnemucca

3个回答

8

CLI 6现在提供简单的脚手架命令来支持此功能。首先，使用ng new root-name创建正常的CLI项目。然后，您可以使用ng generate application sub-app-name在其中添加项目。请查看他们的维基页面这里。

- Eric Simonton

1

你可以使用ng generate application命令创建单独的应用程序。这将创建'projects'文件夹，并具有与基本应用程序相同的环境。但是，会有共享模块。如何在两个地方引用？一种选择是使用相对路径。

本文通过示例https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527进行了解释。

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

- Venugopal Reddy

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

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

- yurzui · Accepted Answer

如果我在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应用程序中拥有多个应用程序可能会成为噩梦。这只是我的看法和经验 :)