Hide "/angular/" in URL and use .htaccess to rewrite if the URL has a fragment identifier (#)

Question

I have site setup in wordpress as root folder like /wordpress and one angular site setup in sub folder /wordpress/angular.

Currently if user visits url like example.com/wordpress/sample-page, it displays wp page and if visits like example.com/wordpress/angular/#/sample-page or example.com/wordpress/angular/#/parent-page/child-page, it displays angular page.

After #/, whatever it is, it should stay on angular page. Currently it is staying, but angular in URL should not be shown

I want to remove angular from url if user visits angular page.

So, I put .htaccess file in wordpress folder like this

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wordpress/
RewriteCond %{REQUEST_URI} !(.*)angular
RewriteRule ^(.*)$ angular/$1 [L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

Now if I visit a URL like example.com/wordpress/#/any-url, it should stay on angular' page but not working.

I guess I need to check if url contains #, then make it redirect to angular folder. As it is a special character, how to make some condition on above code.

I am taking ref from

https://stackoverflow.com/questions/6795134/htaccess-rewrite-url-remove-subdirectory

https://stackoverflow.com/questions/3220377/htaccess-redirect-if-url-contains-a-certain-string

I am not much expert on htaccess config. So any help will be appreciated.

Answer 1

I would say that exactly what you want to accomplish is not possible. Here is some useful information for you.

First off: # and whatever comes after is never sent to the web server, and therefore .htaccess doesn't have access to read it. # is only used by the client (the web browser), whatever comes after it can be read by the browser and javascript however.

If you still want the wordpress site under /wordpress/ to work normally, you CAN NOT .htaccess rewrite /wordpress/#/sample-page URLs to show content as if the user visited /wordpress/angular/#/sample-page

If you want to "hide" angular/ for the user when the user is at the url, that is best done with javascript. If this is for SEO purpose, google would still see and index the /angular/ url, if you don't want that, you would have to come up with some completely other solution.