NGINX and Angular 2

Question

My current app users routes like this /myapp/, /myapp//, /myaapp/dept/

My app is currently deployed in an internal http server with NGINX. The other server that accepts external traffic, also runs NGINX and forwards it to the internal server.

I have add baseref=/myapp to the index.html as per documentation

If the user goes to http://www.myexternalserver.com/myapp, the app works perfectly. If the user is inside the page and clicks on an internal link like http://www.myexternalserver.com/myapp/myparameter, it works. The url in the browser changes, the page is displayed as intended. I am guessing it's processed by Angular 2.

Unfortunately when a user types in the url directly: http://www.myexternalserver.com/myapp/myparameter, I get a 404 error made by NGINX.

I think I have to configure NGINX settings but I don't know how should modify NGINX's config or what to put in the sites-available/default file/

I believe no one knows how to modify your config, since you didn't show it to us. — VBart
– VBart, Commented Aug 17, 2016 at 10:33

Tyler Berry · Accepted Answer · 2016-08-18 03:51:42Z

44

I just had this same issue and found a solution. My base href is "/", however.

Below is my nginx.conf:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  mysite.com www.mysite.com;
        root /usr/share/nginx/html;

        location / {
            try_files $uri$args $uri$args/ /index.html;
        }
    }
}

edited Aug 18, 2016 at 3:51

answered Aug 18, 2016 at 3:09

Tyler Berry

4965 silver badges5 bronze badges

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

4 Comments

Francis Zabala Over a year ago

This answer lead me to the another question. This is for the server behind NGINX, hosting the Angular files.

Andrew Lobban Over a year ago

This helped as I was doing both URL Rewriting as well as Reverse Proxy. So what I did was use one location block to the root "/" of the app and another location block for "/api/" reverse proxy.

Nick N. Over a year ago

Does anyone know how to configure this, if you don't want your server_name to be hard-coded? I am using docker for example and it should work for localhost as well as for the production url.

Eugene Lebedev Over a year ago

@nick-n yes, use localhost

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

I was also having problems here, this is now contemplated in the angular docs: https://angular.io/guide/deployment

NGinx: use try_files, as described in Front Controller Pattern Web Apps, modified to serve index.html:

try_files $uri $uri/ /index.html;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 20, 2017 at 8:20

David Pascoal

1,4413 gold badges21 silver badges27 bronze badges

Comments

mikhail · Accepted Answer · 2017-04-28 04:50:09Z

I had the same issue with a subdomain at a site hosted with HostGator shared hosting. It appears it's running Apache 2.2.31.

Searching around eventually led me to "Apache Directives", which led me to "Custom Error Responses".

I was able to fix my issue by creating a .htaccess file in my subdomain folder with the following line in it:

ErrorDocument 404 /index.html

Though looking at the debug tools, I'm still getting a 404 code returned even though it succeeds.

UPDATE:

Was able to fix the 404 issue by changing my .htaccess to the following:

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

Now I'm properly getting redirected to index.html and code is 200.

Balkrishna · Accepted Answer · 2018-08-16 06:17:58Z

This is what my working configuration look like, slightly different than accepted answer. My project located in folder /usr/share/nginx/html/myapp and index.html base path has /myapp/ as base url.

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


  location / {
    try_files $uri$args $uri$args/ $uri/ /myapp/index.html =404;
  }

}

Collectives™ on Stack Overflow

NGINX and Angular 2

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related