Throwing cannot get error after enabling html5Mode in AngularJS

Question

I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -

function configState($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

Added ngRoute in module dependency and added <base href="/" > in my index.html.

Problem -

If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts

Though with hash in URL it works in both way manner.

Answer 1

You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.

Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode