Hey together I have an issue with my angular project routing in my Kubernetes Cluster. I explain how I proceed I want my start root in the url is not / but /login everything should start with /login, this does the Angular application, but as soon as I load it with docker in a nginx and put it in the Kubernetes cluster and in tearafik ingress change the url routing to /login instead of / the following error occurs in the web console:
efused to apply style from 'https://XXXXXXt/styles.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
login:14 GET XXXXXXXXXXX/runtime.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXX/polyfills.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXX/scripts.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXXet/main.js net::ERR_ABORTED 404
I explain how I proceed
In Angular I am routing everything so:
{
path: '', component: DefaultComponent,
},
{
path: 'conformity-report',
loadChildren: () => import('./all-products/conformity-report/conformity-report.module').then(m => m.ConformityReportModule)
},
{
path: 'user-management', canActivate: [AdminGuard],
loadChildren: () => import('./all-products/user-management/user-management.module').then(m => m.UserManagementModule)
},
{
path: 'configuration-area', canActivate: [AdminGuard],
loadChildren: () => import('./all-products/configuration-area/configuration-area.module').then(m => m.ConfigurationAreaModule)
},
{
path: 'admin', canActivate: [AdminGuard],
loadChildren: () => import('./all-products/admin/admin.module').then(m => m.AdminModule)
},
{
path: 'error-page',
component: ErrorPageComponent
},
{ path: '**', redirectTo: '' }
];
This is my nginx configuration file
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/ /index.html;
include /etc/nginx/mime.types;
}
location ~ .css {
add_header Content-Type text/css;
}
location ~ .js {
add_header Content-Type application/x-javascript;
}
}
This is my dockerfile where I move the compialed application to nginx with the configuration file
FROM XXXXXXX/nodejs:14.17 as build
ENV XXXXXXXX
WORKDIR /app
COPY package*.json /app/
COPY . .
RUN npm install
RUN npm run build
FROM XXXXXXX/nginx:unpriviliged
EXPOSE 8080:8080
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/projectname /usr/share/nginx/html
My Deployment and Service File are working properly but i will past my Ingress file here We are using taerafik
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: traefik
traefik.ingress.kubernetes.io/router.tls: "true"
#traefik.ingress.kubernetes.io/router.entrypoints: websecure
cert-manager.io/cluster-issuer:XXXXXX-acme
name: ingresshosts
namespace: dev
spec:
rules:
- host: XXXXXXXX
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: frontend
port:
number: 8080
tls:
- hosts:
- XXXXXXXX
secretName: XXXXXXXX
Thanks for your help.
2
Answers
Hey Everyone the solution is at in the angular application
angular.json
a basherefYou can try out the annoation in ingress
Example