<p>I have an angular app I'm trying to deploy to Kubernetes in Google Cloud. My problem is, that whenever I try to navigate to a path within the app that's not the root path, for example <a href="http://[ip]/demo" rel="noreferrer">http://[ip]/demo</a>, the request isn't routed in the application but in the container: If I have a directory called 'demo' in the working directory, it'll try to return its contents, so mostly it returns 404.</p>

<p>I have successfully served the application from a virtual machine. My networking configurations are as follows:</p>

<p><strong>service.yaml</strong></p>

<pre><code>apiVersion: v1
kind: Service
metadata:
  creationTimestamp: 2018-07-10T12:00:52Z
  labels:
    app: app
  name: app
  namespace: default
  resourceVersion: "5759129"
  selfLink: /api/v1/namespaces/default/services/app-service
  uid: [redacted]
spec:
  clusterIP: [redacted]
  externalTrafficPolicy: Cluster
  ports:
  - nodePort: 30909
    port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: app
  sessionAffinity: None
  type: NodePort
status:
  loadBalancer: {}
</code></pre>

<p><strong>ingress.yaml</strong></p>

<pre><code>apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    ingress.kubernetes.io/backends: '{"k8s-be-30909--102c03247288a32a":"HEALTHY"}'
    ingress.kubernetes.io/forwarding-rule: k8s-fw-default-app-ingress--102c03df7288a32a
    ingress.kubernetes.io/target-proxy: k8s-tp-default-app-ingress--102c09bf7288a32a
    ingress.kubernetes.io/url-map: k8s-um-default-app-ingress--102c9df4a288a32a
    kubectl.kubernetes.io/last-applied-configuration: |
      {"apiVersion":"extensions/v1beta1","kind":"Ingress","metadata":{"annotations":{},"name":"app-ingress","namespace":"default"},"spec":{"backend":{"serviceName":"app-service","servicePort":80}}}
  creationTimestamp: 2018-07-10T12:10:08Z
  generation: 1
  name: app-ingress
  namespace: default
  resourceVersion: "5762158"
  selfLink: /apis/extensions/v1beta1/namespaces/default/ingresses/app-ingress
  uid: [redacted]
spec:
  backend:
    serviceName: app-service
    servicePort: 80
status:
  loadBalancer:
    ingress:
    - ip: [redacted]
</code></pre>

<p>Does anyone know how to fix this?</p>

<p>You run into this issue, because k8s is trying to call the path /demo on your ingress, and there is no backend handling this path. This happens because of the angular history routing. </p>

<p>It works in dev because the the dev http server is aware of that, because of this:</p>

<pre><code>rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]
</code></pre>

<p>(check out <a href="https://stackoverflow.com/a/34418131/5613927">this answer</a>)</p>

<p>So, what you must achieve, is that all your URLs to your ingress are rewritten to /index.html. A rewrite target from nginx ingress is <strong>not</strong> the same, as it would translate /path/foo/bar to /foo/bar if your rewrite target is '/'</p>

<p>So, what are the options? You could dig into the ingress configuration. It looks like you are using the GKE ingress, you could use a different one, but a closer look didn't show up any specific configuration.</p>

<p>However, I would take out the crowbar for this problem and hack it off, by using a nginx container with all my custom rewrite rules and reverse proxy it to your angular app. In other words, I'm using nginx anyway if I deploy a prod angular application in a container. Just check out <a href="https://www.digitalocean.com/community/questions/nginx-404-error-with-existing-urls-angular-2-one-page-application-with-routing" rel="noreferrer">this guide</a> to setup nginx for angular properly. </p>

<p>The result would be a docker image, containing a custom nginx with the angular and custom rules inside.</p>
