Angular - Nginx rewrites domain/foo to angular root but not domain/foo/bar

Question

Trying to move from Apache to Nginx using Angular JS with a Laravel backend.

The front and back ends are completely independent of each other, as in var/www/angular and var/www/laravel. They are served from the same domain - mysite.com (angular) and laravel API routes got through mysite.com/api

I've got everything working including html5mode and browser refresh for front-end routes like mysite.com/foo

The problem is, refreshing or manually entering mysite.com/foo/bar does not work. Instead the html is served without css, meaning that it is not being routed to angular.

Any advice is greatly appreciated.

Here is my current Nginx vhost config:

server {
listen 80 default_server;
server_name default;
root /home/forge/default/laravel/public;

# FORGE SSL (DO NOT REMOVE!)
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# ssl_certificate;
# ssl_certificate_key;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

index index.html index.htm index.php;

charset utf-8;

location / {
    root /home/forge/default/angular/dist;
    try_files $uri $uri/ /index.html;

}

location /lvl/ {
    try_files $uri $uri/ /index.php?$query_string;
}

location ~ \/lvl\/index\.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;

    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;

    include fastcgi_params;
    include fastcgi.conf;
    #This specifically sets so the /api/ portion
    #of the URL is not included
    fastcgi_param SCRIPT_FILENAME $document_root/index.php;
    fastcgi_param PATH_INFO $fastcgi_path_info;
    #fastcgi_param ENV production;
}

location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt  { access_log off; log_not_found off; }

access_log off;
error_log  /var/log/nginx/default-error.log error;

error_page 404 /index.html;

location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php5-fpm.sock;
    fastcgi_index index.php;
    include fastcgi_params;
}

location ~ /\.ht {
    deny all;
}
}

EDIT 1: Per raam86's comment i tried a version of the rewrite he reffered me to with the same exact results, problem still persists. Here are the edits i made:

location / {
    root /home/forge/default/angular/dist;
    try_files = $uri @missing;
}

location @missing {
    rewrite  ^/$  /index.html  last;
}

try this http://stackoverflow.com/questions/12924896/rewrite-all-requests-to-index-php-with-nginx — raam86, Dec 03 '14 at 21:00
i tried a very similar answer already with an @rewrite rule referenced but hat no luck. Not sure if the rewrite rule was correct though... — Nolan Lawrence, Dec 03 '14 at 21:10

score 1 · Accepted Answer · answered Dec 04 '14 at 04:58

Turns out the root of the problem was that grunt wasn't applying the base / before the style declarations, even though i had

<base href="/">

set in the head of my index.html

The solution was a simple one... simply move the base tag to the top of the head section instead of the bottom!

Angular - Nginx rewrites domain/foo to angular root but not domain/foo/bar

1 Answers1