AngularJS html5Mode refresh fails

Question

So this is my router:

var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
    $route.
    when('/', {
        redirectTo: '/index'
    }).
    when('/index', {
        templateUrl: './includes/templates/index.php',
        controller: 'indexCntrl'
    }).
    when('/register', {
        templateUrl: './includes/templates/register.php',
        controller: 'indexCntrl'
    }).
    otherwise({
        redirectTo: '/index'
    });

    $location.html5Mode(true);
}])

I have html5 mode true, so now the URL have not a # in it.

If I go to mysite.com/ it redirect`s me to /index but when I reload the page (f5) or go to mysite.com/index I get a 404 error.

Is there a way to fix this? Or just don`t use html5 mode?

nanobar · Accepted Answer · 2014-07-09 14:54:57Z

1

There is no way to fix this without running your project from a server and doing a little special work to route requests. It involves these steps:

Catch static file requests (e.g. image files)
Send other requests to your index.html to be handled by your router

For example using a nodeJS express server it would look something like this:

// Capture real static file requests
app.use(express.static(__dirname + '/public'));

// All get requests not captured above go to the client.
server.get('*', function (req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

Note this is not an Angular specific problem. The same steps have to be made for any client side app using html5 pushState.

edited Jul 9, 2014 at 14:54

answered Jul 9, 2014 at 14:49

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DazDylz Over a year ago

Is there a .htaccess solution?

Raphael Müller Over a year ago

@user3144435 yes, there is. i'll provide you one

Raphael Müller · Accepted Answer · 2014-07-09 15:13:35Z

0

For Apache use in your .htaccess:

RewriteEngine On

RewriteBase /

RewriteRule ^index.php - [L]

#your static data in the folder app
RewriteRule ^app - [L]

#everything else
RewriteRule ^(.*)$ index.php?para=$1 [QSA,L]

EDIT:

The whole requested url is passed as para to the php file. You can further process this in the php skript with $_GET['para'] if needed.

Apache rewrites your request and delivers the file which match the rules.

i.e. request:

http://somehost.com/blabla -> index.php?para=blabla
http://somehost.com/app/mainapp.js -> app/mainapp.js

edited Jul 9, 2014 at 15:13

answered Jul 9, 2014 at 15:02

Raphael Müller

2,2002 gold badges16 silver badges20 bronze badges

2 Comments

DazDylz Over a year ago

Works, thank you. So AngularJS reads 'para'. Where did you find that?

Raphael Müller Over a year ago

No, AngularJS doesn't reads para. para is passed as argument to the file. if you have a php script, you can read the value from para with $_GET. I'll fix my answer.

rvazquez · Accepted Answer · 2016-08-08 03:01:37Z

0

Add this in .htacces or .conf on module directory AllowOverride All usuallity be None

answered Aug 8, 2016 at 3:01

rvazquez

1

Collectives™ on Stack Overflow

AngularJS html5Mode refresh fails

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related