AngularJS Routing Issue with named groups

Question

I have a basic application runing localy using apache/WAMP etc. This setup is fine, and I've built quite a few apps using this and AngularJS.

Previous apps used ui-router for the route/state build. This app I'm building now is just using the normal ngRoute and ng-view.

Issue: Using $routeProvider I setup two routes.

app.js ( basic setup with angular-route added to scripts and "ngRoute" added to deps )

$locationProvider.html5Mode(true);

$routeProvider.when("/", {template: "<div>Home</div> <a href='/single'>Single</a> | <a href='/page/34'>Page 34</a>"});
$routProvider.when("/single", {template: "<div>single</div>"});
$routProvider.when("/page/:pageId", {template: "<div>page</div>"});
$routeProvider.otherwise("/");

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [L]

When I run this app to "/" everything is ok. Using the anchors the app will switch views with no issues

When I start the app at "/single" everything is fine

When I start the app at "/page/34" I get a module error stating that my module "Application" wasn't loaded...weird. only routes with named groups or longer than a straight page, eg /page/something don't work. doesn't matter what the route is.

I'm very perplexed.

Thanks for any clarification.

Is there something I'm missing? I can't figure out why this doesn't work.

Update
I fell prey to the bug. See this post: https://stackoverflow.com/a/17882453/2012550

Answer 1

Do you mean to have html5Mode(true); ?

This expects your server to know that no matter what path is requested, the index file should be served back so that angular can handle the real routing on the front end. Remove that line and you will notice a #/ in your path