Hybrid angularjs/angular app broken due to angular 13+ removal of deployURL

UPDATED 7/6/2023 as I believe I have determined the issue is due to the hybrid nature of my application and not just upgrading angular as I previously assumed.

I have a hybrid angular/angularjs app that currently builds all the client files into a /client/ directory.
All calls outside of that directory are handled by my back end. My current configuration uses deployUrl='/client/' to prefix all asset requests appropriately for that directory.

I am upgrading angular, and so deployUrl is now deprecated/removed, and I am trying to figure out how to make this continue to work.

I have tried setting my angular.json baseHref='/client/', like recommended here:
https://stackoverflow.com/questions/71695674/what-is-best-way-to-go-about-replacing-deployurl-in-angular-json-for-v13

and that works fine for the assets, but it breaks the angularjs portion of the app. In particular, when angularjs $location attempts to parse the initial url, it gives an error. Ie, Assume the initial url is https:/example.com/home, when ajs tries to parse it, it throws this error:

Error: [$location:ipthprfx] Invalid url "https://example.com/home", missing path prefix "https://example.com/client/".

Which links to this error in the angular docs.

Apparently angularjs doesn't like the baseHref, which wasn't previously a problem as deployUrl didn't require a baseHref. However, now that I can't use it, I can't seem to do the workaround of setting baseHref either, since angularjs doesn't work well with it.

Any ideas how I can set up/build my app so that both the angular and angularjs portions work? (Yes, I would love to get rid of all the angularjs code, and we are doing so slowly, but we still have a lot of legacy code in ajs).

Can you share an example, how you call your backend?
We serve an angular application with the baseHref option and call the backend like

this.http.get(`/v1/ressource`);

that works fine. It might be the leading / that is important.

I don't know if this will work for you too, but we have a similar setup (hybrid application) and what we do is:

1. Setup up the APP_BASE_HREF provider in a module (we're declaring the AppRoutingModule for this) and include it in the imports of AppModule:

// app-routing.module.ts
import {APP_BASE_HREF, ...} from '@angular/common';
// ...
@NgModule({
    imports: [RouterModule.forRoot(routes, {
            // enableTracing: !environment.production,
        })
    ],
    exports: [RouterModule],
    providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {provide: LocationStrategy, useClass: ... your strategy ...}
    ],
    declarations: []
})
export class AppRoutingModule {
}

// app.module.ts
@NgModule({
    imports: [
        AppRoutingModule,
        // ...
    ],
    // ...
})
export class AppModule {/*...*/}

2. On index.html set your path with: <base href="/client/">
3. On the npm config, in package.json, we set the option --serve-path for the serve and e2e commands. Example ng serve --serve-path '/client/' --port 4300. But you can also set this option on the configuration(s) for serve inside angular.json:

// angular.json
// projects -> your-project -> architect -> serve -> options {
"servePath": "/client/"

Also, worth mentioning, in our cypress configuration we have:

// cypress.config.ts
export default defineConfig({
  env: {
    baseUrl: 'http://localhost:4300/client/'   // with or without the '#' depending  on your location strategy.
  }
});

Just for curiousity
We have a newer project (not on hybrid anymore) and the settings above work on a pure Angular 14 app too. But out of curiosity, I tried out and changed APP_BASE_HREF to /client/ to see what would happen.

1. In our hybrid application, it duplicates the /client/ when changing into newer routes. The older (angularJS) seem to work.
2. In our newer app (non hybrid), it doesn't seem to affect anything, so apparently / and /client/ would work (but I just tried this locally and not on production though, so I'm not 100% sure).

This is how I ended up solving the problem. I am posting this just in case anyone else is interested, though I can't necessarily recommend this solution because $browser is technically a private angularjs object, so it isn't designed to be modified/tweaked, and isn't even documented. However, the solution worked for us, and we are okay with the risk of ajs changing something under the covers and breaking things, particularly because not that many changes are happening to ajs nowadays.

I basically overrode the default $browser.baseHref() method to return '/' rather than the value specified via <base href="..."/> in the index.html. That way, I could still specify a baseHref during the angular build, so all the client assets/resources/scripts are found correctly, but the angularjs $location behavior and ajs ui router is not confused by it.

I added this to the app config portion of my angularjs bootstrap:

$provide.decorator('$browser', ['$delegate', ($delegate) => {

  $delegate.baseHref = function replacementBaseHref() {
    return '/';
  };

  return $delegate;
}]);