HTML5 Mode in angularJS

Question

Having problem while refreshing the page when HTML5 Mode is set. When navigating to /path, it works fine but when i refresh the page or directly type localhost/path it does not work.

HTML5 Mode

Configuration:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

You should set the base in HTML-file

<html>
  <head>
    <base href="/">
  </head>
</html>

In this mode you can use links without the # in HTML files

<a href="/path">link</a>

Link in Browser:

http://www.example.com/base/path

Update on the server. At this moment, i am just using gulp module to connect.

var gulp = require('gulp');
var connect = require('gulp-connect');

gulp.task('connect', function(){
  connect.server({
      root: './app',
      port: 8080
  })
})

HTML5 Mode uses PushState to change the URL without making a new server request. however, refreshes and direct page loads will still make a server call, and need to be handled by the server. Which server technology are you using, and is it configured with PushState support? — Claies
– Claies, Commented Mar 8, 2015 at 20:56
ok, so what, Jetty? Jakarta Tomcat? 4J? some other web server? — Claies
– Claies, Commented Mar 8, 2015 at 21:00
@Claies: At this moment i am just using gulp connect module to host.... i have not yet integrated with actual back-end. updated my original post. — Shane
– Shane, Commented Mar 8, 2015 at 21:02
right, so node then. well, this is easy with express since it supports rewrites, but I don't know about gulp-connect. In essence, you need to take any request that comes in to your server and redirect it to your index.html. — Claies
– Claies, Commented Mar 8, 2015 at 21:06

Bogdan Savluk · Accepted Answer · 2015-03-08 21:19:22Z

2

To make it work, you need to override all requests to non-static resources by your index.html...

For connect using connect-modrewrite module it would be, something like this:

var connectModRewrite = require('connect-modrewrite');

connect.server({
  root: './app',
  port: 8080,
  middleware: function (connect) {
    return [
      connectModRewrite([
        '!\\.html|\\.js|\\.css|\\.ico|\\.png|\\.gif|\\.jpg|\\.jpeg|\\.swf.*$ /index.html [NC,L]'
      ]),
      connect.static('./app')
    ];
  }
});

answered Mar 8, 2015 at 21:19

Bogdan Savluk

6,3121 gold badge32 silver badges37 bronze badges

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

Comments

Thalaivar · Accepted Answer · 2015-03-08 21:20:12Z

0

You can use a middle-ware to solve the problem. Do an npm install --save connect-history-api-fallback. Add the following to your gulpfile.js

var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
  connect.server({
    root: './app',
    port: 8080,
    livereload: true,

    middleware: function(connect, opt) {
      return [ historyApiFallback ];
    }

  });
});

answered Mar 8, 2015 at 21:20

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

1 Comment

anurag619 Over a year ago

Please take note of the changed API since v1.0.0. The middleware is no longer exported, but needs to be explicitly created. refer: github.com/bripkens/connect-history-api-fallback/issues/10

Collectives™ on Stack Overflow

HTML5 Mode in angularJS

HTML5 Mode

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML5 Mode

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related