Argthtjtr

I added the og tags required to show the rich content while pasting the URL anywhere on social media. It only works when the route is:

https://example.com

but does not work when other components route is attached to it:

https://example/register

it gives 404 error with this URL whereas it opens this URL on the browser perfectly.

Also,

Curl https://example.com/ (Works)

Curl https://example.com/path (404)

Head section from both the URL(s) are same and are visible when viewing the page source. But somehow, the facebook debugger or any other social media crawler, for that matter, ignore the head tag from /register route but picks the information from /

I have been searching for solutions on this forum and many others. I concluded that people are saying something about Angular Universal but somehow I am not convinced that that mine is the case similar to those. If so, which solution to implement.

Thanks to filipesilva from https://github.com/angular/angular-cli/issues/5113 for pointing out the solution at: https://angular.io/guide/deployment

Problem was with the .htaccess redirection. I knew that index.html fallback was necessary so I implemented the below solution:

RewriteEngine On

RewriteCond %{HTTPS} !=on

RewriteCond %{REQUEST_FILENAME} index.html

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

But it wasn't very helpful for some reason. Browser was not giving error but curl was. So I have changed the .htaccess file content to:

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

right from https://angular.io/guide/deployment & works like a charm.