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

Tips for preventing repetition of code in multiple entry points in Rollup

My goal is to use rollup to process a group of input files and generate multiple output files in the dist directory that all have some common code shared between them. Below is my current rollup configuration: import path from 'path'; import pat ...

javascripttypescriptoptimizationbundling-and-minificationrollupjs

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

cssangulartheming

Linking Angular 2 Production Mode to the vendor directory

I am currently working on an Angular2 project using the angular-cli npm package. To upload the app to the server, I used the following commands: ng build --prod and ng serve --prod. However, after uploading the dist folder to the server and trying to acc ...

angularjsangularangular-cli

How can I display an error message if the checkbox is not selected upon form submission?

If none of the checkboxes are selected, an error message should be displayed. The error message should be hidden when a checkbox is checked, but it's currently visible initially and disappears when unchecked. I would greatly appreciate your help. Than ...

angularvalidationcheckboxlist

Some code paths fail to return a value in Google Cloud Function callable functions

When utilizing async functions in my cloud function and including a 'return' statement in each potential output, I am still encountering the error message Not all code paths return a value I attempted removing my database calls and only leaving ...

typescriptgoogle-cloud-firestoregoogle-cloud-functionscallable

Creating and setting a selected option dynamically in Angular 2 for editing purposes

As I attempt to modify a user, I encounter a scenario where the user possesses a non-primitive array of machines. During editing, my goal is to generate new elements with select options and assign the selected value based on the user object: export class ...

angular

Encountered Typescript errors TS1110 and TS1005

Error in TypeScript: typings/node/node.d.ts(83,23): Type expected. TypeScript issue: typings/node/node.d.ts(1830,52): Expected '=' sign. My TypeScript compilation is failing at node.d.ts, despite multiple attempts to reinstall it. ...

typescript

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Consider the following scenario: { this.props.userName && <UserProfile userName={this.props.userName} /> In the UserProfile component: interface UserProfileProps { userName: string; } class UserProfile extends React.Component<UserProfile ...

reactjstypescript

Utilizing Observables for AngularJS Services across Multiple Components in a View

My current challenge lies in Angular, where I am struggling to implement Observables in a service that will be utilized by multiple components. The issue at hand involves having Component A and Component B nested inside Component C (in a tab style layout). ...

angularrxjsangular-servicesbehaviorsubject

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

I currently have a Lambda's API Gateway repository in CodeCommit that I successfully build using esbuild with CLI (SAM BUILD and then SAM DEPLOY). Now, I am looking to streamline the building process by integrating it with CodePipeline. I started exp ...

typescriptamazon-web-servicesaws-lambdaaws-codebuildsam

The Aurelia application encounters a "Maximum call stack size exceeded" error while trying to bind FullCalendar

I am currently working on setting up a JQuery plugin (FullCalendar) within my Aurelia application, which is built using TypeScript. I am relatively new to web development and just trying to get a basic example up and running. To start off, I utilized this ...

jquerytypescriptwebpackfullcalendaraurelia

Failure parsing occurred when attempting to make an HTTP POST request from Angular to a PHP server

When I try to consume the PHP endpoint from Postman, everything works fine. But when I attempt to do the same from an Angular post request, I encounter an error - Http failure during parsing for. Even though I have double-checked my code and it all seems c ...

phpjsonangular

Using {children} in NextJS & Typescript for layout components

I am looking to develop a component for my primary admin interface which will act as a wrapper for the individual screens. Here is the JavaScript code I have: import Header from '../Header' function TopNavbarLayout({ children }) { return ...

typescriptnext.js

The data in Angular2 service is not being saved consistently

I'm diving into Angular for the first time and following along with this tutorial. One of the key features of my Angular app is the CartService, which handles my shopping cart, while the CartComponent displays it in the navbar, and the CartReviewComp ...

angularjsangular

React Redux Bundle with Hot Reload Feature

Working on a project written in TypeScript with the React and Redux framework, I'm familiar with webpack and its middleware libraries for hot reloading. My question arises when considering how my TypeScript code is first converted to JSX through gulp ...

reactjstypescriptwebpackgulpredux

Experiencing an error message stating 'The token ${Token[TOKEN.72]} is invalid' while using cdk synth, specifically when trying to assign the value of ec2.Vpc.cidr from cfnParameter.value

Attempting to utilize the AWS CDK CfnParameter to parameterize the CIDR value of ec2.Vpc. The aim is to make the stack reusable for VPC creation with the CIDR as a customizable value. An error stating "${Token[TOKEN.72]} is not valid" occurs during synthe ...

typescriptaws-cloudformationaws-cdk

Typescript throws an error when attempting to return an array of strings or undefined from a function

I created a shallow differences function that compares two arrays of strings and returns either undefined (if the arrays are different lengths) or a string array containing matching characters at corresponding indexes. If the characters don't match, i ...

arraystypescriptfunction

Troubles with input handling in Angular

I've been diving into Traversy Media's Angular crash course recently. However, I've hit a roadblock that I just can't seem to get past. The problem arises when trying to style the button using a specific method. Every time I save and pa ...

angulartypescript

Convert all key types into arrays of that key type using a TypeScript utility type

My interface (type) is currently defined as: interface User { name: string, id: string, age: number, town: string } I have a function now that will search for Users based on specific fields. I prefer not to manually declare an additi ...

typescripttypescript-generics

Angular Router navigation not functioning as expected

I have successfully implemented routing in my Angular project. Below are the routes defined in the root module: const appRoutes: Routes = [ { path: '', component: LoginComponent }, { path: 'dashboard', canActivate: [AuthGuard], comp ...

angularangular-routingangular-router