override baseHref for ng serve in Angular 14

Question

I have a set "baseHref" to '/bui' in the angular.json file because the static files are deployed there. If I use ng serve with port 4200 and I navigate to https://localhost:4200 I get the following message: Cannot GET /

This is due to the baseHref. In the past we would use a base href set to '/' and the deployUrl set to '/bui/'. The deployUrl is now deprecated (Angular 14) so we have to use base href.

In production mode on the server the base href is /something-extra/bui/. We also want to use the application with base href /bui/ in case we test the application with aspnet core and the static files (wwwroot).

I cannot seem to override the baseHref within the ng-serve section of the angular.json file. How can I override the base href in ng serve modus to '/'?

Answer 1

angular.json

.
.
.
 "configurations": {
            "development": {
              "baseHref": "/",
.
.
.
"production": {
              "baseHref": "/bui/",

index.html

.
.
.
<base href="/">
...