Bad base path when browser refreshes, ngView breaks

angularjs

Solution

This may be related to a nasty issue that showed up during Angular 1.1.5 and is a bug in the core library. A solution that has worked for many is to add the following tag to your index.html head.

If your application is running at the root of your domain.

<head>
  ...
  <base href="/"></base>
  ...
</head>

Or if your application is running in a subdirectory, specify that subdirectory (e.g. 'myapp'):

<head>
  ...
  <base href="/myapp/"></base>
  ...
</head>

Additionally, you may also try a new set of rewrite rules. This configuration has worked for many ui-router users.

<IfModule mod_rewrite.c>
  RewriteEngine on

  # Don't rewrite files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Rewrite everything else to index.html to allow html5 state links
  RewriteRule ^ index.html [L]
</IfModule>

Problem

When I access my page from the index and start browsing everything works fine, but when I am on a route other than `/` for example in `/details/123` and I refresh the page(I have URL rewriting configured) the route is not properly set. It means, when I check the location path when browsing normally from the index and I am on `/details/123` the location path is `/details/123` as expected but when I refresh the page and I am still on `/details/123` the location path changes to `/123` causing ngView to display the wrong view. I am using html5 mode and Angular v.1.1.5 UPDATE: I created a simple example here to illustrate the problem. I don't have any special setup, I don't think is a server issue. I have the same problem with a different app in python where the redirection is done inside the application. The `.htaccess`: ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*) /index.php </IfModule> ```

Original source