title: Deployment to Heroku Error: Cannot find module '/app/server.js'
body: <p>I'm deploying an Angular 6 application created with the angular-cli to Heroku. The build completes successfully, however, when I go to the deployed application, I get a blank page.</p>
  
  <p>After running the Heroku logs, it appears the error/crash happens upon starting up the node server instance. "Cannot find module '/app/server/js". The server.js file lives under the src directory so I don't know why this is happening.</p>
  
  <p>from the logs:
  <a href="https://i.stack.imgur.com/5rZUp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5rZUp.png" alt="enter image description here"></a></p>
  
  <p>Here is the package.json, I removed the node and npm engines to run the default versions from the heroku build:</p>
  
  <pre><code>{
    "name": "blog-app",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "node server.js",
      "build": "ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "postinstall": "ng build --prod"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.0",
      "@angular/cdk": "^6.0.0",
      "@angular/cli": "~6.0.0",
      "@angular/common": "^6.0.0",
      "@angular/compiler": "^6.0.0",
      "@angular/compiler-cli": "^6.0.0",
      "@angular/core": "^6.0.0",
      "@angular/forms": "^6.0.0",
      "@angular/http": "^6.0.0",
      "@angular/material": "^6.0.1",
      "@angular/platform-browser": "^6.0.0",
      "@angular/platform-browser-dynamic": "^6.0.0",
      "@angular/router": "^6.0.0",
      "@ng-bootstrap/ng-bootstrap": "^2.0.0",
      "@ngrx/effects": "^5.2.0",
      "@ngrx/store": "^5.2.0",
      "angularfire2": "^5.0.0-rc.8.1-next",
      "bootstrap": "^3.3.7",
      "core-js": "^2.5.4",
      "express": "^4.16.3",
      "firebase": "^5.0.2",
      "ngx-quill": "^3.1.0",
      "rxjs": "^6.0.0",
      "rxjs-compat": "^6.1.0",
      "typescript": "~2.7.2",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.6.0",
      "@angular/language-service": "^6.0.0",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~1.4.2",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }
  </code></pre>
  
  <p>And the server.js:</p>
  
  <pre><code>import express from "express";
  const app = express();
  
  app.use(static(__dirname + '/dist'));
  
  app.all('*', (req, res) =&gt; {
    res.status(200).sendFile(__dirname + '/dist/index.html');
  });
  
  app.listen(process.env.PORT || 8080);
  </code></pre>
  
  <p>File tree:</p>
  
  <p><a href="https://i.stack.imgur.com/6y0Y9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6y0Y9.png" alt="enter image description here"></a></p>
  
  <p>Any idea on what the problem could be?</p>
  
  <p>EDIT: I added a Procfile at src/Procfile:</p>
  
  <pre><code>web: node src/server.js
  </code></pre>
  
  <p>After adding this file, the app still crashes with the following output in the Heroku logs:</p>
  
  <p><a href="https://i.stack.imgur.com/WZGiB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WZGiB.png" alt="enter image description here"></a></p>