<p>I have an Angular app which works perfectly in the development environment.</p>
<p>When I try to deploy it to a Kubernetes cluster and create an ingress route for it, things don't work as expected.</p>
<p>Specifically, I'm using this ingress definition</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: angular-website
  annotations:
    kubernetes.io/ingress.class: &quot;nginx&quot;
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: angular-website
          servicePort: 80
        path: /website(/($|.*))?
</code></pre>
<p>When I try to go to that ingress route, I see a blank page and it the network tab (in Chrome), I see these errors</p>
<p><a href="https://i.stack.imgur.com/M562s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M562s.png" alt="enter image description here" /></a></p>
<p>I realize that this is happening because I'm trying to route on a non-root path (i.e. something that isn't <code>/</code>), and Angular isn't &quot;aware&quot; of that and assumes that the app runs from the root path when it tries to load all the JS bundles.</p>
<p>I realize that I can fix this by editing a section in the main <code>index.html</code> in my application from</p>
<pre class="lang-html prettyprint-override"><code>&lt;base href=&quot;/&quot;&gt;
</code></pre>
<p>to</p>
<pre class="lang-html prettyprint-override"><code>&lt;base href=&quot;/website&quot;&gt;
</code></pre>
<p>But I rather not do that since it would require me to know the path ahead of time, during build.</p>
<p>Is there a way around it? Is there a way to make Angular dynamically be aware of the root path without having to recompile the app to set that?</p>
<p><strong>Edit</strong></p>
<p>The Angular app is hosted in a NodeJS Express application</p>
<pre class="lang-js prettyprint-override"><code>const clientPath = path.join(__dirname, &quot;..&quot;, &quot;public&quot;, &quot;angular-website&quot;, &quot;dist&quot;, &quot;angular-website&quot;);

app.use(express.static(clientPath));
app.get('/*', (req, res) =&gt; res.sendFile(path.join(clientPath, &quot;index.html&quot;));
</code></pre>

<p>I ended up building the Angular app in my Dockerfile like this</p>
<pre><code>RUN npm run build -- --prod --base-href=&quot;/{{basePath}}&quot; --deploy-url=&quot;{{basePath}}/&quot;
</code></pre>
<p>basically, during build, I pass a placeholder to the <code>--base-href</code> and <code>--deploy-url</code> arguments which indicate what's the root path of my app.</p>
<p>Then, when I serve the Angular app from my NodeJS + Express process, I use <a href="https://www.npmjs.com/package/mustache-express" rel="nofollow noreferrer">mustache</a> (a templating engine) to substitute there placeholders with a the root path of my app that's stored in an environment variable.</p>
<pre><code>res.render('index', {
    basePath: process.env.CLIENT_BASE_PATH || ''
});
</code></pre>
