title: Angular routing in HTML5mode with Node.js
body: <p>I know there are other answers to this but they seem to have caveats.</p>
  
  <p><a href="https://stackoverflow.com/a/19245068/2183008">This one causes a redirect</a>, which can be fatal for my front-end app which uses Mixpanel, and a double-load of Mixpanel will a Maximum Call Stack Size Exceeded error in the browser.</p>
  
  <p><a href="https://stackoverflow.com/a/29456345/2183008">This one uses <code>sendFile</code></a> which I personally cannot get to work. Trying to diagnose that, I'm just advised to use <code>express.static()</code>.</p>
  
  <p>Currently my code looks like this:</p>
  
  <p>home.js - Some routes, the last one intended to be the front-end site.</p>
  
  <pre><code>var indexPath = path.resolve( __dirname, '../' + process.env.PUBLIC_FOLDER )
  
  router.get( '/:user/:stream/:slug', function( req, res, next ) {
  
      if ( req.headers['user-agent'].indexOf( 'facebook' ) != -1 ) {
          // stuff to handle the Facebook crawler
      } else return next()
  })
  
  router.get( '/*', function( req, res ) {
      express.static( indexPath )
  })
  </code></pre>
  
  <p>server.js - configuring node/express</p>
  
  <pre><code>app = express();
  
  app 
      .use( morgan( 'dev' ) )
      .use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
      .use( bodyParser.json( { limit: '50mb' } ) )
      .use( '/api', require('./routes/usersRoute.js') )
      .use( '/', require( './routes/home' ) )
      .on( 'error', function( error ){
         console.log( "Error: " + hostNames[i] + "\n" + error.message )
         console.log( error.stack )
      })
  
  http
      .createServer( app ).listen( process.env.PORT )
      .on( 'error', function( error ){
         console.log( "Error: " + hostNames[i] + "\n" + error.message )
         console.log( error.stack )
      })
  </code></pre>
  
  <hr>
  
  <p>Some more info</p>
  
  <p>The reason you can see I'm trying to use <code>express.static()</code> is because when I use <code>res.sendfile()</code> I get a problem <a href="https://stackoverflow.com/questions/23166069/unexpected-token-while-running-mean-stack-application">like this one</a> where the console says <code>Unexpected token '&lt;'</code>. Unfortunately the answer doesn't specify an exact fix and neither does the questioner who says they fixed the problem but don't share an answer.</p>
  
  <p>In my trial and error I have added some more to express, like this</p>
  
  <pre><code>.use( '/app/app.js', express.static( indexPath + '/app/app.js' ) )
  .use( '/app/views', express.static( indexPath + '/app/views' ) )
  .use( '/app/controllers', express.static( indexPath + '/app/views' ) )
  .use( '/app/directives', express.static( indexPath + '/app/views' ) )
  .use( '/app/vendor', express.static( indexPath + '/app/vendor' ) )
  .use( '/js', express.static( indexPath + '/js' ) )
  .use( '/css', express.static( indexPath + '/css' ) )
  .use( '/fonts', express.static( indexPath + '/fonts' ) )
  .use( '/images', express.static( indexPath + '/images' ) )
  .use( '/api', require('./routes/usersRoute.js') )
  .all( '/*', require( './routes/home' ) )
  </code></pre>
  
  <p>And in my <code>home.js</code> routes files added this</p>
  
  <pre><code>router.get( '/*', function ( req, res ) {
      res.status( 200 ).set( { 'content-type': 'text/html; charset=utf-8' } )
      .sendfile( indexPath + '/index.html' )
  })
  </code></pre>
  
  <p>And in the browser I can see all my files are loading, but with the <code>&lt;</code> error above. I see this <code>/*/</code> route is being called hundreds of times when I do a refresh so I think the <code>.use( '...', ... )</code> configurations are being ignored.</p>
  
  <hr>
  
  <p>Here is another example requested by Jonas below.</p>
  
  <pre><code>var indexPath = path.resolve( __dirname, process.env.PUBLIC_FOLDER )
  
  mongoose.connect( process.env.MONGOLAB_URI )
  
  app = express();
  
  app 
      .use( morgan( 'dev' ) )
      .use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
      .use( bodyParser.json( { limit: '50mb' } ) )
      .use( '/api', require('./routes/usersRoute.js') )
      .use( '/', require( './routes/home.js' ) )
      .use( express.static( indexPath ) )
      .on( 'error', function( error ){
         console.log( "Error: " + hostNames[i] + "\n" + error.message )
         console.log( error.stack )
      })
  </code></pre>
  
  <p>I have also done the same without the <code>.use( '/', require( './routes/home.js' ) )</code> line to try narrow down any problem, but it's the same result. The page will load if I have the <code>#</code> in the URL, but the browser will remove the <code>#</code> (so far so good). But if I press refresh, or put in the URL manually, sans-hashbang, it will give an error like <code>Cannot GET /home/splash</code>, where <code>/home/splash</code> is whatever path I'm going to.</p>