Question 189447 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress in Angular (SSR) app return angular 404 page – Nginx

I have WordPress blog in an Angular app but when I go to the blog url it return the angular 404 page.

The blog is configured as example.com/discover
The error happens when visiting any other blog post as well for example

example.com/discover/how-it-works

However when I hard refresh the page it load the content.

Here is my nginx config

server {
        server_name  domain.com;

        # WordPress site
        location /discover {
                alias /usr/share/nginx/html/blog;

                index index.php;
                if (!-e $request_filename) { rewrite ^ /discover/index.php last; }

                location ~ .php$ {
                        if (!-f $request_filename) { return 404; }

                        fastcgi_pass  unix:/var/run/php-fpm/www.sock;
                        include       fastcgi_params;
                        fastcgi_param SCRIPT_FILENAME $request_filename;
                }
        }


        # Website - Angular SSR Application
        location / {
                proxy_pass http://127.0.0.1:4000;
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }



    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name  domain.com;
    listen 80;
    return 404; # managed by Certbot
}

How can I configure the app so that when user visit the blog it will serve from the WordPress.

Tags:

2

Answers


  1. 0

    Whats happening here is that all requests are being routed to http://127.0.0.1:4000

    # Website - Angular SSR Application
location / {
    proxy_pass http://127.0.0.1:4000;
}

    You should find a way to exclude /discover from here.

    One way of doing so could be to just reorder your file so location / is on top of location /discover, that way you first tell your server to reroute all requests to http://127.0.0.1:4000 and then you override that by saying /discover should be handled differently.

    Other options might include using regular expresions as described here

    Login or Signup to reply.
  2. 0

    The issue you’re experiencing is likely due to the Angular router taking over the routing for your WordPress URLs. When you hard refresh the page, it bypasses the Angular router and the request is sent directly to the server, which is why you’re able to see the WordPress content.

    To fix this, you need to tell the Angular router to ignore the routes that should be handled by WordPress. You can do this by adding a wildcard route in your Angular routing module that will catch all unknown routes and redirect them to the server.

    import { NgModule } from ‘@angular/core’;
    import { Routes, RouterModule } from ‘@angular/router’;

    const routes: Routes = [
  // your existing routes here
  // ...
  
  // wildcard route
  { path: 'discover', loadChildren: () => import('./path-to-your-wordpress-module/wordpress.module').then(m => m.WordpressModule) },
  { path: 'discover/:path', loadChildren: () => import('./path-to-your-wordpress-module/wordpress.module').then(m => m.WordpressModule) },
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

    You also need to make sure that your server is correctly configured to handle these routes. In your Nginx configuration, the location /discover block should handle all requests that start with ‘/discover’, but you might need to adjust the rewrite rule to correctly handle subpaths.

    location /discover {
    alias /usr/share/nginx/html/blog;

    index index.php;
    try_files $uri $uri/ /discover/index.php?$args;

    location ~ .php$ {
        if (!-f $request_filename) { return 404; }

        fastcgi_pass  unix:/var/run/php-fpm/www.sock;
        include       fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $request_filename;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search