Javascript not loading properly when deploy-url is set in Angular

Question

I am running an Angular app as container. When I add --base-href /cfss-dashboard-ui/ --deploy-url / in the build command, the container works properly and pages load in localhost. However, when I add --base-href /cfss-dashboard-ui/ --deploy-url /cfss-dashboard-ui/, I am getting an error as mentioned below. I want to add --deploy-url /cfss-dashboard-ui/ since I will be deploying multiple containers in the server and I want to reverse proxy only requests to /cfss-dashboard-ui/ to this container (see code for nginx test container). If I don't add this, I get 404 for assets and scripts when deployed. What is the mistake I am making here?

index.html




  
  CFSS Dashboard

cfss_nginx.conf

    server {
    listen   80;
    listen [::]:80;
    server_name   _;

    error_page    500 502 503 504  /50x.html;

    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
      try_files $uri $uri/ /index.html =404;
    }

    location /cfss-dashboard-ui/health {
        access_log off;
        add_header 'Content-Type' 'application/json';
        return 200 '{"status":"Healthy"}';
    }
}

Dockerfile (which causes error)

FROM node:14-alpine as build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm install -g @angular/cli
RUN ng config -g cli.warnings.versionMismatch false
RUN ng build --configuration=production --output-path=/dist --aot=false --build-optimizer=false --base-href /cfss-dashboard-ui/ --deploy-url /cfss-dashboard-ui/
ENV TZ=Asia/Kolkata
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
################
# Run in NGINX #
################
FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY cfss_nginx.conf /etc/nginx/conf.d/
COPY --from=build /dist /usr/share/nginx/html/
RUN chmod -R 777 /usr/share/nginx/html/
CMD ["nginx", "-g", "daemon off;"]
EXPOSE 80

Error

The stylesheet http://localhost:4200/cfss-dashboard-ui/styles.5f104026649f886097d2.css was not loaded because its MIME type, “text/html”, is not “text/css”. weekly
The script from “http://localhost:4200/cfss-dashboard-ui/runtime.60252a1a2d3761be4b2b.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
weekly
The script from “http://localhost:4200/cfss-dashboard-ui/polyfills.12dab01c4c39bcfabf78.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
weekly
The script from “http://localhost:4200/cfss-dashboard-ui/scripts.584d67fc648cfeaafad9.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
weekly
The script from “http://localhost:4200/cfss-dashboard-ui/main.dc933d4633cdb2ff2dc3.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
weekly
Uncaught SyntaxError: expected expression, got '<'
runtime.60252a1a2d3761be4b2b.js:1
Uncaught SyntaxError: expected expression, got '<'
polyfills.12dab01c4c39bcfabf78.js:1
Uncaught SyntaxError: expected expression, got '<'
scripts.584d67fc648cfeaafad9.js:1
Uncaught SyntaxError: expected expression, got '<'

Dockerfile (which succeeds)

FROM node:14-alpine as build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm install -g @angular/cli
RUN ng config -g cli.warnings.versionMismatch false
RUN ng build --configuration=production --output-path=/dist --aot=false --build-optimizer=false --base-href /cfss-dashboard-ui/ --deploy-url /
ENV TZ=Asia/Kolkata
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
################
# Run in NGINX #
################
FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY cfss_nginx.conf /etc/nginx/conf.d/
COPY --from=build /dist /usr/share/nginx/html/
RUN chmod -R 777 /usr/share/nginx/html/
CMD ["nginx", "-g", "daemon off;"]
EXPOSE 80

Below code is for an nginx container to test revers proxy

Dockerfile

FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/nginx.conf
CMD ["nginx", "-g", "daemon off;"]
EXPOSE 80

nginx.conf

worker_processes  2;
user              nginx;

events {
    use           epoll;
    worker_connections  100;
}

error_log         /var/log/nginx/error.log info;

http {
    server_tokens off;
    include       mime.types;
    charset       utf-8;

    access_log    /var/log/nginx/access.log  combined;

    server {
        listen   80;
        listen [::]:80;
        server_name   _;

        error_page    500 502 503 504  /50x.html;

        root /usr/share/nginx/html;
        index index.html index.htm;

        location /cfss-dashboard-ui {  
            proxy_pass http://172.17.0.1:4200;      
            proxy_set_header Host $http_host;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Scheme $scheme;

            client_max_body_size 0;    
        }
    }
}

Edit - Noticed I missed /cfss-dashboard-ui/ in nginx html path. When following change made in Dockerfile (which causes error), the Js files load but getting 404 for assets.

COPY --from=build /dist /usr/share/nginx/html/cfss-dashboard-ui/
RUN chmod -R 777 /usr/share/nginx/html/cfss-dashboard-ui/

Error

GEThttp://localhost/assets/plugins/fontawesome-free/css/all.min.css
[HTTP/1.1 404 Not Found 1ms]

GEThttp://localhost/assets/adminlte/dist/css/adminlte.min.css
[HTTP/1.1 404 Not Found 4ms]

GEThttp://localhost/assets/plugins/jquery/jquery.min.js
[HTTP/1.1 404 Not Found 2ms]

GEThttp://localhost/assets/adminlte/dist/js/adminlte.min.js
[HTTP/1.1 404 Not Found 4ms]

Loading failed for the

Javascript not loading properly when deploy-url is set in Angular

0 Answers