用角度cli处理多个应用程序 [英] handling multiple applications with angular cli

问题描述

我对能够使用角度cli引导多个应用程序很感兴趣.

I am interested in being able to bootstrap multiple applications with the angular cli.

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

Through the angular-cli wiki I was able to find an example 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文件并运行

I went through the angular-cli.json file and ran

    "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"
      }
    }
  ],

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

I was able to get this to run with the following commands

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

我对这种方法的第一个问题是，如果我们在 angular-cli 中列出了多个应用，该如何维护?这将需要监视和跟踪.

My first question with this approach is how would be maintain this in the case that we list several apps in the angular-cli? This will get a bit much to monitor and track.

此外，采用这种方法，您会更好地在每个main.ts文件中引导一个不同的模块吗?

Also, with this approach would you be better off bootstraping a different module in each main.ts file?

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

The second way I saw this done was in an example in the comments.
https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json.

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

This is more ideal, although I am unable to replicate and identify how all of these applications share the same dist folders and everything else besides name.

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

With the second approach of sharing everything I am wondering how this different than creating a large number of modules and lazy loading them?

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

I know this question is very theory based but resources online are very limited and I would be interested in knowing how other developers are attacking this issue.

推荐答案

如果我在angular-cli中有多个应用程序，我将其命名为:

If i had several apps in angular-cli i would name them like:

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

然后开始app1我们可以运行

ng serve --app 0

或

ng serve --app app1

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

I prefer second approach because it's easier to understand which application is running.

如何监视它们?

How to monitor them?

您必须知道自己在做什么:)

You have to know what you're doing:)

此外，通过这种方法，您最好不进行引导 每个main.ts文件中的模块是否不同?

Also, with this approach would you be better off bootstraping a different module in each main.ts file?

这取决于您的应用程序将执行的操作.我更喜欢使用不同的引导程序模块，因为这样可以减少某些应用程序中的多余内容.

It depends on what your application will do. I prefer having different bootstrap modules because this ways i can cut some excess stuff from some of application.

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

For example i need to have two application with almost the same logic but the second app is just part of first with its own features.

因此，我的第二个应用程序可以引导SecondModule，这将导入应用程序模块与其自身的功能模块之间共享的某些内容.

So my second application can bootstrap SecondModule that will import some shared between applications modules and its own feature modules.

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

此外，对于此类应用程序，我将创建相应的打字稿配置，以保护ts编译器(以及尤其是ngc编译器)做一些多余的工作:

Moreover for such applications i would create corresponding typescript configs to protect ts compiler (and expecially ngc compiler) of doing some redundant work:

tsconfig.app1.json

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

tsconfig.app2.json

files: [
  "main2.ts"
]

这比较理想，尽管我无法复制并确定如何 所有这些应用程序共享相同的dist文件夹，所有内容 除了名字.

This is more ideal, although I am unable to replicate and identify how all of these applications share the same dist folders and everything else besides name.

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

I think it's mistake. I would output these applications to different folders.

由于问题是基于理论的，我会说，如果您有相当大的应用程序，则可能会遇到性能构建问题.在一个角度倾斜的应用程序中拥有许多应用程序可能会成为噩梦.这只是我的看法和经验:)

As question is theory based i would say that if you have quite large application you probably will came across with performance build. And having many applications in one angular-cli application can became nightmare. It's just my opinion and experience on this :)

这篇关于用角度cli处理多个应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！