Angular HTML5 mode with WordPress, refreshing the page leads to 404

Question

I am using routing in my angular app to load urls. This works perfectly when I click links from inside the app, but when I try to go directly to an app url, the server returns a 404.

Here is my code:

myApp.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
        .when('/booking', {
            templateUrl: 'wp-content/themes/myapp/pages/begin.html',
            controller: 'mainController'
        })
        .otherwise({
            redirectTo: "/"
        });
});

My header has <base href="/myapp/"> at the top, within the head tags.

I have read that this is an apache rewrite issue, so I tried modifying my .htaccess to include the following:

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

However, this does not seem to make a difference other than redirecting to the 404 page. I am using WAMP and localhost.

How do I make it so that refreshing the app or linking directly to the page will work?

server have to send to client index.html (or php) to url underneith, (not redirect), unless the real file is exists. — YOU, Apr 18 '15 at 00:34
some similar post - http://stackoverflow.com/questions/28224012/angular-js-routes-not-working-on-wamp — YOU, Apr 18 '15 at 00:37

score 0 · Answer 1 · answered Apr 30 '15 at 00:21

Try this

$routeProvider
  .when('/', {
    templateUrl: 'wp-content/themes/myapp/pages/index.html',
    controller: 'indexController'
  })
.when('/booking', {
        templateUrl: 'wp-content/themes/myapp/pages/begin.html',
        controller: 'mainController'
    })
    .otherwise({
        redirectTo: "/"
    });

score 0 · Answer 2 · answered Apr 30 '15 at 13:32

Did you changed your WP permalinks?

In my case changing the Permalinks Settings to

/blog/%postname%/

or

/%postname%/

fixed it.

Also, please make sure to declare your base href at the top of the <head> section in your index.* file. I recommend using this script:

<base href="<?php $url_info = parse_url( home_url() ); echo trailingslashit( $url_info['path'] ); ?>">

Angular HTML5 mode with WordPress, refreshing the page leads to 404

2 Answers2