【发布时间】：2018-07-13 04:18:57
【问题描述】：
所以在这两天里，我的 Angular5 服务人员遇到了一些问题，但我认为我已经将其范围缩小到我为应用程序提供服务的方式上。你可以在from this SO question I posted详细阅读我是如何走到这一步的，或者你可以阅读摘要：
服务工作者在从 http-server 运行我的应用程序时工作，但在我使用节点服务我的快速应用程序时不工作。
我现在看到的主要问题是，当我使用node/express 应用程序为我的应用程序提供服务时，我的开发工具中的网络选项卡会在我的网络离线时为localhost:3000 提供504 状态。就好像服务人员没有指向localhost:3000/index.html。但这在为 http-server 提供文件时不是问题。
这是我的 server.js 文件，我有节点使用它来服务我的 Angular 应用程序：
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const favicon = require('serve-favicon');
const logger = require('morgan');
const app = express();
const cookieParser = require('cookie-parser')
const bluebird = require('bluebird')
// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(logger('dev'));
// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'dist')));
// Send all other requests to the Angular app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname,'dist/index.html'));
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
// Set export
const port = process.env.PORT || '3000';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost ${port}`));
有人知道为什么会这样吗？
额外信息
- 我使用标签 --service-worker 启动了我的 Angular 应用程序，正如 angular docs 所描述的那样，没有额外的自定义。
- 没有控制台错误。唯一的错误是网络标签中的 504 状态。
- 在这两种情况下，都会安装一个 Service Worker，并缓存所有应该缓存的文件。
如果您想自己测试一下：
1. 下载这个测试仓库here。
2. 运行npm install。然后运行ng build --prod。
3. 测试 http-server 运行 npm install http-server。导航到 dist 文件夹并运行 http-server -p 4200。
4. 测试快速服务器导航到根目录并运行node server.js
更新
（抱歉我的缺席，我有真正的工作要处理，但我准备用新的想法来解决这个问题）
我注意到，如果我通过检查开发工具上的脱机按钮来模拟服务器处于脱机状态，运行我的服务器的控制台仍然会收到请求。但是当我在 devtools 中检查网络工具栏时，它说这些请求正在由 service worker 提供服务。这些请求尝试为我的背景文件提供服务，但失败并出现 504 not found 错误，仅获取 index.html 文件和元素文件中的图片。此外，这些请求仅在导航到其他页面后才有效，在刷新后永远不会。
如果我在终端中关闭服务器，Service Worker 只会尝试从 Service Worker 获取localhost:3000，但这会失败并出现 504 错误。屏幕上没有显示任何其他内容，并且网络选项卡除了更新的 service worker 文件之外没有其他请求。
我不太清楚这些发现如何，再次感谢任何帮助
【问题讨论】：
标签： node.js angular express service-worker angular-service-worker