$locationProvider html5mode causing "cannot GET" error on refresh - AngularJS Node app

Question

I am trying to remove the hashtags from my Angularjs app's URLs using the locationProvider, and it works well until I refresh a page manually. This always causes a "cannot GET .." error in the browser. I have done some research and I think I have to use an .htaccess file to redirect, but I am not sure how to implement it and I have searched the web for a solution but no luck so far.

Here is my app.js which handles routing to my Angular views and controllers:

(function () {
    'use strict';
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', { 
                templateUrl: 'views/partials/play.html',
                controller: 'playCtrl'
            }).
            when('/dictionary', {
                templateUrl: 'views/partials/dictionary.html', 
                controller: 'dictionaryCtrl'
            }).
            when('/add', {
                templateUrl: 'views/partials/word.html', 
                controller: 'wordCtrl'
            }).
            when('/about', {
                templateUrl: 'views/partials/about.html', 
                controller: 'aboutCtrl'
            }).

            otherwise({redirectTo: '/'});

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });
})();

And I have also added this inside the <head> in my index.html:

<base href="/">

The app is built using Node.js, Express, Angular & Mongodb if this helps.

Many thanks.

Tashfeen · Accepted Answer · 2017-03-16 18:22:47Z

3

In case some one else is wondering you need to redirect all routes that Node is not using to Angular:

app.get('*', function(req, res) {
  res.sendfile('./path/to/index.html')
})

This has to be done in server.js. Don't forget to use ./ in the sendfile link :)

answered Mar 16, 2017 at 18:22

Tashfeen

947 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davidkonrad Over a year ago

It would be nicve to see a generic solution for angular, not one specifically targeting angular using a node,js backend and express ...

oleh.meleshko · Accepted Answer · 2016-04-14 21:33:46Z

1

It depends on Angular version.

Latest Angular versions require following options:

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode()

Mode details from official documentation here

So all you need is to handle every route you described in angular on the server-side and render the same (probably index) page with angular plugged in.

edited Apr 14, 2016 at 21:33

answered Apr 14, 2016 at 21:29

oleh.meleshko

4,8052 gold badges30 silver badges41 bronze badges

8 Comments

OllyBarca Over a year ago

This doesn't work for me i'm afraid. When refreshing the homepage, it is fine, but any other page such as /add or /dictionary, I get the error. ONLY on refresh, from a link in the header the URL still works fine

oleh.meleshko Over a year ago

@OllyBarca seems you don't have proper routing on your backend. You should take care your server responds on all these requests and renders the main page with angular itself.

OllyBarca Over a year ago

I have routes in my backend but only to handle API calls. I have this "app.use(express.static(__dirname + '/public'));" to load the index.html in my server.js

oleh.meleshko Over a year ago

@OllyBarca express.static is for static files, api calls are also good, but you also need to have a bunch of routes which renders index page (where angular is located).

OllyBarca Over a year ago

Ok, what is the best way to do that? with an .htaccess file? I heard rumours that all I have to do it route the user through index.html every time.

|

Collectives™ on Stack Overflow

$locationProvider html5mode causing "cannot GET" error on refresh - AngularJS Node app

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related