Tips for launching Nx serve in debug mode for Angular using VSCode

When running my Angular Nx project in the VSCode debugger, I encounter an issue with using yarn.

yarn start successfully executes the nx serve command when run from a terminal.

However, the same yarn start command fails when executed through VSCode debugger. It used to work perfectly fine before migrating from Angular-client (ng).

Now, I constantly receive this error message:

*  Executing task: yarn run start 

yarn run v1.22.19
$ nx serve
/path/to/project/node_modules/nx/bin/nx.js:132
    globalThis.GLOBAL_NX_VERSION ??= GLOBAL_NX_VERSION;
                                  ^

SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 *  The terminal process "/usr/bin/zsh '-c', 'yarn run start'" terminated with exit code: 1. 
 *  Terminal will be reused by tasks, press any key to close it.

Another issue arises: During debugging (when it was functioning), the debugger always navigated through the node_modules code despite being listed in my skipFiles settings.

Here is my configuration in the launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      // Configuration details here...
    }
  ]
}

And below is my setup in the tasks.json file:

{
  "version": "2.0.0",
  "tasks": [
    {
      // Task details here...
    }
  ]
}

Answer №1

The ??= operator was introduced in NodeJS v15.

If you encounter this error, it indicates that your version of node is v14 or below.

Given that nx utilizes ??=, it seems they have chosen to discontinue support for v14 and earlier versions.

Many other modules have also ceased support for v14 and may soon stop supporting v16 as well.

I suggest checking if your project can function with node v18 or at least v16; otherwise, consider updating the project.

If remaining on node v14 is necessary, you will need to revert to an older version of nx (and potentially other modules).


Regarding skipping files during debugging, have you attempted the following?

  "skipFiles": [
    "<node_internals>/**/*.js"
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]

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

Restrict the number of items in a list in Angular 2 to a

I need help structuring a list of material cards in my application. The list can potentially have a large number of elements, so I want to limit it to showing only 5 items at a time and provide an option for the user to navigate through additional elements ...

"Exploring the depths of Webpack's module

This is my first venture into creating an Angular 2 application within MVC Core, utilizing TypeScript 2.2, Angular2, and Webpack. I have been closely following the Angular Documentation, but despite referencing the latest NPM Modules, I encounter errors w ...

Using JavaScript to place a particular tag at a designated position

I have a string that looks like this: var txtstr='<p>Text 1</p><p>&nbsp;</p><p>Text &nbsp;2</p><p>&nbsp;</p><p>Text 3&nbsp;</p>'; I have an <img src=..../> tag and ...

Whenever the [required] tag switches from being true to false, it generates an event

Initially, I have set up an Angular form using the following code snippet buildForm() { this.form = this.formBuilder.group({ value1: this.formBuilder.control(null), value2: this.formBuilder.control(false) }); } The HTML contains a ...

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

Recently, I ran into a problem where, upon logging in with Google, I found myself needing access tokens for Twitter and LinkedIn to send out API requests. The issue came about when NextAuth modified my session data to be from either Twitter or LinkedIn ins ...

The index type in TypeScript's keyof function is overly broad

Sorry if this question has been addressed before, but I'm having trouble finding the right search terms. Feel free to correct my question if necessary. This is what I have: type RowData = Record<string, unknown> & {id: string}; type Column&l ...

Angular is patiently awaiting the completion of the subscription

Currently, I am in the process of developing a test application using Angular. The challenge arises when I attempt to retrieve data through a Get request and then return a value based on that data. The code snippet below outlines the scenario: public getN ...

Ensuring multiple choices are validated within a reactive form in Angular

Having just started working with Angular, I encountered an issue regarding the validation of a user's gender. The default setting for gender is not specified in the form, which is used to update user data. In some cases, the user may choose to set the ...

Guide on integrating a newly bought template into an Angular 6 and Bootstrap 4 application

Although I have years of experience as a backend developer, I am relatively new to frontend development. Lately, I have been immersing myself in learning Angular 6 and Bootstrap 4 for an upcoming project at work. After setting up a basic Angular 6 applica ...

Tips for concealing error messages in Angular 7 when an input field is in focus

Is there a way to hide the custom validation message div when the input field is in focus? I'm looking for a solution to this issue. <div class="form-group"> <label class="col-sm-4 control-label">Password</label> <div class ...

Previewing images with Dropzone through extending file types

Want to display an image preview before uploading using dropzone. Attempting to access the images by calling file.preview but encountering the error "it does not exist on type File." Dropzone extends the file type with a preview?: string. How can I access ...

How can I implement a feature in Angular where clicking the edit button loads a form (in a separate component) pre-populated with previous data, along with an update button for

Within the employee-list component, there is a table displaying a list of employees. This table includes an option to edit details. <button type="button" class="btn btn-primary" routerLink="../create-employee">Edit</b ...

When using ngx-slider in Angular, it unexpectedly fires off when scrolling on mobile devices

I am currently developing a survey application that utilizes ngx-sliders. However, I have encountered an issue on mobile devices where users unintentionally trigger the slider while scrolling through rows of slider questions, resulting in unintended change ...

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

The functionality of Angular material seems to be malfunctioning within an Angular library

After observing the potential for reusable code in my Angular projects, I decided to create a common library to streamline development. Following the steps outlined in an article (link: https://angular.io/guide/creating-libraries), I successfully created t ...

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

Rendering seems to be working fine for the mainWindow. webpack.config.js : var renderer_config = { mode: isEnvProduction ? 'production' : 'development', entry: { app: './src/app/index.tsx', //app_A: './src/a ...

Encountering an error in Angular 12 with DomSanitizer when setting the src attribute dynamically for an iframe. The issue arises when trying to set a

Having trouble creating a component to handle YouTube embedded videos? It seems like passing the src as a variable isn't working properly, no matter what is tried. Does anyone have any ideas on what might be going wrong, or if it's a bug in Angul ...

Unable to spy on the second and third call using Jest

I'm having trouble using spyOn on the second and third calls of a function in my jest test I attempted to follow the documentation with this approach: it("should succeed after retry on first attempt failure", async () => { jest.spyOn(n ...

Angular Reactive Forms - Adding Values Dynamically

I have encountered an issue while working with a reactive form. I am able to append text or files from the form in order to make an http post request successfully. However, I am unsure about how to properly append values like dates, booleans, or arrays. a ...

Discovering subtype relationships in JSON with TypeScript

Consider the scenario where there are parent and child typescript objects: class Parent { private parentField: string; } class Child extends Parent { private childField: string; } Suppose you receive a list of JSON objects for both types via a R ...