feat: updated angular sample to 19.1

Author: NathanWalker

examples/angular/package-lock.json

@@ -4,26 +4,27 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@angular/animations": "~18.1.0",
-    "@angular/common": "~18.1.0",
-    "@angular/compiler": "~18.1.0",
-    "@angular/core": "~18.1.0",
-    "@angular/forms": "~18.1.0",
-    "@angular/platform-browser": "~18.1.0",
-    "@angular/platform-browser-dynamic": "~18.1.0",
-    "@angular/router": "~18.1.0",
-    "@nativescript/angular": "^18.0.0",
+    "@angular/animations": "~19.1.0",
+    "@angular/common": "~19.1.0",
+    "@angular/compiler": "~19.1.0",
+    "@angular/core": "~19.1.0",
+    "@angular/forms": "~19.1.0",
+    "@angular/platform-browser": "~19.1.0",
+    "@angular/platform-browser-dynamic": "~19.1.0",
+    "@angular/router": "~19.1.0",
+    "@nativescript/angular": "^19.0.0",
     "@nativescript/core": "~8.8.0",
     "rxjs": "~7.8.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.1.0",
-    "@angular/compiler-cli": "~18.1.0",
+    "@angular-devkit/build-angular": "~19.1.0",
+    "@angular/compiler-cli": "~19.1.0",
     "@nativescript/android": "8.8.2",
+    "@nativescript/ios": "8.8.2",
     "@nativescript/types": "~8.8.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~18.1.0",
-    "typescript": "~5.4.0"
+    "@ngtools/webpack": "~19.1.0",
+    "typescript": "~5.7.0"
   }
 }

examples/angular/package.json

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

examples/angular/src/app.component.ts

@@ -1,7 +1,4 @@
-import { NgModule } from '@angular/core'
 import { Routes } from '@angular/router'
-import { NativeScriptRouterModule } from '@nativescript/angular'
-
 import { HomeComponent } from './home.component'
 
 import { ActionBarComponent } from './ui/ActionBar/component'
@@ -28,7 +25,7 @@ import { TimePickerComponent } from './ui/TimePicker/component'
 import { ViewOriginComponent } from './ui/ViewOrigin/component'
 import { WebViewComponent } from './ui/WebView/component'
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   { path: 'ui/ActionBar', component: ActionBarComponent },
@@ -54,10 +51,4 @@ const routes: Routes = [
   { path: 'ui/TimePicker', component: TimePickerComponent },
   { path: 'ui/ViewOrigin', component: ViewOriginComponent },
   { path: 'ui/WebView', component: WebViewComponent },
-]
-
-@NgModule({
-  imports: [NativeScriptRouterModule.forRoot(routes)],
-  exports: [NativeScriptRouterModule],
-})
-export class AppRoutingModule {}
+]

examples/angular/src/app.module.ts

@@ -1,10 +1,12 @@
-import { Component, inject } from '@angular/core'
-import { RouterExtensions } from '@nativescript/angular'
+import { Component, inject, NO_ERRORS_SCHEMA, signal } from '@angular/core'
+import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular'
 import { getComponentList } from '@example/utils';
 
 @Component({
   selector: 'ns-home',
   templateUrl: './home.component.html',
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class HomeComponent {
   router = inject(RouterExtensions)

examples/angular/src/app-routing.module.ts renamed to examples/angular/src/app.routes.ts

@@ -1,8 +1,23 @@
-import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
+import {
+  bootstrapApplication,
+  provideNativeScriptHttpClient,
+  provideNativeScriptRouter,
+  runNativeScriptAngularApp,
+} from '@nativescript/angular';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { withInterceptorsFromDi } from '@angular/common/http';
+import { AppComponent } from './app.component';
+import { routes } from './app.routes';
 
-import { AppModule } from './app.module';
 
 runNativeScriptAngularApp({
-  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
+  appModuleBootstrap: () => {
+    return bootstrapApplication(AppComponent, {
+      providers: [
+        provideNativeScriptHttpClient(withInterceptorsFromDi()),
+        provideNativeScriptRouter(routes),
+        provideExperimentalZonelessChangeDetection()
+      ],
+    });
+  },
 });
-

examples/angular/src/home.component.ts

@@ -5,16 +5,4 @@
 // Install @nativescript/core polyfills (XHR, setTimeout, requestAnimationFrame)
 import '@nativescript/core/globals';
 // Install @nativescript/angular specific polyfills
-import '@nativescript/angular/polyfills';
-
-/**
- * Zone.js and patches
- */
-// Add pre-zone.js patches needed for the NativeScript platform
-import '@nativescript/zone-js/dist/pre-zone-polyfills';
-
-// Zone JS is required by default for Angular itself
-import 'zone.js';
-
-// Add NativeScript specific Zone JS patches
-import '@nativescript/zone-js';
+import '@nativescript/angular/polyfills';

examples/angular/src/main.ts

@@ -4,7 +4,6 @@ import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angula
 @Component({
   selector: 'ns-action-bar',
   templateUrl: './component.html',
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA]
 })

examples/angular/src/polyfills.ts

@@ -4,7 +4,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
 @Component({
   selector: 'ns-activity-indicator',
   templateUrl: './component.html',
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA]
 })