Angular 8 + Nginx - failed to load resource

Question

I have an application written in Angular 8 that I'm serving on nginx. After the deployment I get an following error:

Failed to load resource: the server responded with a status of 404 ()

Additionally in the Dev Tools we can see such a message:

error: "404 Not Found
404 Not Found
nginx/1.12.0
message: "Http failure response for https://myUrl/app/assets/config/endpoints.json: 404 OK name: "HttpErrorResponse" ok: false status: 404 statusText: "OK" url: "https://myUrl/app/assets/config/endpoints.json"

What I didn't understand why is the response stating "OK"? But it's not the main problem. The main problem is that I can't load this endpoints.json file neither access any file located under the assets dir.

When I directly go to the URI:

https://myUrl/app/someFile.png

then it's visible, but if I try to reach

https://myUrl/app/assets or https://myUrl/app/assets/logo.png

then i get an 404 error page.

It's served from a docker container and I saw that all files are there so the structure is as follows in

/usr/share/nginx/html/

-/
-index.html
-assets/
-------config/
-------------endpoints.json
-------images/
-------------logo.png
-polifills.js
-favicon.ico

The app was build with the --prod flag and the base href flag --base-href ./ As I see the favicon is loading and all the scripts in the main dir work fine. The problem is related to the assets dir...

Here are my files: * nginx.conf

server {
listen       8888;
server_name  localhost;

location / {
  root      /usr/share/nginx/html;
  index     index.html index.htm;
  include   /etc/nginx/mime.types;
  try_files $uri $uri/ /index.html;
}

}

Enpoints service (which is trying to get this endpoints.json


private enpoints$: Observable<Endpoint>;
private readonly ENDPOINT_URL = './assets/config/endpoints.json';
  constructor(private http: HttpClient) {}

  public loadEndpoints(): Observable<Endpoint> {
    if (!this.enpoints$) {
      this.enpoints$ = this.http.get<Endpoint>(this.ENDPOINT_URL).pipe(shareReplay(1));
    }
    return this.enpoints$;
  }


Any suggestions?

thomasso thomasso · Accepted Answer · 2019-11-27T09:19:42

Just figured it out. The issue was related to my nginx configuration. I had to take the root path out of the location block so it's applicable to all locations. The official nginx pitfalls doc helped me here a lot.

Now my config file looks like that:

server {
  listen       8888;
  server_name  localhost;
  root      /usr/share/nginx/html;

  location / {
    index     index.html index.htm;
    include   /etc/nginx/mime.types;
    try_files $uri $uri/ /index.html;
  }

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

Although I think the second block isn't needed at all. I have to check it, and will reply.

Angular 8 + Nginx - failed to load resource

404 Not Found

1 Answers