处理与角CLI多个应用程序

Question

我感兴趣的是能够引导多个应用程序的角度CLI。

通过角CLI维基我能找到一个例子https://github.com/angular/angular-cli/wiki/stories-multiple-apps

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

我通过角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

我的这种方法第一个问题是如何将在我们列出的角CLI几个应用程序的情况下，可以保持这个？这将让有点吃不消监视和跟踪。

此外，使用这种方法，你会好起来的Bootstrap在每个main.ts不同的模块文件？

我看到这个做了第二种方式是在注释的例子。 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

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

如何监控呢？

你要知道自己在做什么:)

此外，使用这种方法，你会好起来的Bootstrap在每个main.ts不同的模块文件？

这取决于你的应用程序就可以了。我喜欢有不同的引导模块，因为这方面我可以从一些应用程序的削减一些多余的东西。

例如，我需要有两个应用几乎相同的逻辑，但第二个应用就是先用自己的特点的一部分。

所以，我的第二个应用程序可以引导SecondModule会导入一些应用模块和其自身的特性模块之间共享。

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

而且这种应用我会创造相应的打字稿CONFIGS保护做了一些多余的工作的TS编译器（和expecially NGC编译）：

tsconfig.app1.json

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

tsconfig.app2.json

files: [
  "main2.ts"
]

这是比较理想的，虽然我无法复制，并确定如何将所有这些应用程序共享相同的DIST的文件夹和一切除了名字东西。

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

随着问题的基础理论，我会说，如果你有相当大的应用程序，你可能会碰到与性能的构建。而在一个角CLI应用有许多应用程序可以成为一场噩梦。这只是我对这个看法和经验:)

Answer 2

CLI版本6现在支持这一开箱即用简单的脚手架命令。首先，您使用ng new root-name建立正常的CLI项目。然后，你可以使用ng generate application sub-app-name内将其添加项目。看到自己的wiki页面here。

Answer 3

您可以使用NG生成的应用程序命令创建单独的应用程序。这将创建“工程”与环境相同的基础应用程序文件夹。但会有共享的模块。你将如何在参考这两个地方？一种选择是使用相对路径。

本文介绍用例如https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

我还发现一个问题，这种方法。你需要从主应用程序延迟加载副应用。为此，路线路径需要在基地app.routes.ts文件中指定。如果你想不副应用只建基地？你需要保持app.routes.ts文件的两个版本