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

4 Views

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:

Read More
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?

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. 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: "/"
    });

  2. 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'] ); ?>">