Angular app deployed behind ingress controller returns invalid mime type

I am trying to deploy an angular application in my local minikube cluster, behind a ingress controller. I am using the builtin nginx ingress controller.

When I try to access the correspoding path to the web spa service I get error in the console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

However when I access the service directly using kubectl port forward I can access the app correctly

These are my deployment, services and ingress resources

apiVersion: apps/v1
kind: Deployment
metadata:
name: web-spa-deployment
spec:
replicas: 1
selector:
matchLabels:
app: web-spa
template:
metadata:
labels:
app: web-spa
spec:
containers:
- name: web-spa
image: phadkesharanmatrixcomsec/iva-workflow:web-spa-2.0
imagePullPolicy: Always
ports:
- containerPort: 8080
env:
- name: ASPNETCORE_ENVIRONMENT
value: "Production"
---
apiVersion: v1
kind: Service
metadata:
name: web-spa-service
spec:
selector:
app: web-spa
ports:
- protocol: TCP
port: 80
targetPort: 80
type: ClusterIP


apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: example-ingress
annotations:
nginx.ingress.kubernetes.io/enable-cors: "true"
nginx.ingress.kubernetes.io/cors-allow-origin: "http://localhost:4200"
nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, DELETE, OPTIONS"
nginx.ingress.kubernetes.io/cors-allow-headers: "Authorization, Content-Type"
nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
ingressClassName: nginx
rules:
- host: hostname.local
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: web-spa-service
port:
number: 80


Also this is my dockerfile where I build the nginx image

# Stage 1: Build the Angular application
FROM node:18 AS build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY src/WebSPA/package*.json ./

# Install dependencies
RUN npm install

# Copy the Angular application source code
COPY src/WebSPA ./

# Build the Angular application
RUN npm run build --prod

# Stage 2: Serve the Angular application
FROM nginx:alpine

# Copy built Angular application from the previous stage
COPY --from=build /app/dist/web-spa/browser /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]


I have already tried different path types : Prefix / ImplementationSpecific, and also tried disabling CORS. Also I am able to easily deploy backend api endpoints, with the same ingress resource, I am facing this issue only with the frontend Again I am able to access the same frontend application by port-forwarding

kubectl port-forward svc/web-spa-service 8080:80

Also there is no issue with acceesing hostname.local as I have created a dns entry in /etc/hosts

Please help.

Continue reading...