feat: Angular 17 support (#124)

.gitignore

@@ -46,3 +46,5 @@ Thumbs.db
 
 .angular
 /.env
+
+.nx/cache

.prettierignore

@@ -17,4 +17,5 @@
 **/apps/*nativescript/tools/**/*
 **/apps/*nativescript/src/assets/*.css
 **/xplat/nativescript/scss/fonticons/*.css
-**/xplat/nativescript*/plugins/**/*
+**/xplat/nativescript*/plugins/**/*
+/.nx/cache

apps/nativescript-demo-ng/.eslintrc.json

@@ -24,7 +24,9 @@
             "prefix": "",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-unused-vars": "warn"
       }
     },
     {

apps/nativescript-demo-ng/App_Resources/Android/src/main/res/values/colors.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="ns_primary">#F5F5F5</color>
-	<color name="ns_primaryDark">#757575</color>
+	<color name="ns_primaryDark">#a6120d</color>
 	<color name="ns_accent">#33B5E5</color>
     <color name="ns_blue">#272734</color>
 </resources>

apps/nativescript-demo-ng/nativescript.config.ts

@@ -11,7 +11,7 @@ export default {
     discardUncaughtJsExceptions: true,
   },
   ios: {
-    discardUncaughtJsExceptions: true,
+    discardUncaughtJsExceptions: false,
   },
   appPath: 'src',
   cli: {

apps/nativescript-demo-ng/package.json

@@ -2,16 +2,13 @@
   "name": "demong",
   "main": "./src/main.ts",
   "description": "NativeScript Application",
-  "scripts": {
-    "postinstall": "node ./tools/xplat-postinstall.js"
-  },
   "dependencies": {
     "@nativescript/core": "file:../../node_modules/@nativescript/core",
-    "@nativescript-community/ui-material-bottom-navigation": "^7.1.3"
+    "@nativescript-community/ui-material-bottom-navigation": "^7.2.0"
   },
   "devDependencies": {
-    "@nativescript/android": "~8.5.0",
-    "@nativescript/ios": "~8.5.0",
+    "@nativescript/android": "~8.6.0",
+    "@nativescript/ios": "~8.6.0",
     "@nativescript/unit-test-runner": "^3.0.1"
   }
 }

apps/nativescript-demo-ng/project.json

@@ -65,7 +65,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": ["apps/nativescript-demo-ng/**/*.ts", "apps/nativescript-demo-ng/src/**/*.html"]
       }

apps/nativescript-demo-ng/references.d.ts

@@ -1,10 +1,2 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
-/// <reference path="../../node_modules/@nativescript/types-ios/index.d.ts" />
-/// <reference path="../../node_modules/@nativescript/types-android/lib/android-29.d.ts" />
-
-declare namespace NodeJS {
-  interface Global {
-      __runtimeVersion: any;
-      TNS_ENV: string;
-  }
-}
+/// <reference path="../../references.d.ts" />

apps/nativescript-demo-ng/src/app.css

@@ -12,6 +12,17 @@ refer to http://docs.nativescript.org/ui/theme.
 @import '@nativescript/theme/css/core.css';
 @import '@nativescript/theme/css/default.css';
 
+Button {
+  border: 0;
+  background-color: transparent;
+  text-transform: none;
+  min-width: 0;
+  min-height: 0;
+  android-elevation: 0;
+  android-dynamic-elevation-offset: 0;
+  color: #fff;
+}
+
 .h1 {
   font-weight: bold;
   margin: 10 0 0;

apps/nativescript-demo-ng/src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
-import { NativeScriptRouterModule, NSEmptyOutletComponent } from '@nativescript/angular';
 import { Routes } from '@angular/router';
+import { NativeScriptRouterModule } from '@nativescript/angular';
 
-import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
+import { ItemsComponent } from './item/items.component';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -21,7 +21,7 @@ const routes: Routes = [
   // {
   //   path: 'home',
   //   component: HomeComponent,
-  //   canActivate: [BootGuardService],
+  //   canActivate: [() => Promise.resolve(true)],
   //   children: [
   //     {
   //       path: 'start',

apps/nativescript-demo-ng/src/app/app.module.ts

@@ -1,10 +1,10 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptModule, NativeScriptCommonModule, NativeScriptHttpClientModule, NativeDialogModule } from '@nativescript/angular';
+import { NativeDialogModule, NativeScriptHttpClientModule, NativeScriptModule } from '@nativescript/angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ItemsComponent } from './item/items.component';
 import { ItemDetailComponent } from './item/item-detail.component';
+import { ItemsComponent } from './item/items.component';
 import { ModalComponent } from './modal/modal.component';
 
 /**

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

@@ -7,30 +7,50 @@ import { Item } from './item';
 })
 export class ItemService {
   private items = new Array<Item>(
-    { id: 1, name: 'Ter Stegen', role: 'Goalkeeper' },
-    { id: 3, name: 'Piqué', role: 'Defender' },
-    { id: 4, name: 'I. Rakitic', role: 'Midfielder' },
-    { id: 5, name: 'Sergio', role: 'Midfielder' },
-    { id: 6, name: 'Denis Suárez', role: 'Midfielder' },
-    { id: 7, name: 'Arda', role: 'Midfielder' },
-    { id: 8, name: 'A. Iniesta', role: 'Midfielder' },
-    { id: 9, name: 'Suárez', role: 'Forward' },
-    { id: 10, name: 'Messi', role: 'Forward' },
-    { id: 11, name: 'Neymar', role: 'Forward' },
-    { id: 12, name: 'Rafinha', role: 'Midfielder' },
-    { id: 13, name: 'Cillessen', role: 'Goalkeeper' },
-    { id: 14, name: 'Mascherano', role: 'Defender' },
-    { id: 17, name: 'Paco Alcácer', role: 'Forward' },
-    { id: 18, name: 'Jordi Alba', role: 'Defender' },
-    { id: 19, name: 'Digne', role: 'Defender' },
-    { id: 20, name: 'Sergi Roberto', role: 'Midfielder' },
-    { id: 21, name: 'André Gomes', role: 'Midfielder' },
-    { id: 22, name: 'Aleix Vidal', role: 'Midfielder' },
-    { id: 23, name: 'Umtiti', role: 'Defender' },
-    { id: 24, name: 'Mathieu', role: 'Defender' },
-    { id: 25, name: 'Masip', role: 'Goalkeeper' }
+    { 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: 9, name: 'intermediate,', role: 'Forward' },
+    { id: 10, name: 'and advanced programmers.', role: 'Forward' },
+    { id: 11, name: 'Celebrate web tech', role: 'Forward' },
+    { id: 12, name: 'with native platform tech.', role: 'Midfielder' },
+    { id: 13, name: 'Find', role: 'Goalkeeper' },
+    { id: 14, name: 'wonderful learning', role: 'Defender' },
+    { id: 17, name: 'learning', role: 'Forward' },
+    { id: 18, name: 'resources', role: 'Defender' },
+    { id: 19, name: 'across', role: 'Defender' },
+    { id: 20, name: 'the', role: 'Midfielder' },
+    { id: 21, name: 'entire', role: 'Midfielder' },
+    { id: 22, name: 'web', role: 'Midfielder' },
+    { id: 23, name: 'community', role: 'Defender' },
+    { id: 24, name: 'to', role: 'Defender' },
+    { id: 25, name: 'Get Started!', role: 'Goalkeeper' }
   );
 
+  flavors = [
+    {
+      color: '#087ea4',
+      logo: '~/assets/react.png'
+    },
+    {
+      color: '#2c4f7c',
+      logo: '~/assets/solid.png'
+    },
+    {
+      color: '#b7462a',
+      logo: '~/assets/svelte.png'
+    },
+    {
+      color: '#286f47',
+      logo: '~/assets/vue.png'
+    }
+  ];
+  currentFlavor = 0;
+
   getItems(): Array<Item> {
     return this.items;
   }

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 16!';
+  message = 'Hello Angular 17!';
   items: Array<Item>;
 
   constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {}

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

@@ -1,9 +1,17 @@
-<ActionBar title="Details" class="action-bar"></ActionBar>
-<FlexboxLayout flexDirection="column" class="page">
+<ActionBar title="Get Started!" class="action-bar"></ActionBar>
+<!-- <FlexboxLayout flexDirection="column" class="page">
   <FlexboxLayout class="m-15">
     <Label class="h2" [text]="item.id + '. '"></Label>
     <Label class="h2" [text]="item.name"></Label>
   </FlexboxLayout>
   <Label class="h4 m-l-15" [text]="item.role"></Label>
   <Button text="GO BACK!" (tap)="goBack()"></Button>
-</FlexboxLayout>
+</FlexboxLayout> -->
+
+<GridLayout class="page" rows="auto,*" padding="10">
+  <!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
+  <GridLayout row="1" rows="auto,auto" columns="">
+    <Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
+    <Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
+  </GridLayout>
+</GridLayout>

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

@@ -25,15 +25,14 @@
 <GridLayout rows="auto,,*" class="page">
   <StackLayout row="0" padding="10">
     <Label [text]="message" class="h1 text-center c-light-blue"></Label>
-    <Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
-    <Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
-    <Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
-    <Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
+    <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)="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">
     <ng-template let-item="item">
       <StackLayout [nsRouterLink]="['/item2', item.id]" padding="10">
-        <Label [text]="item.name" class="list-group-item"></Label>
+        <Label [text]="item.name" class="list-group-item" fontSize="18" textAlignment="center"></Label>
       </StackLayout>
     </ng-template>
   </ListView>

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

@@ -12,10 +12,20 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
   templateUrl: './items.component.html',
 })
 export class ItemsComponent implements OnInit {
-  message = 'Hello Angular 16!';
+  message = 'Hello Angular 17...rc';
   items: Array<Item>;
-
-  constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {}
+  borderRadius: number;
+  fontSize: number;
+
+  constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {
+    if (global.isAndroid) {
+      this.borderRadius = 25;
+      this.fontSize = 15;
+    } else {
+      this.borderRadius = 25;
+      this.fontSize = 18;
+    }
+  }
 
   ngOnInit(): void {
     console.log('ItemsComponent ngOnInit');
@@ -28,7 +38,11 @@ export class ItemsComponent implements OnInit {
   }
 
   openModal() {
-    const ref = this.nativeDialog.open(ModalComponent);
+    const ref = this.nativeDialog.open(ModalComponent, {
+      nativeOptions: {
+        fullscreen: !!global.isAndroid
+      }
+    });
     ref.afterOpened().subscribe(() => console.log('after openend'));
     ref.beforeClosed().subscribe((result) => console.log('beforeClosed', result));
     ref.afterClosed().subscribe((result) => console.log('afterClosed', result));

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

@@ -1,4 +1,6 @@
-<GridLayout backgroundColor="blue" columns="*,*" padding="20" width="100%" height="100%">
-  <Button col="0" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close modal" fontSize="20"></Button>
-  <Button col="1" (tap)="openNewModal()" text="Open Another" fontSize="20"></Button>
+<GridLayout [backgroundColor]="color" rows="*,auto,auto" padding="20" width="100%" height="100%">
+  <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" />
+
+  <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,17 +1,34 @@
-import { Component, Inject, OnDestroy, OnInit, Optional, ViewContainerRef } from '@angular/core';
+import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
 import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
+import { ItemService } from '../item/item.service';
 
 @Component({
   selector: 'ns-modal',
   templateUrl: `./modal.component.html`,
 })
 export class ModalComponent implements OnInit, OnDestroy {
   id = Math.floor(Math.random() * 1000);
+  itemService = inject(ItemService);
+  logo: string;
+  color: string;
 
-  constructor(@Optional() private ref: NativeDialogRef<ModalComponent>, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private vcRef: ViewContainerRef) {}
+  constructor(
+    @Optional() private ref: NativeDialogRef<ModalComponent>,
+    private nativeDialog: NativeDialogService,
+    private modalDialog: ModalDialogService,
+    private vcRef: ViewContainerRef,
+  ) {
+    this.logo = this.itemService.flavors[this.itemService.currentFlavor].logo;
+    this.color = this.itemService.flavors[this.itemService.currentFlavor].color;
+  }
 
   openNewModal() {
-    this.nativeDialog.open(ModalComponent);
+    this.itemService.currentFlavor++;
+    this.nativeDialog.open(ModalComponent, {
+      nativeOptions: {
+        fullscreen: !!global.isAndroid,
+      },
+    });
     // this.modalDialog.showModal(ModalComponent, {
     //   viewContainerRef: this.vcRef
     // });

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

@@ -2,15 +2,20 @@ import { NativeScriptNgZone, platformNativeScript, runNativeScriptAngularApp } f
 import { Trace } from '@nativescript/core';
 
 import { AppModule } from './app/app.module';
+import { setWindowBackgroundColor } from '@nativescript/core/utils/ios';
 
 Trace.enable();
 Trace.setCategories('ns-route-reuse-strategy,ns-router');
 
 runNativeScriptAngularApp({
-  appModuleBootstrap: () =>
-    platformNativeScript().bootstrapModule(AppModule, {
+  appModuleBootstrap: () => {
+    if (global.isIOS) {
+      setWindowBackgroundColor('#a6120d');
+    }
+    return platformNativeScript().bootstrapModule(AppModule, {
       ngZone: new NativeScriptNgZone(),
-    }),
+    });
+  },
 });
 
 // Comment above and Uncomment below to try without custom NgZone:

apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts

@@ -17,7 +17,7 @@ class LoaderComponentBase {
 }
 
 @Component({
-  selector: 'loader-component-on-push',
+  selector: 'loader-component',
   template: `
     <StackLayout>
       <DetachedContainer #loader></DetachedContainer>