generator-angular
generator-angular copied to clipboard
yeoman
AngularJS routes gives an 404 error on page refresh!
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
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
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.
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
