0Pricing
Angular Academy · Lezione

Avvio di un'app standalone

Avvii un'app con bootstrapApplication.

Avvio di un'app standalone è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Avvio di un'app standalone

Un'app completamente standalone inizia con bootstrapApplication invece di avviare un NgModule radice. È sufficiente passargli il componente radice.

Il punto di ingresso: main.ts

Il file di ingresso dell'applicazione è main.ts. Chiama bootstrapApplication con il componente radice, in genere AppComponent.

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

bootstrapApplication(AppComponent);

Origine di bootstrapApplication

bootstrapApplication viene importato da @angular/platform-browser. Sostituisce il precedente schema platformBrowserDynamic().bootstrapModule.

Il componente radice

Il componente radice è un normale componente standalone. In genere ospita il router outlet o il layout di livello superiore.

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

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

Fornire i servizi dell'applicazione

I provider dell'intera app vengono inseriti nel secondo argomento: un oggetto con un array providers. Qui si configurano il router, il client HTTP e i servizi globali.

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

Fornire il router

Usi provideRouter(routes) per configurare il routing di un'app standalone.

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

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

Fornire HttpClient

Abiliti HTTP con provideHttpClient() nell'array providers.

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

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

Combinare i provider

Inserisca insieme tutte le funzioni provide* necessarie.

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

Il modello app.config.ts

La CLI estrae comunemente i provider in app.config.ts come ApplicationConfig, mantenendo pulito main.ts.

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

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

Usare app.config in main.ts

A quel punto main.ts si limita a passare appConfig.

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

bootstrapApplication(AppComponent, appConfig);

Gestione degli errori

bootstrapApplication restituisce una Promise. Può intercettare gli errori di avvio per registrarli.

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

Controllo rapido: avvio

Come si avvia un'app standalone?

Riepilogo: avvio

Si avvia un'app standalone con bootstrapApplication(AppComponent), passando provider dell'intera app come provideRouter e provideHttpClient. La CLI li organizza in app.config.ts. Non è necessario alcun NgModule radice. Ha completato l'approfondimento sui componenti standalone.

Domande Frequenti

La lezione «Avvio di un'app standalone» è gratuita?

Sì — il testo completo di «Avvio di un'app standalone» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Avvio di un'app standalone»?

Avvii un'app con bootstrapApplication. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Avvio di un'app standalone»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Perché utilizzare i componenti standalone
  2. Creazione di componenti standalone
  3. Importazione diretta delle dipendenze
  4. Avvio di un'app standalone
← Torna a Angular Academy