title: Hosting static angular2 app on nginx and proxying http requests to backend api
body: <p><strong>How do I get angular2 routes to work and proxy http requests to a rest api on another machine?</strong></p>
  
  <p>I have an angular2 web application on an nginx server which serves the static html files.  I have a separate rest api hosted on a different machine with a different IP address.  I have set the location to / in my nginx config file to allow the angular2 routes to work correctly.  I have also added a location /api/ which i hoped would intercept any api requests and proxy them to my backend api.  </p>
  
  <p>My nginx conf with proxy set to <a href="http://swapi.co" rel="nofollow noreferrer">http://swapi.co</a> for test purposes.</p>
  
  <pre><code>events {
    worker_connections  4096;  ## Default: 1024
  }
  
  http {
    server {
      listen       80;
      server_name  localhost;
  
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      include /etc/nginx/mime.types;
  
      location / {
           # If you want to enable html5Mode(true) in your angularjs app for pretty URL
           # then all request for your angularJS app will be through index.html
           try_files $uri /index.html;
      }
  
      # /api will server your proxied API that is running on same machine different port
      # or another machine. So you can protect your API endpoint not get hit by public directly
      location /api/ {
          proxy_pass http://swapi.co;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
  
      #Static File Caching. All static files with the following extension will be cached for 1 day
      location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
          expires 1d;
      }
    } 
  }
  </code></pre>
  
  <p>My angular2 service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class Service {
  
    private url: string = '/api/people/';
    constructor (private http: Http) {}
  
    getPeople () {
      return this.http.get(this.url)
                    .map(res =&gt; res.json());
    }
  }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>