AngularJS routes gives an 404 error on page refresh!

khian29 commented 7 years ago

Hi everyone! I am new to AngularJS and I love coding with it, but I got some issue regarding on angular routes when it is being refresh, it gives me an 404 error. I am using apache! Heres 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 my PHP FILE

   <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>

    </body>
</html>

Here's my .htaccess look like:

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

jonathanyeong commented 7 years ago

There's a few SO questions/answers regarding this topic. I haven't tried any of these answers so I'm not 100% sure if it will work. But it may be a good way to get started. Sorry I can't give you a concrete answer!

Try adding this to your .htaccess

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Code grabbed from: http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode

Reedyseth commented 7 years ago

Something similar happened to me a while ago when I updated angular to the newer version, I think it was 1.4, after that the new code could not handle the routing the way I coded it. For me the solution was to downgrade the Angular version on the bower file.

eddiemonge commented 7 years ago

Look at this: https://github.com/yeoman/generator-angular/pull/1388 or https://github.com/yeoman/generator-angular/pull/1381/files

Its basically Angular 1.6. It broke the way it handles HTML5Mode

kutec commented 7 years ago

There must be something could work for 1.6+ and earlier versions too.

yeoman / generator-angular

AngularJS routes gives an 404 error on page refresh! #1390