URL rewrite with htaccess gets 404 error - AngularJS html5 mode

Question

Angular js page refresh 404 error after removing # and ! from URL

I working on an angular(1.7.5) project, in which I want to remove # and ! from the URL, for that, I use the below code

myApp.config(['$locationProvider', function ($locationProvider) {
     $locationProvider.html5Mode(true);
}]);

and added base tag in index.html in the root folder

<base href="/myApp/">

and .htaccess file

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

finally, I removed the # and ! from the URL, but the issue is when I refresh the page or open the same URL in new tab the page get 404 error,

http://localhost/dev/ ----- works fine

but

http://localhost/dev/login ----404 error 

I dont know how to resolve the issue help me thank you.

Answer 1

Try to modify the .htaccess rules like this :

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.php [L]

Answer 2

You need to modify your .htaccess. The problem is that your current rules only forward the first path in the URL. Instead, you need to have it forward all nested paths.

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]