feat: Angular 19

Author: NathanWalker

packages/template-blank-ng/package.json

@@ -3,7 +3,7 @@
   "main": "src/main.ts",
   "displayName": "Blank",
   "templateType": "App template",
-  "version": "8.8.2",
+  "version": "8.8.3",
   "description": "Blank template for NativeScript apps using Angular",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -39,26 +39,26 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "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",
     "@nativescript/theme": "^3.1.0",
     "rxjs": "~7.8.0",
-    "zone.js": "~0.14.0"
+    "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/types": "~8.8.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~18.0.0",
-    "typescript": "~5.4.0"
+    "@ngtools/webpack": "~19.0.0",
+    "typescript": "~5.6.0"
   }
 }

packages/template-blank-ng/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',
+  templateUrl: './app.component.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppComponent {}

packages/template-blank-ng/src/app/app.component.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) },
+];

packages/template-blank-ng/src/app/app.module.ts

@@ -4,4 +4,5 @@
 
 <GridLayout>
   <!-- Add your page content here -->
+  <Label text="Hello"></Label>
 </GridLayout>

packages/template-blank-ng/src/app/app.routes.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+} from '@nativescript/angular';
 
 @Component({
   selector: 'Home',
   templateUrl: './home.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  schemas: [NO_ERRORS_SCHEMA],
 })
-export class HomeComponent implements OnInit {
-  constructor() {
-    // Use the component constructor to inject providers.
-  }
+export class HomeComponent {
 
-  ngOnInit(): void {
-    // Init your component properties here.
-  }
 }

packages/template-blank-ng/src/app/home/home-routing.module.ts

@@ -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(),
+      ],
+    });
+  },
 });
-

packages/template-blank-ng/src/app/home/home.component.html

@@ -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
  */

packages/template-blank-ng/src/app/home/home.component.ts

@@ -1,7 +1,7 @@
 {
   "name": "@nativescript/template-hello-world-ng",
   "main": "./src/main.ts",
-  "version": "8.8.2",
+  "version": "8.8.3",
   "author": "NativeScript Team <[email protected]>",
   "description": "NativeScript Angular Hello World template",
   "license": "Apache-2.0",
@@ -33,26 +33,26 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "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",
     "@nativescript/theme": "^3.1.0",
     "rxjs": "~7.8.0",
-    "zone.js": "~0.14.0"
+    "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/types": "~8.8.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~18.0.0",
+    "@ngtools/webpack": "~19.0.0",
     "typescript": "~5.4.0"
   }
 }

packages/template-blank-ng/src/app/home/home.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 {}

packages/template-blank-ng/src/main.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 },
+];

packages/template-blank-ng/src/polyfills.ts

@@ -1,9 +1,9 @@
 <ActionBar title="Details"></ActionBar>
 
 <FlexboxLayout flexDirection="column">
-  <FlexboxLayout class="m-15">
-    <Label class="h2" [text]="item.id + '. '"></Label>
-    <Label class="h2" [text]="item.name"></Label>
+  <FlexboxLayout class="m-4">
+    <Label class="text-3xl text-gray-400" [text]="item()?.id + '. '"></Label>
+    <Label class="text-3xl" [text]="item()?.name"></Label>
   </FlexboxLayout>
-  <Label class="h4 m-15" [text]="item.role"></Label>
+  <Label class="text-xl m-4" [text]="item()?.role"></Label>
 </FlexboxLayout>

packages/template-hello-world-ng/package.json

@@ -1,20 +1,25 @@
-import { Component, OnInit } from '@angular/core'
+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',
-  templateUrl: './item-detail.component.html',
+  selector: 'ns-detail',
+  templateUrl: './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)
+    this.item.set(this.itemService.getItem(id))
+
+    // log the item to the console
+    console.log(this.item())
   }
 }

packages/template-hello-world-ng/src/app/app-routing.module.ts

@@ -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)
   }
 }