Angular compiler options paths are often overlooked

I'm facing an issue while developing an Angular application that utilizes xml2js. The error message I encountered is as follows:

$ ng build
⠦ Building...
✘ [ERROR] Could not resolve "timers"

    node_modules/xml2js/lib/parser.js:36:25:
      36 │   setImmediate = require('timers').setImmediate;
         ╵                          ~~~~~~~~

  The package "timers" cannot be found on the file system, but it's inherent in node. Are you attempting to bundle for node? You can use "platform: 'node'" to avoid this error.

Previously, I had no issues building the app, but recently this problem started occurring. I haven't made any changes to angular.json or tsconfig.app.json since then. Interestingly, the app functions correctly when running the dev-server using ng serve and ng serve -c production.

angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "<NDA_OMIT>": {
      "projectType": "application",
      ...
    }
  },
  "cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
  }
}

tsconfig.app.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    ...
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
ng version output
Angular CLI: 17.2.0
Node: 20.11.0
Package Manager: npm 10.4.0
OS: linux x64

Angular: 17.2.1
...

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1702.0
@angular-devkit/build-angular      17.2.0
@angular-devkit/core               17.2.0
@angular-devkit/schematics         17.2.0
...

Answer №1

There seems to be a strange solution to the problem - installing timers resolves the issue. Interestingly, xml2js functions flawlessly despite the absence of setImmediate in that library.

Answer №2

To begin with, I highly recommend upgrading to one of the most recent versions of node.js as there have been some recent CVEs. v20.15.1 (LTE) or 22.4.1 (current) [early july 2024]

Next: ensure all your angular packages are on the same version, either 17.3.8 or 18.1.0. I suggest angular 18.

You can update all packages to the latest version by running npm update in your project's root folder. After that, npm outdated should not display any entries.

Lastly: delete your node_modules and package-lock.json files, then run a final npm install.

If these steps do not resolve the issue, please inform us.

Answer №3

Remove the package-lock.json file along with the node_modules directory, then run npm install and try running your application again to see if the issue is resolved.

Answer №4

To make it work, simply switch the builder to @angular-devkit/build-angular:browser and adjust the other settings accordingly. This should allow the build process to run smoothly.

Here is an example of what your angular.json file should look like:

"builder": "@angular-devkit/build-angular:browser",
          "options": {
           "outputPath": "dist/app",
            "main": "src/main.ts",
            "index": "src/index.html",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered an error with Firebase when attempting to run functions on my local machine

Encountering a Firebase error when running the function locally using emulator in CLI $ firebase emulators:start --only functions Initiating emulators: ["functions"] functions: Using node@8 from host. functions: Emulator started at http://localhost:50 ...

Tips on managing the issue of "Preflight request response does not meet access control requirements: 'Access-Control-Allow-Credentials' value"

I am attempting to send an HTTP POST request to a web-api2 server running on my localhost. My client is operating on http://localhost:4200, and my server is running on http://localhost/MemoryGameServer/api/Test (Different Origin). Below is my Angular 7 cl ...

Typing function parameters that accept generic types "from the identical instance"

I have come across a similar implementation of an Event Emitter in TypeScript and I am looking to create a helper function that maintains type integrity. You can find my code attempt on TS Play sample page. Below is the snippet from my sample: In the prov ...

Search for specific item within an array of objects

Working on an Angular project, I am attempting to remove an object from an array. To achieve this, I need to filter the array and then update the storage (specifically, capacitor/storage) with the modified array. Here is my function: deleteArticle(id: str ...

Having issues with npm not installing '@angular-devkit/build-angular:dev-server'?

Encountering an issue on my MEAN course project as I am unable to run it due to the following error: $ npm run start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="335e56552d1e505c4641405673031d031d03">[email prot ...

What is the best way to extract the query parameter from paramMap in Angular 5?

Is there a way to retrieve the query parameter from paramMap in Angular 5? I'm running into an issue where I can't assign the value to void. My goal is to include additional calls in the switchmap that are dependent on the id. this.route.pa ...

Angular FormData fails to append and upload files

I am attempting to use FormData in order to upload a file through an HTTP Request. Here is the HTML code: <ng-template #displayApp> <div class="display flex justify-content-center"> <div > <p-fileUploa ...

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Currently, I am facing an issue with a bootstrap modal. There is a button inside the modal which upon clicking should navigate the current component to another component named 'questions'. The problem arises when the new component is loaded, as t ...

Attempting to publish and install a unique angular2 component using NPM and Angular-CLI results in successful compilation only on the initial try

I am facing a peculiar and frustrating issue. The problem revolves around an Ng2 component I have developed called via-date-picker. My goal is to publish it on NPM so that it can be easily utilized in other projects. To achieve this, I converted it into a ...

Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Encountering an issue while attempting to display a child component using data from an Observable in its parent, and then utilizing the async pipe to transform the data into a list of objects for rendering with *NgFor. Here's what I've done: C ...

There was an issue encountered while attempting to instantiate an object of Class A using the designated variable

I have the following class definition: export class TechnicalContactInfo { constructor(){ this.Communication = []; } /** @description ContactFunctionCode */PER01; /** @description ContactName */PER02; /** @description Communication */Commun ...

Recursive rendering of tree components in React

I am facing a challenge in rendering tree items recursively using React. I have been struggling to achieve the desired outcome as calling treeRender(children) seems to alter the data structure when a folder is encountered for the first time. I am curious a ...

After refreshing the page, LocalStorage is not displayed

I'm currently working on a project using Angular 2 for the web. Whenever I access the Chrome Developer Tools (f12), I can see the local storage data from localhost. However, once I refresh the page, the local storage information disappears... Screen ...

Exploring the Angular lifecycle hooks for directives: AfterContent and AfterView

According to the Angular documentation, it is stated that AfterContent and AfterView lifecycle hooks are intended for components and not directives. Surprisingly, I have a directive that seems to be using them without any issues. What potential limitation ...

Searching for TypeScript type definitions for the @Angular libraries within Angular 2

After updating my application to Angular2 v2.0.0-rc.1, I am encountering TypeScript compile errors and warnings when webpack bundles my application. These messages appear for any @angular packages referenced in my TypeScript source files: ERROR in ./src/a ...

Issue with AdonisJS Lucid idempotent methods and the updateOrCreateMany() function

Seeking clarification on a 500 error related to a specific attribute in the database while using updateOrCreateMany(), as opposed to no error when using updateOrCreate(). Here is the code snippet for updateOrCreateMany(): const payload = [ { githubI ...

Detecting the State of the Keyboard in Ionic 2

Seeking an easy way to determine if the mobile device keyboard has been opened or closed using Ionic2 and Angular2. Is there a 'keyboard-open' or 'keyboard-close' class that Ionic sends to the body/html? ...

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

Utilize MaterialUI's Shadows Type by importing it into your project

In our project, we're using Typescript which is quite particular about the use of any. There's a line of code that goes like this: const shadowArray: any = Array(25).fill('none') which I think was taken from StackOverflow. Everything s ...

The draggable container refuses to move despite implementation of Hammerjs and Angular

I have a situation in my angular app where cards (divs) can be dragged and relocated on desktop, but I'm trying to make it work on mobile using hammerjs. https://i.sstatic.net/9JtgPm.png Currently, I have implemented a (pan) event handler which is t ...