title: Istio Ingress routing fails with 404 for Nginx/Angular app
body: <p>I am deploying Nginx with angular app behind istio ingress gateway.</p>
  <p><strong>Expected result:</strong> <a href="https://tremend.com/tremendui/" rel="nofollow noreferrer">https://tremend.com/tremendui/</a> should open the app.</p>
  <p><strong>Issue:</strong> But after accessing the url <a href="https://tremend.com/tremendui/" rel="nofollow noreferrer">https://tremend.com/tremendui/</a>, it reaches till index.html, but it fails to open other .js or .css files. It gives net::ERR_ABORTED 404.</p>
  <p><em>Unrecognized Content-Security-Policy directive 'https://10.22.33.100'.<br />
  GET <a href="https://tremend.com/styles.63a1fbbeeb253678e456.css" rel="nofollow noreferrer">https://tremend.com/styles.63a1fbbeeb253678e456.css</a> net::ERR_ABORTED 404<br />
  GET <a href="https://tremend.com/runtime-es2015.fd26fadf204671228ade.js" rel="nofollow noreferrer">https://tremend.com/runtime-es2015.fd26fadf204671228ade.js</a> net::ERR_ABORTED 404</em></p>
  <p>If i open the link <a href="https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js" rel="nofollow noreferrer">https://tremend.com/tremendui/runtime-es2015.fd26fadf204671228ade.js</a>, the file opens correctly.</p>
  <p><strong>Nginx custom configuration:</strong></p>
  <pre><code>server {
    listen 80;
    location / {
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
    }
  }
  </code></pre>
  <p><strong>Nginx/Angular Dockerfile:</strong></p>
  <pre><code>FROM node:ubuntu as build-step
  ARG env=dev
  RUN mkdir /usr/src/app
  WORKDIR /usr/src/app
  COPY package*.json ./
  RUN npm install &amp;&amp; npm install -g @angular/cli@7.3.9
  COPY . .
  RUN echo &quot;Build environment is $env&quot;
  RUN ng build --configuration=$env
  
  FROM node:ubuntu as prod-stage
  RUN DEBIAN_FRONTEND=noninteractive apt-get update &amp;&amp; DEBIAN_FRONTEND=noninteractive apt-get -yq install nginx nginx-extras
  ## Remove default nginx website 
  RUN rm -rf /usr/share/nginx/html/*
  COPY --from=build-step /usr/src/app/dist/ /usr/share/nginx/html
  COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
  COPY ./nginx.conf  /etc/nginx/
  EXPOSE 80
  CMD [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]
  </code></pre>
  <p><strong>Virtualservice yaml file:</strong></p>
  <pre><code>apiVersion: networking.istio.io/v1alpha3
  kind: VirtualService
  metadata:
    name: tremendui-ingress
    namespace: apx-system
  spec:
    hosts:
    - &quot;*&quot;
    gateways:
    - apollox-istio-gateway
    http:
    - match:
      - uri:
          prefix: /tremendui/
      rewrite:
          uri: /
      route:
      - destination:
          host: tremend-ui.default.svc.cluster.local
          port:
            number: 80
  </code></pre>
  <p>Can someone assist? Just need some directions on how to solve this. Should i change the base-href in angular or ingress virtualservice or nginx config?</p>
  <p><strong>Update1:</strong><br />
  I changed my virtualservice as below:</p>
  <pre><code>apiVersion: networking.istio.io/v1alpha3
  kind: VirtualService
  metadata:
    name: tremedui-ingress
    namespace: apx-system
  spec:
    hosts:
    - &quot;tremend.com&quot;
    gateways:
    - apollox-istio-gateway
    http:
    - match:
      - uri:
          exact: /
      route:
      - destination:
          host: tremend-ui.default.svc.cluster.local
          port:
            number: 80
    - match:
      - uri:
          prefix: /jsonserver/
      rewrite:
          uri: /
      route:
      - destination:
          host: json-server.default.svc.cluster.local
          port:
            number: 3000
    - match:
      - uri:
          prefix: /tremendapi/
      rewrite:
          uri: /
      route:
      - destination:
          host: tremend-api.default.svc.cluster.local
          port:
            number: 8000
    - match:
      - uri:
          prefix: /dynamicapi/
      rewrite:
          uri: /
      route:
      - destination:
          host: dynamic-api.default.svc.cluster.local
          port:
            number: 9000
  </code></pre>
  <p>@jt97, I considered yours and Rinor's inputs.
  But now it goes to the index.html from &quot;/&quot; and also routes to frontend. However other prefixes also routes to the frontend instead of their corresponding destination.</p>
  <p>The path for /static, /callback and regex were not working. Because once i added them i just get a 404 error. So i added just root &quot;/&quot; for frontend.</p>