feat: Angular 19 support (#143)

Author: edusperoni

.prettierrc

@@ -1,6 +1,6 @@
 {
   "useTabs": false,
-  "printWidth": 600,
+  "printWidth": 120,
   "tabWidth": 2,
   "singleQuote": true
 }

apps/nativescript-demo-ng/.gitignore

@@ -3,12 +3,6 @@ hooks/
 node_modules/
 platforms/
 
-# NativeScript Template
-*.js.map
-*.js
-!webpack.config.js
-!ngcc.config.js
-
 # Logs
 logs
 *.log

apps/nativescript-demo-ng/package.json

@@ -9,6 +9,7 @@
   "devDependencies": {
     "@nativescript/android": "~8.8.0",
     "@nativescript/ios": "~8.8.0",
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/unit-test-runner": "^3.0.1"
   }
 }

apps/nativescript-demo-ng/project.json

@@ -31,39 +31,20 @@
         }
       }
     },
-    "ios": {
-      "executor": "@nativescript/nx:build",
-      "options": {
-        "platform": "ios"
-      },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.ipa"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
-    },
-    "android": {
-      "executor": "@nativescript/nx:build",
+    "debug": {
+      "executor": "@nativescript/nx:debug",
       "options": {
-        "platform": "android"
+        "noHmr": true,
+        "uglify": false,
+        "release": false,
+        "forDevice": false,
+        "prepare": false
       },
-      "configurations": {
-        "build": {
-          "copyTo": "./dist/build.apk"
-        },
-        "prod": {
-          "combineWithConfig": "build:prod"
-        }
-      }
+      "dependsOn": ["^build"]
     },
     "clean": {
-      "executor": "@nativescript/nx:build",
-      "options": {
-        "clean": true
-      }
+      "executor": "@nativescript/nx:clean",
+      "options": {}
     },
     "lint": {
       "executor": "@nx/eslint:lint"
@@ -74,14 +55,7 @@
       "options": {
         "coverage": false
       },
-      "configurations": {
-        "android": {
-          "platform": "android"
-        },
-        "ios": {
-          "platform": "ios"
-        }
-      }
+      "configurations": {}
     }
   }
 }

apps/nativescript-demo-ng/src/app.css

@@ -9,8 +9,11 @@ In many cases you may want to use the NativeScript core theme instead
 of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
+/* @import '@nativescript/theme/css/core.css';
+@import '@nativescript/theme/css/default.css'; */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 Button {
   border: 0;
@@ -23,11 +26,18 @@ Button {
   color: #fff;
 }
 
-.h1 {
+.h-center {
+  horizontal-align: center;
+}
+.h-right {
+  horizontal-align: right;
+}
+
+/* .h1 {
   font-weight: bold;
   margin: 10 0 0;
 }
 
 .c-light-blue {
   color: #65ADF1;
-}
+} */

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

@@ -1,10 +1,13 @@
-import { Component, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, ViewContainerRef } 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) {}

apps/nativescript-demo-ng/src/app/app.module.ts

@@ -1,17 +1,14 @@
-import { NgModule } from '@angular/core';
 import { Routes } from '@angular/router';
-import { NativeScriptRouterModule } from '@nativescript/angular';
-
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: '/rootlazy', pathMatch: 'full' },
   { path: 'items', component: ItemsComponent },
   { path: 'item/:id', component: ItemDetailComponent },
-  { path: 'item2', loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module) },
+  { path: 'item2', loadChildren: () => import('./item2/item2.routes').then((m) => m.ITEM2_ROUTES) },
   { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
 
   /**
@@ -36,9 +33,3 @@ const routes: Routes = [
   //   loadChildren: () => import('./item2/item2.module').then((m) => m.Item2Module),
   // },
 ];
-
-@NgModule({
-  imports: [NativeScriptRouterModule.forRoot(routes)],
-  exports: [NativeScriptRouterModule],
-})
-export class AppRoutingModule {}

apps/nativescript-demo-ng/src/app/app-routing.module.ts renamed to apps/nativescript-demo-ng/src/app/app.routes.ts

@@ -2,7 +2,7 @@
   <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
     <MDTabStrip class="c-tabs">
       <MDTabStripItem class="tabstripitem">
-        <Label [text]="tabItems?.start?.title" class="text-center t-12"></Label>
+        <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
       </MDTabStripItem>
     </MDTabStrip>
 

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

@@ -1,12 +1,14 @@
 import { Component, NgZone, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterExtensions } from '@nativescript/angular';
+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,
 })
 export class HomeComponent implements OnInit {
   tabItems: { [key: string]: { index: number; title?: string; iconSource?: string; textTransform?: string } } = {};

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

@@ -1,20 +1,24 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { Item } from './item';
 import { ItemService } from './item.service';
+import { NativeScriptCommonModule } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-details',
   moduleId: module.id,
-  templateUrl: './item-detail.component.html'
+  templateUrl: './item-detail.component.html',
+  imports: [NativeScriptCommonModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemDetailComponent implements OnInit {
   item: Item;
 
   constructor(
     private itemService: ItemService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {}
 
   ngOnInit(): void {

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

@@ -23,16 +23,16 @@
 class names available for styling your app at https://docs.nativescript.org/ui/theme.
 -->
 <GridLayout rows="auto,,*" class="page">
-  <StackLayout row="0" padding="10">
-    <Label [text]="message" class="h1 text-center c-light-blue"></Label>
-    <Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
-    <Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
-    <Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
-    <Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
+  <StackLayout row="0" class="p-4">
+    <Label [text]="message" class="text-3xl font-bold text-center text-blue-500"></Label>
+    <Label [text]="'NativeScript loves you.'" class="text-2xl mt-5 text-center text-blue-500"></Label>
+    <Image src="https://angular.io/assets/images/logos/angular/angular.png" class="align-top h-center mt-4 w-[120]"></Image>
+    <Button (tap)="openModal()" text="Open Modal" class="rounded-full bg-blue-500 text-white p-2"></Button>
+    <Button (tap)="fetchTodos()" text="Make Http Call" class="mt-2 rounded-full bg-blue-500 text-white p-2"></Button>
   </StackLayout>
   <ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
     <ng-template let-item="item">
-      <StackLayout [nsRouterLink]="['/item2/item', item.id]" padding="10">
+      <StackLayout [nsRouterLink]="['/item2/item', item.id]" class="p-2">
         <Label [text]="item.name" class="list-group-item"></Label>
       </StackLayout>
     </ng-template>

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

@@ -1,18 +1,21 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { Item } from './item';
 import { ItemService } from './item.service';
 import { ModalComponent } from '../modal/modal.component';
-import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
+import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } from '@nativescript/angular';
 
 @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 18!';
+  message = 'Hello Angular 19!';
   items: Array<Item>;
 
   constructor(

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

@@ -8,10 +8,19 @@
   <Button text="GO BACK!" (tap)="goBack()"></Button>
 </FlexboxLayout> -->
 
-<GridLayout class="page" rows="auto,*" padding="10">
+<GridLayout rows="auto,*" class="p-2">
   <!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
   <GridLayout row="1" rows="auto,auto" columns="">
-    <Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
-    <Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
+    <Label
+      text="Congrats to the Angular Team!"
+      textWrap="true"
+      class="text-center mt-5 font-bold text-3xl text-blue-500"
+    ></Label>
+    <Label
+      row="1"
+      text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏"
+      textWrap="true"
+      class="text-blue-500 text-center mt-5 text-3xl"
+    ></Label>
   </GridLayout>
 </GridLayout>

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

@@ -1,6 +1,6 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { RouterExtensions } from '@nativescript/angular';
+import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular';
 
 import { Item } from '../item/item';
 import { ItemService } from '../item/item.service';
@@ -9,6 +9,9 @@ import { ItemService } from '../item/item.service';
   selector: 'ns-details2',
   moduleId: module.id,
   templateUrl: './item-detail2.component.html',
+  imports: [NativeScriptCommonModule],
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA]
 })
 export class ItemDetailComponent implements OnInit, OnDestroy {
   item: Item;

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

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { ItemDetailComponent } from './item-detail2.component';
+
+export const ITEM2_ROUTES: Routes = [{ path: ':id', component: ItemDetailComponent }];