page not found when refresh a page in ngRoute

Question

I am using angularjs ngRoute to routing a single page application. It shows the localhost/about or localhost/blog. When I reaload,"Cannot GET /about". How can I fix this.

my router configuration is below.

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/',{
            templateUrl: 'views/pages/home.html',
            controller: 'homeCtrl'
        })
        .when('/about',{
            templateUrl: 'views/pages/about.html',
            controller: 'aboutCtrl'
        })
        .when('/contact',{
            templateUrl: 'views/pages/contact.html',
            controller: 'contactCtrl'
        })
        .when('/blog',{
            templateUrl: 'views/pages/blog.html',
            controller: 'blogCtrl'
        })
        .otherwise({redirectTo: '/home'});
    }]);

I am using only angular.

Your backend needs to catch all requests and serve your Angular application. — str, Jul 28 '16 at 07:48
As you said "I am using only angular.", then can you provide a JSFiddel or Plunker example where your code is not working?? — Romesh, Jul 28 '16 at 07:51

score 0 · Answer 1 · answered Jul 28 '16 at 07:54

0

That's because of this piece of code

$locationProvider.html5Mode(true);

Setting it to false will add a # at the beginning of each url, so the server will give you the index page no matter which page are you reloading.

answered Jul 28 '16 at 07:54

Mumpo

528
7
16

My page url has to show without # tag, is there anyother way to route the page without # tag in angular. – Sathish Jul 29 '16 at 10:00

score 0 · Answer 2 · answered Jul 28 '16 at 07:56

0

You probably are using the server routing, not AngularJS routing. AngularJS by default use the route after # to route url. For example http://localhost:8080/#/about.

In addition, you can use HTML5 routing with $locationProvider.html5Mode(true) which use the routing that I guess you are using http://localhost:8080/about.

answered Jul 28 '16 at 07:56

Ruben

172
4
8

Yes I am using $locationProvider.html5Mode(true), for shows the url like http://localhost:8080/about. I want the same thing, which does not show the # tag. Is there any other way to load the page in html5 mode true. – Sathish Jul 29 '16 at 09:59
Could you provide more info about the error? Browser version, Plunker replicating the issue... Take a look on http://caniuse.com/#search=history to see compatible browsers. – Ruben Jul 29 '16 at 10:19
@Sathish The url returns 404. Which browser version are you using? – Ruben Aug 02 '16 at 08:14
sorry @ruben use sathishstar.netai.net without the sub url. i am using chrome Version 52.0.2743.82 (64-bit).. the problem is when use suburl it cannot load – Sathish Aug 02 '16 at 08:33
OK I see the problem. I guess you have not control over server side on your netai.net. To perform this kind of linking on your web you have to do some server-side stuffs. Take a look on [this question](http://stackoverflow.com/questions/17646843/angularjs-html5-mode-how-do-direct-links-work-without-server-specific-changes). If you don't have access to server config, you should change your routing to angular defaulg `#`. If this is the answer you are looking for, please let me know and I update my answer. – Ruben Aug 02 '16 at 14:05

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

The documentation is not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:

Hashbang Mode
HTML5 Mode
Hashbang in HTML5 Mode

This is because you are using HTML5 Mode which is not supported by your browser. As mentioned by @Mumpo above.

You should change this line

$locationProvider.html5Mode(true);

To this line

$locationProvider.html5Mode(false);

This will enable Hashbang Mode and will prepend a # sign before your URLs

For further in depth knowledge about these three modes. Please refere to this Stackoverflow question here. Hope this will help

edited May 23 '17 at 12:22

Community

1
1

answered Jul 28 '16 at 08:17

Abdul Moiz Khan

693
5
13

actually I want the html5 mode. i want the url to show like this http://www.example.com/base/path. without using hasbang method, can I load the page. – Sathish Jul 29 '16 at 09:57
I our three of apps we have actually used Hashbang Mode. However, where ever we wanted to use pretty urls we used MVC with AngularJs in those projects. We handled routing using MVC routes, in order to show urls like **example.com/base/path** and other working via AngularJs. If you would like using MVC i can share that logic with you – Abdul Moiz Khan Jul 29 '16 at 10:30
As for only using AngularJs please see this [link](https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag) it might help you. You just need to define all routes and add base url. Hope it will help – Abdul Moiz Khan Jul 29 '16 at 10:32

page not found when refresh a page in ngRoute

3 Answers3