html5 mode with grunt serve not working

user_2699001 0
Viewed 388

In grunt file, livereload block looks like this:

livereload: {
  options: {
    open: true,
    middleware: function(connect, options, middleware) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
      return [
        [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
          optBase.map(function(path) {
            return connect.static(path);
          })),
        connect.static('.tmp'),
        connect().use(
          '/bower_components',
          connect.static('./bower_components')
        ),
        connect().use(
          '/app/styles',
          connect.static('./app/styles')
        ),
        connect.static(appConfig.app)
      ];
    }
  }
},

Adding:

 [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
                    optBase.map(function(path){ return connect.static(path); })),

did use to work for me to enable html5 mode, otherwise, my routes do not load without #! when I try to reload via the browser.

I do have base href='/' added and html5Mode(true) in config. Is there anything else I can try? Why would it really stop working?

Note: Turns out that my URL has a dot in it and that is not being handled by connect-mod rewrite rule so well. Any idea how to change that and enable it to handle dot in URL?

gruntjs angularjs
2 Answers

Try adding this in root app module in the config block. Make sure to include/inject $locationProvider.

$locationProvider
  .html5Mode({
    enabled: true,
    requireBase: false
  })
  .hashPrefix('!');
user_48125150
Related