Plantilla NativeScript + Angular con navegación por Drawer (corregida)

Plantilla de aplicación NativeScript con Angular que incluye un componente RadSideDrawer para la navegación lateral. Está basada en la plantilla oficial @nativescript/template-drawer-navigation-ng, pero con los ajustes necesarios para que compile y arranque con Angular 22 y @nativescript/core 9.

Qué incluye

• Navegación con drawer lateral (RadSideDrawer).
• Cinco páginas en blanco enlazadas al drawer: home, browse, featured, search, settings.
• Tema personalizable basado en @nativescript/theme.
• Estilos con SASS (común + específicos por plataforma).

Requisitos

• Node.js 18 o superior.
• NativeScript CLI: npm i -g nativescript.
• Para Android: Android Studio + un emulador o dispositivo con depuración USB.
• Para iOS: Xcode (solo en macOS).

Verifica tu entorno con:

ns doctor

Crear una app desde esta plantilla

La plantilla está publicada en npm como @angelmartz/template-drawer-navigation-ng. Ejecuta:

ns create mi-app --template @angelmartz/template-drawer-navigation-ng

Esto crea una app NativeScript nueva usando la última versión publicada de la plantilla. El npm install que corre ns create aplica automáticamente el parche de nativescript-ui-sidedrawer (script postinstall), así que la app queda lista para compilar.

Alternativa: sin npm, desde el código fuente

ns create no acepta una URL de git directamente (la CLI le añade @^9.0.0 y rompe el spec). Si no quieres usar el paquete de npm, clona el repo y apunta a la carpeta local:

git clone https://github.com/angelmartz/template-drawer-navigation-ng.git
ns create mi-app --template ./template-drawer-navigation-ng

Ejecutar este repositorio directamente

git clone https://github.com/angelmartz/template-drawer-navigation-ng.git
cd template-drawer-navigation-ng

# instalar dependencias (aplica también los parches)
npm install

# Android
ns run android

# iOS
ns run ios

Para una compilación limpia si algo queda en caché:

ns run android --clean

Correcciones aplicadas respecto a la plantilla original

Estos cambios son la razón de ser de este repositorio. La plantilla oficial no compila tal cual con las versiones actuales de Angular y @nativescript/core.

1. Componentes standalone dentro de un NgModule

Desde Angular 19, standalone: true es el valor por defecto de todo @Component. La plantilla sigue una arquitectura basada en NgModule (declarations: [...]), lo que provoca el error NG6008 y, en tiempo de ejecución, un fallo del compilador JIT.

Solución: se añadió standalone: false a los seis decoradores @Component (AppComponent y las cinco páginas).

2. RadSideDrawer incompatible con @nativescript/core 9

[email protected] define _isRootView como un getter sin setter. El constructor de ViewBase en @nativescript/core 9 hace this._isRootView = false, lo que lanza:

TypeError: Cannot set property _isRootView of [object Object] which has only a getter

Solución: se parcha el plugin añadiéndole un setter no-op. El parche está versionado en patches/nativescript-ui-sidedrawer+15.2.4.patch y se reaplica automáticamente en cada npm install mediante patch-package (script postinstall).

Nota: nativescript-ui-sidedrawer ya no recibe mantenimiento. El parche desbloquea el desarrollo, pero a mediano plazo conviene migrar a @nativescript-community/ui-drawer.

Estructura del proyecto

| Ruta | Descripción | |------|-------------| | src/app/app.component.* | Configura el RadSideDrawer como vista raíz y el router outlet. | | src/app/<página>/ | Cada una de las cinco páginas (componente + módulo + routing). | | src/_app-common.scss | Estilos globales comunes a Android e iOS. | | src/app.android.scss | Estilos globales solo para Android. | | src/app.ios.scss | Estilos globales solo para iOS. | | patches/ | Parches de dependencias aplicados con patch-package. |

Estilos

La plantilla usa SASS y las clases del tema core de NativeScript. Consulta la documentación de @nativescript/theme para personalizarlo.

Publicar una nueva versión (mantenimiento)

# 1. subir la versión en package.json (respeta semver, mantén el major en 9)
npm version patch      # o minor / major

# 2. publicar el paquete scoped como público
npm publish --access public

# 3. subir el commit y el tag que crea `npm version`
git push origin main --tags

Solo se publican los archivos listados en el campo files de package.json (src, App_Resources, patches, config y tsconfig.json). El .gitignore, node_modules, platforms y hooks nunca se publican.

Licencia

Apache-2.0, igual que la plantilla original de NativeScript.