Angular Academy · Lektion

Starta en fristående app

Starta en app med bootstrapApplication.

Lektion 4 av 413 steg

Starta en fristående app är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Starta en fristående app

En helt fristående app startas med bootstrapApplication i stället för att starta en rotmodul av typen NgModule. Ni skickar in rotkomponenten.

Startpunkten: main.ts

Applikationens startfil är main.ts. Den anropar bootstrapApplication med rotkomponenten, vanligtvis AppComponent.

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

bootstrapApplication(AppComponent);

Varifrån bootstrapApplication kommer

bootstrapApplication importeras från @angular/platform-browser. Det ersätter det äldre mönstret platformBrowserDynamic().bootstrapModule.

Rotkomponenten

Rotkomponenten är en vanlig fristående komponent. Den innehåller vanligtvis router outlet eller layouten på toppnivå.

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

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

Tillhandahålla applikationstjänster

Providers för hela appen placeras i det andra argumentet: ett objekt med en providers-array. Här konfigureras router, HTTP-klient och globala tjänster.

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

Tillhandahålla routern

Använd provideRouter(routes) för att konfigurera routing i en fristående app.

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

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

Tillhandahålla HttpClient

Aktivera HTTP med provideHttpClient() i providers-arrayen.

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

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

Kombinera providers

Lista så många provide*-funktioner tillsammans som ni behöver.

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

Mönstret app.config.ts

CLI extraherar vanligtvis providers till app.config.ts som en ApplicationConfig, så att main.ts hålls ren.

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

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

Använda app.config i main.ts

Därefter skickar main.ts helt enkelt vidare appConfig.

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

bootstrapApplication(AppComponent, appConfig);

Felhantering

bootstrapApplication returnerar ett Promise. Ni kan fånga upp startfel och logga dem.

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

Snabbkontroll: starta appen

Hur startar en fristående app?

Besvara frågan i den interaktiva lektionen

Sammanfattning: starta appen

Ni startar en fristående app med bootstrapApplication(AppComponent) och skickar med providers för hela appen, till exempel provideRouter och provideHttpClient. CLI placerar dessa i app.config.ts. Ingen rotmodul av typen NgModule behövs. Ni har nu slutfört fördjupningen i fristående komponenter.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Starta en fristående app” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Starta en fristående app”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Starta en fristående app”?

Starta en app med bootstrapApplication. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Starta en fristående app”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy