nginx with angular 4

Question

i'm having trouble for my config here is how i want to work mydomain.com -> redirect to correct language : mydomain.com/en/ or mydomain.com/fr/

I have two angular build with i18n, one for each language. the redirection with language works, but direct links with angular 2 not : if i go to mydomain.com/fr/connect -> 404

Here is my nginx configuration

map $http_accept_language $lang {
   default en;
   ~*^fr fr;
}

server {
    listen 80;
    server_name domain.com www.domain.com;
    root /usr/share/nginx/html;
    index  index.html index.htm;
    location = / {
        rewrite "^.$" /$lang/ break;
    }
    location = /$lang/ {
        try_files $uri $uri/ /index.html;
    }
}

if some of you know this, i'm just stuck there, i'm a nginx begginner :/

Your problem is that your route yourapp/fr/connect is not an actual route like you are used to with, for instance, PHP servers. It's actually a way for Angular to fetch the corresponding templates. So you won't have access to it by typing the url. I use the hashLocationStrategy as a workaround : RouterModule.forRoot(appRoutes, { useHash: true }) — user4676340
– user4676340, Commented Jun 30, 2017 at 9:31
Just trying to do that : A quick and easy way is to configure your server to load the home page when any URL of the form yourhost* is requested. This could be the solution no ? — mcfly
– mcfly, Commented Jun 30, 2017 at 9:42

Richard Smith · Accepted Answer · 2017-06-30 10:33:07Z

4

The second location block is wrong. You probably need everything to be directed to index.html (other than resource files). You might try something like this:

map $http_accept_language $lang {
    default en;
    ~*^fr fr;
}

server {
    listen 80;
    server_name domain.com www.domain.com;
    root /usr/share/nginx/html;
    index  index.html index.htm;
    location = / {
        return 302 /$lang/;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
}

answered Jun 30, 2017 at 10:33

Richard Smith

50.3k7 gold badges97 silver badges96 bronze badges

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

2 Comments

mcfly Over a year ago

redirection to language works but when i access domain.com/fr/connect with a direct link having a 500 internal server error

mcfly Over a year ago

oh i'm idiot just had to correct a little bit try_files $uri $uri/ /index.html; => try_files $uri $uri/ /$lang/index.html; Thanks a lot

Collectives™ on Stack Overflow

nginx with angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related