Express throwing module errors

Question

Express throwing module errors

I encountered an issue while attempting to expose a REST service in an electron app using expressJS. Following a tutorial, I added express and @types/express to the project. However, when trying to implement a "get" method and running the build with ng build --prod, I received the following errors:

ERROR in ./node_modules/cookie-signature/index.js
Module not found: Error: Can't resolve 'crypto' in 'app\node_modules\cookie-signature'
...

This is my first time working on such a task, so please bear with me if I'm unfamiliar with some concepts.

Here is an excerpt from my package.json:

> {
  "name": "angular-electron",
  ... (omitted for brevity)
}

The project was functioning perfectly until I integrated the express part using the following code snippet:

var app = express()

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

javascript typescript express npm electron

Answer 1

Answer №1

I have exhausted all potential solutions found online, yet none seemed to work for me. My project utilized angular universal with express for server-side rendering. One morning, out of nowhere, I encountered an error that prevented my project from running smoothly. Despite attempting the suggested fix in the browser: {"fs": false}, the issue persisted and consumed the entirety of my day. After careful examination of my existing codebase, I realized that I had overlooked a crucial detail - I inadvertently imported Router from express within a component.

The mistake:

import { Router } from 'express';

The correction:

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

Answer 2

I have exhausted all potential solutions found online, yet none seemed to work for me. My project utilized angular universal with express for server-side rendering. One morning, out of nowhere, I encountered an error that prevented my project from running smoothly. Despite attempting the suggested fix in the browser: {"fs": false}, the issue persisted and consumed the entirety of my day. After careful examination of my existing codebase, I realized that I had overlooked a crucial detail - I inadvertently imported Router from express within a component.

The mistake:

import { Router } from 'express';

The correction:

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

Answer 3

Answer №2

Your solution now consists of 2 applications:

1) The client application, angular, which operates in a browser environment

2) The server application, express, which functions in a node environment

When constructing the angular application with `ng build`, it is crucial to ensure that the express application files are not included in the angular build. The node modules utilized by express are not compatible with a browser environment.

Here's what you can do:

1) Shift the express source code out of the src folder and into the project root

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

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

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

2) Execute `ng build`

3) Run `node server.js` from the project root. This command will continue running

4) Access `localhost:3000` in your browser to view your application

Answer 4

Your solution now consists of 2 applications:

1) The client application, angular, which operates in a browser environment

2) The server application, express, which functions in a node environment

When constructing the angular application with `ng build`, it is crucial to ensure that the express application files are not included in the angular build. The node modules utilized by express are not compatible with a browser environment.

Here's what you can do:

1) Shift the express source code out of the src folder and into the project root

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

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

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

2) Execute `ng build`

3) Run `node server.js` from the project root. This command will continue running

4) Access `localhost:3000` in your browser to view your application

Answer 5

Answer №3

Always double-check your application to ensure that it has not mistakenly imported any unnecessary packages.

I encountered this problem recently myself. It turns out that sometimes the application automatically adds packages while we are working on it. For example, when I was making a fetch request, {JSON, Express} were imported without my knowledge.

If you find yourself mixing backend packages within the src folder for front-end development, you may run into similar issues.

Answer 6

Always double-check your application to ensure that it has not mistakenly imported any unnecessary packages.

I encountered this problem recently myself. It turns out that sometimes the application automatically adds packages while we are working on it. For example, when I was making a fetch request, {JSON, Express} were imported without my knowledge.

If you find yourself mixing backend packages within the src folder for front-end development, you may run into similar issues.

Express throwing module errors

Answer №1

Answer №2

Answer №3

Similar questions

Receive a Post request in Node.js sent from Django

Setting up dynamic routes in a Vue.js Express application

The error message "Cannot read property 'addEventListener' of undefined" occurred while trying to register the service worker using `navigator.serviceWorker.register('worker.js')`

What are the steps to configure ESlint and Prettier with the Airbnb style guide for a React Native/JavaScript project (Expo) in VS Code?

The getStaticProps() method in NextJS does not get invoked when there is a change in

Troubleshooting the malfunction of jQuery's change() function

Sending an Ajax request using an array of parameters and then accessing them in PHP

Unable to incorporate .tsx files into a Node.js Web Application project

Send a single piece of data using AJAX in Flask

What is the origin of this MouseEvent attribute?

Explore the world of React with the captivating react-image-gallery on JSFiddle

Unexpected error 500 (Internal Server Error) occurred due to BadMethodCallException

Can you please tell me which version of the npm package is currently installed?

Develop a custom time input mask in AngularJS controller

Streamlining Typescript

Implementing Material UI datetime-local feature with no minute selection

Arrange my Firebase Angular users based on a specific value, encountering an error stating "sort is not a function

What steps should be taken to fix the error message "Module not found: 'react-dev-utils/chalk'" while executing on a Kubernetes environment?

How can I arrange a specific array position in Vuejs according to the Id value?

Is it possible to create two separate Express sessions simultaneously?