How to alter post url in angular

Question

I'm in localhost:12334/xyz/abc then I want hit the post api end point localhost:12334/mno/postAction.

Note: I tried Http client.post('/mno/postAction',{}) but in network of devTools shows url points to localhost:12334/xyz/api/mno/postAction'

I'm new to angular please help me to prepare url to hit postAction

I don't want to hardcode localhost:12334 as it'll change in production

update 1: My application is running on same port ref: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-6.0&tabs=visual-studio

Answer 1

If the server and client run in the same port and host as server, you can use the window.location property.

api.service.ts

// ...
export class ProductService {
  apiBaseUrl = '';

  // ctor
  constructor() {
    const port = location.port ? ':' + location.port : '';
    this.baseApiUrl = `${location.protocol}//${location.hostname}${port}`;
  }
  // ...

  getProducts() : Observable<Products> {
    const url = this.apiBaseUrl+ '/api/products';
    return this.http.get<Products>(url);
  }

}

---

For these purpose we use environment variables in angular.

In this example, there are two deployment environments, i.e., production and staging.

environment.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-local-api-url'
  // ...
};

environment.prod.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-production-api-url'
  // ...
};

environment.staging.ts

export const environment = {
  // ...
  apiBaseUrl: 'http://my-staging-api-url'
  // ...
};

Now, your service use that variable

api.service.ts

import { environment } from '../environments/environment';
// ...
export class ProductService {
  apiBaseUrl = environment.apiBaseUrl;

  // ctor
  // ...

  getProducts() : Observable<Products> {
    const url = this.apiBaseUrl+ '/api/products';
    return this.http.get<Products>(url);
  }

}

For all of this to work, you have to change confuguration options matching the target environment we need to configure target-specific file replacements in angular.json. For this, we add fileReplacements to the angular.json file.

angular.json

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

Finally call build for different configurations like this.

ng build --configuration=production // production
ng build --configuration=staging // staging

Documentation: https://angular.io/guide/build