AngularJS - html5Mode - Cannot GET /login

Question

Hi have created one angularJS application with yeoman, grunt and bower. I have enabled the html5Mode for the application. And its working. But, when I refresh a page (localh

Answer 1

add 'views/login.html' in side your templateUrl hope this will work

Answer 2

By now, this must be a common issue with Angular to be dealt with for routing to work.

I found similar issues on SO, which suggest the same html5 config to workaround the hashbang method - see AngularJS: how to enable $locationProvider.html5Mode with deeplinking Also a tutorial at scotch.io https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag can be a start.

But most importantly, I remember that this is the one that did the trick.

https://gist.github.com/leocaseiro/4305e06948aa97e77c93

I run a Apache Web server. I don't recollect at what level (globally or per app) I did the configuration, but best would be to consult the web server docs, Apache's was good.

Answer 3

did you try using absolute paths in the $routeProvider?

.when('/login', {
  templateUrl: '../app/scripts/views/login.html',
  controller: 'loginController'
},
...

Answer 4

add this code in server.js after all the routes

app.use('/*',function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

Answer 5

You must have a server side solution to redirect all non resolving traffic to index.html

I will share an htaccess version of this and a node.js version. I have also implemented this in spring-boot, but that was a little bit more involved.

HTACCESS

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /the-base-from-index.html/


    RewriteEngine on
    RewriteCond %{HTTP:X-Requested-With} !XMLHttpRequest$
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule . index.html [L]
</IfModule>

In order for this to work your apache config must have mod_rewrite enabled and also allow override all. The rewrite will work in apache config as well.

There is also a condition that allows you to return 404 on ajax request. In order for that to work you must register a pre-flight header to all $http request signifying that they are xmlhttp requests. something like:

 myapp.config(function($httpProvider) {
      $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
 });

NODEJS

var express = require('express');
var bodyParser = require('body-parser')
var path = require('path')
var app = express();

app.use(express.static(__dirname + '/app'));
app.get('/*', function(req, res){
  res.sendFile(__dirname + '/app/index.html');
});

app.listen(9090);
console.log("Node Server Listening on port 9090");

This is dirt simple, and could be improved. Namely with a check on the req headers for the xmlhttp header, similarly to what the htaccess example is doing.

These get the general idea across. Basically any traffic that would result in a 404 gets served index.html instead. This allows you to continue to serve up static content, but your routes (as long as they don't actually exist on the disk at that location) will return index.html.

Warning! without a solution like the preflight header on all ajax request, any unresolved template request will result in an infinite loop and likely lock up your browser.

Answer 6

This is happening because when you press refresh, your browser will try to retrieve /login from the server, not via your client side route provider. I assume /login is returning a 404 in your case.

You need to get the server that's actually serving your files to serve /index.html even though the request was made for /login. How you do this depends on your server side setup. You can do this with either dynamic scripting or a rewrite rule.

If you can't control the server in this way then htmlmode is probably not for you sadly.