Express: Express and Angular's html5Mode

[OKNoah]

I've been trying to use Node and Express with Angular's html5Mode enabled. I keep running into problems.

Here is the first one: http://stackoverflow.com/questions/31327439/angular-routing-in-html5mode-with-node-js

And here is the latest one: http://stackoverflow.com/questions/32044247/node-express-gives-two-responses-breaks-front-end-script

In short, I am currently trying to detect Facebook's user agent and reroute the traffic. I enabled html5Mode so I could route the URL's properly without the hashtag (#) being in the URL. But some errors occur depending on how this is configured, such as the page saying Cannot GET /.../... when I refresh the page, or the page loading twice which breaks Mixpanel and the site.

[OKNoah]

I think I've narrowed this down to not having anything to do with the route I made. I get the same problems using just combinations of .sendFile() and express.static().

[dougwilson]

Hi! I was hoping someone who knew about client-side programming and Angular would jump in, but nothing so far :( Were you able to figure out an answer? Anything I can help with were Angular is removed from the equation?

[OKNoah]

No, I didn't find a solution to this and had to disable html5Mode and forget about Facebook Open Graph working. A workaround was to use Facebook share links with the Open Graph data included. But I would still like html5Mode to work.

[ritch]

Ping @jeffbcross - have you seen this problem before?

[jeffbcross]

I have to read too many levels deep to understand what the problem is :). @OKNoah could you post a simple explanation of the problem here in the issue?

If the problem is that you want to serve different content depending on the user agent (serve Angular app for real users, serve pre-rendered shareable content for Facebook or other content sniffers), then you should serve special pre-rendered content to any request that contains the Facebook crawler user agent: https://developers.facebook.com/docs/sharing/webmasters/crawler

[ritch]

@OKNoah are you still having this issue? Please comment with some more info and we can re-open. For now I'll close the issue.

[OKNoah]

@ritch Yes, I am still having this issue, only now I'm using React.

@jeffbcross I want my JS app to be able to control the routes, without a # being in the URL. This is sometimes called "HTML5 mode". So going to site.com/search actually goes to index.html, but the javascript sees the search parameter and loads whatever content accordingly.

[dougwilson]

Hi @OKNoah , to me, that sounds like you want to add the following as probably the last route:

app.get('*', function (req, res) {
  res.sendFile('/path/to/your/index.html');
});

[OKNoah]

Thanks @dougwilson . However, this solution produces a lot of errors in the browser. Like

SyntaxError: Unexpected token '<'

[dougwilson]

Yea, I don't know. There is just not enough information here to know what you are doing it even how to help. What if you provided a complete git repo we could clone, along with full instructions on how to reproduce the issue? So far, I haven't seen anything that is an Express bug. Typically if you are looking for general help, especially trying to integrate Express with something or general usage questions, I would recommend asking on one of the Express communities (http://expressjs.com/en/resources/community.html), like Gitter. Typically the people here like myself cannot help with more than true Express bugs and need complete details on how to set everything up on our machine to help.

[estliberitas]

@OKNoah @dougwilson There is simple solution which comes into mind - binding index.html (or other "main" HTML file) to the list of AngularJS application routes:

app.get('/home', function(res, res) {
  res.sendFile('/path/to/index.html');
});

app.get('/about', function(res, res) {
  res.sendFile('/path/to/index.html');
});

To simplify Express code you can add prefix to Angular.js routes. Assume, you have /app/home or /app/about. Then in your Express you can have one route:

app.get(/\/app.*/, function(req, res) {
  res.sendFile('/path/to/index.html');
});

[dougwilson]

Ah, yes, that can work as well :) sine the path for the route can also be an array of paths, you could also consolidate all the paths into a single array as well:

app.get(['/', '/about', '/home', ...], function(res, res) {

[estliberitas]

@dougwilson Wow, did not know this, what a shame of me.

[coperator]

The express middleware express-history-api-fallback solved this issue for me:
https://www.npmjs.com/package/express-history-api-fallback

[fabioel]

I have tried the above solutions, but it is still not working for me.
Are there any suggestions?

[kokno]

Are you using Pug ?

[fabioel]

No I am not using pug. Should I be using it?

[kokno]

No no, the problem was that I was using it.

app.get('*', function (req, res) {
  res.sendFile('/path/to/your/index.html');
});

This code helped me solve this issue. But what is exactly your problem ?

[fabioel]

The problem is that I cannot use AngularJS with html5Mode(true). I have set the fallback options in express like you proposed and I also tried the middlewares, but somehow I cannot get it to work. Also the .htaccess attempt where you rewrite the routes with it, did not work.
So I am kind of clueless, and using the html5Mode(false) for now

[kokno]

Did you set the <base href="/"> ?

[fabioel]

Yes I did. At the top of the header