Running multiple function blocks disables the construction of certain projects while the 'watch' flag is in use

In an Angular environment and using NX, I have set up the following script in my package.json for building the project:

"start:all": "nx run-many --target=build --projects=\"proj1,proj2,proj3,proj4\" --watch --skip-nx-cache"

When running this script, it only builds proj2:build --watch and starts watching that project without proceeding to build the other 3 projects.

I am aware of NX's watch function. However, I find it to be slower and not caching results as expected. Are there better alternatives to achieve this task efficiently?


  • I attempted adding --parallel and --maxParallel=100, but that did not resolve the issue.

  • Removing the --watch flag allowed all projects to be built, but watch functionality is essential.

  • An interesting discovery was made when removing a specific project causing a dilemma:

Running target build for 3 projects and 1 task they depend on:

Even after removing one project, it still built the removed one (as other dependencies rely on it), successfully built 2 others, but left one project unbuilt.


It seems like there may be issues with how these projects interdepend or how they run in parallel. Any insights on resolving this would be greatly appreciated. Thank you!

Answer №1

Solution:

To address the issue, make sure to include the following entries in each project's project.json under the "build" section:

"dependsOn": [
   { "dependencies": false, "target": "build"}
],

In the nx.json file, within "taskRunnerOptions" -> "default" -> "options", add the line:

"parallel": 100

Rationale:

The solution involved adjusting two key components after thorough research:

  1. Making sure that the parallel value is set sufficiently high.
  2. Ensuring that projects with dependencies do not wait for those dependencies to complete their build processes.

The root cause of the problem stemmed from proj1 and proj2 being dependent on proj3 and proj4, resulting in delays while awaiting completion of their build tasks due to utilizing the --watch flag which hindered the build process completion.

By implementing "dependencies": false in the "dependsOn" configuration, it allows for independent trigger of the build without waiting for all dependencies to finish building.

Reference:

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

Printing reports in Angular 9

I have a requirement in my Angular 9 application to generate and print reports. 1. I am looking for suggestions on how to handle printing reports where a user triggers the action by clicking a button, and the report data needs to be fetched from the datab ...

Why is it that the resource fails to load in an Angular localhost environment when making an http request?

In the realm of ASP.NET MVC projects lies my creation, a masterpiece utilizing Angular UI components powered by ASP.NET WebAPI. As an explorer navigating the unknown territory of Angular, I present to you the sacred texts residing within my project. Behol ...

Tips for incorporating the observer design pattern in REST APIs (Communication between front-end and back-end)

Is it possible to subscribe once to an API and receive multiple responses until I unsubscribe from that event? If so, how can this be achieved? If not, why does this approach not align with the observer pattern's guidelines? I attempted using the yie ...

Steps to invoke the Express JS code repository from a serverless repository

Within my current project, there exists various repositories housing Angular code, Express JS (node JS) code, and AWS serverless components. For a specific feature, I am tasked with transferring the 'userId' value from the Angular code to the ser ...

Encountering `error TS2554: Constructor expected 0 arguments, received 1` with ts-jest

I've recently delved back into TypeScript and started implementing TDD. I successfully set up ts-jest to run my tests, but I've hit a roadblock with a seemingly simple issue that has me stumped. organization.ts: class Organization implements IO ...

Is it possible to utilize a component's property as an argument for a method in Angular 6?

Within my Angular 6 application, I have a method designed to alter a property of my component. The scenario is as follows: ... value: number = 10; changeValue(v) { return v = 100; } ... Upon invoking this method with the component's property: this. ...

Retrieve a private property in spec.ts file of an Angular 6 application

In my Angular-6 service.ts file, I have a private variable that I am using. private tagSubject = new Subject<any>(); This variable is utilized in the following manner: sendNewTagMessage(message: string) { this.tagSubject.next({ text: message ...

How to extract a type from a nested type using TypeScript

I am trying to define a type structure where both a and foo are optional: type Something = { a?: { foo?: { bar: { c: { id: string, countryCode: number, animal: { ... } } } } } } Now I n ...

Retrieving a URL from an API with ngIf and then reusing the returned value

Allow me to provide a clear explanation of the situation: I am utilizing an API call where I input IDs and receive a downloadURL in return. Currently, I have implemented this as a Promise in my Service: Within fileClientService: public async getFile(aID ...

What is the best way to extract a value from an input within a filter?

I am currently utilizing ngx-easy-table in my application. I am trying to retrieve the input filter value on keyup event, but I have not been able to find any helpful information in the documentation. Does anyone have any insights or suggestions on how to ...

Steps for subscribing to an Observable in a Jasmine unit test

I am currently working on incorporating mock json data into my unit tests by creating a utility function for other test files to utilize. Here is an example of how it can be implemented: @Injectable({providedIn: 'root'}) export class MockUtilsSer ...

Problem encountered while saving data to firestore

Encountering difficulties when attempting to save and retrieve data from firestore. The code snippet provided below is failing, despite its simplicity and my stable internet connection. Even upgrading to websdk 5.0.4 has not fixed the issue. save = async ...

Passing a custom data type from a parent component to a child component in React

I'm currently working on developing a unique abstract table component that utilizes the MatTable component. This abstract table will serve as a child element, and my goal is to pass a custom interface (which functions like a type) from the parent to t ...

Angular 2 components sharing a common route

Two modules share the same path but have different templates (main and auth). The modules should be loaded based on whether the user is authenticated or not. Unfortunately, this functionality is not currently working as intended. Below are the relevant co ...

What is the best way to adjust the THREE.js view to match the size of the canvas

I am trying to implement dragging and dropping an element to the mouse position by synchronizing THREE.js space with the canvas size, where the coordinates {0,0} are located at the center of the screen. If my element has a width of 500px, dropping it at a ...

Combining class and data within an iteration while utilizing ngFor

I have a dynamic table with rows generated using ngFor <tbody> <tr *ngFor="let item of Details"> <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails"> <div ...

Is it considered a poor practice to utilize a store in an effect?

Within my InitAction, there are various parameters such as a profile id and other data. This action can be executed multiple times with different parameters. In addition, I have a LoadProfileAction with an effect that listens to the InitAction and trigger ...

Angular2's ErrorHandler can cause code to malfunction when an error occurs

import { Injectable, ErrorHandler, Inject, Injector } from '@angular/core'; import { MessengerService } from '../services'; import { MessageTypeEnum } from '../../shared'; @Injectable() export class AppErrorHandler extends Er ...

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

What is the reason for the failure of this typescript typeguard?

This code snippet defines a function for validating protocols and throwing an error if the input does not match the predefined protocols. const validProtocols = ["https", "http"] as const type AllProtocols = typeof validProtocols type Protocol = AllProtoco ...