Transitioning a codebase from @angular-builders/custom-webpack to NX for project optimization

I need help migrating my Angular project from using "@angular-builders/custom-webpack" build targets to transitioning to an integrated NX monorepo. When I run the command npx nx@latest init --integrated, I receive the following warning:

  • Unsupported builders:
    • Errors:
      • The "build" target is currently set up with the builder "@angular-builders/custom-webpack:browser", which cannot be automatically migrated and will be skipped.
      • The "serve" target is currently set up with the builder "@angular-builders/custom-webpack:dev-server", which cannot be automatically migrated and will be skipped.
      • The "test" target is currently set up with the builder "@angular-builders/custom-webpack:karma", which cannot be automatically migrated and will be skipped.
    • You have two options: manually migrate the target configuration and any associated files, or revert the migration and change the builder to one of the supported options listed by the automated migration tool (such as "@angular-devkit/build-angular:application", "@angular-devkit/build-angular:browser", etc.), then rerun the migration process.

Can someone advise me on how to proceed in this situation?

angulartypescriptwebpacknrwl-nxangular-builder

Answer №1

After some investigation, I discovered that the solution was to manually edit the project.json file located in apps/my-app/. Specifically, I had to modify all instances of:

someConf: "src/...",

to:

someConf: "apps/my-app/src..."

Additionally, I found it necessary to correct the "extends": property within several tsconfig.xxx.json files that were relocated by NX, ensuring they pointed to the appropriate base file (which had been renamed to tsconfig.base.json by NX).

I was surprised by the fact that these adjustments were not made automatically by nx (version 18.0.4)

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

Automating button clicks after a component has loaded in Angular 2+ can be achieved by implementing a

Currently, I am working on implementing an automatic search function in Angular that triggers after a component loads. Right now, the function is triggered by a button click, but I want to automate this process. <button mat-raised-button class="mat-whi ...

javascripthtmlangulartypescriptsingle-page-application

Change the background color of a span element dynamically

I am currently working on implementing dynamic background coloring for a span tag in my Angular view that displays document types. The code snippet provided is as follows: <mat-card *ngFor="let record of records"> <span class="doc ...

angulartypescriptsass

Comprehending the concept of TypeScript type assertion

Currently, I'm learning TypeScript and I came across a code snippet that is causing some confusion. var str = '1' var str2:number = <number> <any> str //str is now of type number console.log(typeof(str2)) log: String From m ...

typescript

The 'log' property cannot be found on the type '{ new (): Console; prototype: Console; }' - error code TS2339

class welcome { constructor(public msg: string){} } var greeting = new welcome('hello Vishal'); Console.log(greeting.msg); I encountered an error at the Console.log statement. The details of the error can be seen in the image attached below. ...

javascripttypescript

Using React's Ref to handle conditional rendering and handling the case when

I am facing an issue with my React ref animationRef being null when I conditionally render an element. It works perfectly fine outside of the condition, but not within it. Is there a way to ensure that the ref has a value even when conditionally renderin ...

reactjstypescript

Having trouble with your Typescript *.ts files?

Having trouble understanding why the command tsc *.ts isn't functioning correctly. The error message TS6053: File '*.ts' not found keeps appearing. Any suggestions on how to compile all the .ts files within a directory? Thank you! ...

typescript

Setting up admin credentials with TypeScript in Firebase cloud functions

While working with Firebase cloud functions in JavaScript, I utilized the following code snippet to initialize admin: admin.initializeApp({ credential: admin.credential.cert(require('./key/firebase-adminsdk.json')), databaseURL: "https://app ...

node.jstypescriptfirebasegoogle-cloud-functions

Merging an unspecified number of observables in Rxjs

My latest project involves creating a custom loader for @ngx-translate. The loader is designed to fetch multiple JSON translation files from a specific directory based on the chosen language. Currently, I am implementing file loading through an index.json ...

angulartypescriptrxjsobservable

An issue with TypeORM syntax causing errors within a NestJS migration file

I recently encountered an issue while setting up PostgreSQL with NestJS and TypeORM on Heroku. Despite successfully running a migration, my application kept crashing. I attempted various troubleshooting methods by scouring through blogs, GitHub issues, and ...

postgresqltypescriptnestjstypeorm

Is there a way in Angular 1.5 to compile the HTML of a parent component from within a child component?

I have created two angular components called app-menuitem and app-menu. The app-menu component contains a list of app-menuitems as its children, without using transclude. App-menuitem Component: angular.module('app') .component('appMen ...

angularjsangularcompilationcomponentsparent-child

Since integrating redux-persist, accessing the current state of the redux store has become a challenge

For the past two days, I've been searching for answers to my problem without any luck. It seems like no one else is experiencing the exact issue I'm having, so I must be missing something obvious. Ever since I added redux-persist, I can no longe ...

typescriptreduxredux-persist

Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with: ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2 ...

javascriptimagetypescriptionic-frameworkcompression

Solidjs: Implementing a Map in createStore does not trigger updates upon changes

As a beginner in solidjs, I might have missed something important. In the code snippet below, I am trying to understand an issue: const [state, setState] = createStore({ items: new Map() }); // e.g. Map<number, string> In a component, suppose I want ...

javascripttypescriptsolid-js

Compilation failure due to Typescript initialization issue

Encountering a TypeScript error in my IntelliJ-Idea 2017.1.1 IDE I have enabled JavaScript, NodeJS, and TypeScript Compiler. I have exhausted all solutions but the issue persists, perhaps I am missing something. Error: Initialization error (typescript ...

angularjsjsontypescriptintellij-ideapackage.json

Is there a way to determine the height of the ion-footer?

Is there a way to obtain the height of the ion-footer element in Ionic2? I want to calculate the initial window height minus the ion-footer height, but I am currently only able to get the overall window height. I'm not interested in retrieving the ...

angulartypescriptionic2ionic3

Creating dynamic checkboxes in Angular4 and binding them to an array of IDs

Hey there developers, I've been encountering an issue while trying to bind my dynamically generated checkboxes to an array in my project. In my users.template.html file, I have the following code snippet: <div *ngFor="let r of roles" class="checkb ...

angulartypescriptcheckbox

What is causing the memory leak in this code snippet?

While working with the http service to retrieve user data from UserService, I encountered a memory leak issue. Upon subscribing to the observable, an infinite number of http requests are being triggered as shown in the network tab of the developer console. ...

angularangular-httpclientangular-observable

Using Typescript in the package.json as a dependency

After initiating a React project with typescript using the command below: npx create-react-app frontend --template typescript https://i.sstatic.net/8n4O5.png I noticed that the tyepscript, @testing, and @types libraries were added to dependencies rather ...

reactjstypescriptnpm

Alter the data displayed by the Radio button using Angular when the Submit button is clicked

I've encountered an issue where I need to alter a div based on the selection of a radio button. Currently, it changes instantly upon button click, rather than waiting for submission. My desired outcome is for the value to be submitted when the button ...

javascriptangulartypescripteventsdom-events

Verifying Angular Universal Using JSON Web Tokens

I have a project in Angular 10 Universal where I am using JWT obtained from localhost to verify requests for restricted routes. Currently, I am utilizing the following package for authentication: https://www.npmjs.com/package/@auth0/angular-jwt The issue ...

node.jsangularjwtserver-side-renderingangular-universal