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]