Guía

Empezar

De un directorio vacío a una app de Angular corriendo sobre vistas nativas, en la plataforma que elijas.

Qué hace falta

Xcode con el runtime de simulador de la plataforma que quieras. tvOS y visionOS traen el suyo aparte: xcodebuild -downloadPlatform tvOS.

tvOS, visionOS y watchOS piden además un toolchain nightly de Rust: sus targets son de nivel 3 y no traen std precompilada.

rustup toolchain install nightly
rustup component add rust-src --toolchain nightly

El SDK de Android, que se encuentra por ANDROID_HOME o donde suele estar, y el NDK. Aquí no hay Gradle: an llama él mismo a aapt2, javac, d8 y apksigner.

Las dependencias de Material 3 se resuelven una vez:

python3 scripts/fetch-android-deps.py
python3 scripts/prepare-android-deps.py

Instalar el CLI

Clona este repositorio y deja an en el PATH:
Ventana de terminal
```
git clone https://github.com/nesgarbo/angular-native
cd angular-native
cargo install --path crates/an-cli
```
cargo install deja apuntado desde dónde se compiló, así que an sabe encontrar después las fuentes del framework desde cualquier directorio. AN_HOME lo cambia.
Crea un proyecto de Angular, o usa uno que ya tengas:
Ventana de terminal
```
npx @angular/cli@latest new mi-app
cd mi-app
```
Prepáralo:
Ventana de terminal
```
an init
```
Añade un manifiesto, un tsconfig para el build nativo, los dos paquetes del framework y un punto de entrada nativo. No toca ni src/main.ts ni angular.json, así que ng build y ng serve siguen funcionando exactamente igual que antes.
Añade una plataforma y arráncala:
Ventana de terminal
an add ios && an ios an add tvos && an tvos . an add visionos && an visionos .
Ventana de terminal
an add android && an android an wearos .
Ventana de terminal
an macos .
an ios y an android recaen en el proyecto donde estás. Los otros cinco llevan de serie un ejemplo de este repositorio, y fuera del monorepo nombrar cualquier directorio que no sea la raíz del proyecto es un error — así que con . compilan el tuyo.

Desarrollar con refresco en caliente

an dev              # simulador de iPhone
an dev --android    # emulador de Android
an dev --tvos       # simulador de Apple TV
an dev --visionos   # simulador de Vision Pro
an dev --watchos    # simulador de Apple Watch
an dev --wearos     # emulador de Wear OS
an dev --macos      # una ventana en este mismo Mac

--macos es el distinto: no hay simulador, así que la app se abre en la máquina que la está compilando y el servidor con el que habla está en esa misma máquina.

Al guardar un componente, su definición se cambia en la app que está corriendo. Te quedas en la misma pantalla, con lo que hubieras escrito y los temporizadores en marcha.

Tu primera plantilla

<an-view [style.padding]="'16'" [style.gap]="'12'">
  <an-text [fontSize]="28" [fontWeight]="'bold'">Ajustes</an-text>

  <an-view [style.flexDirection]="'row'" [style.justifyContent]="'space-between'">
    <an-text>Notificaciones</an-text>
    <an-switch [on]="avisar()" (onChange)="avisar.set($event)" />
  </an-view>

  <an-button
    [title]="'Guardar'"
    [variant]="'filled'"
    [accessibilityHint]="'guarda sin salir de la pantalla'"
    (press)="guardar()" />
</an-view>

Ese an-switch es un UISwitch en iOS y un MaterialSwitch en Android. El layout es flexbox, calculado una vez en el núcleo y entregado a cada plataforma como marcos absolutos.

Y ahora

Cómo funcionaEl núcleo, los hosts, y por qué el layout no es de la plataforma.

ComponentesLas 25 primitivas y qué hace cada plataforma con ellas.

Estilos y layoutEl subconjunto de flexbox que resuelve el núcleo, y qué hace un estilo que no conoce.

PluginsMétodos nativos escritos fuera de este repositorio.