0

I tried to remove the hashtag from url in angular app.

Issue: The redirection works perfectly if I first load the index page and then goto any route, however, it throws an error when I reload any deep route page directly. If I refresh any page : localhost:3001/about, It throws error however when I route from index page <a href="/about">About </a> it works.

I checked many answers for modrewrite, however, none worked for me.

In Index.html

 <base href="/">

In Config File

 $locationProvider.hashPrefix('');
        $locationProvider.html5Mode(true); //activate HTML5 Mode

For development mode: This is working perfectly

I am using gulp reload and browsersync

So I added this in gulp serve

var historyApiFallback = require('connect-history-api-fallback');
function browserSyncInit(baseDir, files, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  browserSync.instance = browserSync.init(files, {
    startPath: '/',
    server: {
      baseDir: baseDir,
      middleware: [ historyApiFallback() ],
      routes: routes
    },
    port: 3001,
    browser: browser
  });
}

For production mode I am running the app in node js express . I am getting this error.

Dist folder uses the angular final build code

app/
dist/
  index.html
  assets/
  vendor.js
app.js
public/
routes/

app.js

app.use('/api', index);     // <- define api end point
app.use('/api/users', users);

// Catch all other routes and return the index file
app.get('*', function(req, res) {
    req.session.valid = true;
   // res.redirect('/');
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

For localhost I am using the MAMP and don't know how to use modrewrite and where to keep .htaccess file as many solution suggest use of .htaccess. If .htaccess is not needed what are other possible solution.

For production in server I am using nginx serer. If htaccess solution is only option what changes I need to make in nginx configs.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Mr X
  • 1,637
  • 3
  • 29
  • 55
  • Using HTML mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a `` tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application. For more information, see [AngularJS Developer Guide - HTML5 mode - Server Side](https://docs.angularjs.org/guide/$location#server-side). – georgeawg Dec 31 '17 at 12:28
  • The tagged answer is not the resolution to deep reload issue after removing hash in url. Instead, I used the express fallback before rendering the dist files – Mr X Dec 31 '17 at 14:02

0 Answers0