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'));

Community · Accepted Answer · 2017-05-23 12:08:42Z

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, 2017 at 12:08

CommunityBot

11 silver badge

answered Jan 11, 2014 at 21:00

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shamoon Over a year ago

I'm already using express.static and when I use app.get('*', I get the error shown in the original post

Ilan Frumer Over a year ago

express.static must be declared before app.router. Check this: stackoverflow.com/questions/12695591/…

Leandro Hoffmann Over a year ago

I already do that, but when I refresh page, I get a file download... I'm using jade files

Ilan Frumer Over a year ago

@LeandroHoffmann please post a question with more information

Leandro Hoffmann Over a year ago

See the question here, thank you for help -> stackoverflow.com/questions/27971489/…

Collectives™ on Stack Overflow

AngularJS and Express Routing issue

1 Answer 1

When using html5Mode the documentation says:

What it doesn't mention is:

Your case:

express.js middleware order do counts!

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

When using html5Mode the documentation says:

What it doesn't mention is:

Your case:

express.js middleware order do counts!

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related