Angular Academy · Lección

Arranque de una app standalone

Inicie una app con bootstrapApplication.

Arranque de una app standalone es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Iniciar una aplicación standalone

Una aplicación totalmente standalone comienza con bootstrapApplication en lugar de iniciar un NgModule raíz. Solo tiene que pasarle el componente raíz.

El punto de entrada: main.ts

El archivo de entrada de la aplicación es main.ts. Llama a bootstrapApplication con el componente raíz, normalmente AppComponent.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

De dónde procede bootstrapApplication

bootstrapApplication se importa desde @angular/platform-browser. Reemplaza el patrón anterior platformBrowserDynamic().bootstrapModule.

El componente raíz

El componente raíz es un componente standalone normal. Normalmente contiene el outlet del router o el diseño de nivel superior.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

Proporcionar servicios de la aplicación

Los providers de toda la aplicación se incluyen en el segundo argumento: un objeto con una matriz providers. Aquí se configuran el router, el cliente HTTP y los servicios globales.

bootstrapApplication(AppComponent, {
  providers: []
});

Proporcionar el router

Use provideRouter(routes) para configurar el enrutamiento de una aplicación standalone.

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

Proporcionar HttpClient

Habilite HTTP con provideHttpClient() en la matriz providers.

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Combinar providers

Enumere juntas tantas funciones provide* como necesite.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

El patrón app.config.ts

La CLI suele extraer los providers a app.config.ts como un ApplicationConfig, para mantener main.ts limpio.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Usar app.config en main.ts

Después, main.ts simplemente pasa appConfig.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

Gestión de errores

bootstrapApplication devuelve una Promise. Puede capturar los errores de inicio para registrarlos.

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Comprobación rápida: inicio de la aplicación

¿Cómo se inicia una aplicación standalone?

Resumen: inicio de la aplicación

Inicia una aplicación standalone con bootstrapApplication(AppComponent), pasando providers de toda la aplicación como provideRouter y provideHttpClient. La CLI los separa en app.config.ts. No se necesita ningún NgModule raíz. Ha completado el análisis detallado de los componentes standalone.

Preguntas frecuentes

¿La lección «Arranque de una app standalone» es gratis?

Sí — el texto completo de «Arranque de una app standalone» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Arranque de una app standalone»?

Inicie una app con bootstrapApplication. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Arranque de una app standalone»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy