在 Angular 14 中为 ng 服务覆盖 baseHref

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="/">
...

Answer 2

So what i did is In angular json build: "baseHref": "/

In angular json build production section: "baseHref: '/something-extra/bui/'

In the ng build for testing with wwwroot aspnet core: ng build --base-href /bui/

This way the ng serve root url always gives a result instead of not found which was the original problem. And it also works in localhost outside webpack dev server with physical files.