CODEWITHSUNDEEP
angularjshtmlangular-ui-router
celsomtrindade
celsomtrindade

Reputation: 4671

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 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:

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.

Upvotes: 2

Views: 1620

Answers (1)

celsomtrindade
celsomtrindade

Reputation: 4671

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

Upvotes: 2

Related Questions