We are running into an issue with properly displaying the pages for Angular routes served using Nginx. In our Angular project, our base href is "/dashboard". The project has two different routes pointing at "/dashboard/data-analysis" and "/dashboard/data-visual".
Here is my basic nginx.conf file:
server{
listen 80;
server_name localhost;
location /dashboard/ {
alias C:/Users/C123/Desktop/html/dashboard;
index index.html;
try_files $url $url/ /dashboard/index.html;
}
}
When I go on "localhost/dashboard/" or "localhost/dashboard/data-analysis", either pages will load the index.html from "C:/Users/C123/Desktop/html/dashboard/", but then fail to load "polyfill.js" "runtime.js" "style.js", etc. as defined in the <script> tag of the index.html.
Moreover Nginx attempts to load those files from "C:/Users/C123/nginx/nginx-1.16.1/html/" instead of my alias (C:/Users/C123/Desktop/html/dashboard).
Is there a way I can define within the "dashboard/" location block where it will read everything from the index.html of my alias? I do not want to define the root outside, or a secondary location block for ".js" files only either.
UPDATE (this solution worked for me):
server{
listen 80;
server_name localhost;
location /dashboard/ {
root C:/Users/C123/Desktop/html/
try_files $uri $uri/ /dashboard/index.html/
}
You are missing the root directive.
Also the try_files should try to load the file stated, or the index.html in the directory.
Not tested, but should work:
server {
listen 80;
server_name localhost;
location /dashboard/ {
root C:/Users/C123/Desktop/html;
try_files $uri $uri/index.html =404;
}
}
Edit:
If you are trying to access files in dashboard directory without specifying the word dashboard in your request, you can add a block for this to fallback to.
server {
listen 80;
server_name localhost;
# this will serve requests like http://localhost/runtime.js
location / {
root C:/Users/C123/Desktop/html/dashboard;
try_files $uri $uri/index.html =404;
}
# this will serve requests like http://localhost/dashboard/
location /dashboard/ {
root C:/Users/C123/Desktop/html;
try_files $uri $uri/index.html =404;
}
}
Keep in mind that when NGINX choosing the location context, it will take The longest match from the prefixed locations mentioned.