Angular 2应用程序的可配置后端

时间:2017-01-27 17:55:00

标签: angular angular2-http

我有一个Angular 2应用程序,它将安装在多个服务器上,并且需要访问同样位于多个服务器上的后端。我使用了来自this answer的代码,特别是使用GET以外的方法进行的编辑,如果我对后端网址进行硬编码,则效果很好。

对于给定的前端服务器,它需要访问的后端始终是相同的。例如,如果前端位于" example.com",则后端将始终位于" example.com:9080"。

我可以为每个不同的服务器捆绑应用程序,更改" localhost:9080"在#34; example1.com:9080"," example2.com:9080"等的答案中,视情况而定。这意味着必须进行代码更改并为每个服务器捆绑应用程序。

有没有办法可以以某种方式获取我需要为后端访问的URL,这样我就可以将其捆绑一次并将其部署到所有服务器上?

我使用Angular 2.4.5并使用Apache服务于前端。

2 个答案:

答案 0 :(得分:0)

我定位IIS,因此我使用http处理程序根据环境动态解决此问题,但您可以使用单个js文件实现它,如下所示:

  1. 按以下方式创建一个包含要加载到应用程序中的设置的js文件:

    var js = {}; js.settings = { API_URL : 'your_api_url_here' };
  2. 创建一个类来映射应用中的这些值:

    export class Settings { API_URL: string; }
  3. 确保在应用程序脚本之前加载js文件,因此将其放在index.html中:

    <script src="env.js"></script>
  4. 现在,在您的app.module中,将这些值映射到您的“设置”类中,并定义它们的提供方式:

    
    // needed to avoid the TS compilation error. 
    // This can be placed at the top of your app.module file. 
    declare var js: any;
    
    @NgModule({ 
           imports: [...], 
           declarations: [...], 
           providers: [{
           provide: Settings, useFactory: ()=> { return js.settings; }}] }) 
    export class AppModule{}
    
  5. 现在将Settings对象注入您可能需要的任何位置,如下所示:

    
    export class ServiceBase {
        protected apiUrl: string;
        constructor(private settings: Settings){
            this.apiUrl = settings.API_URL;
    }
    
  6. 希望这也适合你。

答案 1 :(得分:0)

您真的不希望在您的应用程序中拥有此功能。这应该是配置,因为它取决于您所在的服务器(换句话说,您不希望在以后添加服务器时更改代码并重建)。因此,我的猜测是你真的想在你的apache服务器上解决这个问题。您可以考虑使用ProxyPass和ProxyPassReverse(在httpd.conf或htaccess中)。这样你就不必担心在你的应用程序中担心它,你只会使用api端点的相对路径。

例如,假设您有来自example.com的角度应用程序,并且您的后端api位于example.com:9080/api /.

您的代码只需使用/ api作为端点的路径,ProxyPass会使用以下内容将其重写到后端:

ProxyPass /api example.com:9080
ProxyPassReverse /api example.com:9080

您需要安装MOD_PROXY(在大多数主机上很常见):https://httpd.apache.org/docs/current/mod/mod_proxy.html