@nx/angular 23.0.0-beta.20 → 23.0.0-beta.22

package/src/migrations/update-20-3-0/ensure-nx-module-federation-package.md

@@ -0,0 +1,23 @@
+#### Ensure the @nx/module-federation Package is Installed
+
+If workspace includes Module Federation projects, ensure the new `@nx/module-federation` package is installed.
+
+#### Sample Code Changes
+
+##### Before
+
+```json title="package.json"
+{
+  "dependencies": {}
+}
+```
+
+##### After
+
+```json title="package.json"
+{
+  "dependencies": {
+    "@nx/module-federation": "20.3.0"
+  }
+}
+```

package/src/migrations/update-20-4-0/update-angular-cli.md

@@ -0,0 +1,49 @@
+#### Update `@angular/cli` to `~19.1.0`
+
+Update the version of the Angular CLI if it is specified in `package.json`
+
+#### Sample Code Changes
+
+Update in `devDependencies`:
+
+##### Before
+
+```json title="package.json"
+{
+  "devDependencies": {
+    "@angular/cli": "~13.3.0"
+  }
+}
+```
+
+##### After
+
+```json title="package.json"
+{
+  "devDependencies": {
+    "@angular/cli": "~19.1.0"
+  }
+}
+```
+
+Update in `dependencies`:
+
+##### Before
+
+```json title="package.json"
+{
+  "dependencies": {
+    "@angular/cli": "~13.3.0"
+  }
+}
+```
+
+##### After
+
+```json title="package.json"
+{
+  "dependencies": {
+    "@angular/cli": "~19.1.0"
+  }
+}
+```

package/src/migrations/update-20-5-0/update-angular-cli.md

@@ -0,0 +1,23 @@
+#### Sample Code Changes
+
+Update the `@angular/cli` package version in the `package.json` file at the workspace root to **~19.2.0**.
+
+##### Before
+
+```json title="package.json"
+{
+  "devDependencies": {
+    "@angular/cli": "~19.1.0"
+  }
+}
+```
+
+##### After
+
+```json title="package.json" {3}
+{
+  "devDependencies": {
+    "@angular/cli": "~19.2.0"
+  }
+}
+```

package/src/migrations/update-21-0-0/change-data-persistence-operators-imports-to-ngrx-router-store-data-persistence.md

@@ -0,0 +1,113 @@
+#### Change the Data Persistence Operator Imports from `@nx/angular` to `@ngrx/router-store/data-persistence`
+
+The data persistence operators (`fetch`, `navigation`, `optimisticUpdate`, and `pessimisticUpdate`) have been deprecated for a while and are now removed from the `@nx/angular` package. This migration automatically updates your import statements to use the `@ngrx/router-store/data-persistence` module and adds `@ngrx/router-store` to your dependencies if needed.
+
+#### Examples
+
+If you import only data persistence operators from `@nx/angular`, the migration will update the import path to `@ngrx/router-store/data-persistence`.
+
+##### Before
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2}
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { fetch } from '@nx/angular';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+##### After
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2}
+import { Injectable } from '@angular/core';
+import { fetch } from '@ngrx/router-store/data-persistence';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+If you import multiple data persistence operators from `@nx/angular`, the migration will update the import path for all of them.
+
+##### Before
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2}
+import { Injectable } from '@angular/core';
+import { fetch, navigation } from '@nx/angular';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+##### After
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2}
+import { Injectable } from '@angular/core';
+import { fetch, navigation } from '@ngrx/router-store/data-persistence';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+If your imports mix data persistence operators with other utilities from `@nx/angular`, the migration will split them into separate import statements.
+
+##### Before
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2}
+import { Injectable } from '@angular/core';
+import { fetch, someExtraUtility, navigation } from '@nx/angular';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+##### After
+
+```ts title="apps/app1/src/app/users/users.effects.ts" {2-3}
+import { Injectable } from '@angular/core';
+import { fetch, navigation } from '@ngrx/router-store/data-persistence';
+import { someExtraUtility } from '@nx/angular';
+
+@Injectable()
+export class UsersEffects {
+  // ...
+}
+```
+
+If you don't already have `@ngrx/router-store` in your dependencies, the migration will add it to your package.json.
+
+##### Before
+
+```jsonc title="package.json"
+{
+  "dependencies": {
+    "@nx/angular": "^21.0.0",
+    "@ngrx/store": "^19.1.0",
+    "@ngrx/effects": "^19.1.0",
+    // ...
+  },
+}
+```
+
+##### After
+
+```jsonc title="package.json" {6}
+{
+  "dependencies": {
+    "@nx/angular": "^21.0.0",
+    "@ngrx/store": "^19.1.0",
+    "@ngrx/effects": "^19.1.0",
+    "@ngrx/router-store": "^19.1.0",
+    // ...
+  },
+}
+```

package/src/migrations/update-21-0-0/set-continuous-option.md

@@ -0,0 +1,90 @@
+#### Set `continuous` Option for Continuous Tasks
+
+This migration sets the `continuous` option to `true` for tasks that are known to run continuously, and only if the option is not already explicitly set.
+
+Specifically, it updates Angular targets using the following executors:
+
+- `@angular-devkit/build-angular:dev-server`
+- `@angular-devkit/build-angular:ssr-dev-server`
+- `@nx/angular:dev-server`
+- `@nx/angular:module-federation-dev-server`
+- `@nx/angular:module-federation-dev-ssr`
+
+#### Examples
+
+##### Before
+
+```json title="apps/app1/project.json"
+{
+  // ...
+  "targets": {
+    // ...
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "buildTarget": "my-app:build",
+        "port": 4200
+      }
+    }
+  }
+}
+```
+
+##### After
+
+```json title="apps/app1/project.json" {6}
+{
+  // ...
+  "targets": {
+    // ...
+    "serve": {
+      "continuous": true,
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "buildTarget": "my-app:build",
+        "port": 4200
+      }
+    }
+  }
+}
+```
+
+When a target is already explicitly configured with a `continuous` option, the migration will not modify it:
+
+##### Before
+
+```json title="apps/app1/project.json" {6}
+{
+  // ...
+  "targets": {
+    // ...
+    "serve": {
+      "continuous": false,
+      "executor": "@nx/angular:dev-server",
+      "options": {
+        "buildTarget": "my-app:build",
+        "port": 4200
+      }
+    }
+  }
+}
+```
+
+##### After
+
+```json title="apps/app1/project.json" {6}
+{
+  // ...
+  "targets": {
+    // ...
+    "serve": {
+      "continuous": false,
+      "executor": "@nx/angular:dev-server",
+      "options": {
+        "buildTarget": "my-app:build",
+        "port": 4200
+      }
+    }
+  }
+}
+```

package/src/migrations/update-21-2-0/migrate-provide-server-rendering-import.md

@@ -0,0 +1,56 @@
+#### Migrate Imports of `provideServerRendering` from `@angular/platform-server` to `@angular/ssr`
+
+Migrate the imports of `provideServerRendering` from `@angular/platform-server` to `@angular/ssr`. This migration will also add the `@angular/ssr` package to your dependencies if needed.
+
+#### Examples
+
+Change the import of `provideServerRendering` from `@angular/platform-server` to `@angular/ssr`:
+
+##### Before
+
+```ts title="app/app.config.server.ts" {2}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+```
+
+##### After
+
+```ts title="app/app.config.server.ts" {2}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/ssr';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+```
+
+If you already have imports from `@angular/ssr`, the migration will add `provideServerRendering` to the existing import:
+
+##### Before
+
+```ts title="app/app.config.server.ts" {2-3}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRouting } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
+};
+```
+
+##### After
+
+```ts title="app/app.config.server.ts" {2}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRouting, provideServerRendering } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
+};
+```

package/src/migrations/update-21-2-0/replace-provide-server-routing.md

@@ -0,0 +1,107 @@
+#### Replace `provideServerRouting` and `provideServerRoutesConfig` with `provideServerRendering`
+
+Replace `provideServerRouting` and `provideServerRoutesConfig` calls with `provideServerRendering` using `withRoutes`.
+
+#### Examples
+
+Remove `provideServerRouting` from your providers array and update the `provideServerRendering` call to use `withRoutes`:
+
+##### Before
+
+```ts title="app/app.config.server.ts" {2,6}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering, provideServerRouting } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
+};
+```
+
+##### After
+
+```ts title="app/app.config.server.ts" {2,6}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
+};
+```
+
+If you have `provideServerRouting` with additional arguments, the migration will preserve them:
+
+##### Before
+
+```ts title="app/app.config.server.ts" {4,11,12}
+import { ApplicationConfig } from '@angular/core';
+import {
+  provideServerRendering,
+  provideServerRouting,
+  withAppShell,
+} from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),
+    provideServerRouting(serverRoutes, withAppShell(AppShellComponent)),
+  ],
+};
+```
+
+##### After
+
+```ts title="app/app.config.server.ts" {2,7-10}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withAppShell, withRoutes } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(
+      withRoutes(serverRoutes),
+      withAppShell(AppShellComponent)
+    ),
+  ],
+};
+```
+
+Remove `provideServerRoutesConfig` from your providers array and update the `provideServerRendering` call to use `withRoutes`:
+
+##### Before
+
+```ts title="app/app.config.server.ts" {4,11,12}
+import { ApplicationConfig } from '@angular/core';
+import {
+  provideServerRendering,
+  provideServerRoutesConfig,
+  withAppShell,
+} from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),
+    provideServerRoutesConfig(serverRoutes, withAppShell(AppShellComponent)),
+  ],
+};
+```
+
+##### After
+
+```ts title="app/app.config.server.ts" {2,7-10}
+import { ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withAppShell, withRoutes } from '@angular/ssr';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(
+      withRoutes(serverRoutes),
+      withAppShell(AppShellComponent)
+    ),
+  ],
+};
+```

package/src/migrations/update-21-2-0/set-generator-defaults-for-previous-style-guide.md

@@ -0,0 +1,164 @@
+#### Set Generator Defaults for Previous Style Guide
+
+Updates the generator defaults in the `nx.json` file to maintain the previous Angular Style Guide behavior. This ensures that newly generated code in existing workspaces follows the same conventions as the existing codebase.
+
+#### Examples
+
+The migration will add default configurations for the relevant Angular generators in the workspace's `nx.json` file:
+
+##### Before
+
+```json title="nx.json"
+{
+  "generators": {}
+}
+```
+
+##### After
+
+```json title="nx.json"
+{
+  "generators": {
+    "@nx/angular:component": {
+      "type": "component"
+    },
+    "@nx/angular:directive": {
+      "type": "directive"
+    },
+    "@nx/angular:service": {
+      "type": "service"
+    },
+    "@nx/angular:scam": {
+      "type": "component"
+    },
+    "@nx/angular:scam-directive": {
+      "type": "directive"
+    },
+    "@nx/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:module": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:resolver": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}
+```
+
+If some of the generator defaults are already set, the migration will not override them:
+
+##### Before
+
+```json title="nx.json" {3-14}
+{
+  "generators": {
+    "@nx/angular:component": {
+      "type": "cmp"
+    },
+    "@schematics/angular:component": {
+      "type": "cmp"
+    },
+    "@nx/angular:interceptor": {
+      "typeSeparator": "-"
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "-"
+    }
+  }
+}
+```
+
+##### After
+
+```json title="nx.json" {3-14}
+{
+  "generators": {
+    "@nx/angular:component": {
+      "type": "cmp"
+    },
+    "@schematics/angular:component": {
+      "type": "cmp"
+    },
+    "@nx/angular:interceptor": {
+      "typeSeparator": "-"
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "-"
+    },
+    "@nx/angular:directive": {
+      "type": "directive"
+    },
+    "@nx/angular:service": {
+      "type": "service"
+    },
+    "@nx/angular:scam": {
+      "type": "component"
+    },
+    "@nx/angular:scam-directive": {
+      "type": "directive"
+    },
+    "@nx/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:module": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@nx/angular:resolver": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}
+```

package/src/migrations/update-21-2-0/update-angular-cli.md

@@ -0,0 +1,23 @@
+#### Sample Code Changes
+
+Update the `@angular/cli` package version in the `package.json` file at the workspace root to **~20.0.0**.
+
+##### Before
+
+```json title="package.json"
+{
+  "devDependencies": {
+    "@angular/cli": "~19.2.0"
+  }
+}
+```
+
+##### After
+
+```json title="package.json" {3}
+{
+  "devDependencies": {
+    "@angular/cli": "~20.0.0"
+  }
+}
+```

package/src/migrations/update-21-2-0/update-module-resolution.md

@@ -0,0 +1,53 @@
+#### Update `moduleResolution` to `bundler` in TypeScript configurations
+
+Updates the TypeScript `moduleResolution` option to `'bundler'` for improved compatibility with modern package resolution algorithms used by bundlers like Webpack, Vite, and esbuild.
+
+#### Examples
+
+The migration will update TypeScript configuration files in your workspace to use the `'bundler'` module resolution strategy:
+
+##### Before
+
+```json title="apps/app1/tsconfig.app.json" {4}
+{
+  "compilerOptions": {
+    "module": "es2020",
+    "moduleResolution": "node"
+  }
+}
+```
+
+##### After
+
+```json title="apps/app1/tsconfig.app.json" {4}
+{
+  "compilerOptions": {
+    "module": "es2020",
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+If the `moduleResolution` is already set to `'bundler'` or the `module` is set to `'preserve'`, the migration will not modify the configuration:
+
+##### Before
+
+```json title="apps/app1/tsconfig.app.json" {3-4}
+{
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "node"
+  }
+}
+```
+
+##### After
+
+```json title="apps/app1/tsconfig.app.json" {3-4}
+{
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "node"
+  }
+}
+```