Upgrade from deploy-url to base-href and APP_BASE_HREF issue

Question

Description

We are currently building an Angular client and serving it from an Laravel server.

When deploying our application we have to output our angular build to a sub directory because a ng-build overrides the public map where some of our Laravel stuff also needs to reside.

So our current deployed state looks as follows:

---

• public:
  • index.php
  • angular
    • index.html
    • main.js
    • vendor.js
    • polyfill.js
    • runtime.js
    • assets
      • logo.svg

---

because we serve the index.html from the index.php file, the index.html thinks it is located inside the public directory, causing some problems.

Current Situation

We currently have the following angular.json configuration

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "packageManager": "yarn",
    "analytics": false
  },
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "angular",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "public/angular",
            "index": "angular/index.html",
            "main": "angular/main.ts",
            "polyfills": "angular/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "angular/favicon.ico",
              "angular/assets"
            ],
            "styles": [
              "angular/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "angular/environments/environment.ts",
                  "with": "angular/environments/environment.test.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "baseHref": "/angular/",
              "sourceMap": false,
              "extractLicenses": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "100kb",
                  "maximumError": "200kb"
                }
              ]
            }
          }
        }
      }
    }
  }
}

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    providers: [
        {
            provide: APP_BASE_HREF,
            useValue: '/'
        },
    ],
    bootstrap: [AppComponent]
})

Everything is correct with this setup except the client not able to retrieve the assets folder. The static files such as runtime, main, vendor and polyfill all get the prefix angular and the routing isn't adjusted to this prefix.

We have currently solved the issue for the assets folder to create a symlink from public/angular/assets to public/assets to spoof the assets being available at the correct location.

Desired Situation

We would like to have an option which is definable inside Angular which tells the application the assets folder is located at the relative location angular/assets.

P.S. we cannot just edit our references to the assets folder with prefix angular because our local development environment would break.