使用角度cli处理多个应用程序

Question

我感兴趣的是能够使用角度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文件夹以及除名称之外的所有其他内容.

用第二种方法分享一切我想知道这与创建大量模块和延迟加载它们有何不同？

我知道这个问题是基于理论的,但在线资源非常有限,我有兴趣了解其他开发人员如何攻击这个问题.

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文件中引导一个不同的模块吗？

这取决于您的应用程序将执行的操作.我更喜欢使用不同的bootstrap模块,因为这样我可以从一些应用程序中删除一些多余的东西.

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

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

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

此外,对于这样的应用程序,我会创建相应的打字稿配置,以保护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现在支持这个开箱即用的简单脚手架命令.首先,使用创建正常的cli项目ng new root-name.然后,您可以使用它添加项目ng generate application sub-app-name.在这里查看他们的维基页面.