Standalone Components - Niezależni Wojownicy

Od Angular 17, Standalone Components są domyślnym i zalecanym sposobem tworzenia komponentów. Są jak ronini - niezależni wojownicy, którzy nie potrzebują przynależności do klanu (NgModule).

Czym są Standalone Components?

Standalone Components to komponenty, które:

• Nie wymagają deklaracji w NgModule
• Same zarządzają swoimi zależnościami przez imports - to tu wpisujesz komponenty, dyrektywy i pipes, których używa szablon
• Są łatwiejsze do testowania i ponownego użycia

Tworzenie Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-katana',
  standalone: true,  // Od Angular 19 domyślne - piszemy jawnie
  imports: [CommonModule, RouterLink],  // Zależności
  template: `
    <div class="katana-card">
      <h2>{{ nazwa }}</h2>
      <p>Typ: {{ typ }}</p>
      <p>Ostrość: {{ ostrosc }}/10</p>

      @if (ostrosc >= 8) {
        <span class="badge">Mistrzowska!</span>
      }

      <a routerLink="/kolekcja">Wróć do kolekcji</a>
    </div>
  `,
  styles: [`
    .katana-card {
      border: 2px solid #8b4513;
      padding: 1rem;
      border-radius: 8px;
    }
    .badge {
      background: gold;
      padding: 0.25rem 0.5rem;
    }
  `]
})
export class KatanaComponent {
  nazwa = 'Masamune';
  typ = 'Tachi';
  ostrosc = 9;
}

Blok @if (warunek) { ... } to nowa składnia warunkowego wyświetlania (wbudowany control flow, od Angular 17). Zastępuje starszą dyrektywę *ngIf.

Standalone a podejście z NgModule

Stary sposób (NgModule):

// katana.component.ts
@Component({
  selector: 'app-katana',
  template: '...'
})
export class KatanaComponent { }

// katana.module.ts
@NgModule({
  declarations: [KatanaComponent],
  imports: [CommonModule],
  exports: [KatanaComponent]
})
export class KatanaModule { }

Nowy sposób (Standalone):

@Component({
  selector: 'app-katana',
  standalone: true,
  imports: [CommonModule],
  template: '...'
})
export class KatanaComponent { }

Znacznie prościej! Jeden plik zamiast dwóch.

Generowanie Standalone Component przez CLI

ng generate component dojo --standalone
# lub krócej:
ng g c dojo --standalone

Od Angular 17+ flaga --standalone jest domyślna, więc wystarczy:

ng g c dojo

Od Angular 19 także w dekoratorze standalone: true jest wartością domyślną, więc CLI już go nie dopisuje. W tym module piszemy go jawnie, żeby było widać, że komponent jest samodzielny.

Bootstrap Aplikacji Standalone

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

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

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

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

Czysto, przejrzyście i nowocześnie - jak minimalistyczna estetyka japońska!