I am deploying angular app to domain via nginx server with docker file and my deployment angular path is /domain/ui/ but thing is that after deployment i got above error.
**> 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**
index.html after deployment on DEV
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ISA</title>
<base href="/ui/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="styles.css"></head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>
I have below solutions but none of worked:
- tsconfig.json's target is es2015
- change dist/ui to dist only
- add below in nginx.conf file
types { module js; } include /etc/nginx/mime.types;
I am sharing my nginx.conf,dockerfile file:
- docker file:
FROM artifactorycloud.ual.com/v-docker/node:16 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install --max-old-space-size=4096
COPY . .
RUN npm run build -- --base-href /ui/ --configuration=development
FROM artifactorycloud.ual.com/v-docker/nginx:alpine
COPY --from=builder /app/dist/ /usr/share/nginx/html
# Copy the nginx conf that we created to the container
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]- nginx.conf:
server {
listen 0.0.0.0:8080;
listen [::]:8080;
default_type application/octet-stream;
gzip on;
gzip_comp_level 6;
gzip_vary on;
gzip_min_length 1000;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
client_max_body_size 256M;
root /usr/share/nginx/html;
location /ui/health/ {
rewrite ^/ui/health/(.*)$ /$1 break;
try_files $uri $uri/ /ui/health/index.html;
}
location /ui/ {
rewrite ^/ui/(.*)$ /$1 break;
try_files $uri $uri/ /ui/index.html;
}
}
Finally issue fixed for me my app is deployed inside parent folder- /ui/health/ i forgot that path inside location tag: