Splitting Angular CLI application in two builds

Question

I have an angular solution build on Angular 7 using the CLI. The app has 2 areas. They are not connected in any way, but they use the same code base.

Right now I can go to http://localhost:4200/app1, or http://localhost:4200/app2. But they are running on the same instance. I would like to modify my configuration so I could write something like

ng build --app=app1

and get a standalone solution. Any suggestions to, what I could do ?

Below is my angular.json file. As you can see, I allready have a setup for development, staging, and production. This means that at the moment, I can write

ng build --build-optimizer --configuration=staging

and get a build for staging environment.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "vhTogo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/vhTogo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputPath": "dist/production",
              "vendorChunk": true,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "buildOptimizer": true,
              "serviceWorker": true
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "outputPath": "dist/staging",
              "vendorChunk": true,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "buildOptimizer": true,
              "serviceWorker": true
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ],
              "outputPath": "dist/development",
              "vendorChunk": true,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "vhTogo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "vhTogo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "vhTogo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts", 
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "vhTogo-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "vhTogo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "vhTogo:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "vhTogo",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Answer 1

Using cli you can generate multiple angular projects in the same codebase(repo) and can build, develop or serve them separately. This way you can enforce microservice architecture at frontend level. This is the best way if you have different products under the same domain and you want to separate them by different routes.

Following are some steps that will help you to build this kind of architecture

1. Generate multiple angular applications : ng generate application <project-name> click here for info

2. Build and serve them separately: ng build project-name and ng serve project-name

3. Configure routing: to make this routing possible you have to configure nginx proxy server.

You have to use location block in nginx script to serve from different projects, the following script is only for demo please refer docs for full implementation.

server {
    listen 4200;

    location / {
        proxy_pass http://localhost:4201;  # your root project
    }

    location /app1 {
        proxy_pass http://localhost:4202;  # your app1 project
    }

    location /app2 {
        proxy_pass http://localhost:4203;  # your app2 project
    }

}

For production you can serve index.html file of respective project in location block