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

问题描述

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

通过 angular-cli wiki，我找到了一个例子https://github.com/angular/angular-cli/wiki/stories- 多个应用

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

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

 "apps": [{"name": "app1","root": "src","outDir": "dist",资产":[资产"，favicon.ico"],"index": "index.html","main": "main.ts","polyfills": "polyfills.ts","test": "test.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json",前缀":应用程序"，风格":[样式.css"],脚本":[]，"environmentSource": "environments/environment.ts",环境":{"dev": "环境/environment.ts","prod": "环境/environment.prod.ts"}},{"name": "app2","root": "src","outDir": "dist2",资产":[资产"，favicon.ico"],"index": "index.html","main": "main2.ts","polyfills": "polyfills2.ts","test": "test2.ts","tsconfig": "tsconfig.app.json","testTsconfig": "tsconfig.spec.json",前缀":app2"，风格":[样式.css"],脚本":[]，"environmentSource": "environments/environment.ts",环境":{"dev": "环境/environment.ts","prod": "环境/environment.prod.ts"}}],

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

ng serve --app 0ng服务--app 1

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

此外，使用这种方法是否最好在每个 main.ts 文件中引导不同的模块?

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

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

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

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

解决方案

如果我在 angular-cli 中有多个应用程序，我会这样命名它们:

应用程序":[{"name": "app1","main": "main1.ts",...},{"name": "app2","main": "main2.ts"}]

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

ng serve --app 0

或

ng serve --app app1

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

<块引用>

如何监控它们?

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

<块引用>

此外，使用这种方法，您最好引导一个每个 main.ts 文件中的不同模块?

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

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

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

@NgModule({进口: [共享模块，共享模块2，第二个特征1，...]})导出类 SecondModule {}

此外，对于此类应用程序，我会创建相应的打字稿配置以保护 ts 编译器(以及特别是 ngc 编译器)执行一些冗余工作:

tsconfig.app1.json

文件:["main1.ts",一些延迟加载模块的路径"]

tsconfig.app2.json

文件:[main2.ts"]

<块引用>

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

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

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

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

Through the angular-cli wiki I was able to find an example https://github.com/angular/angular-cli/wiki/stories-multiple-apps

Also I found https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

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

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.

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

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.

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.

解决方案

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

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

Then to start app1 we can run either

ng serve --app 0

or

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:)

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.

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 {}

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

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 :)

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