Still getting 'Not Found' when manually refreshing with angular.js route

.htaccess, angular-routing, angularjs, javascript

Solution

I don't know if this is the optimal solution, but I did find a combination of settings that worked:

- Include the `hashPrefix('!')` (see below)

- Did not include `<base href="/">` in my index.html

- Added `FallbackResource /index.html` to my `<Directory PATH_TO_WWW_FILES>` section in my server `.conf` file per this post. After setting this, it didn't seem to matter what the local `mod_rewrite` settings were.

// Routing configuration.
angular.module('myModule')
    .config(['$routeProvider', '$locationProvider', 
    function ($routeProvider, $locationProvider) {
        // Enable pushState in routes.
        $locationProvider.html5Mode(true).hashPrefix('!');

        $routeProvider
            .when('/home', {
                templates: {
                    layout: '/views/home.html'
                },
                title: 'Welcome!'

            })
            .when('/launchpad', {
                templates: {
                    layout: '/views/layouts/default.html',
                    content: '/views/partials/profile.html'
                },
                title: "Launchpad"
            })
            .otherwise({
                redirectTo: '/home'
            });

    }
]);

Problem

After reading a ton of write-ups and stackoverflow questions on Angular.js route, I'm still getting the 'Not Found' error when I do a manual refresh. Steps: - browse to `localhost` --> because of my configuration (below), I'm taken to `localhost/home`. Views and everything load fine. - hit refresh in the browser --> browser displays this `Not Found: the requested /home is not found on this server` This question is probably most like Refreshing page gives "Page not found" My configuration ``` // Routing configuration. angular.module('myModule') .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { // Enable pushState in routes. $locationProvider.html5Mode(true); $routeProvider .when('/home', { templates: { layout: '/views/home.html' }, title: 'Welcome!' }) .when('/launchpad', { templates: { layout: '/views/layouts/default.html', content: '/views/partials/profile.html' }, title: "Launchpad" }) .otherwise({ redirectTo: '/home' }); } ]); ``` Other things I have done: - In my `index.html`, I already have the `<base href="/">` - upgraded to angular 1.2.1 Here are the htaccess rules I have tried. None work. from Refreshing page gives "Page not found" ``` <ifModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !index RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png) #Add extra extensions needed. RewriteRule (.*) index.html [L] </ifModule> ``` from http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/ ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*) /index.html/#!/$1 </IfModule> ```

Original source

Related problems