@nativescript/template-blank-ng 8.8.2 → 8.8.4

package/package.json

@@ -3,7 +3,7 @@
   "main": "src/main.ts",
   "displayName": "Blank",
   "templateType": "App template",
-  "version": "8.8.2",
+  "version": "8.8.4",
   "description": "Blank template for NativeScript apps using Angular",
   "author": "NativeScript Team <oss@nativescript.org>",
   "license": "Apache-2.0",
@@ -39,26 +39,27 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "dependencies": {
-    "@angular/animations": "~18.0.0",
-    "@angular/common": "~18.0.0",
-    "@angular/compiler": "~18.0.0",
-    "@angular/core": "~18.0.0",
-    "@angular/forms": "~18.0.0",
-    "@angular/platform-browser": "~18.0.0",
-    "@angular/platform-browser-dynamic": "~18.0.0",
-    "@angular/router": "~18.0.0",
-    "@nativescript/angular": "^18.0.0",
+    "@angular/animations": "~19.0.0",
+    "@angular/common": "~19.0.0",
+    "@angular/compiler": "~19.0.0",
+    "@angular/core": "~19.0.0",
+    "@angular/forms": "~19.0.0",
+    "@angular/platform-browser": "~19.0.0",
+    "@angular/platform-browser-dynamic": "~19.0.0",
+    "@angular/router": "~19.0.0",
+    "@nativescript/angular": "^19.0.0",
     "@nativescript/core": "~8.8.0",
-    "@nativescript/theme": "^3.1.0",
     "rxjs": "~7.8.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.0.0",
-    "@angular/compiler-cli": "~18.0.0",
+    "@angular-devkit/build-angular": "~19.0.0",
+    "@angular/compiler-cli": "~19.0.0",
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/types": "~8.8.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~18.0.0",
-    "typescript": "~5.4.0"
+    "@ngtools/webpack": "~19.0.0",
+    "tailwindcss": "~3.4.0",
+    "typescript": "~5.6.0"
   }
 }

package/src/app/app.component.ts

@@ -1,7 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { PageRouterOutlet } from '@nativescript/angular';
 
 @Component({
   selector: 'ns-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class AppComponent {}

package/src/app/app.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) },
+];

package/src/app/home/home.component.html

@@ -4,4 +4,5 @@
 
 <GridLayout>
   <!-- Add your page content here -->
+  <Label text="Hello" class="text-lg text-center"></Label>
 </GridLayout>

package/src/app/home/home.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+} from '@nativescript/angular';
 
 @Component({
   selector: 'Home',
   templateUrl: './home.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  schemas: [NO_ERRORS_SCHEMA],
 })
-export class HomeComponent implements OnInit {
-  constructor() {
-    // Use the component constructor to inject providers.
-  }
+export class HomeComponent {
 
-  ngOnInit(): void {
-    // Init your component properties here.
-  }
 }

package/src/app.css

@@ -1,5 +1,3 @@
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
-
-/* Place any CSS rules you want to apply on both iOS and Android here.
-This is where the vast majority of your CSS code goes. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/main.ts

@@ -1,8 +1,31 @@
-import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
+import {
+  bootstrapApplication,
+  provideNativeScriptHttpClient,
+  provideNativeScriptNgZone,
+  provideNativeScriptRouter,
+  runNativeScriptAngularApp,
+} from '@nativescript/angular';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { withInterceptorsFromDi } from '@angular/common/http';
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
+/**
+ * Disable zone by setting this to true
+ * Then also adjust polyfills.ts (see note there)
+ */
+const EXPERIMENTAL_ZONELESS = false;
 
 runNativeScriptAngularApp({
-  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
+  appModuleBootstrap: () => {
+    return bootstrapApplication(AppComponent, {
+      providers: [
+        provideNativeScriptHttpClient(withInterceptorsFromDi()),
+        provideNativeScriptRouter(routes),
+        EXPERIMENTAL_ZONELESS
+          ? provideExperimentalZonelessChangeDetection()
+          : provideNativeScriptNgZone(),
+      ],
+    });
+  },
 });
-

package/src/polyfills.ts

@@ -7,6 +7,11 @@ import '@nativescript/core/globals';
 // Install @nativescript/angular specific polyfills
 import '@nativescript/angular/polyfills';
 
+/**
+ * Disable zone completely by removing the following 3 imports
+ * alongside also adjusting main.ts to boot zoneless
+ */
+
 /**
  * Zone.js and patches
  */

package/src/app/app-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core'
-import { Routes } from '@angular/router'
-import { NativeScriptRouterModule } from '@nativescript/angular'
-
-const routes: Routes = [
-  { path: '', redirectTo: '/home', pathMatch: 'full' },
-  {
-    path: 'home',
-    loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule),
-  },
-]
-
-@NgModule({
-  imports: [NativeScriptRouterModule.forRoot(routes)],
-  exports: [NativeScriptRouterModule],
-})
-export class AppRoutingModule {}

package/src/app/app.module.ts

@@ -1,13 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
-import { NativeScriptModule } from '@nativescript/angular'
-
-import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
-
-@NgModule({
-  bootstrap: [AppComponent],
-  imports: [NativeScriptModule, AppRoutingModule],
-  declarations: [AppComponent],
-  schemas: [NO_ERRORS_SCHEMA],
-})
-export class AppModule {}

package/src/app/home/home-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core'
-import { Routes } from '@angular/router'
-import { NativeScriptRouterModule } from '@nativescript/angular'
-
-import { HomeComponent } from './home.component'
-
-const routes: Routes = [{ path: '', component: HomeComponent }]
-
-@NgModule({
-  imports: [NativeScriptRouterModule.forChild(routes)],
-  exports: [NativeScriptRouterModule],
-})
-export class HomeRoutingModule {}

package/src/app/home/home.module.ts

@@ -1,12 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
-import { NativeScriptCommonModule } from '@nativescript/angular'
-
-import { HomeRoutingModule } from './home-routing.module'
-import { HomeComponent } from './home.component'
-
-@NgModule({
-  imports: [NativeScriptCommonModule, HomeRoutingModule],
-  declarations: [HomeComponent],
-  schemas: [NO_ERRORS_SCHEMA],
-})
-export class HomeModule {}