NativeScript · NathanWalker · Jun 15, 2025 · Jun 15, 2025
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "root": true,
-  "ignorePatterns": ["**/*"],
+  "ignorePatterns": ["**/*", "dist/**/*"],
   "plugins": ["@nx"],
   "overrides": [
     {

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -25,6 +25,6 @@ jobs:
           node-version: lts/*
       - uses: nrwl/nx-set-shas@v3
       - name: npm install
-        run: npm install --legacy-peer-deps
+        run: npm install
       - name: Build.all affected
         run: npx nx affected --target=build --exclude nativescript-demo-ng
diff --git a/apps/nativescript-demo-ng/.eslintrc.json b/apps/nativescript-demo-ng/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": "../../.eslintrc.json",
-  "ignorePatterns": ["!**/*", "node_modules/**/*", "platforms/**/*"],
+  "ignorePatterns": ["!**/*", "node_modules/**/*", "platforms/**/*", "src/tests/spans.spec.ts"],
   "overrides": [
     {
       "files": ["*.ts"],

diff --git a/apps/nativescript-demo-ng/src/app/app.component.ts b/apps/nativescript-demo-ng/src/app/app.component.ts
@@ -1,16 +1,15 @@
-import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
 import { PageRouterOutlet } from '@nativescript/angular';
 
 // registerElement('ns-app', () => GridLayout);
 @Component({
   selector: 'ns-app',
-  moduleId: module.id,
   templateUrl: './app.component.html',
   imports: [PageRouterOutlet],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppComponent implements OnInit, OnDestroy {
-  constructor(private vcRef: ViewContainerRef) {}
+
   ngOnInit() {
     console.log('ngOnInit');
   }

diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.ts b/apps/nativescript-demo-ng/src/app/home/home.component.ts
@@ -1,29 +1,27 @@
-import { Component, NgZone, OnInit } from '@angular/core';
+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';
 
 @Component({
-  moduleId: module.id,
   selector: 'demo-home',
   templateUrl: './home.component.html',
   imports: [NativeScriptCommonModule],
-  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class HomeComponent implements OnInit {
+  private _ngZone = inject(NgZone);
+  // vcRef: ViewContainerRef,
+  private _activeRoute = inject(ActivatedRoute);
+  private _page = inject(Page);
+  private _ngRouter = inject(Router);
+  private _router = inject(RouterExtensions);
   tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};
   private _tabs = ['start'];
   private _hasInitTab: { start?: boolean } = {};
   private _tabView: TabView;
 
-  constructor(
-    private _ngZone: NgZone,
-    // vcRef: ViewContainerRef,
-    private _activeRoute: ActivatedRoute,
-    private _page: Page,
-    private _ngRouter: Router,
-    private _router: RouterExtensions,
-  ) {
+  constructor() {
     this._initMenu();
   }
 

diff --git a/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts b/apps/nativescript-demo-ng/src/app/item/item-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { Item } from './item';
@@ -7,19 +7,14 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-details',
-  moduleId: module.id,
   templateUrl: './item-detail.component.html',
   imports: [NativeScriptCommonModule],
-  standalone: true,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit {
   item: Item;
-
-  constructor(
-    private itemService: ItemService,
-    private route: ActivatedRoute,
-  ) {}
+  private itemService = inject(ItemService);
+  private route = inject(ActivatedRoute);
 
   ngOnInit(): void {
     const id = +this.route.snapshot.params.id;

diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.ts b/apps/nativescript-demo-ng/src/app/item/items.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Item } from './item';
@@ -8,22 +8,17 @@ import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } fro
 
 @Component({
   selector: 'ns-items',
-  moduleId: module.id,
   templateUrl: './items.component.html',
   imports: [NativeScriptCommonModule],
-  standalone: true,
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemsComponent implements OnInit, OnDestroy {
   message = 'Hello Angular 20.0.0!';
   items: Array<Item>;
-
-  constructor(
-    private itemService: ItemService,
-    private nativeDialog: NativeDialogService,
-    private modalDialog: ModalDialogService,
-    private http: HttpClient,
-  ) {}
+  private itemService = inject(ItemService);
+  private nativeDialog = inject(NativeDialogService);
+  private modalDialog = inject(ModalDialogService);
+  private http = inject(HttpClient);
 
   ngOnInit(): void {
     console.log('ItemsComponent ngOnInit');

diff --git a/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts b/apps/nativescript-demo-ng/src/app/item2/item-detail2.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular';
 
@@ -7,20 +7,17 @@ import { ItemService } from '../item/item.service';
 
 @Component({
   selector: 'ns-details2',
-  moduleId: module.id,
   templateUrl: './item-detail2.component.html',
   imports: [NativeScriptCommonModule],
-  standalone: true,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit, OnDestroy {
+  private itemService = inject(ItemService);
+  private route = inject(ActivatedRoute);
+  private router = inject(RouterExtensions);
   item: Item;
 
-  constructor(
-    private itemService: ItemService,
-    private route: ActivatedRoute,
-    private router: RouterExtensions,
-  ) {
+  constructor() {
     console.log('ItemDetail2Component construct');
   }
 

diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.ts b/apps/nativescript-demo-ng/src/app/item3/items.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Item } from '../item/item';
@@ -13,24 +13,21 @@ import {
 
 @Component({
   selector: 'ns-items',
-  moduleId: module.id,
   templateUrl: './items.component.html',
   imports: [NativeScriptCommonModule, NativeScriptRouterModule],
-  standalone: true,
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemsComponent implements OnInit, OnDestroy {
+  private itemService = inject(ItemService);
+  private nativeDialog = inject(NativeDialogService);
+  private modalDialog = inject(ModalDialogService);
+  private http = inject(HttpClient);
   message = 'Hello Angular 20.0.0';
   items: Array<Item>;
   borderRadius: number;
   fontSize: number;
 
-  constructor(
-    private itemService: ItemService,
-    private nativeDialog: NativeDialogService,
-    private modalDialog: ModalDialogService,
-    private http: HttpClient,
-  ) {
+  constructor() {
     if (global.isAndroid) {
       this.borderRadius = 25;
       this.fontSize = 15;

diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.ts b/apps/nativescript-demo-ng/src/app/modal/modal.component.ts
@@ -1,27 +1,31 @@
 import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
-import { ModalDialogService, NativeDialogModule, NativeDialogRef, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
+import {
+  ModalDialogService,
+  NativeDialogModule,
+  NativeDialogRef,
+  NativeDialogService,
+  NativeScriptCommonModule,
+} from '@nativescript/angular';
 import { ItemService } from '../item/item.service';
 import { View } from '@nativescript/core';
 
 @Component({
   selector: 'ns-modal',
   templateUrl: `./modal.component.html`,
   imports: [NativeScriptCommonModule, NativeDialogModule],
-  standalone: true,
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ModalComponent implements OnInit, OnDestroy {
+  private ref = inject(NativeDialogRef<ModalComponent>, { optional: true });
+  private nativeDialog = inject(NativeDialogService);
+  private modalDialog = inject(ModalDialogService);
+  private vcRef = inject(ViewContainerRef);
   id = Math.floor(Math.random() * 1000);
   itemService = inject(ItemService);
   logo: string;
   color: string;
 
-  constructor(
-    @Optional() private ref: NativeDialogRef<ModalComponent>,
-    private nativeDialog: NativeDialogService,
-    private modalDialog: ModalDialogService,
-    private vcRef: ViewContainerRef,
-  ) {
+  constructor() {
     this.logo = this.itemService.flavors[this.itemService.currentFlavor].logo;
     this.color = this.itemService.flavors[this.itemService.currentFlavor].color;
   }

diff --git a/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts
@@ -1,4 +1,17 @@
-import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injector, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  inject,
+  Injector,
+  NgModule,
+  NO_ERRORS_SCHEMA,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { generateDetachedLoader, generateNativeScriptView, NgViewRef } from '@nativescript/angular';
 import { GridLayout, ProxyViewContainer } from '@nativescript/core';
@@ -10,7 +23,7 @@ import { GridLayout, ProxyViewContainer } from '@nativescript/core';
 export class GenerateViewComponent {
   @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;
   @ViewChild('template', { read: TemplateRef }) template: TemplateRef<void>;
-  constructor(public injector: Injector) {}
+  injector = inject(Injector);
 }
 
 @Component({
@@ -67,7 +80,10 @@ describe('generateNativeScriptView', () => {
   });
 
   it('should reuse a DetachedLoaderRef', () => {
-    const containerRef = generateDetachedLoader(fixture.componentRef.instance.injector.get(ComponentFactoryResolver), fixture.componentRef.instance.injector);
+    const containerRef = generateDetachedLoader(
+      fixture.componentRef.instance.injector.get(ComponentFactoryResolver),
+      fixture.componentRef.instance.injector,
+    );
     cleanup.push(containerRef);
     const ngViewRef = generateNativeScriptView(GeneratedComponent, {
       injector: fixture.componentRef.instance.injector,

diff --git a/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts b/apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts
@@ -1,5 +1,5 @@
 // make sure you import mocha-config before @angular/core
-import { Component, NgModule, NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core';
+import { Component, inject, NgModule, NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { FrameService, ModalDialogParams, ModalDialogService, NSLocationStrategy, Outlet } from '@nativescript/angular';
 import { Frame, isIOS } from '@nativescript/core';
@@ -13,7 +13,7 @@ const CLOSE_WAIT = isIOS ? 1000 : 0;
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ModalComponent {
-  constructor(public params: ModalDialogParams) {}
+  params = inject(ModalDialogParams);
 
   onShownModally() {
     const result = this.params.context;
@@ -28,7 +28,7 @@ export class ModalComponent {
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class FailComponent {
-  constructor(public service: ModalDialogService) {}
+  service = inject(ModalDialogService);
 }
 
 @Component({
@@ -40,12 +40,10 @@ export class FailComponent {
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class SuccessComponent {
-  constructor(
-    public service: ModalDialogService,
-    public vcRef: ViewContainerRef,
-    public locationStrategy: NSLocationStrategy,
-    public fakeFrameService: FrameService,
-  ) {}
+  service = inject(ModalDialogService);
+  vcRef = inject(ViewContainerRef);
+  locationStrategy = inject(NSLocationStrategy);
+  fakeFrameService = inject(FrameService);
 }
 
 @NgModule({

diff --git a/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts b/apps/nativescript-demo-ng/src/tests/platform-filter-components.spec.ts
@@ -1,7 +1,7 @@
 // make sure you import mocha-config before @angular/core
-import { Component, ElementRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, ElementRef, inject, NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { AndroidFilterComponent, DEVICE, IOSFilterComponent, AppleFilterComponent, NativeScriptModule } from '@nativescript/angular';
+import { AndroidFilterComponent, DEVICE, IOSFilterComponent, AppleFilterComponent } from '@nativescript/angular';
 import { platformNames } from '@nativescript/core/platform';
 import { createDevice, dumpView } from './test-utils.spec';
 @Component({
@@ -12,7 +12,7 @@ import { createDevice, dumpView } from './test-utils.spec';
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class IosSpecificComponent {
-  constructor(public elementRef: ElementRef) {}
+  elementRef = inject(ElementRef);
 }
 
 @Component({
@@ -23,7 +23,7 @@ export class IosSpecificComponent {
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppleSpecificComponent {
-  constructor(public elementRef: ElementRef) {}
+  elementRef = inject(ElementRef);
 }
 
 @Component({
@@ -34,7 +34,7 @@ export class AppleSpecificComponent {
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class AndroidSpecificComponent {
-  constructor(public elementRef: ElementRef) {}
+  elementRef = inject(ElementRef);
 }
 
 @Component({
@@ -44,7 +44,7 @@ export class AndroidSpecificComponent {
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class PlatformSpecificAttributeComponent {
-  constructor(public elementRef: ElementRef) {}
+  elementRef = inject(ElementRef);
 }
 
 const DECLARATIONS = [PlatformSpecificAttributeComponent, AndroidSpecificComponent, IosSpecificComponent];