错误：ENOENT：没有这样的文件或目录与Angular2和Express.js [英] Error: ENOENT: no such file or directory with Angular2 and Express.js

问题描述

我正在对 GitHub上的此示例Angular2应用程序进行细微修改，以便使用Express.js而不是KOA。但是当我尝试在FireFox中加载应用程序时，在 nodemon 控制台中会打印出以下错误：

I am making minor modifications to this sample Angular2 app on GitHub so that it uses Express.js instead of KOA. But at the moment, the following error is printed in the nodemon console when I try to load the app in FireFox:

Error: ENOENT: no such file or directory

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

The Angular2 app starts to load when an http request for localhost : 8080 triggers the * router handler, which returns index.html, which then triggers callbacks for a series of nested dependencies, one of which throws the error and halts the application loading mid-way through.

为了解决错误，需要对GitHub示例中的代码进行什么具体更改：ENOENT：没有这样的文件或目录？

What specific changes need to be made to the code in the GitHub sample in order to resolve the Error: ENOENT: no such file or directory?

---

背景和代码：

---

以下是 路由器的新替代品使用Express.js而不是KOA的.js ：

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

请求的 nodemon 控制台输出 localhost：8080 触发上述Express.js app.get（'*'...）方法重复引导错误是：

The nodemon console output for the request to localhost : 8080 that triggers the above Express.js app.get('*'...) method repeatedly leading up to the error is:

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是：

And the new server/index.js which specifies Express.js is:

// 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 如上所示。

Everything else in the GitHub sample app remains the same as what you see on GitHub with the exception of package.json, which merely contains dependencies to support the alterations in router.js and index.js as shown above.

推荐答案

bootstrap.css.map 表示您的浏览器正在尝试加载Bootstrap CSS的源地图（这是一个调试工具）。

bootstrap.css.map indicates that your browser is trying to load a source map (which is a debugging tool) for the Bootstrap CSS.

只有当您的浏览器的开发工具打开时，这才会发生，所以不是严格的问题（除非你想实际调试Bootstrap的CSS）。除此之外，总是可以请求其他URL，并产生相同的错误。

This will only happen if you have your browser's developer tools open, so not strictly a problem (unless you want to actually debug Bootstrap's CSS). Besides that, it's always possible to other URL's to be requested and yield the same error.

解决方案是将明确的错误处理程序添加到 sendFile ，并假设发生错误时，是因为该文件不存在（因此应该产生404响应）：

A solution would be to add an explicit error handler to sendFile, and assume that when an error happens, it's because the file doesn't exist (so it should yield a 404 response):

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

这篇关于错误：ENOENT：没有这样的文件或目录与Angular2和Express.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！