404 return doesn't work when refresh with nginx and angular

Question

I'm using nginx with Angular and want to return a 404 when a user go to page /error404 I did the redirection with angular routing module with this :

{ path: 'error404', component: PageNotFoundComponent},
{ path: '**', redirectTo: 'error404', pathMatch: 'full'}

and to return the 404 with nginx I try this in the conf file :

error_page 404 /error404;
location  /error404 {
 internal;
}

or just :

error_page 404 =301 /error404;

When I go directly to /error404 I get a 404 not found and not my page but when i use the angular redirection with random url i go well on the /error404 and print my page

score 2 · Answer 1 · answered Nov 14 '18 at 18:37

Try to add this information below:

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

        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

score 0 · Answer 2 · answered Jul 07 '17 at 08:34

0

Angular router does not redirect to an url but to a given component.

You should create a component to handle 404 pages, it'll also save webserver load by not requesting it.

see this for further information : https://angular.io/guide/router#wildcard-route

answered Jul 07 '17 at 08:34

Gramatiik

122
1
11

But it's not what i did with this : my component to handle 404 { path: 'error404', component: PageNotFoundComponent} and this to redirect { path: '**', redirectTo: 'error404', pathMatch: 'full'} ? – Baptiste Goudey Jul 07 '17 at 09:04
I tries to redirect with the `hashUrl` so you will end up with a route like : `http://your.server/#/error404` – Gramatiik Jul 07 '17 at 09:06
Here is the problem you are facing :) https://stackoverflow.com/q/40150393/7376078 – Gramatiik Jul 07 '17 at 09:09
Sorry I don't see how it can help me :( My problem is when I go directly to /error404 i have a 404 not found nginx but when i go to a random url of my website the redirection to /erro404 work well and print my page – Baptiste Goudey Jul 07 '17 at 12:07
Can you log me the two different Urls please. The one driven by angular and the other driven by nginx. – Gramatiik Jul 07 '17 at 12:12
When I put a random url like this: [link]http://frontv3.v2preprodhg.com/erro it go to my error404 but when you go to [link]http://frontv3.v2preprodhg.com/error404 it print a 404 not found nginx(now too many redirection caus i did some test ^^) – Baptiste Goudey Jul 07 '17 at 12:31
Maybe try to leave nginx configuration empty, since you use the HTML5 history mode, all routes should be mapped to your app... However, i don't use Nginx in my production websites so i wont be able to helpe more :/ – Gramatiik Jul 07 '17 at 12:58
Without config it's work but I need to do the nginx config to return the 404 status of the error page :( Thanks anyway – Baptiste Goudey Jul 07 '17 at 13:04
I guess you can just change the status header to 404 in nginx configuration and then redirect to the `PageNotFoundComponent` by its url, this way, headers are correct, html5 history is preserved and the headers are good :) – Gramatiik Jul 07 '17 at 13:12
Umm I did it in the nginx config i guess with : "error_page 404 /error404; location /error404 {internal;}" but it's looks like nginx doesn't find the component :/ – Baptiste Goudey Jul 07 '17 at 13:28

404 return doesn't work when refresh with nginx and angular

2 Answers2