current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.2 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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 html5mode 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 URL, there is this error:

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

My code

Currently I'm using AngularJS 1.5.0 with 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.

html:

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

.config:

$locationProvider.html5Mode(true);

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]
</ifModule>

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 base tag;
  • Rewrite condition on server side;
  • No use of base 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]
</Directory>

Edited:

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', {
    parent:'app',
    url:'/Contact',
    views: {
        'app': {
            templateUrl: 'app/contact.html',
        }
    }
})
.state('service', {
    parent:'app',
    abstract: true,
    url:'/Service',
    views: {
        'app': {
            templateUrl: 'app/service.html',
        }
    }
})
    .state('service-teste', {
        parent:'service',
        url:'/Test',
        views: {
            'service': {
                templateUrl: 'app/service_test.html',
            }
        }
    })

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

share|improve this question
    
What does it say in the server error log? Are you sure you have mod_rewrite installed and working? – Daniel Beck Jan 26 at 17:23
    
Have you tried to use the base tag this way <base href="/"> without the ending tag. Could you please provide some code from your index.js file? – t3__rry Jan 26 at 17:25
    
@t3__rry Yes I did, nothing happened. Same errors. – CelsomTrindade Jan 26 at 17:28
    
@CelsomTrindade I had the same issue few months ago and solved it thus: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> – t3__rry Jan 26 at 17:30
    
@DanielBeck I had it enabled, but turns out I had to change AllowOverride None to AllowOverride All. Now the main states are working, but not the child state. For example, service-test is child of service, but when I reload on that page, I got this error: Uncaught SyntaxError: Unexpected token < - angular is not defined – CelsomTrindade Jan 26 at 17:33
up vote 1 down vote accepted

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

.htaccess

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

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

index.html

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
share|improve this answer
    
Thank your for your answer. I'm currently on a IIS server. That .htaccess rule in not work, but I think i need to write something similar in the web.config file. EDIT: found a related issue on a IIS server: stackoverflow.com/questions/12614072/… – hsantos Sep 29 at 15:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.