feat: Angular 19 standalone with optional zoneless (#16)

Author: NathanWalker

apps/nativescript-starter-angular/package.json

@@ -4,29 +4,29 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@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/angular": "^18.0.0",
+    "@angular/animations": "~19.0.0",
+    "@angular/common": "~19.0.0",
+    "@angular/compiler": "~19.0.0",
+    "@angular/core": "~19.0.0",
+    "@angular/forms": "~19.0.0",
+    "@angular/platform-browser": "~19.0.0",
+    "@angular/platform-browser-dynamic": "~19.0.0",
+    "@angular/router": "~19.0.0",
+    "@nativescript/angular": "^19.0.0",
     "@nativescript/core": "~8.8.0",
     "rxjs": "~7.8.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.0.0",
-    "@angular/compiler-cli": "~18.0.0",
+    "@angular-devkit/build-angular": "~19.0.0",
+    "@angular/compiler-cli": "~19.0.0",
     "@nativescript/preview-cli": "1.0.13",
     "@nativescript/stackblitz": "0.0.8",
     "@nativescript/tailwind": "^2.1.0",
-    "@nativescript/types-minimal": "~8.8.0",
+    "@nativescript/types": "~8.8.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~18.0.0",
+    "@ngtools/webpack": "~19.0.0",
     "tailwindcss": "~3.4.0",
-    "typescript": "~5.4.0"
+    "typescript": "~5.6.0"
   }
 }

apps/nativescript-starter-angular/references.d.ts

@@ -1 +1 @@
-/// <reference path="./node_modules/@nativescript/types-minimal/index.d.ts" />
+/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

apps/nativescript-starter-angular/src/app/app-routing.module.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { PageRouterOutlet } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-app',
   templateUrl: './app.component.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppComponent {}

apps/nativescript-starter-angular/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { ItemsComponent } from './item/items.component';
+import { ItemDetailComponent } from './item/item-detail.component';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/items', pathMatch: 'full' },
+  { path: 'items', component: ItemsComponent },
+  { path: 'item/:id', component: ItemDetailComponent },
+];

apps/nativescript-starter-angular/src/app/app.module.ts

@@ -2,8 +2,8 @@
 
 <FlexboxLayout flexDirection="column">
   <FlexboxLayout class="m-4">
-    <Label class="text-3xl text-gray-400" [text]="item.id + '. '"></Label>
-    <Label class="text-3xl" [text]="item.name"></Label>
+    <Label class="text-3xl text-gray-400" [text]="item()?.id + '. '"></Label>
+    <Label class="text-3xl" [text]="item()?.name"></Label>
   </FlexboxLayout>
-  <Label class="text-xl m-4" [text]="item.role"></Label>
+  <Label class="text-xl m-4" [text]="item()?.role"></Label>
 </FlexboxLayout>

apps/nativescript-starter-angular/src/app/app.routes.ts

@@ -1,26 +1,25 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Item } from './item';
-import { ItemService } from './item.service';
+import { Component, NO_ERRORS_SCHEMA, OnInit, inject, signal } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { NativeScriptCommonModule } from '@nativescript/angular'
+import { Item } from './item'
+import { ItemService } from './item.service'
 
 @Component({
-  selector: 'ns-details',
+  selector: 'ns-item-detail',
   templateUrl: './item-detail.component.html',
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit {
-  item: Item;
-
-  constructor(
-    private itemService: ItemService,
-    private route: ActivatedRoute
-  ) {}
+  itemService = inject(ItemService)
+  route = inject(ActivatedRoute)
+  item = signal<Item>(null)
 
   ngOnInit(): void {
-    const id = +this.route.snapshot.params.id;
-    this.item = this.itemService.getItem(id);
+    const id = +this.route.snapshot.params.id
+    this.item.set(this.itemService.getItem(id))
 
     // log the item to the console
-    console.log(this.item);
+    console.log(this.item())
   }
 }

apps/nativescript-starter-angular/src/app/item/item-detail.component.html

@@ -1,13 +1,13 @@
-import { Injectable } from '@angular/core'
-
+import { Injectable, signal } from '@angular/core'
 import { Item } from './item'
 
 @Injectable({
   providedIn: 'root',
 })
 export class ItemService {
-  private items = new Array<Item>(
-    { id: 1, name: 'Ter Stegen', role: 'Goalkeeper' },
+  items = signal<Item[]>([
+    { id: 1, name: 'NativeScript', role: 'Technology' },
+    { id: 2, name: 'Ter Stegen', role: 'Goalkeeper' },
     { id: 3, name: 'Piqué', role: 'Defender' },
     { id: 4, name: 'I. Rakitic', role: 'Midfielder' },
     { id: 5, name: 'Sergio', role: 'Midfielder' },
@@ -28,14 +28,10 @@ export class ItemService {
     { 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' }
-  )
-
-  getItems(): Array<Item> {
-    return this.items
-  }
+    { id: 25, name: 'Masip', role: 'Goalkeeper' },
+  ])
 
   getItem(id: number): Item {
-    return this.items.filter((item) => item.id === id)[0]
+    return this.items().find((item) => item.id === id)
   }
 }

apps/nativescript-starter-angular/src/app/item/item-detail.component.ts

@@ -1,7 +1,7 @@
 <ActionBar title="My App"> </ActionBar>
 
 <GridLayout>
-  <ListView [items]="items">
+  <ListView [items]="itemService.items()">
     <ng-template let-item="item">
       <StackLayout [nsRouterLink]="['/item', item.id]">
         <Label [text]="item.name" class="text-lg text-gray-500 p-4"></Label>

apps/nativescript-starter-angular/src/app/item/item.service.ts

@@ -1,30 +1,25 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA, inject } from '@angular/core'
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular'
 import { Page } from '@nativescript/core'
-
-import { Item } from './item'
 import { ItemService } from './item.service'
 
 @Component({
   selector: 'ns-items',
   templateUrl: './items.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  schemas: [NO_ERRORS_SCHEMA],
 })
-export class ItemsComponent implements OnInit {
-  page = inject(Page);
-  itemService = inject(ItemService);
-  items: Array<Item>;
+export class ItemsComponent {
+  itemService = inject(ItemService)
+  page = inject(Page)
 
   constructor() {
     // Setup large titles on iOS
     this.page.on('loaded', (args) => {
       if (__IOS__) {
-        const navigationController: UINavigationController =
-          this.page.frame.ios.controller;
-        navigationController.navigationBar.prefersLargeTitles = true;
+        const navigationController: UINavigationController = this.page.frame.ios.controller
+        navigationController.navigationBar.prefersLargeTitles = true
       }
-    });
-  }
-
-  ngOnInit(): void {
-    this.items = this.itemService.getItems()
+    })
   }
 }

apps/nativescript-starter-angular/src/app/item/items.component.html

@@ -1,8 +1,31 @@
-import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
+import {
+  bootstrapApplication,
+  provideNativeScriptHttpClient,
+  provideNativeScriptNgZone,
+  provideNativeScriptRouter,
+  runNativeScriptAngularApp,
+} from '@nativescript/angular';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { withInterceptorsFromDi } from '@angular/common/http';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
+/**
+ * Disable zone by setting this to true
+ * Then also adjust polyfills.ts (see note there)
+ */
+const EXPERIMENTAL_ZONELESS = false;
 
 runNativeScriptAngularApp({
-  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
+  appModuleBootstrap: () => {
+    return bootstrapApplication(AppComponent, {
+      providers: [
+        provideNativeScriptHttpClient(withInterceptorsFromDi()),
+        provideNativeScriptRouter(routes),
+        EXPERIMENTAL_ZONELESS
+          ? provideExperimentalZonelessChangeDetection()
+          : provideNativeScriptNgZone(),
+      ],
+    });
+  },
 });
-

apps/nativescript-starter-angular/src/app/item/items.component.ts

@@ -7,6 +7,11 @@ import '@nativescript/core/globals';
 // Install @nativescript/angular specific polyfills
 import '@nativescript/angular/polyfills';
 
+/**
+ * Disable zone completely by removing the following 3 imports
+ * alongside also adjusting main.ts to boot zoneless
+ */
+
 /**
  * Zone.js and patches
  */

apps/nativescript-starter-angular/src/main.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});