AngularJS Nginx and html5Mode

sample-nginx.conf

server {
    server_name yoursite.com;
    root /usr/share/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

It doesn't work for me. It always redirects to 127.0.0.1:8080/

nginx:

    location / {
        autoindex on;           
        root   share/nginx/html;
    }

    location /adm {
        alias share/nginx/html/dev2;

        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";

        try_files $uri$args $uri$args/ $uri/ /index.html =404;
    }

angularjs:

      $routeProvider
        .otherwise({
            redirectTo: '/adm/main2/'
        });

I ran into the same problem that @mato75 encountered. I was using try_files with alias as well. I had to rebuild Nginx with debug enabled to figure out what was going on. Anyway...

    location /adm/ { # trailing slash here
        alias share/nginx/html/dev2/; # and here as well

        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";

        try_files $uri$args $uri$args/ $uri/ /adm/index.html =404; # /adm/index.html and not /index.html
    }

Make sure the location has trailing slash as well as the aliased directory. And use /adm/index.html instead of just /index.html

Thank you.

This saved my day, thx.

Was banging my head on my desk trying to get this to work. If anyone is having path issues with static assets, be sure to declare your base tag above assets like css.

Hi guys !
Just some information to supplement. I had trouble making the configuration mentioned by our friend, had to do a restart of the settings for her always applied.
I used the following commands after the implementation of configuration in nginx.conf

- sudo nginx -t

• This command is used to check for problems in nginx configuration, when I tried to reload nginx me he was returning a failure, needed to run this command to test the settings.
    Reference: https://www.digitalocean.com/community/questions/service-nginx-restart-fail
• sudo service nginx reload
  to recharge the settings
• sudo service nginx restart
  stop restart the service nginx

Tks.

Awesome! This saved me a lot of time.

This is great and also saved me a lot of time. Well done!

Solve my problem on Angular 2

Thx @rudeb0t, you saved my day 👍

I'm running nginx locally with docker and needed to adjust the settings to this:

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
    }
...

The example from @jpduckwo for Docker setup worked for me.

Really helped me. Thanks 👍

Thanks @jpduckwo for the try_files and @mato75 for the expires and cache configurations. My finished config looks like this:

server {
    listen       80;
    server_name  localhost;


    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
    }


}

And my Dockerfile looks like this:

# Dockerfile
#

FROM nginx:1.11.3-alpine
MAINTAINER Kent Johnson <my [email protected]>

COPY dist/ /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

How can I configure my nginx that ignores #? I've added html5mode to my js file, but if I refresh the page when I'm in /home I get a 404 not found error from nginx and if I will add #/home in the URL everything will be okay. How do I fix this one?

@jpduckwo $args did the trick, thanks

@whaangbuu, nginx does not see the hash part, browsers never sends it. If you look into your logs, you won't see it.

@Whaangbuu, thats not an nginx issue, angular2 issue - refer the docs - change yours to PathLocationStrategy from HashLocationStrategy

A solução funcionou para mim também.

@kentoj Your configuration works like a charm. Thanks! I have built a docker image based on it -> https://hub.docker.com/r/zalari/nginx-html5/

Thanks @jpduckwo! and @ChristianUlbrich for the image

@jpduckwo @ChristianUlbrich, they are Savior.
Thanks so much.

@cjus Thank you!

What about two angular apps?
`

    listen       80;
    server_name  localhost;


    location /app1 {
        root /usr/share/nginx/app1;
        index index.html index.htm;
    }

    location /app2 {
        root /usr/share/nginx/app2;
        index index.html index.htm;
    }

`

What will be the nginx configs for two angular apps deployed on same server with html5mode? The above example is working fine for hashbang url's but not for the former one.

@psk11 This worked for me:

location /site0 {
    try_files $uri$args $uri$args/ /index.html;
    root   /var/www/static/site0/dist;
    index  index.html index.htm;
}

location /site1 {
    try_files $uri$args $uri$args/ /index.html;
    root   /var/www/static/site1/dist;
    index  index.html index.htm;
}

Thanks @jpduckwo, your solution works for me. I guess in gist there's no way to thumbs up.

@cjus this saves my time

Really Helped
Thanks

You guys saved me a lot of time, thank you!

Thanks @jpduckwo