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 } } = {};