Angular elements multiple APIs and different stages - proxy.config vs another aproach

Question

Currently I'm building an Angular App using angular elements and have 3 environments:

• dev
• stage
• prod

the API calls are different for every environment.

Using proxy.config.js and router option it would be something like:

{
    "/api/products": {
        "target": "https://api.exampledomain.com",
        "secure": false,
        "logLevel": "debug",
        "router": {
          "localhost:4200" : "http://localhost:3000/exampledomain",
          "staging.exampledomain.com" : "http://api.staging.exampledomain.com",
          "prod.exampledomain.com" : "http://api.prod.exampledomain.com"

        }
    }
} 

Another approach would be to use different env files and define specific API Endpoint(s) for dev, stage, prod.

Something like:

// environment.ts
export const environment = {
    production: false,
    api: 'http://localhost:3000'
};

// environment.stage.ts
export const environment = {
    production: false,
    api: 'http://staging.exampledomain.com'
}

// environment.prod.ts
export const environment = {
    production: true,
    api: 'http://api.exampledomain.com'
}

angular.json

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

And the api service

// API service
import { Injectable } from '@angular/core';
import { environment } from '../../../environment.ts';
import { Http } from '@angular/http';

@Injectable()
export class ApiService {
    constructor(private http: Http);

    getProducts(){
        return this.http.get(environment.api + '/api/products');
    }
}

So, which approach is better in terms of webcomponents / angular elements ? Why angular elements and the proxy configuration are (almost) always used together. Is there any good reason about that?

Any help will be appreciated.

Answer 1

Conclusion

Since the hardcoding of some APIs-URLs isn't a good practice, I wouldn't recommend this approach. It isn't bad for local development, but for production it can lead to some inconsistences.