Angular BASE_URL replacement in Angular 18?

Question

For Angular 6.0-8.0 used with .NET Core 3.1, it was possible to inject the BASE_URL as string in constructor.

What is now the equivalent for the BASE_URL in Angular 18 + .NET 8? How should I approch this to get relevant path in local test and production ?

Old great and working way from the past below:

constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {
}

I do not want to add my value.. I would like to obtain value from the framework with relative path of my base url.

2 environment files and "fileReplacements" in angular.json file are the general way to do this. ng serve would then be using a different file than ng build. You can set baseURL to just "." to keep it relative... I do that for production environment file (used in "ng build") for certain reasons... — browsermator
– browsermator, Commented Nov 26 at 16:40

marc_s · Accepted Answer · 2025-11-23 15:38:19Z

2

just create an injection token for that

// old
{provide: 'BASE_URL', useValue: yourValue}
...
constructor(@Inject('BASE_URL') private baseUrl: string) { }

// newer (was available long long ago as well)  
export const BASE_URL = new InjectionToken<string>('Base Url');
...
{provide: BASE_URL, useValue: yourValue}
...
class Something {
    private baseUrl = inject(BASE_URL); // string type will be inferred from token type;
}

edited Nov 23 at 15:38

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 23 at 11:54

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carl S. Nov 24 at 15:08

The problem is I do not want to create my own variable, I search for the similar to the BASE_URL provided by Angular framework. BASE_URL was framework defined and provided the URL for test and production. This is the aim of my question. Is there a replacement for BASE_URL in the latest Angular framework ? Or a function which returns the current URL as BASE_URL did ?

Andrei Nov 24 at 19:08

I don't think BASE_URL was ever out of the box in the framework

Carl S. · Accepted Answer · 2025-11-25 08:59:41Z

In the past anyone could use BASE_URL + ControllerName within the http request in Angular + .NET Core to call the server Controller, but in the latest version things work a little bit different.

I've investigated the problem why I couldn't reach server controllers just by passing "/ControllerName" in http requests.

So basicly Angular 18 + .NET has 2 files which required to be edited as angular communicates trough proxy proxy.conf.js from Angular side and #ProjectName#.server.http file from the server side.

In both files you have to provide the name of the controller to establish communication.

for proxy.conf.js

const PROXY_CONFIG = [
  {
    context: [
      "/ControllerName",
    ],
    target,
    secure: false
  }
]

for server.http file

###

POST {{ProjectName.Server_HostAddress}}/ControllerName/

Accept: application/json

Therefore BASE_URL is not required and you can just call "/ControllerName" in http requests.

Collectives™ on Stack Overflow

Angular BASE_URL replacement in Angular 18?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related