Angular HTML5 mode, Wordpress, Rewrites, Apache and You

Question

Haven't found anything on this yet, but has anyone found out the right way to turn HTML5 mode on and have it work correctly with wordpress and it's current rewrites?

Wordpress rewrites:

<IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /

      #Current wordpress rewrites
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} !index
      RewriteRule (.*) /index.php [L]
</IfModule>

And of course the apache HTML5 mode rewrites

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) /index.html [L]

I know their EXTREMELY similar but I'm having a hard time getting HTML5 mode to work on refresh while having a Angular APP embedded into a wordpress / php page.

Starboy · Accepted Answer · 2014-12-31 10:23:44Z

After hacking on this, I came to a pretty hacky answer, YMMV:

RewriteRule ^search/([^/]+)$ http://www.example.com/search/#/$1 [NE,L]

In my current situation my app lives in example.com/search/

So your telling me you turned on HTML5 mode to essentially revert it back with a redirect?!

Yes.

Are you drunk?

Possibly, but I do have a couple reasons on why;

I can't redirect wordpress back to index.html, because well it will fail horribly.
What's the next best thing? A hash, because when html5mode is off it works perfectly fine!
So why even turn HTML5 mode on? Well I had to, I have a couple things going on in the background that I need crawlers to read etc.
Crawlers? Why not just use prerender.io or another framework? 1-Money 2-Resources 3- Can we start coining the term... Instead of throwing money at a problem, let's throw a framework at it.

I'm not going to accept my answer because well it's a hack, but I know alot of people are faced with this after doing some searching. Hopefully someone / we can come up with a better solution to this!

Mike Averto · Accepted Answer · 2015-03-03 00:05:12Z

0

This seems to work just fine for me with WP. This will skip to the actual resource if there is one and to index.php if not.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.php [L]

Sample route which would render service if the url was /service or /home if the url was anything else.

$routeProvider
    .when("/service", {
        controller: "ServiceController",
        templateUrl: "/wp-content/themes/angularjs-wp/templates/service/index.html"
    })
    .otherwise({
        redirectTo: "/home"
    });
    $locationProvider
        .html5Mode(true)

answered Mar 3, 2015 at 0:05

Mike Averto

6751 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular HTML5 mode, Wordpress, Rewrites, Apache and You

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related