Angular dev-server (NX) builder, not usable with NX 18 and Angular < 16

[AronHoxha]

Current Behavior

Currently you are using an app with NX 18 angular < 16, the dev-server builder of @nx/angular is unusable since the command fails with the following error:

"The "forceEsbuild" option is only supported in Angular >= 16.1.0. You are currently using "13.3.11"

Expected Behavior

The dev server should start

GitHub Repo

No response

Steps to Reproduce

1. Create a NX 18 project
2. Add Angular with version < 16 and NX plugin
3. Create an Angular app in the NX project which has the dev-server target
4. Run the dev-server target

The command should fail with the above mentioned error

Nx Report

Node   : 18.16.0
OS     : linux-x64
yarn   : 1.22.19

nx                 : 18.1.2
@nx/js             : 18.1.2
@nx/jest           : 18.1.2
@nx/linter         : 18.1.2
@nx/eslint         : 18.1.2
@nx/workspace      : 18.1.2
@nx/angular        : 18.1.2
@nx/cypress        : 18.1.2
@nx/devkit         : 18.1.2
@nx/esbuild        : 18.1.2
@nx/eslint-plugin  : 18.1.2
@nx/nest           : 18.1.2
@nx/node           : 18.1.2
@nx/playwright     : 18.1.2
@nx/plugin         : 18.1.2
@nrwl/tao          : 18.1.2
@nx/web            : 18.1.2
@nx/webpack        : 18.1.2
nx-cloud           : 18.0.0
typescript         : 4.6.4
---------------------------------------
Community plugins:
@currents/nx                     : 2.0.1
@fortawesome/angular-fontawesome : 0.10.2
@ngrx/component                  : 13.2.0
@ngrx/component-store            : 13.2.0
@ngrx/effects                    : 13.2.0
@ngrx/eslint-plugin              : 15.4.0
@ngrx/router-store               : 13.2.0
@ngrx/schematics                 : 13.2.0
@ngrx/store                      : 13.2.0
@ngrx/store-devtools             : 13.2.0
@testing-library/angular         : 11.0.4
ng-mocks                         : 14.12.1
ngrx-immer                       : 2.1.1

Failure Logs

NX   The "forceEsbuild" option is only supported in Angular >= 16.1.0. You are currently using "13.3.11".

You can resolve this error by removing the "forceEsbuild" option or by migrating to Angular 16.1.0.

Error: The "forceEsbuild" option is only supported in Angular >= 16.1.0. You are currently using "13.3.11".
You can resolve this error by removing the "forceEsbuild" option or by migrating to Angular 16.1.0.
    at validateOptions (node_modules/@nx/angular/src/builders/dev-server/lib/validate-options.js:10:15)
    at executeDevServerBuilder (node_modules/@nx/angular/src/builders/dev-server/dev-server.impl.js:20:31)
    at onInput (node_modules/@angular-devkit/architect/src/create-builder.js:162:30)
    at node_modules/@angular-devkit/architect/src/create-builder.js:65:29
    at Object.next (node_modules/rxjs/dist/cjs/internal/Subscriber.js:161:21)
    at Subscriber._next (node_modules/rxjs/dist/cjs/internal/Subscriber.js:101:26)
    at Subscriber.next (node_modules/rxjs/dist/cjs/internal/Subscriber.js:72:18)
    at Subscriber._next (node_modules/rxjs/dist/cjs/internal/Subscriber.js:101:26)
    at Subscriber.next (node_modules/rxjs/dist/cjs/internal/Subscriber.js:72:18)
    at node_modules/rxjs/dist/cjs/internal/Subject.js:66:34

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

In the code, forceEsbuild is checked to be undefined for angular versions < 16:

nx/packages/angular/src/builders/dev-server/lib/validate-options.ts

Line 10 in ef81455

if (lt(angularVersion, '16.1.0') && options.forceEsbuild !== undefined) {

But forceEsbuild is set to false by default in the builder schema:

nx/packages/angular/src/builders/dev-server/schema.json

Line 117 in ef81455

"default": false

This change seems to have been made in this PR: #21753

[dlq84]

esbuild was introduced in angular 16 and the flag you're trying to use in 16.1, there's nothing NX can do about that. Upgrade your angular version.

You should always upgrade nx with nx migrate <version>, this will upgrade and migrate angular with it. https://nx.dev/features/automate-updating-dependencies

Here's the version matrix: https://nx.dev/nx-api/angular/documents/angular-nx-version-matrix

[AronHoxha]

esbuild was introduced in angular 16 and the flag you're trying to use in 16.1, there's nothing NX can do about that. Upgrade your angular version.

As it is in our project we can't migrate the angular version as of right now.

We don't want to use esBuild for our dev-server, but it's impossible to use the dev-server even with foreceEsbuild: false since it still fails.

Can't the default value of forceEsbuild be undefined, so that nx is compatible angular versions <16?

Thank you for sharing the compatibility matrix!

[dlq84]

esbuild was introduced in angular 16 and the flag you're trying to use in 16.1, there's nothing NX can do about that. Upgrade your angular version.

As it is in our project we can't migrate the angular version as of right now.

We don't want to use esBuild for our dev-server, but it's impossible to use the dev-server even with foreceEsbuild: false since it still fails.

Can't the default value of forceEsbuild be undefined, so that nx is compatible angular versions <16?

Thank you for sharing the compatibility matrix!

What happens if you do not specify forceEsbuild in your conf at all?

[AronHoxha]

What happens if you do not specify forceEsbuild in your conf at all?

The same error

[AronHoxha]

What happens if you do not specify forceEsbuild in your conf at all?

Note: manually remove the following line from node_modules, successfully serves the app. Not sure if it breaks using NX with higher versions of angular

[leosvelperez]

@AronHoxha there's a legit issue for which I created a PR, but note that Angular versions lower than 15 are not supported. From the failure logs you shared, you seem to be using Angular 13.3.11, which is not a supported version.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.