錯誤：ENOENT：沒有這樣的文件或目錄與Angular2和Express.js

Question

我正在對this sample Angular2 app on GitHub進行小修改，以便它使用Express.js而不是KOA。但此刻，打印在nodemon控制檯下面的錯誤，當我嘗試加載應用程序在FireFox：

Error: ENOENT: no such file or directory 

的Angular2應用程序啓動時localhost : 8080一個HTTP請求觸發*路由器的處理程序，加載哪些返回index.html，然後觸發一系列嵌套依賴的回調，其中一個引發錯誤並在應用程序加載中途停止。

需要對GitHub示例中的代碼進行哪些特定更改才能解決Error: ENOENT: no such file or directory？

---

背景和編碼：

---

這裏是 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)); 
     } 
    }); 
}; 

的nodemon控制檯輸出用於請求localhost : 8080觸發上述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); 
});