feat: Angular 21

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

apps/nativescript-demo-ng/package.json

@@ -6,10 +6,9 @@
     "@nativescript/core": "file:../../node_modules/@nativescript/core"
   },
   "devDependencies": {
-    "@nativescript/android": "~8.9.0",
-    "@nativescript/ios": "~8.9.0",
+    "@nativescript/android": "~9.0.0",
+    "@nativescript/ios": "~9.0.0",
     "@nativescript/tailwind": "^2.1.0",
-    "@nativescript/unit-test-runner": "^3.0.1",
-    "@nativescript/visionos": "~8.9.0"
+    "@nativescript/unit-test-runner": "4.0.0"
   }
 }

apps/nativescript-demo-ng/project.json

@@ -53,7 +53,8 @@
       "executor": "@nativescript/nx:test",
       "outputs": ["{workspaceRoot}/coverage/apps/nativescript-demo-ng"],
       "options": {
-        "coverage": false
+        "coverage": false,
+        "flags": "--env.commonjs"
       },
       "configurations": {}
     }

apps/nativescript-demo-ng/src/app/item/item-detail.component.ts

@@ -12,7 +12,7 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit {
-  item: Item;
+  item: Item | null = null;
   private itemService = inject(ItemService);
   private route = inject(ActivatedRoute);
 

apps/nativescript-demo-ng/src/app/item/items.component.ts

@@ -13,8 +13,8 @@ import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } fro
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemsComponent implements OnInit, OnDestroy {
-  message = 'Hello Angular 20.0.0!';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0!';
+  items: Array<Item> = [];
   private itemService = inject(ItemService);
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);

apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html

@@ -14,7 +14,7 @@
     <Label
       text="Congrats to the Angular Team!"
       textWrap="true"
-      class="text-center mt-5 font-bold text-3xl text-blue-500"
+      class="text-center mt-5 font-bold text-3xl text-blue-500 leading-3"
     ></Label>
     <Label
       row="1"

apps/nativescript-demo-ng/src/app/item3/items.component.ts

@@ -22,8 +22,8 @@ export class ItemsComponent implements OnInit, OnDestroy {
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);
   private http = inject(HttpClient);
-  message = 'Hello Angular 20.0.0';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0';
+  items: Array<Item> = [];
   borderRadius: number;
   fontSize: number;
 

apps/nativescript-demo-ng/src/main.ts

@@ -8,8 +8,7 @@ import {
 import { Trace } from '@nativescript/core';
 
 // import { AppModule } from './app/app.module';
-import { withInterceptorsFromDi } from '@angular/common/http';
-import { setWindowBackgroundColor } from '@nativescript/core/utils/ios';
+import { Utils } from '@nativescript/core';
 import { AppComponent } from './app/app.component';
 import { routes } from './app/app.routes';
 import { provideZonelessChangeDetection } from '@angular/core';
@@ -22,11 +21,11 @@ Trace.setCategories('ns-route-reuse-strategy,ns-router');
 runNativeScriptAngularApp({
   appModuleBootstrap: () => {
     if (__APPLE__) {
-      setWindowBackgroundColor('#a6120d');
+      Utils.ios.setWindowBackgroundColor('#a6120d');
     }
     return bootstrapApplication(AppComponent, {
       providers: [
-        provideNativeScriptHttpClient(withInterceptorsFromDi()),
+        provideNativeScriptHttpClient(),
         provideNativeScriptRouter(routes),
         ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
       ],

apps/nativescript-demo-ng/tsconfig.app.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es2017",
+    "target": "es2020",
     "baseUrl": ".",
     "outDir": "../../dist/out-tsc",
     "paths": {

apps/nativescript-demo-ng/tsconfig.spec.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es2017",
+    "target": "es2020",
     "baseUrl": ".",
     "outDir": "../../dist/out-tsc",
     "paths": {

migrations.json

@@ -1,45 +1,111 @@
 {
   "migrations": [
+    {
+      "version": "22.0.0-beta.1",
+      "description": "Updates release version config based on the breaking changes in Nx v22",
+      "implementation": "./src/migrations/update-22-0-0/release-version-config-changes",
+      "package": "nx",
+      "name": "22-0-0-release-version-config-changes"
+    },
+    {
+      "version": "22.0.0-beta.2",
+      "description": "Consolidates releaseTag* options into nested releaseTag object structure",
+      "implementation": "./src/migrations/update-22-0-0/consolidate-release-tag-config",
+      "package": "nx",
+      "name": "22-0-0-consolidate-release-tag-config"
+    },
     {
       "cli": "nx",
-      "version": "21.2.0-beta.3",
-      "requires": { "@angular/core": ">=20.0.0" },
-      "description": "Update the @angular/cli package version to ~20.0.0.",
-      "factory": "./src/migrations/update-21-2-0/update-angular-cli",
+      "version": "22.1.0-beta.5",
+      "description": "Updates the nx wrapper.",
+      "implementation": "./src/migrations/update-22-1-0/update-nx-wrapper",
+      "package": "nx",
+      "name": "22-1-0-update-nx-wrapper"
+    },
+    {
+      "version": "21.5.0-beta.2",
+      "description": "Migrate the legacy 'development' custom condition to a workspace-unique custom condition name.",
+      "factory": "./src/migrations/update-21-5-0/migrate-development-custom-condition",
+      "package": "@nx/js",
+      "name": "migrate-development-custom-condition"
+    },
+    {
+      "version": "22.0.0-beta.0",
+      "description": "Remove the deprecated `external` and `externalBuildTargets` options from the `@nx/js:swc` and `@nx/js:tsc` executors.",
+      "factory": "./src/migrations/update-22-0-0/remove-external-options-from-js-executors",
+      "package": "@nx/js",
+      "name": "remove-external-options-from-js-executors"
+    },
+    {
+      "version": "22.1.0-rc.1",
+      "description": "Removes redundant TypeScript project references from project's tsconfig.json files when runtime tsconfig files (e.g., tsconfig.lib.json, tsconfig.app.json) exist.",
+      "factory": "./src/migrations/update-22-1-0/remove-redundant-ts-project-references",
+      "package": "@nx/js",
+      "name": "remove-redundant-ts-project-references"
+    },
+    {
+      "cli": "nx",
+      "version": "21.3.0-beta.4",
+      "requires": { "@angular/core": ">=20.1.0" },
+      "description": "Update the @angular/cli package version to ~20.1.0.",
+      "factory": "./src/migrations/update-21-3-0/update-angular-cli",
       "package": "@nx/angular",
-      "name": "update-angular-cli-version-20-0-0"
+      "name": "update-angular-cli-version-20-1-0"
     },
     {
-      "version": "21.2.0-beta.3",
-      "requires": { "@angular/core": ">=20.0.0" },
-      "description": "Migrate imports of `provideServerRendering` from `@angular/platform-server` to `@angular/ssr`.",
-      "factory": "./src/migrations/update-21-2-0/migrate-provide-server-rendering-import",
+      "version": "21.5.0-beta.0",
+      "description": "Set the 'tsConfig' option to build and test targets to help with Angular migration issues.",
+      "factory": "./src/migrations/update-21-5-0/set-tsconfig-option",
       "package": "@nx/angular",
-      "name": "migrate-provide-server-rendering-import"
+      "name": "set-tsconfig-option"
     },
     {
-      "version": "21.2.0-beta.3",
-      "requires": { "@angular/core": ">=20.0.0" },
-      "description": "Replace `provideServerRouting` and `provideServerRoutesConfig` with `provideServerRendering` using `withRoutes`.",
-      "factory": "./src/migrations/update-21-2-0/replace-provide-server-routing",
+      "cli": "nx",
+      "version": "21.5.0-beta.2",
+      "requires": { "@angular/core": ">=20.2.0" },
+      "description": "Update the @angular/cli package version to ~20.2.0.",
+      "factory": "./src/migrations/update-21-5-0/update-angular-cli",
       "package": "@nx/angular",
-      "name": "replace-provide-server-routing"
+      "name": "update-angular-cli-version-20-2-0"
     },
     {
-      "version": "21.2.0-beta.3",
-      "requires": { "@angular/core": ">=20.0.0" },
-      "description": "Update the generator defaults to maintain the previous style guide behavior.",
-      "factory": "./src/migrations/update-21-2-0/set-generator-defaults-for-previous-style-guide",
+      "version": "21.5.0-beta.2",
+      "requires": { "@angular/core": ">=20.2.0" },
+      "description": "Remove any Karma configuration files that only contain the default content. The default configuration is automatically available without a specific project configurationfile.",
+      "factory": "./src/migrations/update-21-5-0/remove-default-karma-configuration-files",
       "package": "@nx/angular",
-      "name": "set-generator-defaults-for-previous-style-guide"
+      "name": "remove-default-karma-configuration-files"
     },
     {
-      "version": "21.2.0-beta.3",
-      "requires": { "@angular/core": ">=20.0.0" },
-      "description": "Update 'moduleResolution' to 'bundler' in TypeScript configurations. You can read more about this here: https://www.typescriptlang.org/tsconfig/#moduleResolution.",
-      "factory": "./src/migrations/update-21-2-0/update-module-resolution",
+      "cli": "nx",
+      "version": "21.6.1-beta.2",
+      "requires": { "@angular/core": ">=20.3.0" },
+      "description": "Update the @angular/cli package version to ~20.3.0.",
+      "factory": "./src/migrations/update-21-6-1/update-angular-cli",
       "package": "@nx/angular",
-      "name": "update-module-resolution"
+      "name": "update-angular-cli-version-20-3-0"
+    },
+    {
+      "version": "21.3.0-beta.3",
+      "description": "Rename the CLI option `testPathPattern` to `testPathPatterns`.",
+      "implementation": "./src/migrations/update-21-3-0/rename-test-path-pattern",
+      "package": "@nx/jest",
+      "name": "rename-test-path-pattern"
+    },
+    {
+      "version": "20.2.0",
+      "description": "Replaces usages of the deprecated Router.getCurrentNavigation method with the Router.currentNavigation signal",
+      "factory": "./bundles/router-current-navigation.cjs#migrate",
+      "optional": true,
+      "package": "@angular/core",
+      "name": "router-current-navigation"
+    },
+    {
+      "version": "20.3.0",
+      "description": "Adds `BootstrapContext` to `bootstrapApplication` calls in `main.server.ts` to support server rendering.",
+      "factory": "./bundles/add-bootstrap-context-to-server-main.cjs#migrate",
+      "package": "@angular/core",
+      "name": "add-bootstrap-context-to-server-main"
     }
   ]
 }