handling multiple applications with angular cli

The CLI version 6 now supports this out of the box with simple scaffolding commands. First you create a normal cli project using ng new root-name. Then you can add projects within it using ng generate application sub-app-name. See their wiki page here.

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

You can use ng generate application command to create separate application. This creates 'projects' folder with environment same as base application. But there will be shared modules. How will you refer at both places? One option is to use relative path.

This article explains with example https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

I also found one problem with this approach. You need to lazy load sub applications from main application. For this, route path need to be specified in base app.routes.ts file. What if you want to build only base without sub applications? You need to maintain two versions of app.routes.ts file