Angular 15: Creando una aplicación Standalone

por | Dic 5, 2022 | Angular | 0 Comentarios

Angular Standalone App

API Standalone

Con la llegada de Angular 14 tuvimos acceso a la API de Standalone en versión beta, pero desde el release de Angular 15 ya podemos disfrutar de ella en formato estable.

Esto mejorará enormemente la estructura y organización del proyecto, sobretodo, si estás utilizando una arquitectura SCAM (Single Component Angular Module). Básicamente, ésta arquitectura es tener un módulo por cada componente que existe, y al no necesitarlos ya, se verá reducido el número de archivos en el proyecto. E incluso, en proyectos muy grandes, el tiempo de compilación también mejorará.

Tecnologías

El stack de versiones que se usarán para el desarrollo del proyecto es el siguiente.

  • Angular CLI (15.0.0)
  • Node (16.18.1)
  • Npm (9.1.2)
  • Typescript (4.8.4)

Objetivo

Vamos a crear una aplicación en la que el componente principal, normalmente app.component.ts, sea standalone.

    Creando la aplicación

    Abrimos el terminal y ejecutamos el siguiente comando para crear una aplicación básica en Angular.

      ng new standalone-app --skip-tests true --style scss --routing false

      Conversión a standalone

      Eliminamos el archivo app.module.ts.

        Standalone App Module

        Indicamos en el componente app.component.ts que ahora es standalone e importamos el CommonModule, el cual incluye la funcionalidad básica que antes obteníamos mediante el import de BrowserModule en el archivo app.module.ts.

        app.component.ts

        import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [CommonModule]
})
export class AppComponent {
  title = 'standalone-app';
}

        En el archivo main.ts sustituimos la función bootstrapModule() por bootstrapApplication(). Y le indicamos el componente standalone que será el encargado de arrancar la aplicación.

        main.ts

        import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';
 
bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

        Resultado

        Llegados a este punto, si compilamos el proyecto ejecutando el comando ng serve -o en la terminal se nos abrirá en el navegador y veremos el resultado.

        Stackblitz

        A continuación, tenéis el proyecto en Stackblitz para poder toquetear y hacer pruebas en vivo con él 😉