Angular 8: Using Environment file for maintaining API URL

Question

I am using Angular8 for completely new project. I ran into a strange issue. When I deployed production build on my server, The domain name in the URL gets duplicated. for example, https://my.domain.com/api becomes https://my.domain.com/my.domain.com/api My environment.prod.ts looks like this

export const environment = {
  production: true,
  apiUrl: 'https:/my.domain.com/api/',
};

I use the URL in my code as:

myApiUrl: string = environment.apiUrl + 'v1/services/users;

What I get is:

https://my.domain.com/my.domain.com/api/v1/services/users

Angular application is deployed on Tomcat 8.5 on Azure web apps as ROOT folder.

Answer 1

if your api is relative to domain, but not to app location like:

app: https://my.domain.com/app

api: https://my.domain.com/api

you can use apiUrl: location.origin + '/api/' , this way app will work no matter where will be hosted

Answer 2

也许是错字https:/ single / 。

Answer 3

First of all, it was stupid mistake from my side where i missed one / in https://

However, As my api is on same domain as angular app, both answers to this thread (Damian and Patricio) also worked. If API is on other domain, then just putting correct URL should work just fine.

Answer 4

Your file should look like this

export const environment = {
  production: true,
  apiUrl: 'api/',
};