错误: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

当对 localhost : 8080 的 http 请求触发 * 路由器处理程序时，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 示例中的代码进行哪些具体更改才能解决 Error: ENOENT: no such file or directory?

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?

---

背景和代码:

---

这是 router.js<的新替代品/code> 使用 Express.js 而不是 KOA:

---

Background and Code:

---

Here is the new replacement for router.js which uses Express.js instead of 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));
        }
    });
};

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.指定 Express.js 的 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屋！