Angular 元素多个 API 和不同阶段 - proxy.config 与另一种方法

Question

目前我正在使用 angular 元素构建一个 Angular 应用程序并有 3 个环境：

开发
阶段
产品

每个环境的 API 调用都不同。

使用 proxy.config.js 和路由器选项会是这样的：

{
    "/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"

        }
    }
}

另一种方法是使用不同的 env 文件并为开发、阶段、生产定义特定的 API 端点。

类似于：

// 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"
                }
              ]

和 api 服务

// 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');
    }
}

那么，哪种方法在网络组件/angular 元素方面更好？为什么 angular 元素和代理配置（几乎）总是一起使用。有什么好的理由吗？

任何帮助将不胜感激。

Answer 1

结论

由于某些 APIs-URLs 的硬编码不是一个好的做法，我不推荐这种方法。这对本地开发来说还不错，但对于生产来说可能会导致一些不一致。

Angular 元素多个 API 和不同阶段 - proxy.config 与另一种方法

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

api

proxy

angular

angular-elements