FirstOfMany FirstOfMany - 2 months ago 52x
Javascript Question

Error: ENOENT: no such file or directory with Angular2 and Express.js

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

console when I try to load the app in FireFox:

Error: ENOENT: no such file or directory

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

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

Background and Code:

Here is the new replacement for
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));

console output for the request to
localhost : 8080
that triggers the above Express.js
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 / 200 3.180 ms - 3115631
inside * route!
GET / 200 2.366 ms - 61810
inside * route!
GET / 404 2.515 ms - 169
Error: ENOENT: no such file or directory, stat '/home/user/nodejs_apps/angular2_oauth_seed_app/dist/client/'
at Error (native)

And the new
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('/scripts', express.static(__dirname + '/node_modules/'));

// load the routes

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

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

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

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.

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