The "@nx/angular:application" generator doesn't yet support the existing TypeScript setup.
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
- create a new nx monorepo using
npx [email protected] - install @nx/angular
npm i -D @nx/[email protected] - Try to create a new angular application
npx nx generate @nx/angular:application --directory=apps --name=my-app - 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
I did also try this using the latest version of nx (20.4.2 at the time of writing) and had the same error.
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
That error shouldn't be happening as the installed version of typescript is supported by both nx and angular.
try this instead :
npx create-nx-workspace@latest angular-monorepo --preset=angular-monorepo
@khalilou88 The issue with that is I have more than just angular projects I want to put into my monorepo.
@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)
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>
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.
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.
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.
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
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)
Two months later . . . any updates on this?
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-workspacesflag 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 answeringNoneto theWhich stack do you want to use?prompt)
Any updates on this now that Angular 20 got officially released @leosvelperez? Thanks.
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-workspacesflag 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 answeringNoneto theWhich stack do you want to use?prompt)
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.
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 👍
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.
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
authandusers - 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.
@leosvelperez any news about this? Can we expect the upcoming Angular v21 to unblock this?
Hey any updates about this?
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
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=falsewhen 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
Hi @juristr, is there an Angular issue opened on their repo that we can follow on the subject?
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
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?