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

khian29 · 2017-01-31T02:53:09Z

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

The text was updated successfully, but these errors were encountered:

jonathanyeong · 2017-01-31T05:58:59Z

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 · 2017-02-15T16:00:16Z

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 · 2017-02-27T07:55:40Z

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

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

kutec · 2017-05-11T06:42:46Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

khian29 commented Jan 31, 2017

jonathanyeong commented Jan 31, 2017

Reedyseth commented Feb 15, 2017

eddiemonge commented Feb 27, 2017

kutec commented May 11, 2017

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

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

Comments

khian29 commented Jan 31, 2017

jonathanyeong commented Jan 31, 2017

Reedyseth commented Feb 15, 2017

eddiemonge commented Feb 27, 2017

kutec commented May 11, 2017