Angular 4 - Nginx / Refresh shows bad page

Question

I have an Angular 4 application deploy on a remote server with Nginx, and accessible with this address: http://xx.xx.xx.xx/app. The app works well, I can navigate in my website but when I refresh one page, for example http://xx.xx.xx.xx/app/page1, it displays the index.html page of nginx.

Nginx's pages are located in /usr/share/nginx/html, and my app's pages are located in /var/www/app.

nginx.conf

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;                                                */

        location /app {
            root /var/www;
            try_files $uri $uri/ /index.html;
        }
    }

It seems that the line root /var/www is not taken into account during a refresh.

I heard something about a bug with try_files, and it seems that I need to add a rewrite somewhere. Thanks for help.

try with something like this: location ~ ^/app/(.*)$ instead of /app . This ensures that it is matching on any subpages not only /app — eesdil
– eesdil, Commented Aug 8, 2017 at 10:16
Did you try to change it to root /var/www/app; or try_files $uri $uri/ /app/index.html;? — Poul Kruijt
– Poul Kruijt, Commented Aug 8, 2017 at 10:28
@eesdil Thanks for suggestion but it doesn't change anything. — Benjamin Lucidarme
– Benjamin Lucidarme, Commented Aug 8, 2017 at 11:37
@PierreDuc Your second suggestion doesn't work. But the first is more interesting. The refresh works well now, but when I go to my website, I am redirect on my app directly, and I don't want that. So I tried to write only root /var/www; but the behaviour come back as before... — Benjamin Lucidarme
– Benjamin Lucidarme, Commented Aug 8, 2017 at 11:50
You should change to location /app/ (the extra slash). And I guess you can disregard my first comment — Poul Kruijt
– Poul Kruijt, Commented Aug 8, 2017 at 11:58

Faly · Accepted Answer · 2017-08-08 10:15:34Z

3

Try to add this in your AppModule:

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    // ...
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    // ...
})
export class AppModule {}

answered Aug 8, 2017 at 10:15

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benjamin Lucidarme Over a year ago

Well... That pretty weird, the URL is little bit impact due to the /#/ but it seems to be invisible for the user. Could you explain how does it works? Thanks

Faly Over a year ago

You can find more explanation here: stackoverflow.com/questions/35284988/…

Collectives™ on Stack Overflow

Angular 4 - Nginx / Refresh shows bad page

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related