angularjs ngroute with html5mode(true) on apache fails

Question

I am trying to use ngroute with $locationProvider.html5Mode(true) and a htaccess rewrite, but I can't get it to work.

When I try to access for example http://localhost/angular_blog/article/someTitle I get the following error in my console:

blogApp.js:1 Uncaught SyntaxError: Unexpected token <
blogCtrl.js:1 Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=blogApp&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4138r @ angular.js:323g @ angular.js:4099ab @ angular.js:4025d @ angular.js:1452uc @ angular.js:1473Jd @ angular.js:1367(anonymous function) @ angular.js:26304a @ angular.js:2762c @ angular.js:3032

I think I've done everything various tuts I've been able to find said, but then it should work, so obviously something is missing. I've included my code below, any help or pointers will be greatly appreciated.

HTML

<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp">
<head>
 <meta charset="UTF-8">
 <title>Test</title>

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
 <script type="text/javascript" src="./assets/js/blogApp.js"></script>
 <script type="text/javascript" src="./assets/js/blogCtrl.js"></script>

 <base href="/angular_blog/">

</head>
<body>
 <main data-ng-view></main>
</body>
</html>

JS - blogApp.js

var blogApp = angular.module('blogApp', [
    'ngRoute',
    'ngSanitize',
    'blogCtrl'
]);

blogApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
                when('/page', {
                templateUrl: './assets/templates/page.html',
                controller: 'pageCtrl'
            }).
                when('/page/:pagePermaLink', {
                templateUrl: './assets/templates/page.html',
                controller: 'pageCtrl'
            }).
                when('/article', {
                templateUrl: './assets/templates/article.html',
                controller: 'articleCtrl'
            }).
                when('/article/:articlePermaLink', {
                templateUrl: './assets/templates/article.html',
                controller: 'articleCtrl'
            }).
            otherwise({
                redirectTo: '/page',
            });
        $locationProvider.html5Mode(true);
    }]);

HTACCESS

# BEGIN Pretty URL
<IfModule mod_rewrite.c>
 RewriteEngine on
 
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>
# END Pretty URL

where are assets in directory structure and what path are they trying to load from currently ...in network tab of browser dev tools — charlietfl, Jul 27 '15 at 18:38
Hmmm. chrome sources say "localhost/angular_blog/article/assets" - but it should be localhost/angular_blog/assets" — Brian Emilius, Jul 27 '15 at 19:34
remove the leading dot in those `src` and `href` and templateUrl's to make them absolute. Browser is now seeing virtual directories instead of hash in angular paths — charlietfl, Jul 27 '15 at 19:37
Okay, I had to add /angular_blog/ to my paths everywhere, now it works perfect! Thank you so much for your pointers :) can you make it a reply so I can accept, please? — Brian Emilius, Jul 27 '15 at 19:47

score 1 · Accepted Answer · answered Jul 27 '15 at 19:54

Once you moved away from using a hash in the url's and added a base tag you also need to make your asset paths absolute for src , href and templateUrl's.

The browser now sees the angular routes as directory paths and by using relative paths it is looking in the wrong places.

angularjs ngroute with html5mode(true) on apache fails

1 Answers1

Linked