feat: Angular 21

.github/workflows/build.yml

@@ -25,6 +25,6 @@ jobs:
           node-version: lts/*
       - uses: nrwl/nx-set-shas@v3
       - name: npm install
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: Build.all affected
         run: npx nx affected --target=build --exclude nativescript-demo-ng

.prettierignore

@@ -2,6 +2,7 @@
 
 /dist
 /coverage
+packages/angular/dist
 
 **/xplat/*/.xplatframework
 

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

apps/nativescript-demo-ng/project.json

@@ -38,10 +38,11 @@
         "uglify": false,
         "release": false,
         "forDevice": false,
-        "prepare": false,
-        "flags": "--env.commonjs"
+        "prepare": false
       },
-      "dependsOn": ["^build"]
+      "dependsOn": [
+        "^build"
+      ]
     },
     "clean": {
       "executor": "@nativescript/nx:clean",
@@ -52,12 +53,16 @@
     },
     "test": {
       "executor": "@nativescript/nx:test",
-      "outputs": ["{workspaceRoot}/coverage/apps/nativescript-demo-ng"],
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/nativescript-demo-ng"
+      ],
       "options": {
-        "coverage": false,
-        "flags": "--env.commonjs"
+        "coverage": false
       },
+      "dependsOn": [
+        "^build"
+      ],
       "configurations": {}
     }
   }
-}
+}

apps/nativescript-demo-ng/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <GridLayout rows="*" columns="*">
-  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
+  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView()" (selectedIndexChange)="onIndexChanged($event)">
     <MDTabStrip class="c-tabs">
       <MDTabStripItem class="tabstripitem">
         <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>

apps/nativescript-demo-ng/src/app/home/home.component.ts

@@ -1,7 +1,7 @@
 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';
+import { EventData, Page, TabView } from '@nativescript/core';
 
 @Component({
   selector: 'demo-home',
@@ -35,8 +35,8 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  loadedTabView(args) {
-    //
+  loadedTabView() {
+
   }
 
   private _viewTab(index: number) {
@@ -61,7 +61,7 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  private _initMenu(profilePic?: string) {
+  private _initMenu() {
     for (let i = 0; i < this._tabs.length; i++) {
       const tab = this._tabs[i];
       // console.log('================')

apps/nativescript-demo-ng/src/app/item/item-detail.component.ts

@@ -12,7 +12,7 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit {
-  item: Item;
+  item: Item | null = null;
   private itemService = inject(ItemService);
   private route = inject(ActivatedRoute);
 

apps/nativescript-demo-ng/src/app/item/items.component.ts

@@ -13,8 +13,8 @@ import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } fro
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemsComponent implements OnInit, OnDestroy {
-  message = 'Hello Angular 20.0.0!';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0!';
+  items: Array<Item> = [];
   private itemService = inject(ItemService);
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);

apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html

@@ -14,7 +14,7 @@
     <Label
       text="Congrats to the Angular Team!"
       textWrap="true"
-      class="text-center mt-5 font-bold text-3xl text-blue-500"
+      class="text-center mt-5 font-bold text-3xl text-blue-500 leading-3"
     ></Label>
     <Label
       row="1"

apps/nativescript-demo-ng/src/app/item3/items.component.ts

@@ -22,8 +22,8 @@ export class ItemsComponent implements OnInit, OnDestroy {
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);
   private http = inject(HttpClient);
-  message = 'Hello Angular 20.0.0';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0';
+  items: Array<Item> = [];
   borderRadius: number;
   fontSize: number;
 

apps/nativescript-demo-ng/src/app/list-view-sticky/list-view-sticky.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, NO_ERRORS_SCHEMA, signal } from '@angular/core';
 import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
-import { Page } from '@nativescript/core';
+import { Page, SearchEventData } from '@nativescript/core';
 
 interface CountryItem {
   name: string;
@@ -1407,11 +1407,11 @@ export class ListViewStickyComponent {
 
   private _originalCountries: CountryListType | undefined;
 
-  templateSelector(item: CountrySection | CountryItem, _index: number, _items: any) {
+  templateSelector() {
     return 'main';
   }
 
-  onSearchChange(event: any) {
+  onSearchChange(event: SearchEventData) {
     const text = (event?.text ?? '').toLowerCase();
     if (this.searchText !== text) {
       this.searchText = text;

apps/nativescript-demo-ng/src/app/modal/modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, ViewContainerRef, inject } from '@angular/core';
 import {
   ModalDialogService,
   NativeDialogModule,

apps/nativescript-demo-ng/src/main.ts

@@ -8,7 +8,6 @@ import {
 import { Trace, Utils } from '@nativescript/core';
 
 // import { AppModule } from './app/app.module';
-import { withInterceptorsFromDi } from '@angular/common/http';
 import { AppComponent } from './app/app.component';
 import { routes } from './app/app.routes';
 import { provideZonelessChangeDetection } from '@angular/core';
@@ -25,7 +24,7 @@ runNativeScriptAngularApp({
     }
     return bootstrapApplication(AppComponent, {
       providers: [
-        provideNativeScriptHttpClient(withInterceptorsFromDi()),
+        provideNativeScriptHttpClient(),
         provideNativeScriptRouter(routes),
         ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
       ],

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 { ChangeDetectionStrategy, Component, Directive, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { DetachedLoader, NativeScriptModule } from '@nativescript/angular';
+import { DetachedLoader, NativeScriptCommonModule, 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>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestComponent {}
@@ -24,7 +25,7 @@ class LoaderComponentBase {
       <DetachedContainer #loader></DetachedContainer>
     </StackLayout>
   `,
-  imports: [DetachedLoader],
+  imports: [DetachedLoader, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class LoaderComponent extends LoaderComponentBase {}
@@ -37,14 +38,14 @@ export class LoaderComponent extends LoaderComponentBase {}
       <DetachedContainer #loader></DetachedContainer>
     </StackLayout>
   `,
-  imports: [DetachedLoader],
+  imports: [DetachedLoader, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class LoaderComponentOnPush extends LoaderComponentBase {}
 
 @NgModule({
-  imports: [LoaderComponent, LoaderComponentOnPush, TestComponent],
+  imports: [LoaderComponent, LoaderComponentOnPush, TestComponent, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class EntryComponentsTestModule {}

apps/nativescript-demo-ng/src/tests/detached-utils-tests.spec.ts

@@ -13,11 +13,12 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { generateDetachedLoader, generateNativeScriptView, NgViewRef } from '@nativescript/angular';
+import { generateDetachedLoader, generateNativeScriptView, NativeScriptCommonModule, NgViewRef } from '@nativescript/angular';
 import { GridLayout, ProxyViewContainer } from '@nativescript/core';
 
 @Component({
   template: `<ng-container #vc></ng-container><ng-template #template><GridLayout></GridLayout></ng-template>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class GenerateViewComponent {
@@ -28,12 +29,13 @@ export class GenerateViewComponent {
 
 @Component({
   template: `<GridLayout></GridLayout>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class GeneratedComponent {}
 
 @NgModule({
-  imports: [GeneratedComponent, GenerateViewComponent],
+  imports: [GeneratedComponent, GenerateViewComponent, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class GeneratedModule {}

apps/nativescript-demo-ng/src/tests/http-client-ns-backend.spec.ts

@@ -2,9 +2,10 @@
 import { NSFileSystem } from '@nativescript/angular';
 import { NsHttpBackEnd } from '@nativescript/angular';
 
+import { EnvironmentInjector, createEnvironmentInjector, runInInjectionContext } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
 import { XhrFactory } from '@angular/common';
-import { File } from '@nativescript/core/file-system';
 
 class NSFileSystemMock implements NSFileSystem {
   public currentApp(): any {
@@ -36,7 +37,10 @@ describe('NsHttpBackEnd ', () => {
   let backend: NsHttpBackEnd;
 
   beforeEach(() => {
-    backend = new NsHttpBackEnd(new XhrFactoryMock(), new NSFileSystemMock());
+    TestBed.configureTestingModule({});
+    const parentInjector = TestBed.inject(EnvironmentInjector);
+    const injector = createEnvironmentInjector([], parentInjector);
+    backend = runInInjectionContext(injector, () => new NsHttpBackEnd(new XhrFactoryMock(), new NSFileSystemMock()));
   });
 
   it("should work with local files prefixed with '~'", (done) => {

apps/nativescript-demo-ng/src/tests/list-view-tests.spec.ts

@@ -1,6 +1,6 @@
 import { Component, Input, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
-import { ListViewComponent, TemplateKeyDirective } from '@nativescript/angular';
+import { ListViewComponent, NativeScriptCommonModule, TemplateKeyDirective } from '@nativescript/angular';
 // import trace = require("trace");
 // trace.setCategories("ns-list-view, " + trace.categories.Navigation);
 // trace.enable();
@@ -27,7 +27,7 @@ let testTemplates: { first: number; second: number };
       </ListView>
     </GridLayout>
   `,
-  imports: [ListViewComponent],
+  imports: [ListViewComponent, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewComponent {
@@ -41,6 +41,8 @@ export class TestListViewComponent {
 @Component({
   selector: 'item-component',
   template: `<Label text="template"></Label>`,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemTemplateComponent {
   @Input() set templateName(value: any) {
@@ -68,7 +70,7 @@ export class ItemTemplateComponent {
       </ListView>
     </GridLayout>
   `,
-  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent],
+  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewSelectorComponent {
@@ -101,7 +103,7 @@ export class TestListViewSelectorComponent {
       </ListView>
     </GridLayout>
   `,
-  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent],
+  imports: [ListViewComponent, TemplateKeyDirective, ItemTemplateComponent, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class TestListViewSelectorWithEventsComponent {

apps/nativescript-demo-ng/src/tests/modal-dialog.spec.ts

@@ -1,7 +1,7 @@
 // make sure you import mocha-config before @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 { FrameService, ModalDialogParams, ModalDialogService, NativeScriptCommonModule, NSLocationStrategy, Outlet } from '@nativescript/angular';
 import { Frame, isIOS } from '@nativescript/core';
 
 import { FakeFrameService } from './ns-location-strategy.spec';
@@ -10,6 +10,7 @@ const CLOSE_WAIT = isIOS ? 1000 : 0;
 @Component({
   selector: 'modal-comp',
   template: `<Label text="this is modal component" (shownModally)="onShownModally()"></Label>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ModalComponent {
@@ -25,6 +26,7 @@ export class ModalComponent {
   selector: 'fail-comp',
   providers: [ModalDialogService],
   template: `<Label text="This app is doomed"></Label>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class FailComponent {
@@ -37,6 +39,7 @@ export class FailComponent {
   template: ` <GridLayout margin="20">
     <Label text="Modal dialogs"></Label>
   </GridLayout>`,
+  imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class SuccessComponent {
@@ -47,9 +50,8 @@ export class SuccessComponent {
 }
 
 @NgModule({
-  imports: [FailComponent, SuccessComponent, ModalComponent],
+  imports: [FailComponent, SuccessComponent, ModalComponent, NativeScriptCommonModule],
   exports: [FailComponent, SuccessComponent, ModalComponent],
-  // entryComponents: [ModalComponent],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class EntryComponentsTestModule {}
@@ -62,7 +64,7 @@ describe('modal-dialog', () => {
   //     [ModalComponent]));
   beforeEach(() => {
     return TestBed.configureTestingModule({
-      imports: [FailComponent, SuccessComponent, ModalComponent],
+      imports: [FailComponent, SuccessComponent, ModalComponent, NativeScriptCommonModule],
       providers: [{ provide: FrameService, useValue: new FakeFrameService() }, NSLocationStrategy],
     }).compileComponents();
   });