How to Create Multiple applications in one Angular 6 project with multiple dist folders?

Question

How to Create Multiple applications in one Angular 6 project with multiple dist folders? so you can deploy applications independently.

I am creating a project and inside the project I am creating two applications with the command: ng g application app1 ng g application app2

if I build them independently I get two different distribution folders ng build app1 --prod ng build app2 --prod

But I want to be able to route app1 to app2 through a link, if I build the whole project as in: ng build --prod

both applications are compacted into one dist folder and I want to have two folders app1 and app2 as independent dist folders, so I can deploy them independently, so the issue I am facing is being able to route to app2 from app1.

Answer 1

In NGIR Project i'm creating two project(one for client side and second for server side)

check the angular.json there you can change outputPath to any directory you like

you can do the same for your project

hope it helps.

Answer 2

I believe this is now achievable using the built-in tools; you can have multiple projects configured in the "projects" node of the angular.json file.

Here is a snippet of the file:

"newProjectRoot": "projects",
  "projects": {
    "my-angular-project": {
      "root": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",

So rather than having a single src directory, you could have multiple, each with their own Angular project inside.

Answer 3

Not sure how it was in Angular 6, but in Angular 8 and newer you have basically two options:

1. Create Angular workspace and multiple applications under it. Also you can have libraries under this workspace, so except package.json you can also share common stuff between (components, services, assets, ...) these applications. Eg:

   ng new PlaygroundWorkspace --create-application=false

   ng generate application app-one --routing=true ng generate application app-two --routing=true

   ng generate library lib-mylib

PROS: Applications are independent - you get two builds (dist/app-one & dist/app-two)

CONS: You can not have "common" routing. Let's say, you would like to have one common menu (then ideally put in lib), so the same menu (using routerLink) will be displayed in both applications:

APP ONE - page 1 ... url:port/app-one/page1
APP ONE - page 2 ... url:port/app-one/page2
APP TWO - page 1 ... url:port/app-two/page1
APP TWO - page 2 ... url:port/app-two/page2

But since Angular is SPA (request is not sent to server thanks to Routing & routerLink), the routing is working just in "actual" application you have open. So eg if you are in /app-one/, navigation (between page1 and page2) is working just there, click on links (routerLink) for app-two does not work. If you manually enters url to app-two, then you will be in app-two and app-one links (routerLink) will not work.

2. Have main Angular application, and lazy-loaded sub-applications (components) as mentioned here: how to navigate between multiple applications under single project in Angular 6 by GreyBeardedGeek. Or https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527