CelsomTrindade CelsomTrindade - 10 months ago 87
AngularJS Question

AngularJS ui-router html5mode not working on reload

First of all, I've tried a bunch of different solutions to fix this problem, but none of them worked for me. See links below.

The problem:

Currently I can't use
with ui-router because it has a
Not Found
error. The only time it loads the page, is the first load. Each refresh or trying to access an especific
, there is this error:

The requested URL /Welcome was not found on this server.

My code

Currently I'm using
AngularJS 1.5.0
ui-router 0.2.15
. Note: I'm using a blank app with nothing more than 2 main states and 1 main state with a child state in an apache server.


<meta charset="UTF-8" />
<base href="/"></base>



server rewrite:

<ifModule mod_rewrite.c>
RewriteEngine on

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

RewriteRule ^ index.html [L]

What I tried

I was looking in a lot of topics/Questions trying to solve this. All of them points out to 3 possible solutions:

  • Use

  • Rewrite condition on server side;

  • No use of
    tag (hard to find, but there is some);

I tried all of them, following these links (and much more):

And others links.. But none of them work, always the same result. When I get a diferent error, it's this one:

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at admin@localhost to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

When I try to use the rewrite rule like this:

<Directory />
RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteRule ^ index.html [L]


After some comments, I managed to make it work, but only on the main state. When I'm on a child(nested) state, and try to refresh the page, I get this error:

Uncaught SyntaxError: Unexpected token <

Uncaught ReferenceError: angular is not defined

Resource interpreted as Stylesheet but transferred with MIME type text/html:

Example of my state:

.state('contact', {
views: {
'app': {
templateUrl: 'app/contact.html',
.state('service', {
abstract: true,
views: {
'app': {
templateUrl: 'app/service.html',
.state('service-teste', {
views: {
'service': {
templateUrl: 'app/service_test.html',

I got the error when I'm on the
state and refresh the page.

Answer Source

The way I solved this problem was changing some settings on the .htaccess file and also on the index.html, bu changing some paths.


<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

Note that the mod_rewrite had to be enabled on my apache server. By default it was disabled.


I had to change the path for my css files and add a / at the beggining. Like this:

<link rel="stylesheet" type="text/css" href="/dist/css/main.min.css">

I kept the other configs as usual.

$locationProvider.html5Mode(true); //In the router config file
<base href="/"> //On the index.html just before closing the head tag