Merge branch 'master' into master

.nx/workflows/agents.yaml

@@ -14,6 +14,9 @@ env:
   NX_E2E_RUN_E2E: 'true'
   NPM_CONFIG_PREFIX: '/home/workflows/.npm-global'
   NX_CLOUD_ACCESS_TOKEN: '{{secrets.NX_CLOUD_ACCESS_TOKEN}}'
+on:
+  - events:
+      - CREATE_RUN_GROUP
 steps:
   - name: Checkout
     uses: 'nrwl/nx-cloud-workflows/v1.1/workflow-steps/checkout/main.yaml'

docs/changelog/17_0_0.md

@@ -20,6 +20,6 @@ Use [the `nx migrate` command](/core-features/automate-updating-dependencies) to
 {% card title="Removed workspace-lint command" type="external" url="https://github.com/nrwl/nx/pull/16212" /%}
 {% card title="Removed defaultCollection property" type="external" url="https://github.com/nrwl/nx/pull/19708" /%}
 {% card title="Removed npmScope property" type="external" url="https://github.com/nrwl/nx/pull/19708" /%}
-{% card title="Removed ability for Angular CLI to use our generators and executors" type="external" url="https://github.com/nrwl/nx/pull/19557" /%}
+{% card title="Removed ability for Angular CLI to use our generators and executors" type="external" url="/deprecated/angular-schematics-builders" /%}
 {% card title="Removed exported code from @nrwl/workspace that has been moved elsewhere" type="external" url="https://github.com/nrwl/nx/pull/19588" /%}
 {% /cards %}

docs/generated/manifests/menus.json

@@ -4996,6 +4996,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Angular Schematics and Builders",
+            "path": "/deprecated/angular-schematics-builders",
+            "id": "angular-schematics-builders",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Storybook deprecated docs",
             "path": "/deprecated/storybook",
@@ -5128,6 +5136,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Angular Schematics and Builders",
+        "path": "/deprecated/angular-schematics-builders",
+        "id": "angular-schematics-builders",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Storybook deprecated docs",
         "path": "/deprecated/storybook",

docs/generated/manifests/nx.json

@@ -6230,6 +6230,16 @@
         "path": "/deprecated/global-implicit-dependencies",
         "tags": []
       },
+      {
+        "id": "angular-schematics-builders",
+        "name": "Angular Schematics and Builders",
+        "description": "",
+        "file": "shared/deprecated/angular-schematics-builders",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/deprecated/angular-schematics-builders",
+        "tags": []
+      },
       {
         "id": "storybook",
         "name": "Storybook deprecated docs",
@@ -6396,6 +6406,16 @@
     "path": "/deprecated/global-implicit-dependencies",
     "tags": []
   },
+  "/deprecated/angular-schematics-builders": {
+    "id": "angular-schematics-builders",
+    "name": "Angular Schematics and Builders",
+    "description": "",
+    "file": "shared/deprecated/angular-schematics-builders",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/deprecated/angular-schematics-builders",
+    "tags": []
+  },
   "/deprecated/storybook": {
     "id": "storybook",
     "name": "Storybook deprecated docs",

docs/generated/packages/react-native/executors/pod-install.json

@@ -25,6 +25,11 @@
         "description": "Disallow any changes to the Podfile or the Podfile.lock during installation.",
         "type": "boolean",
         "default": false
+      },
+      "useBundler": {
+        "description": "Run cocoapods within a Bundler environment, i.e. with the `bundle exec pod install` command",
+        "type": "boolean",
+        "default": false
       }
     },
     "required": ["buildFolder"],

docs/map.json

@@ -1418,6 +1418,11 @@
               "id": "global-implicit-dependencies",
               "file": "shared/deprecated/global-implicit-dependencies"
             },
+            {
+              "name": "Angular Schematics and Builders",
+              "id": "angular-schematics-builders",
+              "file": "shared/deprecated/angular-schematics-builders"
+            },
             {
               "name": "Storybook deprecated docs",
               "id": "storybook",

docs/shared/angular-standalone-tutorial/angular-standalone.md

@@ -36,10 +36,10 @@ title="Tutorial: Standalone Angular Application"
 Create a new Angular application with the following command:
 
 ```{% command="npx create-nx-workspace@latest myngapp --preset=angular-standalone" path="~" %}
+✔ Default stylesheet format · css
+✔ Test runner to use for end to end (E2E) tests · cypress
 ✔ Would you like to use Standalone Components in your application? · Yes
-
 ✔ Would you like to add routing? · Yes
-✔ Default stylesheet format             · css
 ✔ Enable distributed caching to make your CI faster · Yes
 ```
 
@@ -233,7 +233,7 @@ Note that all of these targets are automatically cached by Nx. If you re-run a s
    Nx read the output from the cache instead of running the command for 4 out of 4 tasks.
 ```
 
-Not all tasks might be cacheable though. You can configure `cacheableOperations` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results).
+Not all tasks might be cacheable though. You can configure the `cache` properties in the targets under `targetDefaults` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results).
 
 ## Creating New Components
 
@@ -295,7 +295,7 @@ More info can be found in [the integrate with editors article](/core-features/in
 
 Run the following command to generate a new "hello-world" component. Note how we append `--dry-run` to first check the output.
 
-```{% command="npx nx g @nx/angular:component hello-world --standalone --dry-run" path="myngapp" %}
+```{% command="npx nx g @nx/angular:component hello-world --directory=src/app/hello-world --standalone --dry-run" path="myngapp" %}
 >  NX  Generating @nx/angular:component
 
 CREATE src/app/hello-world/hello-world.component.css
@@ -449,9 +449,9 @@ Running the above commands should lead to the following directory structure:
    │        ├─ src
    │        │  ├─ index.ts
    │        │  ├─ lib
-   │        │  │  └─ ui
+   │        │  │  └─ shared-ui
    │        │  │     ├─ ...
-   │        │  │     └─ ui.component.ts
+   │        │  │     └─ shared-ui.component.ts
    │        └─ ...
    ├─ ...
    ├─ src
@@ -479,9 +479,9 @@ All libraries that we generate automatically have aliases created in the root-le
   "compilerOptions": {
     ...
     "paths": {
-      "products": ["modules/products/src/index.ts"],
-      "orders": ["modules/orders/src/index.ts"],
-      "shared-ui": ["modules/shared/ui/src/index.ts"]
+      "@myngapp/orders": ["modules/orders/src/index.ts"],
+      "@myngapp/products": ["modules/products/src/index.ts"],
+      "@myngapp/shared-ui": ["modules/shared/ui/src/index.ts"]
     },
     ...
   },
@@ -526,7 +526,8 @@ export const appRoutes: Route[] = [
   },
   {
     path: 'products',
-    loadComponent: () => import('products').then((m) => m.ProductsComponent),
+    loadComponent: () =>
+      import('@myngapp/products').then((m) => m.ProductsComponent),
   },
 ];
 ```
@@ -555,11 +556,13 @@ export const appRoutes: Route[] = [
   },
   {
     path: 'products',
-    loadComponent: () => import('products').then((m) => m.ProductsComponent),
+    loadComponent: () =>
+      import('@myngapp/products').then((m) => m.ProductsComponent),
   },
   {
     path: 'orders',
-    loadComponent: () => import('orders').then((m) => m.OrdersComponent),
+    loadComponent: () =>
+      import('@myngapp/orders').then((m) => m.OrdersComponent),
   },
 ];
 ```
@@ -764,7 +767,7 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 // 👇 this import is not allowed
-import { OrdersComponent } from 'orders';
+import { OrdersComponent } from '@myngapp/orders';
 
 @Component({
   selector: 'myngapp-products',

docs/shared/core-features/cache-task-results.md

@@ -99,7 +99,7 @@ To achieve this, we can add an `inputs` and `outputs` definition globally for al
     "build": {
       ...
       "inputs": ["!{projectRoot}/**/*.md"],
-      "outputs": ["dist/apps/some-project"],
+      "outputs": ["{workspaceRoot}/dist/apps/some-project"],
       ...
     }
     ...

docs/shared/deprecated/angular-schematics-builders.md

@@ -0,0 +1,11 @@
+# Angular Schematics and Builders
+
+As of Nx 17, official Nx plugins no longer export [schematics](https://angular.io/guide/schematics) and [builders](https://angular.io/guide/cli-builder) that can be directly consumed by the Angular CLI. Since Angular CLI users are not a large portion of Nx's user base, it made sense to stop maintaining that code.
+
+Currently, the Angular CLI can only run its own schematics and builders. The Nx CLI is still able to directly run any schematics or builders created for the Angular CLI as well as Nx's own generators and executors. The only thing that has changed is that Nx is no longer taking the extra step of converting our own code into a format that the Angular CLI recognizes.
+
+To switch from using the Angular CLI to using the Nx CLI follow the [migrating an Angular CLI project to Nx](/recipes/angular/migration/angular) recipe.
+
+## Converting Nx Generators to Schematics and Nx Executors to Builders
+
+If you need to still support the Angular CLI, you can wrap any Nx generator with the [convertNxGenerator](/nx-api/devkit/documents/convertNxGenerator) function and re-export it in your own plugin as a schematic. In the same way, you can wrap any Nx executor with the [convertNxExecutor](/nx-api/devkit/documents/convertNxExecutor) function and re-export it in your own plugin as a builder.

docs/shared/getting-started/intro.md

@@ -43,7 +43,7 @@ npx create-nx-workspace@latest
 
 {% link-card title="Single Angular App" type="tutorial" url="/getting-started/tutorials/angular-standalone-tutorial" icon="angular" /%}
 
-{% link-card title="Single Node App" type="tutorial" url="/getting-started/tutorials/node-server-tutorial" icon="node" /%}
+{% link-card title="Single Vue App" type="tutorial" url="/getting-started/tutorials/vue-standalone-tutorial" icon="vue" /%}
 
 <!-- {% link-card title="React Monorepo" type="tutorial" url="/getting-started/tutorials/react-standalone-tutorial" icon="reactMono" /%}
 
@@ -58,7 +58,7 @@ npx create-nx-workspace@latest
 {% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}
 
 {% link-card title="Express" appearance="small" url="/nx-api/express" icon="express" /%}
-{% link-card title="Vue" appearance="small" url="/showcase/example-repos/add-vue" icon="vue" /%}
+{% link-card title="Vue" appearance="small" url="/nx-api/vue" icon="vue" /%}
 {% link-card title="Next" appearance="small" url="/nx-api/next" icon="nextjs" /%}
 {% link-card title="Nuxt" appearance="small" url="/showcase/example-repos/add-nuxt" icon="nuxt" /%}
 {% link-card title="Nest" appearance="small" url="/nx-api/nest" icon="nestjs" /%}

docs/shared/react-standalone-tutorial/react-standalone.md

@@ -41,10 +41,10 @@ title="Tutorial: Standalone React Application"
 Create a new standalone React application with the following command:
 
 ```{% command="npx create-nx-workspace@latest myreactapp --preset=react-standalone" path="~" %}
-? Bundler to be used to build the application …
-Vite    [ https://vitejs.dev/ ]
-Webpack [ https://webpack.js.org/ ]
-Rspack  [ https://www.rspack.dev/ ]
+✔ Which bundler would you like to use? · vite
+✔ Test runner to use for end to end (E2E) tests · cypress
+✔ Default stylesheet format · css
+✔ Enable distributed caching to make your CI faster · Yes
 ```
 
 You can choose any bundler you like. In this tutorial we're going to use Vite. The above command generates the following structure:
@@ -225,7 +225,7 @@ Note that all of these targets are automatically cached by Nx. If you re-run a s
    Nx read the output from the cache instead of running the command for 10 out of 10 tasks.
 ```
 
-Not all tasks might be cacheable though. You can configure `cacheableOperations` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results).
+Not all tasks might be cacheable though. You can configure the `cache` properties in the targets under `targetDefaults` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results).
 
 ## Nx Plugins? Why?
 
@@ -284,10 +284,11 @@ More info can be found in [the integrate with editors article](/core-features/in
 
 Run the following command to generate a new "hello-world" component. Note how we append `--dry-run` to first check the output.
 
-```{% command="npx nx g @nx/react:component hello-world --dry-run" path="myreactapp" %}
+```{% command="npx nx g @nx/react:component --directory=src/app/hello-world hello-world --dry-run" path="myreactapp" %}
 >  NX  Generating @nx/react:component
 
 ✔ Should this component be exported in the project? (y/N) · false
+✔ Where should the component be generated? · src/app/hello-world/hello-world.tsx
 CREATE src/app/hello-world/hello-world.module.css
 CREATE src/app/hello-world/hello-world.spec.tsx
 CREATE src/app/hello-world/hello-world.tsx
@@ -453,9 +454,9 @@ All libraries that we generate automatically have aliases created in the root-le
   "compilerOptions": {
     ...
     "paths": {
-      "products": ["modules/products/src/index.ts"],
-      "orders": ["modules/orders/src/index.ts"],
-      "shared-ui": ["modules/shared/ui/src/index.ts"]
+      "@myreactapp/orders": ["modules/orders/src/index.ts"],
+      "@myreactapp/products": ["modules/products/src/index.ts"],
+      "@myreactapp/ui": ["modules/shared/ui/src/index.ts"]
     },
     ...
   },
@@ -465,7 +466,7 @@ All libraries that we generate automatically have aliases created in the root-le
 Hence we can easily import them into other libraries and our React application. As an example, let's create and expose a `ProductList` component from our `modules/products` library. Either create it by hand or run
 
 ```shell
-nx g @nx/react:component product-list --project=products
+nx g @nx/react:component product-list --directory=modules/products/src/lib/product-list
 ```
 
 We don't need to implement anything fancy as we just want to learn how to import it into our main React application.
@@ -527,7 +528,7 @@ Then we can import the `ProductList` component into our `app.tsx` and render it
 import { Route, Routes } from 'react-router-dom';
 
 // importing the component from the library
-import { ProductList } from 'products';
+import { ProductList } from '@myreactapp/products';
 
 function Home() {
   return <h1>Home</h1>;
@@ -558,8 +559,8 @@ In the end, your `app.tsx` should look similar to this:
 
 ```tsx {% fileName="src/app/app.tsx" %}
 import { Route, Routes } from 'react-router-dom';
-import { ProductList } from 'products';
-import { OrderList } from 'orders';
+import { ProductList } from '@myreactapp/products';
+import { OrderList } from '@myreactapp/orders';
 
 function Home() {
   return <h1>Home</h1>;
@@ -612,7 +613,7 @@ You should be able to see something similar to the following in your browser.
       }
     },
     {
-      "name": "shared-ui",
+      "name": "ui",
       "type": "lib",
       "data": {
         "tags": []
@@ -640,7 +641,7 @@ You should be able to see something similar to the following in your browser.
       { "source": "myreactapp", "target": "products", "type": "static" }
     ],
     "e2e": [{ "source": "e2e", "target": "myreactapp", "type": "implicit" }],
-    "shared-ui": [],
+    "ui": [],
     "orders": [],
     "products": []
   },
@@ -653,19 +654,19 @@ You should be able to see something similar to the following in your browser.
 
 {% /graph %}
 
-Notice how `shared-ui` is not yet connected to anything because we didn't import it in any of our projects.
+Notice how `ui` is not yet connected to anything because we didn't import it in any of our projects.
 
-Exercise for you: change the codebase such that `shared-ui` is used by `orders` and `products`. Note: you need to restart the `nx graph` command to update the graph visualization or run the CLI command with the `--watch` flag.
+Exercise for you: change the codebase such that `ui` is used by `orders` and `products`. Note: you need to restart the `nx graph` command to update the graph visualization or run the CLI command with the `--watch` flag.
 
 ## Imposing Constraints with Module Boundary Rules
 
 {% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=1456" /%}
 
 Once you modularize your codebase you want to make sure that the modules are not coupled to each other in an uncontrolled way. Here are some examples of how we might want to guard our small demo workspace:
 
-- we might want to allow `orders` to import from `shared-ui` but not the other way around
+- we might want to allow `orders` to import from `ui` but not the other way around
 - we might want to allow `orders` to import from `products` but not the other way around
-- we might want to allow all libraries to import the `shared-ui` components, but not the other way around
+- we might want to allow all libraries to import the `ui` components, but not the other way around
 
 When building these kinds of constraints you usually have two dimensions:
 
@@ -690,7 +691,7 @@ Then go to the `project.json` of your `products` library and assign the tags `ty
 }
 ```
 
-Finally, go to the `project.json` of the `shared-ui` library and assign the tags `type:ui` and `scope:shared` to it.
+Finally, go to the `project.json` of the `ui` library and assign the tags `type:ui` and `scope:shared` to it.
 
 ```json {% fileName="modules/shared/ui/project.json" %}
 {
@@ -767,7 +768,7 @@ To test it, go to your `modules/products/src/lib/product-list/product-list.tsx`
 import styles from './product-list.module.css';
 
 // This import is not allowed 👇
-import { OrderList } from 'orders';
+import { OrderList } from '@myreactapp/orders';
 
 /* eslint-disable-next-line */
 export interface ProductListProps {}
@@ -789,7 +790,7 @@ If you lint your workspace you'll get an error now:
 ```{% command="nx run-many -t lint" %}
     ✔  nx run myreactapp:lint  [existing outputs match the cache, left as is]
     ✔  nx run e2e:lint  [existing outputs match the cache, left as is]
-    ✔  nx run shared-ui:lint (1s)
+    ✔  nx run ui:lint (1s)
 
     ✖  nx run products:lint
        Linting "products"...

docs/shared/recipes/add-stack/add-vue.md

@@ -4,9 +4,13 @@ The code for this example is available on GitHub:
 
 {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/vue" /%}
 
+{% callout title="Official Vue Plugin" %}
+This recipe does not use the official Vue plugin, so it doesn't use generators or automate updating framework dependencies. Use [`@nx/vue`](/nx-api/vue) to use those features.
+{% /callout %}
+
 **Supported Features**
 
-We'll be using an Nx plugin for Vue called [@nx/vite](/nx-api/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed.
+We'll be using an Nx plugin called [@nx/vite](/nx-api/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed.
 
 {% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %}
 {% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %}