title: angular, docker, nginx, Serve multiple Angular Universal apps with Nginx
body: <p>I use <a href="https://github.com/ghwlchlaks/angular-universal-nginx-dockerfile" rel="nofollow noreferrer">this</a> case to virtualize <code>angular universal</code> service.</p>
  <p>But when I want to set up multiple projects there is a problem, I can't navigate to the right subpath.</p>
  <p>For example, I hope they are set up like this:</p>
  <p><strong>A service</strong>:</p>
  <p><code>localhost/a/</code>
  redirected
  <code>localhost:4001/a/</code></p>
  <p><strong>B service</strong>:</p>
  <p><code>localhost/b/</code>
  redirected
  <code>localhost:4002/b/</code></p>
  <p>I first try to set up A service:</p>
  <p>1.set angular base href in <code>index.html</code></p>
  <p><code> &lt;base href=&quot;/a/&quot;&gt;</code></p>
  <p>2.set <code>docker compose</code></p>
  <pre><code>services:
          angular:
                  container_name: angular
                  build: ./angular/
                  ports:
                          - '4001:4001'
                  environment:
                          - PORT=4001
                  networks:
                          - backend
  </code></pre>
  <p>3.set <code>nginx</code></p>
  <pre><code>upstream docker-angular {
    server angular:4001;
  }
  server {
    listen 80;
    location /a/ {
      proxy_pass http://docker-angular;
    }
  }
  </code></pre>
  <p>This setting is not working, angular cannot recognize path <code>/a/</code></p>
  <p>angular container log:</p>
  <p><strong>angular    | ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'a/polyfills-es2015.f332a089ad1600448873.js'</strong>...</p>
  <p>I have tried different ways like only modify the <code>nginx location</code> without changing the <code>angular base href</code>.</p>
  <p>Also tried different <code>nginx location</code> settings like:</p>
  <pre><code>location = /a/ 
  location ^~ /a/
  </code></pre>
  <p>None succeeded.</p>