CODEWITHSUNDEEP
angularnginxnginx-location
chrisgopherrong
chrisgopherrong

Reputation: 23

Nginx and Angular Routing (can't find .js files)

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/
      }

Upvotes: 0

Views: 4084

Answers (2)

alegria
alegria

Reputation: 1482

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.

Upvotes: 1

JohnnyJS
JohnnyJS

Reputation: 1472

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.

Upvotes: 1

Related Questions