AngularJS and Express Routing issue

Question

I'm using AngularJS and ExpressJS and having an issue with routing. I saw many other posts but none of those solutions seemed to work. Here is my routes in Express:

module.exports = function(app, auth) {
    //Api routes
    var mycontroller = require('../app/controllers/mycontroller');
    app.get('/api/dostuff/:id', mycontroller.getBlockByHash);

    //Home route
    app.get("/", function(req, res) {
      res.render('index');
    });
  };

When I go to my root /, everything works as expected. ExpressJS serves up my index and angular picks up the rest. When I click a link /blocks, it works as expected since AngularJS picks up the route. But when I refresh, I get a 404 not found error.

I tried app.get('*' instead, but that gives me a completely different error where nothing loads.

enter image description here

I'm using Jade to create the basic page structure with Express. My Express config is:

app.use(express.favicon());
app.use(express.static(config.root + '/public'));

score 4 · Accepted Answer · edited May 23 '17 at 12:08

4

When using html5Mode the documentation says:

Using this 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)

What it doesn't mention is:

You should exclude static assets like scripts/styles/images/fonts etc.
You should also exclude your Restful API.

Your case:

The error you got there is express serving html into script tags and the browser fails to parse them as a valid javascript.

Use express.static to serve static assets and then use app.get('*', for redirecting all other requests to your angular.js entry point (index.html).

express.js middleware order do counts!

express.static must be declared before app.router
Node.js / Express.js - How does app.router work?

edited May 23 '17 at 12:08

Community

1
1

answered Jan 11 '14 at 21:00

Ilan Frumer

32,059
8
70
84

I'm already using `express.static` and when I use `app.get('*'`, I get the error shown in the original post – Shamoon Jan 11 '14 at 21:06
1

`express.static` must be declared before `app.router`. Check this: http://stackoverflow.com/questions/12695591/node-js-express-js-how-does-app-router-work – Ilan Frumer Jan 11 '14 at 21:10
I already do that, but when I refresh page, I get a file download... I'm using jade files – Leandro Hoffmann Jan 15 '15 at 18:19
@LeandroHoffmann please post a question with more information – Ilan Frumer Jan 15 '15 at 18:23
See the question here, thank you for help -> http://stackoverflow.com/questions/27971489/refresh-specific-page-with-angular-express-and-jade-using-html5mode – Leandro Hoffmann Jan 15 '15 at 19:31

AngularJS and Express Routing issue

1 Answers1

When using html5Mode the documentation says:

What it doesn't mention is:

Your case:

express.js middleware order do counts!

Linked