Angular behind AWS load balancer with Nginx: Refused MIME type

Question

I am trying to deploy an angular application to AWS ECS by using the following image based on nginx:

FROM nginx:1.21.0-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./dist/TreVR-Admin /usr/share/nginx/html

The config file for nginx is the following:

events{}

http {

    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name _;
        root /usr/share/nginx/html;
        index index.html;

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

The problem is the following:

My app is deployed to AWS and is part of a target group of a load balancer with the rule /admin*. However, the app in this way won't be reachable because it doesn't have any path starting with /admin. In order to make it work so, I added the BASE_HREF in my module as follows:

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true },
    { provide: APP_BASE_HREF, useValue: '/admin/app'}
  ]

This way the app is now reachable from outside the network at path http://[aws-lb-url]/admin/, however when I enter this address the app appears to be blank, and that is because it's trying to find some static files without adding the /admin prefix, in fact from the console I can see it receives a 503 when trying to reach [aws-lb-url]/main.affd1277a903a3be184d.js.

In order to solve this, I've read that one can use deployUrl, inside angular.json, to tell angular where static files will be deployed, adding:"deployUrl": "/admin/" under build>options.

This way the 503 error goes away, and now comes my current situation... The app is correctly accessible and static files are all prefixed with /admin, however, the page remains blank and console says:

Did not parse stylesheet at 'http://[aws-lb-url]/admin/styles.e2c1386ae8c4ef235c20.css' because non CSS MIME types are not allowed in strict mode.

[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (runtime.4fdc2b3a7bc1a0053176.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (polyfills.e569bb8dde4f7004e177.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (scripts.20a5fef0ca071d6f938f.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (main.63d270b9b9b4e693ab14.js:1)

It seems those files are not css or js, but instead the main page, in fact if I try to curl the url at http://[aws-lb-url].elb.amazonaws.com/admin/scripts.20a5fef0ca071d6f938f.jsI get this:


  
  TreVRAdmin

Angular behind AWS load balancer with Nginx: Refused MIME type

0 Answers