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

Ask Question

Asked 3 years, 6 months ago

Modified 3 years, 6 months ago

Viewed 948 times

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CFSS Dashboard</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/images/dialog.png">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="/assets/adminlte/dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<app-root></app-root>

<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/adminlte/dist/js/adminlte.min.js"></script>

</body>
</html>

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 <script> with source “http://localhost/assets/plugins/jquery/jquery.min.js”. cfss-dashboard-ui:17:1
Loading failed for the <script> with source “http://localhost/assets/adminlte/dist/js/adminlte.min.js”.

edited May 21, 2022 at 9:33

asked May 21, 2022 at 9:20

Kabilesh

1,0126 gold badges25 silver badges50 bronze badges

1

You need to use either --base-href or --deploy-url, but not both simultaneously, check the difference here. You can check the proper nginx config to serve the angular app under an URI prefix here. Of course your angular router should be able to work with the prefixed routes too.

Ivan Shatsky
– Ivan Shatsky

2022-05-21 09:36:09 +00:00
Commented May 21, 2022 at 9:36

Add a comment |

0 Your Answer

Sign up or log in

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Collectives™ on Stack Overflow

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

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked