0

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/
      }
chrisgopherrong
  • 23
  • 1
  • 6
  • Look at the access log, but it seems that the application is **not** using the base href you have defined. The `location /dashboard/` block can only define the location of files for URIs that begin with `/dashboard/`, if the application does not use the correct base href for its `.js` files then it is a problem with the application and not Nginx. – Richard Smith Apr 28 '20 at 06:10

2 Answers2

1

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.

JohnnyJS
  • 1,320
  • 10
  • 21
  • Just added those exact changes and seems to cause the same error. It is loading the proper index.html, but then attempts to load the "runtime.js", "polyfill.js", etc. linked in that file from the nginx/nginx-1.16.1/html instead of the html folder defined in my root. – chrisgopherrong Apr 28 '20 at 13:56
  • So `runtime.js` does not reside in: `C:/Users/C123/Desktop/html/dashboard` ? – JohnnyJS Apr 28 '20 at 14:03
  • C:/Users/C123/Desktop/html/dashboard contains that file (runtime.js) and the other files that index.html is trying to call (polyfill.js, etc.). – chrisgopherrong Apr 28 '20 at 14:07
  • @chrisgopherrong I have made an edit to the answer, to match for this requirement. – JohnnyJS Apr 30 '20 at 08:39
  • sorry for the super delayed reply - we ended up figuring out the solution and I haven't logged in since. Your answer works so I marked it as an accepted answer, but in our case, we actually couldn't use the "location /" since this was a shared config file amongst other apps (we didn't want other apps to fall back on ours). Updated my question with the solution we found – chrisgopherrong Aug 18 '20 at 23:40
1

You could probably set baseHref and deployUrl in in angular.json. You can set it in projects -> $projectName -> architect -> build -> options.

"deployUrl": "/dashboard/",
"baseHref": "/dashboard/",

Please see answer for more context on what these params are for.

alegria
  • 1,290
  • 14
  • 23