CODEWITHSUNDEEP
javascriptangularjshttp-status-code-404
Mariusz
Mariusz

Reputation: 607

Angular app throws 404 error on github.io

I've written a fairly simple app and put it on github so that it could be viewed on the net. But there seems to be a problem with the urls (or maybe something else!). The only way I managed to make it work on localhost is by using # symbol in my navbar and using regular url (without #) in my config function:

<ul class="nav navbar-nav navbar-right">  
    <li ng-class="{ active: isActive('/')}"><a href="/#/">Home</a></li>
    <li ng-class="{ active: isActive('/games')}"><a href="/#/games">Games</a></li>
    <li ng-class="{ active: isActive('/contact')}"><a href="/#/contact">Contact</a></li> 
</ul>


app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/', {
        controller: 'Posts',
        templateUrl: 'controllers/posts.html'
    })
    .when('/games', {
        controller: 'Games',
        templateUrl: 'controllers/games.html'   
    })
    .when('/contact', {  
        controller: 'Games',
        templateUrl: 'controllers/contact.html' 
    })
    .when('/:id', {  
        controller: 'Games',
        templateUrl: 'controllers/reviews.html'
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

But it doesn't work on github.io, only the first page does. When I click on games button it shows

404 file not found

though of course I have all the html files in a controllers folder.

Upvotes: 3

Views: 118

Answers (1)

charlietfl
charlietfl

Reputation: 171669

You have an extra / in your href's

Remove the leading one as it indicates to go to domain root

<a href="/#/contact">Contact</a>

Should be:

<a href="#/contact">Contact</a>

This leaves you with only a hash in the href

Upvotes: 1

Related Questions