Angular on Kubernetes (ingress routing)

Question

How do i need to configure my ingress that Angular 7 App is working?

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
  - http:
      paths:
      - path:
        backend:
          serviceName: angular-service
          servicePort: 80
      - path: /test
        backend:
          serviceName: angular-service
          servicePort: 80

Angular is hosted by nginx image:

FROM nginx:alpine
COPY . /usr/share/nginx/html

And on Kubernetes:

kind: Service apiVersion: v1 metadata: name: test-service spec: selector: app: test ports:

- port: 80

apiVersion: extensions/v1beta1 kind: Deployment metadata: name: test spec: replicas: 2 template: metadata: labels: app: test spec: nodeSelector: "beta.kubernetes.io/os": linux containers: - name: test image: xxx.azurecr.io/test:latest imagePullPolicy: Always ports: - containerPort: 80

On path / everything works. But on /test it doesn't work. Output in console:

Uncaught SyntaxError: Unexpected token < runtime.js:1

Uncaught SyntaxError: Unexpected token < polyfills.js:1

Uncaught SyntaxError: Unexpected token < main.js:1

That´s why I changed on angular.json:

"baseHref" : "/test",

But now I get the same error on both locations. What I´m doing wrong?

edit details

ingress-controller (Version 0.25.0):

https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy/static/mandatory.yaml

ingress-service (for azure):

https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy/static/provider/cloud-generic.yaml

Test Procedure:

The Application is built with

"baseHref" : "",

When I run the application on my server everything works (by that baseHref is verified, too).

$ sudo docker run --name test -p 80:80 test:v1

On Kubernetes the application works on location / (only if I use annotation nginx.ingress.kubernetes.io/rewrite-target: /). If I try to enter /test I get an empty page.

Logs:

$ sudo kubectl logs app-589ff89cfb-9plfs

10.xxx.x.xx - - [11/Jul/2019:18:16:13 +0000] "GET / HTTP/1.1" 200 574 "https://52.xxx.xx.xx/test" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" "93.xxx.xxx.xxx"

$ sudo kubectl logs -n ingress-nginx nginx-ingress-controller-6df4d8b446-6rq65

Location /

93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET / HTTP/2.0" 200 279 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 261 0.002 [default-app2-service-80] [] 10.xxx.x.48:80 574 0.004 200 95abb8e14b1dd95976cd44f23a2d829a
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /runtime.js HTTP/2.0" 200 2565 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 44 0.001 [default-app2-service-80] [] 10.xxx.x.49:80 9088 0.004 200 d0c2396f6955e82824b1dec60d43b4ef
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /polyfills.js HTTP/2.0" 200 49116 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 25 0.000 [default-app2-service-80] [] 10.xxx.x.48:80 242129 0.000 200 96b5d57f9baf00932818f850abdfecca
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /styles.js HTTP/2.0" 200 5464 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 23 0.009 [default-app2-service-80] [] 10.xxx.x.49:80 16955 0.008 200 c3a7f1f937227a04c9eec9e1eab107b3
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /main.js HTTP/2.0" 200 3193 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 21 0.019 [default-app2-service-80] [] 10.xxx.x.49:80 12440 0.016 200 c0e12c3eaec99212444cf916c7d6b27b
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /runtime.js.map HTTP/2.0" 200 9220 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 24 0.004 [default-app2-service-80] [] 10.xxx.x.48:80 9220 0.008 200 f1a820a384ee9e7a61c74ebb8f3cbf68
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /vendor.js HTTP/2.0" 200 643193 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 23 0.130 [default-app2-service-80] [] 10.xxx.x.48:80 3391734 0.132 200 1cf47ed0d8a0e470a131dddb22e8fc48
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /polyfills.js.map HTTP/2.0" 200 241031 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 26 0.001 [default-app2-service-80] [] 10.xxx.x.49:80 241031 0.000 200 75413e809cd9739dc0b9b300826dd107
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:31 +0000] "GET /styles.js.map HTTP/2.0" 200 19626 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 23 0.000 [default-app2-service-80] [] 10.xxx.x.48:80 19626 0.004 200 1aa0865cbf07ffb1753d0a3eb630b4d7
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:32 +0000] "GET /favicon.ico HTTP/2.0" 200 1471 "https://52.xxx.xx.xx/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 55 0.048 [default-app2-service-80] [] 10.xxx.x.49:80 5430 0.000 200 2c015813c697c61f3cc6f67bb3bf7f75
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:32 +0000] "GET /vendor.js.map HTTP/2.0" 200 3493937 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 24 0.377 [default-app2-service-80] [] 10.xxx.x.49:80 3493937 0.380 200 7b41bbbecafc2fb037c934b5509de245
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:55:32 +0000] "GET /main.js.map HTTP/2.0" 200 6410 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 22 0.169 [default-app2-service-80] [] 10.xxx.x.48:80 6410 0.104 200 cc23aa543c19ddc0f55b4a922cc05d04

Location /test

93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/ HTTP/2.0" 200 274 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 294 0.000 [default-test-service-80] [] 10.xxx.x.xx:80 574 0.000 200 2b560857eba8dd1242e359d5eea0a84b
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/runtime.js HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 53 0.000 [default-test-service-80] [] 10.xxx.x.49:80 574 0.000 200 2695a85077c64d40a5806fb53e2977e5
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/polyfills.js HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 30 0.003 [default-test-service-80] [] 10.xxx.x.48:80 574 0.000 200 8bd4e421ee8f7f9db6b002ac40bf2025
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/styles.js HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 28 0.001 [default-test-service-80] [] 10.xxx.x.49:80 574 0.000 200 db7f0cb93b90a41d623552694e5e74b6
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/vendor.js HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 28 0.001 [default-test-service-80] [] 10.xxx.x.48:80 574 0.000 200 0e5eb8fc77a6fb94b87e64384ac083e0
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/main.js HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 27 0.001 [default-test-service-80] [] 10.xxx.x.49:80 574 0.000 200 408aa3cbfda25f65cb607e1b1ce47566
93.xxx.xxx.xxx - [93.xxx.xxx.xxx] - - [12/Jul/2019:06:43:08 +0000] "GET /test/favicon.ico HTTP/2.0" 200 274 "https://52.xxx.xx.xx/test/" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36" 58 0.001 [default-test-service-80] [] 10.xxx.x.48:80 574 0.000 200 d491507ae073de55a480909b4fab0484

Which version of nginx ingress controller are you running? Can you also provide logs for the nginx pod so we have a better idea of how the requests look? — Andy Shinn
yes. Additionally to baseHref, I also changed deployUrl. Then it worked. — Nico Schuck
@NicoSchuck could you help me what exactly goes in deployUrl and baseHref? I am actually running express and exposing the static files. when I configure it at root ,it works fine. But I have to access more than one file, so am giving path: /angular, then everythign fails. — sudharsan tk
When you start angular by ng server locally your app will run on / (for example localhost:4200). But if the deep route is different on your server and you want to enter the application by yourdomain.com/apps/angular you need to pass this information about the entry point to angular. That you are doing in angular.json. If that is not helping please create a new question and send the link to me. Then I can give you a better answer, then by the commands. — Nico Schuck

Andy Shinn Andy Shinn · Accepted Answer · 2019-07-11T16:18:48

Without knowing the version of nginx-ingress this is just a guess.

Per the documentation at https://kubernetes.github.io/ingress-nginx/examples/rewrite/#rewrite-target is says:

Starting in Version 0.22.0, ingress definitions using the annotation nginx.ingress.kubernetes.io/rewrite-target are not backwards compatible with previous versions. In Version 0.22.0 and beyond, any substrings within the request URI that need to be passed to the rewritten path must explicitly be defined in a capture group.

This means that you need to explicitly pass the paths like:

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: myingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
  - http:
      paths:
      - path: /
        backend:
          serviceName: angular-service
          servicePort: 80
      - path: /test/(/|$)(.*)
        backend:
          serviceName: angular-service
          servicePort: 80