feat: Angular 18 support

apps/nativescript-demo-ng/project.json

@@ -4,6 +4,7 @@
   "sourceRoot": "apps/nativescript-demo-ng/src",
   "projectType": "application",
   "prefix": "nativescript",
+  "tags": [],
   "generators": {
     "@schematics/angular:component": {
       "styleext": "scss"
@@ -65,10 +66,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "lintFilePatterns": ["apps/nativescript-demo-ng/**/*.ts", "apps/nativescript-demo-ng/src/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nativescript/nx:test",
@@ -85,6 +83,5 @@
         }
       }
     }
-  },
-  "tags": []
+  }
 }

apps/nativescript-demo-ng/src/app/item/item.service.ts

@@ -7,13 +7,13 @@ import { Item } from './item';
 })
 export class ItemService {
   private items = new Array<Item>(
-    { id: 1, name: 'The', role: 'Goalkeeper' },
-    { id: 3, name: 'JavaScript', role: 'Defender' },
-    { id: 4, name: 'Ecosystem', role: 'Midfielder' },
-    { id: 5, name: 'Is', role: 'Midfielder' },
-    { id: 6, name: 'For', role: 'Midfielder' },
-    { id: 7, name: 'Everyone.', role: 'Midfielder' },
-    { id: 8, name: 'Welcome beginners,', role: 'Midfielder' },
+    { id: 1, name: 'Minko Gechev', role: 'Goalkeeper' },
+    { id: 3, name: 'Pawel Kozlowski', role: 'Defender' },
+    { id: 4, name: 'Alex Rickabaugh', role: 'Midfielder' },
+    { id: 5, name: 'Jessica Janiuk', role: 'Midfielder' },
+    { id: 6, name: 'Emma Twersky', role: 'Midfielder' },
+    { id: 7, name: 'Joey Perrott', role: 'Midfielder' },
+    { id: 8, name: 'Dylan Hunn', role: 'Midfielder' },
     { id: 9, name: 'intermediate,', role: 'Forward' },
     { id: 10, name: 'and advanced programmers.', role: 'Forward' },
     { id: 11, name: 'Celebrate web tech', role: 'Forward' },

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

@@ -12,7 +12,7 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
   templateUrl: './items.component.html',
 })
 export class ItemsComponent implements OnInit {
-  message = 'Hello Angular 17!';
+  message = 'Hello Angular 18!';
   items: Array<Item>;
 
   constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {}

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

@@ -26,7 +26,8 @@
   <StackLayout row="0" padding="10">
     <Label [text]="message" class="h1 text-center c-light-blue"></Label>
     <Image src="~/assets/angular.png" horizontalAlignment="center" width="200" verticalAlignment="top" marginBottom="10"></Image>
-    <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
+    <!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
+    <Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
     <Button (tap)="fetchTodos()" text="Make a native Http networking request" [borderRadius]="borderRadius" [fontSize]="fontSize" padding="0" backgroundColor="#00d2ff" color="#fff" marginTop="10" width="100%" fontWeight="bold" height="50"></Button>
   </StackLayout>
   <ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">

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

@@ -12,7 +12,7 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
   templateUrl: './items.component.html',
 })
 export class ItemsComponent implements OnInit {
-  message = 'Hello Angular 17';
+  message = 'Hello Angular 18';
   items: Array<Item>;
   borderRadius: number;
   fontSize: number;

apps/nativescript-demo-ng/src/app/modal/modal.component.html

@@ -1,8 +1,9 @@
-<GridLayout [backgroundColor]="color" rows="*,auto,auto" padding="20" width="100%" height="100%">
-  <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" />
+<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto" padding="0" width="100%" height="100%">
+  <!-- <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" /> -->
+  <Image src="~/assets/ng-18.png" stretch="aspectFit" width="100%" marginTop="0" (loaded)="loadedImg($event)" />
 
-  @if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
+  <!-- @if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
     <Button row="1" (tap)="openNewModal()" text="Taste Another" fontSize="20" borderRadius="25"></Button>
-  }
+  } -->
   <Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" fontSize="20" marginTop="30" borderRadius="25"></Button>
 </GridLayout>

apps/nativescript-demo-ng/src/app/modal/modal.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
 import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
 import { ItemService } from '../item/item.service';
+import { View } from '@nativescript/core';
 
 @Component({
   selector: 'ns-modal',
@@ -40,4 +41,20 @@ export class ModalComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     console.log('modal destroy');
   }
+
+  img: View;
+  loadedImg(args) {
+    this.img = args.object as View;
+    const scaleImage = (up: boolean) => {
+      this.img.animate({
+        scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0},
+        translate: { x: up ? -100 : 0, y: 0},
+        duration: 1000,
+
+      }).then(() => {
+        scaleImage(up ? false : true);
+      })
+    }
+    scaleImage(true);
+  }
 }

nx.json

@@ -1,7 +1,4 @@
 {
-  "affected": {
-    "defaultBase": "main"
-  },
   "tasksRunnerOptions": {
     "default": {
       "options": {
@@ -25,10 +22,6 @@
       "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
       "cache": true
     },
-    "lint": {
-      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
-      "cache": true
-    },
     "@nx/jest:jest": {
       "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
       "cache": true,
@@ -41,6 +34,10 @@
           "codeCoverage": true
         }
       }
+    },
+    "@nx/eslint:lint": {
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
+      "cache": true
     }
   },
   "namedInputs": {
@@ -50,5 +47,7 @@
   },
   "useDaemonProcess": false,
   "nxCloudAccessToken": "NWJjY2UzMjctM2Q2Yy00ODZlLWExYjktNzE3YTRmMzRmMWQwfHJlYWQ=",
-  "parallel": 2
+  "parallel": 2,
+  "useInferencePlugins": false,
+  "defaultBase": "main"
 }

package.json

@@ -35,55 +35,52 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "@angular/animations": "17.3.8",
-    "@angular/common": "17.3.8",
-    "@angular/compiler": "17.3.8",
-    "@angular/core": "17.3.8",
-    "@angular/forms": "17.3.8",
-    "@angular/platform-browser": "17.3.8",
-    "@angular/platform-browser-dynamic": "17.3.8",
-    "@angular/router": "17.3.8",
+    "@angular/animations": "~18.0.0",
+    "@angular/common": "~18.0.0",
+    "@angular/compiler": "~18.0.0",
+    "@angular/core": "~18.0.0",
+    "@angular/forms": "~18.0.0",
+    "@angular/platform-browser": "~18.0.0",
+    "@angular/platform-browser-dynamic": "~18.0.0",
+    "@angular/router": "~18.0.0",
     "@nativescript/core": "~8.7.0",
     "@nativescript/theme": "~3.0.2",
     "@ngx-translate/core": "~15.0.0",
-    "nativescript-fonticon": "~8.1.0",
+    "nativescript-fonticon": "~5.2.0",
     "rxjs": "^7.8.0",
-    "zone.js": "0.14.2"
+    "zone.js": "~0.14.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.7",
-    "@angular-devkit/core": "17.3.7",
-    "@angular-devkit/schematics": "17.3.7",
-    "@angular-eslint/eslint-plugin": "17.4.0",
-    "@angular-eslint/eslint-plugin-template": "17.4.0",
-    "@angular-eslint/template-parser": "17.4.0",
-    "@angular/compiler-cli": "17.3.8",
+    "@angular-devkit/build-angular": "~18.0.0",
+    "@angular-devkit/core": "~18.0.0",
+    "@angular-devkit/schematics": "~18.0.0",
+    "@angular-eslint/eslint-plugin": "17.5.0",
+    "@angular-eslint/eslint-plugin-template": "17.5.0",
+    "@angular-eslint/template-parser": "17.5.0",
+    "@angular/compiler-cli": "~18.0.0",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
+    "@nativescript/nx": "~18.0.0",
     "@nativescript/types": "~8.7.0",
     "@nativescript/unit-test-runner": "^3.0.4",
     "@nativescript/webpack": "~5.0.21",
-    "@ngtools/webpack": "17.3.7",
-    "@nstudio/angular": "17.0.1",
-    "@nstudio/nativescript": "17.0.1",
-    "@nstudio/nativescript-angular": "17.0.1",
-    "@nstudio/xplat": "17.0.1",
-    "@nx/angular": "17.1.3",
-    "@nx/eslint": "17.1.3",
-    "@nx/eslint-plugin": "17.1.3",
-    "@nx/jest": "17.1.3",
-    "@nx/js": "17.1.3",
-    "@nx/node": "17.1.3",
-    "@nx/workspace": "17.1.3",
-    "@schematics/angular": "17.0.0",
+    "@ngtools/webpack": "~18.0.0",
+    "@nx/angular": "19.0.6",
+    "@nx/eslint": "19.0.6",
+    "@nx/eslint-plugin": "19.0.6",
+    "@nx/jest": "19.0.6",
+    "@nx/js": "19.0.6",
+    "@nx/node": "19.0.6",
+    "@nx/workspace": "19.0.6",
+    "@schematics/angular": "~18.0.0",
     "@types/jasmine": "5.1.1",
     "@types/jest": "29.5.7",
     "@types/node": "^20.0.0",
     "@types/sinon": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
+    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/parser": "7.9.0",
     "conventional-changelog-cli": "^4.1.0",
     "dotenv": "16.3.1",
-    "eslint": "8.53.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.0.0",
     "fs-extra": "^11.1.0",
     "husky": "~9.0.0",
@@ -96,21 +93,31 @@
     "karma-nativescript-launcher": "0.4.0",
     "karma-sinon": "^1.0.5",
     "lint-staged": "^15.0.0",
-    "ng-packagr": "17.3.0",
-    "nx": "17.1.3",
+    "ng-packagr": "~18.0.0",
+    "nx": "19.0.6",
     "nyc": "15.1.0",
     "postcss": "^8.4.16",
     "postcss-import": "15.1.0",
     "postcss-preset-env": "9.3.0",
     "postcss-url": "10.1.3",
-    "prettier": "3.0.3",
+    "prettier": "~3.2.0",
     "sass": "^1.54.5",
     "sinon": "^17.0.0",
     "ts-jest": "29.1.1",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tslib": "^2.6.0",
     "typescript": "~5.4.0"
   },
+  "resolutions": {
+    "@nx/angular": "19.0.6",
+    "@nx/devkit": "19.0.6",
+    "@nx/eslint": "19.0.6",
+    "@nx/eslint-plugin": "19.0.6",
+    "@nx/jest": "19.0.6",
+    "@nx/js": "19.0.6",
+    "@nx/node": "19.0.6",
+    "@nx/workspace": "19.0.6"
+  },
   "xplat": {
     "prefix": "nativescript",
     "framework": "angular"

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/angular",
-  "version": "17.1.1",
+  "version": "18.0.0-rc.0",
   "homepage": "https://nativescript.org/",
   "repository": {
     "type": "git",

packages/angular/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/angular/src",
   "projectType": "library",
+  "tags": [],
   "generators": {},
   "targets": {
     "build": {
@@ -13,10 +14,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "lintFilePatterns": ["packages/angular/**/*.ts", "packages/angular/src/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nx/jest:jest",
@@ -25,6 +23,5 @@
       },
       "outputs": ["{workspaceRoot}/coverage/packages/angular"]
     }
-  },
-  "tags": []
+  }
 }

packages/angular/src/lib/animations/animations.module.ts

@@ -13,7 +13,7 @@ import { NativeScriptCommonModule } from '../nativescript-common.module';
 @Injectable()
 export class InjectableAnimationEngine extends AnimationEngine {
   constructor(@Inject(DOCUMENT) doc: any, driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
-    super(doc, driver, normalizer, inject(ChangeDetectionScheduler, {optional: true}));
+    super(doc, driver, normalizer);
   }
 }
 

packages/zone-js/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/zone-js/src",
   "projectType": "library",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@nx/js:tsc",
@@ -15,10 +16,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "lintFilePatterns": ["packages/zone-js/**/*.ts"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nx/jest:jest",
@@ -27,6 +25,5 @@
         "jestConfig": "packages/zone-js/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }