AngularJS routes returns 404 error when page is being refresh

Question

I am new to angularJS and I love coding with it. I am currently building now a web-portal using angularJS, and each of my pages uses ngRoute. It works fine for me but when I tried to refresh the page it returns me an 404 error / page not found. What should I do on this issue? Here's my code:

var app = angular.module("CVSRRC", ['ngMaterial','ngRoute']);

app.controller('CVSRRC-CTRL', function($scope, $http, ...){
    // some codes here...
});

app.config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode(true).hashPrefix('!');

    $routeProvider
    .when('/', {
        templateUrl: '_pages/home',
        controller: 'homeCTRL',
        resolve: {
           delay: function($q, $timeout){
                var delay = $q.defer();
                $timeout(delay.resolve, 1000);
                return delay.promise;
           }
        }  
    })
    ...etc...
    .otherwise({
         redirectTo: '/'
    });
});

and in my HTML

<html>
   <head>
       <base href="/cvsrrc/" />
   </head>
   <body ng-app="CVSRRC" ng-controller="CVSRRC-CTRL">

      <div class="row" id="main">
        <div ng-view ng-show="statechange"></div>
        <div ng-show="!statechange" cvsrrc-resolve>
            <div id="_loader_"></div>
        </div>
    </div>

   <a href="about-us">About</a>
   <a href="login">login</a>
   //etc
   </body>
 </html>

And here's my .htaccess looks like

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
ErrorDocument 404 http://localhost/cvsrrc/page-not-found

score 1 · Answer 1 · answered Jan 30 '17 at 07:12

1

Since you have used <base href="/cvsrrc/" /> and $locationProvider.html5Mode(true).hashPrefix('!'); your url removed #! from url and adds cvsrrc/. so it will work if you redirect app from app.

But when you reload page it will try use url with cvsrrc/ to find path which not actually there.

So you have to use rewrite module on your server to tell to redirect cvsrrc/ to #!/

answered Jan 30 '17 at 07:12

Ankur Akvaliya

2,989
4
28
53

So i will configure it to my .htaccess you mean? Sir @Ankur Akvaliya – Trish Siquian Jan 30 '17 at 07:13
yes. Depending on backend. i guess you are using php. – Ankur Akvaliya Jan 30 '17 at 07:15
You can check this out -http://stackoverflow.com/questions/38291535/page-refresh-gives-404 You can go through this to understand more interesting stuff to read about html5 mode in angularjs and the configuration required per different environment https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode Also this question might help you $location / switching between html5 and hashbang mode / link rewriting – Namdeo Karande Jan 30 '17 at 07:16
Thanks! I'll check it. But hold on because I will ask more questions from you guys. hehe. If it is okay – Trish Siquian Jan 30 '17 at 07:17
By the way, I am using php and I have a .htaccess file. And i think it should be on my .htaccess to configure – Trish Siquian Jan 30 '17 at 07:19
http://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes this might help – Ankur Akvaliya Jan 30 '17 at 07:23
See updated question above. I dont know what to add in my .htaccess . Can you please help me? Thanks1 – Trish Siquian Jan 30 '17 at 07:35
have you tried links that i shared in previous comments? Although i am not familiar with php. so can't help you there. – Ankur Akvaliya Jan 30 '17 at 08:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134435/discussion-between-trish-siquian-and-ankur-akvaliya). – Trish Siquian Jan 31 '17 at 02:20

score 0 · Answer 2 · answered Jan 30 '17 at 09:27

0

Try either:

Removing resolve from your route.
Add below code after config:

$locationProvider.hashPrefix("");
Share the url you are using to access the page.
Remove the ending "/" in your base.

answered Jan 30 '17 at 09:27

Shubhansh Sahai

34
7

score 0 · Accepted Answer · answered Jan 31 '17 at 03:17

Finally I found a solution, I already met this solution before but It doesn't work for me because I forget to remove the /localhost/ from the .htaccess! Here it is:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d

    RewriteRule ^ - [L]

    RewriteRule (.*) /cvsrrc/index.php [L]
</IfModule>

AngularJS routes returns 404 error when page is being refresh

3 Answers3