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

Question

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>

Have your tried `$locationProvider.html5Mode(true).hashPrefix('!');` and `RewriteRule ^(.*)$ index\.html#!/$1 [L]` (The dot is an reserved char so should escape it)? And are you sure that `mod_rewrite` works? It's hard to judge where the error is so I would check everything. — F Lekschas, Dec 11 '13 at 02:01
Yes, I later found `hashPrefix` to be part of a working combination (see answer). I believe `mod_rewrite` was working because I was able to get log output from it: (using the block ` RewriteEngine On RewriteLog MY_LOG_PATH RewriteLogLevel 3 `). And I tried the RewriteRule along with the two RewriteCond (`!-f` and `!-d`) but it did not work for me. — Jay, Dec 11 '13 at 12:19
Hey did you find any solution?? I am able to refresh in hashbang mode but in html5 mode it still showing Object not found let me know if you have any solution — Swapnil Dalvi, Jan 09 '14 at 15:22

score 8 · Answer 1 · answered Aug 26 '14 at 19:22

This .htaccess setting worked well for me

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_URI} !^/$
    RewriteRule (.*) /#!/$1 [NE,L,R=301]
</IfModule>

score 6 · Accepted Answer · edited May 23 '17 at 12:18

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'
            });

    }
]);

score 1 · Answer 3 · answered Apr 01 '16 at 14:05

1

For people who are still facing this error, with or without SSL:

Make sure you Allowoverride in your apacheconfig e.g.

<Directory "/var/www/mysite/public_html">
    AllowOverride All
</Directory>

for both ports is u use SSL

answered Apr 01 '16 at 14:05

Unispaw

158
1
8

score 1 · Answer 4 · answered Jun 19 '17 at 12:29

1

I couldn't comment but as well as using HTML mode, base href="/", sudo a2enmod rewrite, using .htaccess rewrite. From Unispaw, I had to AllowOverride All in both the sites available of your site and the /etc/apache2 apache.conf

answered Jun 19 '17 at 12:29

Anderson

404
1
7
16

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

4 Answers4

Linked