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