404 手动刷新

Question

我正在构建我的第一个 MEAN 应用程序，Angular 6. 0.2，Express 4.16.0

由于 Angular CLI 和 Express 生成器

，文件已经生成

与 MongoDB 的连接完美运行，实际上，一切正常，但手动刷新...

根据我已经看过的帖子，问题应该出在路由器上（记住我想使用 Angular 路由器）。

到目前为止，我的 app.js 文件有 2 条路线：

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

其次是...

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

还有……

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

之后我有了默认的错误处理程序（Express 生成的）。

索引路线：

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

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

module.exports = router;

编辑 01 — 现在在应用第一个建议的解决方案后出现 "Path is not defined" 错误。

EDIT 02 — 由于建议的解决方案，问题已解决（另请参阅评论）。但是 router.get('/', function... 中断了对数据的访问（错误 200）。如果您遇到相同的问题，请仅使用特定的问题，例如 router.get(' /poney', function... 不是 /（除非有人知道如何修复它）。

编辑 3 — 经过进一步调查，您可以使用

拥有一个 "magical" 路由器

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

Answer 1

将以下内容添加到您的路由器：

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

如果您有其他 url 需要用户直接访问，例如管理和登录屏幕，请添加以下内容：

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

这个想法是，您会将用户发送到 angulars index.html 页面，路由器将在其中发挥其魔力，而不是直接使用节点进行渲染，[=19 是不可能的=].

404 手动刷新

404 on manual refresh

routes

http-status-code-404

express

angular2-router

angular