404 on manual refresh

Question

I'm building my first MEAN app, Angular 6. 0.2, Express 4.16.0

Files have been generated thanks to Angular CLI and Express generator

Connection to MongoDB is perfectly running, actually, everything is working BUT the manual refresh...

According to the posts I've already seen, the problem should come from the routers (keeping in mind that I want to use the Angular router).

So far my app.js file has 2 routes:

var indexRouter = require('./routes/index'); // Express generated
var apiRouter = require('./routes/book');

Followed by...

app.use(express.static(path.join(__dirname, 'public'))); // Express generated
app.use(express.static(path.join(__dirname, 'dist/myProjectFolder')));
app.use(express.static(path.join(__dirname, 'dist/myProjectFolder')));

And...

app.use('/', indexRouter); // Express generated
app.use('/api, apiRouter);

After that I have my default error handlers (Express generated).

Index route:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

EDIT 01 — Now have a "Path is not defined" error after applying the first suggested solution.

EDIT 02 — Problem solved thanks to the suggested solution (see comments as well). However router.get('/', function... breaks the access to the data (error 200). If you have the same issue only use specific ones such as router.get('/poney', function... Not / (unless someone knows what to do to fix it).

EDIT 3 — After further investigation, you can have a "magical" router by using

router.get(/^\/(?!api).*/, function(req, res) {
    req.sendFile(path.join(__dirname, '.. /path/to/your/index.html'));
});

score 0 · Accepted Answer · answered Jun 11 '18 at 14:12

0

Add the following to your router:

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '../index.html')); // make sure index is accesed, in my example the node server would be in a server folder, so I need to go back a directorie with ../ where index.html can be hit.
});
router.get('/*', function(req, res) {
     res.sendFile(path.join(__dirname, '../index.html'));
});

Ifo you have other urls you need users to access directly, for example admin and login screens add the following:

router.get('/login', function(req, res) {
     res.sendFile(path.join(__dirname, '../index.html'));
});
router.get('/admin', function(req, res) {
     res.sendFile(path.join(__dirname, '../index.html'));
});

The idea is that you will send the user to angulars index.html page where the router will do its magic, instead of rendering directly with node, whitch is not posible with angular.

answered Jun 11 '18 at 14:12

Lucas

9,871
5
42
52

Hello, thanks for the answer — my error changed, now I have "path is not defined" – Romain Mascia Jun 11 '18 at 14:56
My bad, npm install path --save, and include import var path = require('path'); – Lucas Jun 11 '18 at 15:03
You might need to tweak the code I pasted... do a console log of path.join(__dirname, '../index.html') and make sure it correctly points to your index.html of your angular project root – Lucas Jun 11 '18 at 15:04
Ahah now I have another issue, I will investigate first, it's definitely related to your solution – Romain Mascia Jun 11 '18 at 15:54
I think I have a conflict with the API path now xD – Romain Mascia Jun 11 '18 at 15:56
Thanks for accepting the answer, let me know if I can help. – Lucas Jun 11 '18 at 16:00
I will probably create a new post tomorrow! Thanks :) – Romain Mascia Jun 11 '18 at 16:03
Hello again, so I managed to get it work by removing /* — any idea why this bit is breaking everything? – Romain Mascia Jun 12 '18 at 10:47
I fixed it combining your answer to some expressions. It might not be universal but it should work for most of the small projects! – Romain Mascia Jun 12 '18 at 11:50
Glad to hear that Romain! Have a great day. – Lucas Jun 12 '18 at 13:31

404 on manual refresh

1 Answers1