Angular app migrated from 8 to 16. Now, after the deployment, nginx server returns 403...

With angular 8

• everything works fine.

With angular 16

• after the deployment, it gives 403 for all the images inside assets folder.
• but it works fine from local.

We are using docker build and nginx server for the deployment.

Code used to access the images

<img src="assets/images/telematics/Ms_logo_white.png" alt="">


Docker file**

# base image
FROM node:16.14.0 as builder-side

# copy the package.json to install dependencies
COPY package.json package-lock.json ./

# Install the dependencies and make the folder
RUN npm install && mkdir /app && mv ./node_modules ./app

WORKDIR /app

COPY . .

# start app
RUN npm run build

FROM nginx:alpine

COPY ./nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

COPY --from=builder-side /app/dist/ /usr/share/nginx/html

EXPOSE 4200

# Starting server.
CMD ["nginx", "-g", "daemon off;"]
#CMD ["npm", "start"] #gives 502 bad gateway


nginx configuration used

worker_processes 1;

events { worker_connections 1024; }

http {

server {
listen 4200;

# server_name localhost;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
server_tokens off;

location / {

index index.html index.htm;
try_files $uri $uri/ /portal/index.html;
}
add_header X-Frame-Options "DENY";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy same-origin;
add_header Permissions-Policy geolocation=*;
add_header X-Permitted-Cross-Domain-Policies master-only;

gzip on;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml application/javascript;
}

}

• Tried by giving relative path for the images, which is not working.

Continue reading...