MEAN Stack - SPA webapp 上的 *refresh*答案

【问题标题】：MEAN Stack - *refresh* on SPA webappMEAN Stack - SPA webapp 上的 *refresh*
【发布时间】：2018-12-26 12:23:36
【问题描述】：

我在 angular4 客户端使用哈希定位策略，在开发模式下，刷新工作，但是当编译到生产模式 (ng build -prod) 时，刷新会破坏页面 - 开发者控制台显示 GET <url> net::ERR_CONNECTION_REFUSED 和 ERROR of ProgressEvent。

在 app.js 文件中的服务器端（node + express），我们有以下代码：

app.use(function(req, res, next) {
    return res.render("index");
});

提前致谢

【问题讨论】：

标签： node.js angular express refresh mean-stack

【解决方案1】：

尝试在定义了所有路由的位置添加以下代码。确保这是最后/低于所有其他路线。

app.all('/*', function(req, res) {
    res.sendFile('index.html', { root: webRoot });
});

webRoot 是在您的服务器上定义的 Angular dist 目录的路径。在您的服务器上，您可以将其定义为 var webRoot = _dirname + '/../../client/dist';

如需了解更多信息，请查看 res.sendFile() 的官方 Express 文档

【讨论】：

'index.html' 应该指向 Angular 应用程序的 index.html 对吧？ { root: webRoot } 做了什么？
正确的 index.html 来自您的 Angular 应用程序。 { root: webRoot } 选项使您不必使用绝对路径。查看文档以获取更多信息expressjs.com/en/api.html#res.sendFile
查看更新的答案 - 抱歉，我应该更清楚选项和变量是什么。
我们已经尝试过app.get('*', function(req, res, next) { return res.sendFile(path.join(__dirname, 'PATH/TO/FILE/index.html')); }); 是否相同，从您写的内容来看？
不，这与我建议您尝试的完全不同。确保当您添加 app.all(..) 代码时，它位于您的所有 app.get()、app.post() 等...路由定义之下。

【解决方案2】：

您可以添加此代码来呈现 Angular 应用程序。

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
});

【讨论】：