因此,在 2 天里,我的 Angular5 服务人员遇到了一些问题,但我认为我已经将其范围缩小到我为应用程序提供服务的方式。您可以从我发布的这个 SO question中详细阅读我是如何走到这一步的,或者您可以阅读摘要:
服务工作者在从http-server
.
我现在看到的主要问题是,当我使用应用程序为我的应用程序提供服务时node/express
,我的开发工具中的网络选项卡会为我提供网络离线时的状态504
。localhost:3000
就好像服务人员没有指向localhost:3000/index.html
. 但这在为 http-server 提供文件时不是问题。
这是我的server.js
文件,我有节点使用它来服务我的角度应用程序:
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文档所描述的那样,没有额外的自定义。
- 没有控制台错误。唯一的错误是网络选项卡中的 504 状态。
- 在这两种情况下,都会安装一个服务工作者,并且所有应该缓存的文件都被缓存。
如果您想自己测试一下: 1.在此处下载此测试存储库。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 文件和元素文件中的图片。此外,这些请求仅在导航到不同页面后才有效,在刷新后永远不会。
如果我在终端中关闭服务器,服务人员只会尝试localhost:3000
从服务人员那里获取信息,但这会失败并出现 504 错误。屏幕上没有显示任何其他内容,并且网络选项卡除了更新的 service worker 文件之外没有其他请求。
我对这些发现并不完全了解,再次感谢任何帮助