CODEWITHSUNDEEP
angularnginx
Manos Kounelakis
Manos Kounelakis

Reputation: 3161

Reverse proxy for angular returns 404 nginx

I have started angular development.What I want to do is to reverse proxy all requests from localhost/angular to localhost:4200

This is my current configuration file for nginx

angular.conf

server {
    listen 80;
    listen [::]:80;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    #root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name localhost;

    location /angular/ {
        proxy_pass http://localhost:4200/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        #try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}

}

When I try to go to localhost/angular the browser will load the angular html page(The title of the app shows app)

However when I open up the console I see that 5 scripts cannot be found(404 status)

Any ideas what I might have done wrong?

Also let me know if that question is not meant for stackoverflow

Upvotes: 1

Views: 2737

Answers (1)

Tommy
Tommy

Reputation: 2453

You probably missed to add base-href to signal your files are located in another folder.

If you are using Angular CLI run your build with ng build --base-href /angular/. Additionally add <base href="/angular/"> to your index.html.

Upvotes: 2

Related Questions