Modules not found when using express

Question

I want to expose REST service in electron app and I want to use expressJS with electron, as tutorial states I added express and @types/express. I tried to expose a "get " but when I build and run it throws the following.

Ran with ng build --prod

ERROR in ./node_modules/cookie-signature/index.js
Module not found: Error: Can't resolve 'crypto' in 'app\node_modules\cookie-signature'
ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'crypto' in 'app\node_modules\etag'
ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'app\node_modules\destroy'
ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in 'app\node_modules\etag'
ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in 'app\node_modules\express\lib'
ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in 'app\node_modules\mime'
ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in 'app\node_modules\send'
ERROR in ./node_modules/express/lib/application.js
Module not found: Error: Can't resolve 'http' in 'app\node_modules\express\lib'
ERROR in ./node_modules/express/lib/response.js
Module not found: Error: Can't resolve 'http' in 'app\node_modules\express\lib'
ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'http' in 'app\node_modules\express\lib'
ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in 'app\node_modules\express\lib'
ERROR in ./node_modules/content-disposition/index.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\content-disposition'
ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\express\lib'
ERROR in ./node_modules/express/lib/response.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\express\lib'
ERROR in ./node_modules/express/lib/application.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\express\lib'
ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\mime'
ERROR in ./node_modules/mime-types/index.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\mime-types'
ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\send'
ERROR in ./node_modules/serve-static/index.js
Module not found: Error: Can't resolve 'path' in 'app\node_modules\serve-static'
ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'stream' in 'app\node_modules\destroy'
ERROR in ./node_modules/iconv-lite/lib/streams.js
Module not found: Error: Can't resolve 'stream' in 'app\node_modules\iconv-lite\lib'
ERROR in ./node_modules/iconv-lite/lib/extend-node.js
Module not found: Error: Can't resolve 'stream' in 'app\node_modules\iconv-lite\lib'
ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'stream' in 'app\node_modules\send'
ERROR in ./node_modules/body-parser/lib/read.js
Module not found: Error: Can't resolve 'zlib' in 'app\node_modules\body-parser\lib'

It's the first time i wanna do this kind of things so excuse me if I don't know smth...

package.json :

> {
  "name": "angular-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.4",
    "@angular/common": "^6.0.4",
    "@angular/compiler": "^6.0.4",
    "@angular/core": "^6.0.4",
    "@angular/forms": "^6.0.4",
    "@angular/http": "^6.0.4",
    "@angular/platform-browser": "^6.0.4",
    "@angular/platform-browser-dynamic": "^6.0.4",
    "@angular/router": "^6.0.4",
    "@types/express": "^4.16.0",
    "angular-svg-round-progressbar": "^2.0.0",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "js-sha256": "^0.9.0",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.6",
    "@angular/cli": "~6.0.7",
    "@angular/compiler-cli": "^6.0.4",
    "@angular/language-service": "^6.0.4",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "electron": "^2.0.2",
    "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": "~2.0.0",
    "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",
    "typescript": "~2.7.2"
  }
}

The project worked perfectly untill I've added the express part, it worked.

  var app = express()

  app.get('/', function (req, res) {
    res.send('Hello World')
  })

Answer 1

Check your App and make sure it has not auto imported a package that isn't supposed to be there.

I had this issue just today. The reason was sometimes it auto imports package when we are using, I was sending a fetch request and it auto imported {JSON, Express}.

So if you are somehow mixing backend packages with in src folder for front-end, this causes the issue.

Answer 2

I have tried every solution available on the internet and nothing worked actually. My project was using angular universal and it was express to render the application on the server side. On one morning suddenly I started getting this error and my project was not running.I tried the browser :{ "fs": false } fix suggested by someone. That even did not work. It took my entire day. I started analyzing my old code and found I did not add anything on package.json so it could not be any other dependency. When I found what was wrong it was silly as hell. I accidentally imported Router from express in a component

What was wrong

import { Router } from 'express';

What should be

import { Router } from '@angular/router';

Answer 3

You have now 2 applications in your solution:

1) client application: angular which runs in a browser environment

2) server application: express which runs in a node environment

When building the angular application (using ng build) you have to make sure you don't include the express application files in the angular build. The node modules used by express are not available in a browser environment.

You can do:

1) move the express source out of the src folder into project root

// server.js
var express = require('express');
var app = express();

app.use(express.static('dist')); // or where the output of the ng-build is placed

app.listen(3000, function() { console.log('Server running on port 3000'); });

2) run ng-build

3) run node server.js from project root. this will keep running

4) go to localhost:3000 and see your app