Merge remote-tracking branch 'origin/main' into feat/vite-hmr

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"
+}

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [21.0.0](https://github.com/NativeScript/angular/compare/20.1.1...21.0.0) (2026-01-04)
+
+
+### Features
+
+* Angular 21 ([#157](https://github.com/NativeScript/angular/issues/157)) ([1cc0a89](https://github.com/NativeScript/angular/commit/1cc0a89dcf5f3239fac566a20ee865baf38129bf))
+
+
+
+## [20.1.1](https://github.com/NativeScript/angular/compare/20.1.0...20.1.1) (2026-01-04)
+
+
+### Features
+
+* SplitView support ([#160](https://github.com/NativeScript/angular/issues/160)) ([280b388](https://github.com/NativeScript/angular/commit/280b388feb30c80411afcc03684bb0f567b5d8af))
+
+
+
 # [20.1.0](https://github.com/NativeScript/angular/compare/20.0.0...20.1.0) (2025-12-02)
 
 

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/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
 import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
+import { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -15,6 +16,10 @@ export const routes: Routes = [
     path: 'list-view-sticky',
     component: ListViewStickyComponent,
   },
+  {
+    path: 'split-view-demo',
+    children: SPLIT_VIEW_ROUTES,
+  },
 
   /**
    * Test tab named outlets

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);