<p>I have an Angular app deployed to kubernetes with the <a href="https://kubernetes.github.io/ingress-nginx/" rel="nofollow noreferrer">kubernetes ingress controller</a>. There is one setup with a single-node cluster and one with a multi-node cluster. The MIME-Type problem occurs with both setups but the single-node can resolve it very quick while on the multi-node the latency is not acceptable.</p>
<p>On the multi-node cluster the <em>Time To First Byte</em> takes about 5 sec for:</p>
<ul>
<li>initial call to example.com</li>
<li>runtime-es2015.js</li>
<li>polyfills-es2015.js</li>
<li>appConfig.json (custom config file)</li>
<li>favicon.ico</li>
<li>various png/svg files</li>
</ul>
<p>What works within a normal timeframe are:</p>
<ul>
<li>main-es2015.js</li>
<li>scripts.js</li>
<li>styles.css</li>
<li>ng-validate.js</li>
</ul>
<p>My cluster setup is as following:</p>
<ul>
<li>2 Control-Plane nodes</li>
<li>2 Worker nodes</li>
<li>Cluster networking with canal</li>
<li>The cluster was setup with RKE (if that matters)</li>
</ul>
<p>The <code>index.html</code> in the Angular app contains:</p>
<pre class="lang-html prettyprint-override"><code>&lt;base href=&quot;/&quot;&gt;
</code></pre>
<p>Ingress for multi-node:</p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: multi-node-ingress
  namespace: non-default-namespace
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    kubernetes.io/ingress.class: &quot;nginx&quot;
spec:
  rules:
  - host: example.com
    http:
      paths:
        - path: /?(.*)
          backend:
            serviceName: ng-app-name
            servicePort: 80
</code></pre>
<p>At my DNS provider I added <code>A</code> entries to both of my worker-nodes to directly forward all traffic to them. No Load Balancing is done on Layer 4.</p>
<p>With the help of a <a href="https://developers.redhat.com/blog/2019/02/27/sidecars-analyze-debug-network-traffic-kubernetes-pod/" rel="nofollow noreferrer">tutorial</a> from Open Shift I was able to get a <code>.pcap</code> capturing which I could analyze in wireshark. The <code>Content-Type</code> is <code>text/html</code> for a call to e.g. <code>http://example.com/favicon.svg</code> and this results in a <code>404 Not Found</code>. However after about 5 sec (never lower than that threshhold) it sometimes gets resolved.</p>
<p>My nginx-config for the container looks like this:</p>
<pre><code>user  nginx;
worker_processes  auto;
...

events {
  worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;

  server {
    listen 80;

    location / {
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
    }

    gzip on;
  }
}

</code></pre>
<p>What I noticed is that if I remove the line <code>include /etc/nginx/mime.types;</code> the page load fails entirely with <code>Wrong MIME-Type</code> error. But if it's present it takes around 5.02 to 5.15 secs (never under 5 secs) till it finds the resource.</p>
<p>There is an <a href="https://github.com/angular/angular/issues/30835" rel="nofollow noreferrer">issue</a> on github which might be related to my problem but the problem there is that nothing is loaded at all (wrong MIME-Type). I do get the page loaded, it's just painfully slow.</p>
<p>One suggestion of above Github issue is to add the custom type <code>module</code> which I did with a Config Map:</p>
<pre class="lang-yaml prettyprint-override"><code>kind: ConfigMap
apiVersion: v1
metadata:
  name: nginx-configuration
  namespace: ingress-nginx
data:
  http-snippet: |
    types {
      text/javascript .js;
      module .js;
    }
  default-type: application/octet-stream
</code></pre>
<p>The types are added to the nginx.conf of the ingress controllers but have no effect.<br />
The default-type is not picked up and is still <code>text/html</code>.</p>
<p>Versions:</p>
<ul>
<li>Kubernetes 1.18</li>
<li>Angular 10</li>
<li>nginx:1.19.3-alpine for hosting Angular app inside the container</li>
</ul>

<p>DNS responses are typically cached so in case you do two requests in row and second still has same <code>Time to first Byte</code> you can scratch out DNS latency. You can verify DNS latency by Wireshark.</p>
<p>Different namespace hardly makes any difference.</p>
<p>You didn't say any details about cloud provider but I assume there is load balancer (possibly offloading SSL decryption) balancing requests between 2 worker node (where ingress listens). You can enable some sort of logging for sure so do that.</p>
<p>Your nginx ingress is keeping access logs too so you can check them <code>kubectl logs &lt;nginx-ingress-pod&gt; -n nginx-ingress</code> - you'll have to run this on each of your worker node (or each node where ingress pods are located). Inside of these logs you'll find how long it took to nginx to receive response from your Angular App pod.</p>
<p>With combination of Wireshark, load balancer logs, nginx ingress logs and Angular logs (maybe you need to increase logging level for these to see every HTTP request) you should be able to pinpoint where the problem is.</p>
