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.

CodePudding user response：

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.