404 on manual refresh

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

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.