nx icon indicating copy to clipboard operation
nx copied to clipboard

The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup.

Open shadow1349 opened this issue 10 months ago • 27 comments

Current Behavior

I started a brand new NX monorepo using version 20.4.0 since that seems to be the supported version for angular 19. (https://nx.dev/nx-api/angular/documents/angular-nx-version-matrix). However, when I try to create an angular application it just gives me this error.

NX   The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup

We're working hard to support the existing TypeScript setup with the "@nx/angular:application" generator. We'll soon release a new version of Nx with support for it.

I have made sure that all the version I'm using fall in range of what is supported for nx and angular yet this seems to be a consistent issue.

Expected Behavior

I should be able to create an angular project in my nx monorepo.

GitHub Repo

No response

Steps to Reproduce

  1. create a new nx monorepo using npx [email protected]
  2. install @nx/angular npm i -D @nx/[email protected]
  3. Try to create a new angular application npx nx generate @nx/angular:application --directory=apps --name=my-app
  4. Error should appear

Nx Report

Node           : 20.11.1
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.2.4

nx                     : 20.4.0
@nx/js                 : 20.4.0
@nx/jest               : 20.4.0
@nx/eslint             : 20.4.0
@nx/workspace          : 20.4.0
@nx/angular            : 20.4.0
@nx/devkit             : 20.4.0
@nx/module-federation  : 20.4.0
@nx/nest               : 20.4.0
@nx/node               : 20.4.0
@nx/web                : 20.4.0
@nx/webpack            : 20.4.0
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/js/typescript

Failure Logs

NX   The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup

We're working hard to support the existing TypeScript setup with the "@nx/angular:application" generator. We'll soon release a new version of Nx with support for it.

Package Manager Version

npm: 10.2.4

Operating System

  • [x] macOS
  • [ ] Linux
  • [ ] Windows
  • [ ] Other (Please specify)

Additional Information

No response

shadow1349 avatar Feb 08 '25 16:02 shadow1349

I did also try this using the latest version of nx (20.4.2 at the time of writing) and had the same error.

shadow1349 avatar Feb 08 '25 16:02 shadow1349

i also had the same error.

npx nx add @nx/angular // FAILS

ERROR: NX The "@nx/angular" plugin doesn't yet support the existing TypeScript setup

npm i -D -w @nx/[email protected] // WORKS!

npx nx g @nx/angular:app apps/myapp-ui // FAILS

Error: NX The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup We're working hard to support the existing TypeScript setup with the "@nx/angular:application" generator. We'll soon release a new version of Nx with support for it.

Looks like we will have to wait for some time

Suraj-Singhvi avatar Feb 09 '25 16:02 Suraj-Singhvi

That error shouldn't be happening as the installed version of typescript is supported by both nx and angular.

shadow1349 avatar Feb 10 '25 15:02 shadow1349

try this instead :

npx create-nx-workspace@latest angular-monorepo --preset=angular-monorepo

klagrida avatar Feb 10 '25 19:02 klagrida

@khalilou88 The issue with that is I have more than just angular projects I want to put into my monorepo.

shadow1349 avatar Feb 10 '25 20:02 shadow1349

@shadow1349 did you try to create another app after npx create-nx-workspace@latest angular-monorepo --preset=angular-monorepo?

I think, the step that you used to create a workspace, enable TypeScript project references, and it's not supported by angular, this is why the error. If you say you want a angular-monorepo (it should work I think)

klagrida avatar Feb 10 '25 23:02 klagrida

Just create two apps with the steps:

PS D:\Workspace\Projects> npx create-nx-workspace@latest angular-monorepo3 --preset=angular-monorepo

 NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

√ Application name · app1
√ Which bundler would you like to use? · esbuild
√ Default stylesheet format · css
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? · No
√ Test runner to use for end to end (E2E) tests · playwright
√ Which CI provider would you like to use? · github

 NX   Creating your v20.4.2 workspace.

√ Installing dependencies with npm
√ Successfully created the workspace: angular-monorepo3.
√ Nx Cloud has been set up successfully
√ CI workflow has been generated successfully
....

 NX   Your CI setup is almost complete.

Finish it by visiting: https://cloud.nx.app/connect/hOpXQ8br88

 NX   Welcome to the Nx community! 👋

🌟 Star Nx on GitHub: https://github.com/nrwl/nx
📢 Stay up to date on X: https://x.com/nxdevtools
💬 Discuss Nx on Discord: https://go.nx.dev/community
PS D:\Workspace\Projects> 
PS D:\Workspace\Projects\angular-monorepo3> npx nx generate @nx/angular:application --directory=apps --name=my-app

 NX  Generating @nx/angular:application

√ Which bundler do you want to use to build the application? · esbuild
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) · false
CREATE apps/project.json
CREATE apps/src/index.html
CREATE apps/src/styles.css
CREATE apps/tsconfig.app.json
CREATE apps/tsconfig.editor.json
CREATE apps/tsconfig.json
CREATE apps/public/favicon.ico
CREATE apps/src/app/app.component.html
CREATE apps/src/app/app.component.spec.ts
CREATE apps/src/app/app.component.ts
CREATE apps/src/app/app.component.css
CREATE apps/src/app/app.config.ts
CREATE apps/src/app/app.routes.ts
CREATE apps/src/main.ts
CREATE apps/src/app/nx-welcome.component.ts
CREATE apps/eslint.config.mjs
CREATE apps/jest.config.ts
CREATE apps/src/test-setup.ts
CREATE apps/tsconfig.spec.json
CREATE apps-e2e/project.json
CREATE apps-e2e/playwright.config.ts
CREATE apps-e2e/src/example.spec.ts
CREATE apps-e2e/tsconfig.json
CREATE apps-e2e/eslint.config.mjs

 NX   👀 View Details of my-app

Run "nx show project my-app" to view details about this project.

PS D:\Workspace\Projects\angular-monorepo3> 

klagrida avatar Feb 10 '25 23:02 klagrida

I have other frameworks I want to work with in the same monorepo though. NestJS, Ionic, and sveltekit.Having an angular preset monorepo kind of defeats the purpose.

shadow1349 avatar Feb 11 '25 21:02 shadow1349

had to downgrade to 20.2.0 to get it working.

Started a blank integrated repo with no preset. Then tried to add @nx/angular. Had the same error on ~20.3.0 and ~20.4.0. Tried typescript version ~5.4.0, ~5.5.0, ~5.6.0, ~5.7.0.

blackholegalaxy avatar Feb 11 '25 22:02 blackholegalaxy

Sames... really looking forward to trying out Angular 19 with Nx and some other packages.

I do see the below message - is there any channel to keep an eye on or any place official to follow?

We're working hard to support the existing TypeScript setup with the "@nx/angular" plugin. We'll soon release a new version of Nx with support for it.

METACEO avatar Feb 13 '25 22:02 METACEO

Please read this comment from one of the member

https://github.com/nrwl/nx/issues/28322#issuecomment-2402623507

there is a work around also mentioned in the comments https://github.com/nrwl/nx/issues/28322#issuecomment-2627757718

Suraj-Singhvi avatar Feb 14 '25 04:02 Suraj-Singhvi

with all the respect to the devs of nx and their hard work they have put into it. I just have a question how a tool which a lot of enterprise projects depend can degrade so much. Is not anymore just the issue of not being able to add angular, but also with other issues which I and other colleagues are having to the point of dropping nx. The biggest issues right now are not being able to run any command without running nx reset on our machines almost after every serve command. There is the issue with migrations which leaves the projects in some messed up state because some nx libs ask for one version of typescript and others for some other version.

This issue with angular not being supported in the current TS setup is being going for quite some time and a workaround means soon or later another change on NX will bite us back. (I do not know if others have same issue, but running the workaround just leaves the monorepo in some messed up state where npm install complains for the typescript version differences between nx libs and angular libs)

adlion avatar Feb 22 '25 01:02 adlion

Two months later . . . any updates on this?

adamstret avatar Apr 13 '25 12:04 adamstret

Hey all!

This issue is caused by a limitation on the Angular CLI. It's not that we can't or didn't want to update the relevant generators to add support for it, but rather that if we do so, you won't be able to build your apps & libs.

We've been in touch with the Angular team to resolve this on the Angular CLI side, and I'm pleased to say that the main issue blocking this has been fixed and will be released with Angular v20. So, once Angular v20 is released and we add support for that version, we can support Angular projects with the new TypeScript setup.

In the meantime, as has been mentioned in other issues and some comments in this thread, you can create a workspace without the new TypeScript setup by doing one of the following:

  • create a new workspace with an Angular preset (e.g. --preset=angular-monorepo)
  • if using the latest Nx version, you can use any preset by providing the --no-workspaces flag when creating a workspace
  • if you're using an Nx version lower than 20.6.0, you can use any preset except ts (the preset used when answering None to the Which stack do you want to use? prompt)

leosvelperez avatar Apr 14 '25 10:04 leosvelperez

Any updates on this now that Angular 20 got officially released @leosvelperez? Thanks.

christophbuehler avatar May 30 '25 17:05 christophbuehler

Hey all!

Unfortunately, the changes made in Angular and released in v20 that were supposed to unblock using Angular with TS project references were insufficient. The fixes bypassed an initial issue and allowed only a particular/limited scenario to work. So, the current state is still the same: a limitation on the Angular CLI side prevents us from having Angular work on the new setup.

We are in touch with the Angular team to address this limitation. We'll continue pushing for this and keep you updated.


In the meantime, as has been mentioned in other issues and some comments in this thread, you can create a workspace without the new TypeScript setup by doing one of the following:

  • create a new workspace with an Angular preset (e.g. --preset=angular-monorepo)
  • if using the latest Nx version, you can use any preset by providing the --no-workspaces flag when creating a workspace
  • if you're using an Nx version lower than 20.6.0, you can use any preset except ts (the preset used when answering None to the Which stack do you want to use? prompt)

leosvelperez avatar Jun 25 '25 07:06 leosvelperez

I tried the work around from: https://github.com/nrwl/nx/issues/28322#issuecomment-2627757718 and it's working!

It looks like that it works by adding "declaration": false to tsconfig.base.json. After that nx add @nx/angular works again.

francisco-chaves-dc avatar Jul 14 '25 17:07 francisco-chaves-dc

I tried the work around from: #28322 (comment) and it's working!

It looks like that it works by adding "declaration": false to tsconfig.base.json. After that nx add @nx/angular works again.

Just adding "declaration": false to the tsconfig.base.json made it work, nice workaround 👍

Maryannah avatar Aug 14 '25 12:08 Maryannah

Trying the workaround I unfortunately get this error:

Error: × TS6304: Composite projects may not disable declaration emit.

Which is weird because apparently it seems it has built the project but then just cancels running.

SargoDarya avatar Aug 15 '25 19:08 SargoDarya

I’m sharing a solution for anyone encountering issues generating Angular apps with @nx/angular in an Nx workspace.

Workspace Setup:

  • Nx version: 21.4.0 (latest CLI installation)
  • Workspace created as non-preset, containing backend NestJS applications like auth and users
  • Angular frontend apps added separately, Angular version: 20.1.0
  • TypeScript version: 5.8.0 (required by Angular compiler: >=5.8.0 <5.9.0)

Problem: When running the Angular generator using:

npx nx add @nx/angular

I encountered this error:

The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup

This happens because the default tsconfig.base.json generated by Nx contains these compiler options:

"composite": true,
"declarationMap": true,
"declaration": true,
"emitDeclarationOnly": true

These settings are meant for project references and declaration output, but they conflict with Angular’s generator.

Solution:

  • Remove any or all of the above options from tsconfig.base.json.
  • After removing them, the Angular generator works without errors.

Additional Notes & Testing:

  • Compilers tested: rspack and esbuild
  • OS tested: Ubuntu 25 and Mac M4 Pro
  • This configuration works reliably and respects Angular’s TypeScript requirements.
  • Ensures compatibility of Nx workspace with Angular frontend generation while keeping NestJS backend apps intact.

Conclusion: If you are using a workspace with multiple apps and a TypeScript version 5.8.x for Angular, removing the composite, declarationMap, declaration, and emitDeclarationOnly options from tsconfig.base.json resolves the generator issue.

MakeAnIque avatar Aug 22 '25 22:08 MakeAnIque

@leosvelperez any news about this? Can we expect the upcoming Angular v21 to unblock this?

ardokirsipuu avatar Sep 11 '25 10:09 ardokirsipuu

Hey any updates about this?

DevWedeloper avatar Oct 02 '25 13:10 DevWedeloper

I tried the work around from: #28322 (comment) and it's working!

It looks like that it works by adding "declaration": false to tsconfig.base.json. After that nx add @nx/angular works again.

doesn't work with composite projects

its-dibo avatar Oct 07 '25 10:10 its-dibo

We've been getting a lot of questions related to this and we hear you. The main issue is that Angular doesn't support TypeScript Project References atm but rather fails due to how the Angular compiler works.

We're talking to the Angular team and are actively looking into options to fix this and make the experience seamless.

TL;DR:

  • If you use the Angular workspace preset when you setup a new Nx monorepo, and add NestJS to that, you won't be running into these types of issues as Angular workspaces use the TS path aliases way of linking packages and don't use TS Project references.
  • Similarly you can use --workspaces=false when creating a new Nx workspaces to disable NPM workspaces + TS Project References

I recorded a quick video talking about this, what the problem is, how to setup Nx + Angular + Nest without TS Proj references and how to potentially patch your existing NPM workspaces + TS Proj references setup to make Angular work (though its a bit messy).

Video description also contains the links to demo repos. https://youtu.be/hWvRzo51YAc

juristr avatar Oct 22 '25 13:10 juristr

Hi @juristr, is there an Angular issue opened on their repo that we can follow on the subject?

sroucheray avatar Oct 23 '25 07:10 sroucheray

my workaround:

1- turn off the composite option in tsconfig.base.json, and disable declaration 2- generate the application 3- Before running it, re-enable the composite option

its-dibo avatar Oct 23 '25 20:10 its-dibo

Hi @juristr, is there an Angular issue opened on their repo that we can follow on the subject?

Maybe https://github.com/angular/angular/issues/37276?

quixot1c avatar Dec 05 '25 20:12 quixot1c