From 7ebd27af02a63a0e406bad75b96a8f28d885c1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Thu, 18 Apr 2024 15:53:35 +0200 Subject: [PATCH] docs(angular): call out @nx/angular plugin as required to run angular devkit schematics and builders (#22872) --- .../packages/angular/documents/overview.md | 19 ++++++++++++++----- docs/shared/guides/nx-and-angular-cli.md | 4 ++++ .../shared/guides/nx-devkit-angular-devkit.md | 4 ++++ .../shared/packages/angular/angular-plugin.md | 19 ++++++++++++++----- 4 files changed, 36 insertions(+), 10 deletions(-) diff --git a/docs/generated/packages/angular/documents/overview.md b/docs/generated/packages/angular/documents/overview.md index 5ddbaf8e0e..4af5191ba9 100644 --- a/docs/generated/packages/angular/documents/overview.md +++ b/docs/generated/packages/angular/documents/overview.md @@ -4,15 +4,24 @@ description: The Nx Plugin for Angular contains executors, generators, and utili --- The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries -within an Nx workspace. It provides: +within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces. -- Integration with libraries such as Storybook, Jest and Cypress. +Among other things, it provides: + +- Integration with libraries such as: + - Cypress + - ESLint + - Jest + - Playwright + - Storybook - Generators to help scaffold code quickly, including: - Micro Frontends - Libraries, both internal to your codebase and publishable to npm - - Single Component Application Modules (SCAMs) -- NgRx helpers. -- Utilities for automatic workspace refactoring. + - Projects with Tailwind CSS +- Executors providing extra capabilities on top of the Angular Devkit builders: + - Provide ESBuild plugins + - Provide custom webpack configurations +- Utilities for automatic workspace refactoring {% callout type="note" title="Currently using the Angular CLI?" %} You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn diff --git a/docs/shared/guides/nx-and-angular-cli.md b/docs/shared/guides/nx-and-angular-cli.md index 69489106f5..159167c07a 100644 --- a/docs/shared/guides/nx-and-angular-cli.md +++ b/docs/shared/guides/nx-and-angular-cli.md @@ -146,6 +146,10 @@ You can also run Angular Schematics through the Nx CLI. So something like this w npx nx g @schematics/angular:component my-component ``` +{% callout type="check" title="Important" %} +Support to run Angular Devkit builders and schematics is enabled by installing the [`@nx/angular` plugin](/nx-api/angular/documents/overview). This plugin is installed by default when creating a new Angular workspace with Nx or [migrate an existing Angular CLI workspace to Nx](#migrate-from-the-angular-cli). +{% /callout %} + ### Running Commands Commands are run in the very same way as with the Angular CLI. You just switch `ng` with `nx`. For example: diff --git a/docs/shared/guides/nx-devkit-angular-devkit.md b/docs/shared/guides/nx-devkit-angular-devkit.md index 2d62476053..ba7e8b8537 100644 --- a/docs/shared/guides/nx-devkit-angular-devkit.md +++ b/docs/shared/guides/nx-devkit-angular-devkit.md @@ -6,6 +6,10 @@ This document covers the difference between Nx Devkit and Angular Devkit. See th Nx comes with a devkit to write generators and executors, but you can also use Angular devkit (schematics and builders). In other words, you can use an Angular schematic to implement a generator, and you can use an Angular builder to implement an executor. +{% callout type="check" title="Important" %} +Support to run Angular Devkit builders and schematics is enabled by installing the [`@nx/angular` plugin](/nx-api/angular/documents/overview). This plugin is installed by default when creating a new Angular workspace with Nx or [migrate an existing Angular CLI workspace to Nx](/recipes/angular/migration/angular). +{% /callout %} + **What are the differences between Nx Devkit and Angular Devkit?** ## Generators diff --git a/docs/shared/packages/angular/angular-plugin.md b/docs/shared/packages/angular/angular-plugin.md index 5ddbaf8e0e..4af5191ba9 100644 --- a/docs/shared/packages/angular/angular-plugin.md +++ b/docs/shared/packages/angular/angular-plugin.md @@ -4,15 +4,24 @@ description: The Nx Plugin for Angular contains executors, generators, and utili --- The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries -within an Nx workspace. It provides: +within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces. -- Integration with libraries such as Storybook, Jest and Cypress. +Among other things, it provides: + +- Integration with libraries such as: + - Cypress + - ESLint + - Jest + - Playwright + - Storybook - Generators to help scaffold code quickly, including: - Micro Frontends - Libraries, both internal to your codebase and publishable to npm - - Single Component Application Modules (SCAMs) -- NgRx helpers. -- Utilities for automatic workspace refactoring. + - Projects with Tailwind CSS +- Executors providing extra capabilities on top of the Angular Devkit builders: + - Provide ESBuild plugins + - Provide custom webpack configurations +- Utilities for automatic workspace refactoring {% callout type="note" title="Currently using the Angular CLI?" %} You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn