feat: add angular 19 support

NativeScript · Dec 7, 2024 · 90c037c · 90c037c
1 parent 7f176ef
commit 90c037c
Show file tree

Hide file tree

Showing 25 changed files with 2,953 additions and 3,734 deletions.
diff --git a/apps/nativescript-demo-ng/src/app/app.component.ts b/apps/nativescript-demo-ng/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Component, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
   selector: 'ns-app',
   moduleId: module.id,
   templateUrl: './app.component.html',
+  standalone: false,
 })
 export class AppComponent implements OnInit, OnDestroy {
   constructor(private vcRef: ViewContainerRef) {}

diff --git a/apps/nativescript-demo-ng/src/app/home/home.component.ts b/apps/nativescript-demo-ng/src/app/home/home.component.ts
@@ -7,6 +7,7 @@ import { Page, TabView } from '@nativescript/core';
   moduleId: module.id,
   selector: 'demo-home',
   templateUrl: './home.component.html',
+  standalone: false,
 })
 export class HomeComponent implements OnInit {
   tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};

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
@@ -7,14 +7,15 @@ import { ItemService } from './item.service';
 @Component({
   selector: 'ns-details',
   moduleId: module.id,
-  templateUrl: './item-detail.component.html'
+  templateUrl: './item-detail.component.html',
+  standalone: false,
 })
 export class ItemDetailComponent implements OnInit {
   item: Item;
 
   constructor(
     private itemService: ItemService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {}
 
   ngOnInit(): void {

diff --git a/apps/nativescript-demo-ng/src/app/item/items.component.ts b/apps/nativescript-demo-ng/src/app/item/items.component.ts
@@ -10,6 +10,7 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
   selector: 'ns-items',
   moduleId: module.id,
   templateUrl: './items.component.html',
+  standalone: false,
 })
 export class ItemsComponent implements OnInit, OnDestroy {
   message = 'Hello Angular 18!';

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
@@ -9,6 +9,7 @@ import { ItemService } from '../item/item.service';
   selector: 'ns-details2',
   moduleId: module.id,
   templateUrl: './item-detail2.component.html',
+  standalone: false,
 })
 export class ItemDetailComponent implements OnInit, OnDestroy {
   item: Item;

diff --git a/apps/nativescript-demo-ng/src/app/item3/items.component.ts b/apps/nativescript-demo-ng/src/app/item3/items.component.ts
@@ -10,9 +10,10 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
   selector: 'ns-items',
   moduleId: module.id,
   templateUrl: './items.component.html',
+  standalone: false,
 })
 export class ItemsComponent implements OnInit, OnDestroy {
-  message = 'Hello Angular 18';
+  message = 'Hello Angular 19';
   items: Array<Item>;
   borderRadius: number;
   fontSize: number;

diff --git a/apps/nativescript-demo-ng/src/app/modal/modal.component.ts b/apps/nativescript-demo-ng/src/app/modal/modal.component.ts
@@ -6,6 +6,7 @@ import { View } from '@nativescript/core';
 @Component({
   selector: 'ns-modal',
   templateUrl: `./modal.component.html`,
+  standalone: false,
 })
 export class ModalComponent implements OnInit, OnDestroy {
   id = Math.floor(Math.random() * 1000);
@@ -46,15 +47,16 @@ export class ModalComponent implements OnInit, OnDestroy {
   loadedImg(args) {
     this.img = args.object as View;
     const scaleImage = (up: boolean) => {
-      this.img.animate({
-        scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0},
-        translate: { x: up ? -100 : 0, y: 0},
-        duration: 1000,
-
-      }).then(() => {
-        scaleImage(up ? false : true);
-      })
-    }
+      this.img
+        .animate({
+          scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0 },
+          translate: { x: up ? -100 : 0, y: 0 },
+          duration: 1000,
+        })
+        .then(() => {
+          scaleImage(up ? false : true);
+        });
+    };
     scaleImage(true);
   }
 }
diff --git a/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts
@@ -1,13 +1,14 @@
 // make sure you import mocha-config before @angular/core
-import { NgModule, Directive, ChangeDetectionStrategy, Component, ViewChild, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectionStrategy, Component, Directive, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { DetachedLoader, NativeScriptModule } from '@nativescript/angular';
 import { NativeScriptTestingModule } from '@nativescript/angular/testing';
 // import { NS_COMPILER_PROVIDERS } from "@nativescript/angular/platform";
 import { CommonModule } from '@angular/common';
 
 @Component({
   template: `<StackLayout><Label text="COMPONENT"></Label></StackLayout>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestComponent {}
 
@@ -23,6 +24,8 @@ class LoaderComponentBase {
       <DetachedContainer #loader></DetachedContainer>
     </StackLayout>
   `,
+  imports: [DetachedLoader],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class LoaderComponent extends LoaderComponentBase {}
 
@@ -34,22 +37,22 @@ export class LoaderComponent extends LoaderComponentBase {}
       <DetachedContainer #loader></DetachedContainer>
     </StackLayout>
   `,
+  imports: [DetachedLoader],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class LoaderComponentOnPush extends LoaderComponentBase {}
 
 @NgModule({
-  declarations: [LoaderComponent, LoaderComponentOnPush, TestComponent],
-  imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule],
+  imports: [LoaderComponent, LoaderComponentOnPush, TestComponent],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class EntryComponentsTestModule {}
 describe('DetachedLoader', function () {
   // this.timeout(4000);
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [LoaderComponent, LoaderComponentOnPush, TestComponent],
-      imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule],
+      imports: [NativeScriptModule, NativeScriptTestingModule, CommonModule, LoaderComponent, LoaderComponentOnPush, TestComponent],
       schemas: [NO_ERRORS_SCHEMA],
     });
     return TestBed.compileComponents();

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
@@ -5,6 +5,7 @@ import { GridLayout, ProxyViewContainer } from '@nativescript/core';
 
 @Component({
   template: `<ng-container #vc></ng-container><ng-template #template><GridLayout></GridLayout></ng-template>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class GenerateViewComponent {
   @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;
@@ -14,11 +15,12 @@ export class GenerateViewComponent {
 
 @Component({
   template: `<GridLayout></GridLayout>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class GeneratedComponent {}
 
 @NgModule({
-  declarations: [GeneratedComponent, GenerateViewComponent],
+  imports: [GeneratedComponent, GenerateViewComponent],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class GeneratedModule {}
@@ -28,7 +30,7 @@ describe('generateNativeScriptView', () => {
   let cleanup: Array<NgViewRef<unknown> | ComponentRef<unknown> | EmbeddedViewRef<unknown>> = [];
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [GenerateViewComponent, GeneratedComponent],
+      imports: [GenerateViewComponent, GeneratedComponent],
     }).compileComponents();
     fixture = TestBed.createComponent(GenerateViewComponent);
     fixture.detectChanges();

diff --git a/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts b/apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts
@@ -1,12 +1,15 @@
-import { Component, Input, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, Input, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
-import { ListViewComponent, NativeScriptModule } from '@nativescript/angular';
+import { ListViewComponent, TemplateKeyDirective } from '@nativescript/angular';
 // import trace = require("trace");
 // trace.setCategories("ns-list-view, " + trace.categories.Navigation);
 // trace.enable();
 
 class DataItem {
-  constructor(public id: number, public name: string) {}
+  constructor(
+    public id: number,
+    public name: string,
+  ) {}
 }
 
 const ITEMS = [new DataItem(0, 'data item 0'), new DataItem(1, 'data item 1'), new DataItem(2, 'data item 2')];
@@ -24,6 +27,8 @@ let testTemplates: { first: number; second: number };
       </ListView>
     </GridLayout>
   `,
+  imports: [ListViewComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewComponent {
   public myItems: Array<DataItem> = ITEMS;
@@ -63,6 +68,8 @@ export class ItemTemplateComponent {
       </ListView>
     </GridLayout>
   `,
+  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewSelectorComponent {
   public myItems: Array<DataItem> = ITEMS;
@@ -94,6 +101,8 @@ export class TestListViewSelectorComponent {
       </ListView>
     </GridLayout>
   `,
+  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewSelectorWithEventsComponent {
   public myItems: Array<DataItem> = ITEMS;
@@ -115,6 +124,8 @@ export class TestListViewSelectorWithEventsComponent {
       <ListView #listView [items]="myItems"></ListView>
     </GridLayout>
   `,
+  imports: [ListViewComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestDefaultItemTemplateComponent {
   public myItems: Array<DataItem>;
@@ -132,20 +143,12 @@ export class TestDefaultItemTemplateComponent {
 
 const declarations = [TestListViewComponent, TestListViewSelectorComponent, ItemTemplateComponent, TestDefaultItemTemplateComponent, TestListViewSelectorWithEventsComponent];
 
-@NgModule({
-  declarations: [...declarations],
-  imports: [NativeScriptModule],
-  schemas: [NO_ERRORS_SCHEMA],
-})
-export class ListViewModule {}
-
 describe('ListView-tests', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      declarations: [...declarations],
-      imports: [NativeScriptModule],
+      imports: declarations,
       schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents()
+    }).compileComponents(),
   );
 
   it('setupItemView is called for every item', waitForAsync(async () => {

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,23 +1,16 @@
 // make sure you import mocha-config before @angular/core
-import { NgModule, Component, ViewContainerRef, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Page, Frame, isIOS } from '@nativescript/core';
-import { ModalDialogParams, ModalDialogService } from '@nativescript/angular';
-
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { nsTestBedRender, nsTestBedAfterEach, nsTestBedBeforeEach, NATIVESCRIPT_TESTING_PROVIDERS, NativeScriptTestingModule } from '@nativescript/angular/testing';
-import { NSLocationStrategy, Outlet } from '@nativescript/angular';
-import { FrameService } from '@nativescript/angular';
-import { DetachedLoader, NativeScriptModule } from '@nativescript/angular';
-import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-// import { NS_COMPILER_PROVIDERS } from "@nativescript/angular/platform";
-import { CommonModule } from '@angular/common';
+import { Component, 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';
 
 import { FakeFrameService } from './ns-location-strategy.spec';
 const CLOSE_WAIT = isIOS ? 1000 : 0;
 
 @Component({
   selector: 'modal-comp',
   template: `<Label text="this is modal component" (shownModally)="onShownModally()"></Label>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ModalComponent {
   constructor(public params: ModalDialogParams) {}
@@ -32,6 +25,7 @@ export class ModalComponent {
   selector: 'fail-comp',
   providers: [ModalDialogService],
   template: `<Label text="This app is doomed"></Label>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class FailComponent {
   constructor(public service: ModalDialogService) {}
@@ -43,6 +37,7 @@ export class FailComponent {
   template: ` <GridLayout margin="20">
     <Label text="Modal dialogs"></Label>
   </GridLayout>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class SuccessComponent {
   constructor(
@@ -54,7 +49,7 @@ export class SuccessComponent {
 }
 
 @NgModule({
-  declarations: [FailComponent, SuccessComponent, ModalComponent],
+  imports: [FailComponent, SuccessComponent, ModalComponent],
   exports: [FailComponent, SuccessComponent, ModalComponent],
   // entryComponents: [ModalComponent],
   schemas: [NO_ERRORS_SCHEMA],
@@ -69,8 +64,7 @@ describe('modal-dialog', () => {
   //     [ModalComponent]));
   beforeEach(() => {
     return TestBed.configureTestingModule({
-      declarations: [FailComponent, SuccessComponent, ModalComponent],
-      imports: [],
+      imports: [FailComponent, SuccessComponent, ModalComponent],
       providers: [{ provide: FrameService, useValue: new FakeFrameService() }, NSLocationStrategy],
     }).compileComponents();
   });

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,14 +1,15 @@
 // make sure you import mocha-config before @angular/core
 import { Component, ElementRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { dumpView, createDevice } from './test-utils.spec';
-import { DEVICE, NativeScriptCommonModule, NativeScriptModule, registerElement } from '@nativescript/angular';
-import { platformNames } from '@nativescript/core/platform';
 import { TestBed } from '@angular/core/testing';
-import { StackLayout } from '@nativescript/core';
+import { AndroidFilterComponent, DEVICE, IOSFilterComponent, NativeScriptModule } from '@nativescript/angular';
+import { platformNames } from '@nativescript/core/platform';
+import { createDevice, dumpView } from './test-utils.spec';
 @Component({
   template: ` <StackLayout>
     <ios><Label text="IOS"></Label></ios>
   </StackLayout>`,
+  imports: [IOSFilterComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class IosSpecificComponent {
   constructor(public elementRef: ElementRef) {}
@@ -18,6 +19,8 @@ export class IosSpecificComponent {
   template: ` <StackLayout>
     <android><Label text="ANDROID"></Label></android>
   </StackLayout>`,
+  imports: [AndroidFilterComponent],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AndroidSpecificComponent {
   constructor(public elementRef: ElementRef) {}
@@ -27,25 +30,19 @@ export class AndroidSpecificComponent {
   template: ` <StackLayout>
     <Label android:text="ANDROID" ios:text="IOS"></Label>
   </StackLayout>`,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class PlatformSpecificAttributeComponent {
   constructor(public elementRef: ElementRef) {}
 }
 
 const DECLARATIONS = [PlatformSpecificAttributeComponent, AndroidSpecificComponent, IosSpecificComponent];
-@NgModule({
-  declarations: DECLARATIONS,
-  imports: [NativeScriptModule],
-  schemas: [NO_ERRORS_SCHEMA],
-})
-export class PlatformModule {}
 
 describe('Platform filter directives', () => {
   describe('on IOS device', () => {
     beforeEach(() => {
       return TestBed.configureTestingModule({
-        imports: [],
-        declarations: DECLARATIONS,
+        imports: DECLARATIONS,
         providers: [{ provide: DEVICE, useValue: createDevice(platformNames.ios) }],
         schemas: [NO_ERRORS_SCHEMA],
       }).compileComponents();
@@ -77,8 +74,7 @@ describe('Platform filter directives', () => {
   describe('on Android device', () => {
     beforeEach(() => {
       return TestBed.configureTestingModule({
-        imports: [],
-        declarations: DECLARATIONS,
+        imports: DECLARATIONS,
         providers: [{ provide: DEVICE, useValue: createDevice(platformNames.android) }],
         schemas: [NO_ERRORS_SCHEMA],
       }).compileComponents();