title: Docker Nginx Angular2/Angular routes
body: <p>I have an Angular2/Angular app running inside a docker container and using nginx to serve it.  So my app base = /myapp/.  Everything works correctly when hitting the app using the base url i.e. www.server.com/myapp or www.server.com/myapp/</p>
  
  <pre><code>events {
    worker_connections  4096;  ## Default: 1024
  }
  
  http {
    include /etc/nginx/conf/*.conf;
  
    server {
      listen       80 default_server;
  
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      include /etc/nginx/mime.types;
      underscores_in_headers on;
  
      location /myapp {
        # 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 /myapp/index.html;
  
      }
  
      #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;
      }
  
      ## PROXIES ##
      # location matcher for get requests. Any query params will be proxied using this location block
      location = /myapp/api {
  
        proxy_pass http://$hostname/api$is_args$query_string;
        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;
        proxy_connect_timeout       120;
        proxy_send_timeout          120;
        proxy_read_timeout          120;
        send_timeout                120;
      }
  
      # location matcher for post requests i.e. updateAsset. Any request with additional path params will be proxied using this location block
      location ~ ^/myapp/api/(?&lt;section&gt;.*) {
  
        proxy_pass http://$hostname/api/$section;
        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;
        proxy_connect_timeout       120;
        proxy_send_timeout          120;
        proxy_read_timeout          120;
        send_timeout                120;
      }
    }
  }
  </code></pre>
  
  <p>My app has several other routes e.g. /myapp/page1 or /myapp/page2. These routes can be hit when serving the app in dev mode using nodejs.  However once i containerize it (containerization isn't the issue) and serve using nginx then i get a 404 not found when trying to access /myapp/page1 or /myapp/page2.  The error log outputs  </p>
  
  <p><code>2017/02/27 12:15:01 [error] 5#5: *3 open() "/usr/share/nginx/html/myapp/page1" failed (2: No such file or directory), client: 172.17.0.1, server: , request: "GET /myapp/page1 HTTP/1.1", host: "localhost"</code></p>
  
  <p>I have tried mapping all my app urls in the nginx conf file but nothing seems to work.  How do I get this to work?</p>
  
  Update 1
  
  <p>Added angular routes</p>
  
  <p>Main app route: </p>
  
  <pre><code>import { Route } from '@angular/router';
  import { MyAppComponent } from './index';
  
  export const MyAppRoutes: Route[] = [
    {
      path: '',
      component: MyAppComponent
    }
  ];
  </code></pre>
  
  <p>Page 1 route:</p>
  
  <pre><code>import { Route } from '@angular/router';
  import { Page1Component } from './index';
  
  export const Page1Routes: Route[] = [
    {
      path:'page1',
      component: Page1Component
    }
  ];
  </code></pre>