javascript - 错误 : ENOENT: no such file or directory with Angular2 and Express. js

Question

我正在对 this sample Angular2 app on GitHub 进行小幅修改以便它使用 Express.js 而不是 KOA。但是目前，当我尝试在 FireFox 中加载应用程序时，nodemon 控制台中打印了以下错误:

Error: ENOENT: no such file or directory

当对 localhost : 8080 的 http 请求触发 * 路由器处理程序时，Angular2 应用程序开始加载，该处理程序返回 index.html，然后触发一系列嵌套依赖项的回调，其中一个会抛出错误并在中途停止应用程序加载。

为了解决 Error: ENOENT: no such file or directory，需要对 GitHub 示例中的代码进行哪些具体更改？

---

背景和代码:

---

这是 router.js 的新替代品它使用 Express.js 而不是 KOA:

'use strict';
let uuid = require('node-uuid');
var path = require('path');
let jwt = require('jsonwebtoken');
let config = require('./config');

// expose the routes to our app with module.exports
module.exports = function(app) {

    //all other methods omitted here for brevity

    app.get('*', function(req, res) {
        console.log('inside * route!');           
        if(req.url === '/'){
            res.sendFile(path.resolve('dist/client/index.html')); // load the single view file (angular will handle the front-end)
        } else {
            res.sendFile(path.resolve('./dist/client' + req.url));
        }
    });
};

请求 localhost : 8080 的 nodemon 控制台输出触发上述 Express.js app.get('*'...) 重复导致错误的方法是:

App listening on port 8080
inside * route!
GET / 304 54.261 ms - -
inside * route!
inside * route!
inside * route!
GET /boot.css 304 4.637 ms - -
GET /boot.js 304 4.447 ms - -
GET /vendor.js 304 3.742 ms - -
inside * route!
GET /vendor.js.map 200 3.180 ms - 3115631
inside * route!
GET /boot.js.map 200 2.366 ms - 61810
inside * route!
GET /bootstrap.css.map 404 2.515 ms - 169
Error: ENOENT: no such file or directory, stat '/home/user/nodejs_apps/angular2_oauth_seed_app/dist/client/bootstrap.css.map'
    at Error (native)

还有新的server/index.js其中指定 Express.js 是:

// set up ======================================================================
var express  = require('express');
var app      = express();                               // create our app w/ express
var port     = process.env.PORT || 8080;                // set the port
var morgan = require('morgan');             // log requests to the console (express4)
var bodyParser = require('body-parser');    // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)

app.use('/static', express.static(__dirname + '/dist/client'));
app.use(morgan('dev'));                                         // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
app.use(bodyParser.json());                                     // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride());
app.use('/scripts', express.static(__dirname + '/node_modules/'));

// load the routes
require('./router')(app);

// listen (start app with node server.js) ======================================
app.listen(port);
console.log("App listening on port " + port);

GitHub 示例应用程序中的其他所有内容都与您在 GitHub 上看到的相同，但 package.json 除外，它仅包含支持更改的依赖项router.js 和 index.js 如上所示。

Answer 1

bootstrap.css.map 表示您的浏览器正在尝试为 Bootstrap CSS 加载源映射(这是一个调试工具)。

这只会在您打开浏览器的开发人员工具时发生，所以严格来说这不是问题(除非您想实际调试 Bootstrap 的 CSS)。除此之外，总是有可能请求其他 URL 并产生相同的错误。

一个解决方案是向 sendFile 添加一个显式错误处理程序，并假设当错误发生时，是因为该文件不存在(因此它应该产生 404 响应):

res.sendFile(path.resolve('./dist/client' + req.url), (err) => {
  if (err) return res.sendStatus(404);
});