feat: Angular 21 (#157)

Author: NathanWalker

.github/workflows/build.yml

@@ -25,6 +25,6 @@ jobs:
           node-version: lts/*
       - uses: nrwl/nx-set-shas@v3
       - name: npm install
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: Build.all affected
         run: npx nx affected --target=build --exclude nativescript-demo-ng

.prettierignore

@@ -2,6 +2,7 @@
 
 /dist
 /coverage
+packages/angular/dist
 
 **/xplat/*/.xplatframework
 

.vscode/settings.json

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

apps/nativescript-demo-ng/project.json

@@ -38,10 +38,11 @@
         "uglify": false,
         "release": false,
         "forDevice": false,
-        "prepare": false,
-        "flags": "--env.commonjs"
+        "prepare": false
       },
-      "dependsOn": ["^build"]
+      "dependsOn": [
+        "^build"
+      ]
     },
     "clean": {
       "executor": "@nativescript/nx:clean",
@@ -52,12 +53,16 @@
     },
     "test": {
       "executor": "@nativescript/nx:test",
-      "outputs": ["{workspaceRoot}/coverage/apps/nativescript-demo-ng"],
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/nativescript-demo-ng"
+      ],
       "options": {
-        "coverage": false,
-        "flags": "--env.commonjs"
+        "coverage": false
       },
+      "dependsOn": [
+        "^build"
+      ],
       "configurations": {}
     }
   }
-}
+}

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

@@ -1,5 +1,5 @@
 <GridLayout rows="*" columns="*">
-  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
+  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView()" (selectedIndexChange)="onIndexChanged($event)">
     <MDTabStrip class="c-tabs">
       <MDTabStripItem class="tabstripitem">
         <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
@@ -13,3 +13,46 @@
     </MDTabContentItem>
   </MDBottomNavigation>
 </GridLayout>
+
+
+<!-- Uncomment to try core TabView features -->
+<!-- <TabView
+  tabTextFontSize="11"
+  iosTabBarMinimizeBehavior="onScrollDown"
+  class="bg-black"
+>
+  <GridLayout
+    *tabItem="{
+        title: 'Home',
+        iconSource: 'sys://house.fill',
+      }"
+  >
+    <Label text="Home Content" class="text-center text-white"></Label>
+  </GridLayout>
+
+  <GridLayout
+    *tabItem="{
+        title: 'Saved',
+        iconSource: 'sys://star.fill',
+      }"
+  >
+    <Label text="Second Tab Content" class="text-center text-white"></Label>
+  </GridLayout>
+
+  <GridLayout
+    *tabItem="{
+        title: 'Settings',
+        iconSource: 'sys://gearshape.fill',
+      }"
+  >
+    <Label text="Third Tab Content" class="text-center text-white"></Label>
+  </GridLayout>
+  <GridLayout
+    *tabItem="{
+        iconSource: 'res://ns-logo',
+        role: 'search'
+      }"
+  >
+    <Label text="Search Tab" class="text-center text-white"></Label>
+  </GridLayout>
+</TabView> -->

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

@@ -1,13 +1,13 @@
 import { Component, inject, NgZone, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular';
-import { Page, TabView } from '@nativescript/core';
+import { EventData, Page, TabView } from '@nativescript/core';
 
 @Component({
   selector: 'demo-home',
   templateUrl: './home.component.html',
   imports: [NativeScriptCommonModule],
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class HomeComponent implements OnInit {
   private _ngZone = inject(NgZone);
@@ -35,10 +35,6 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  loadedTabView(args) {
-    //
-  }
-
   private _viewTab(index: number) {
     let route;
     switch (index) {
@@ -61,7 +57,7 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  private _initMenu(profilePic?: string) {
+  private _initMenu() {
     for (let i = 0; i < this._tabs.length; i++) {
       const tab = this._tabs[i];
       // console.log('================')

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;