Standalone Components - Les guerriers indépendants

Depuis Angular 17, les Standalone Components sont la manière par défaut et recommandée de créer des composants. Ce sont comme des ronin - des guerriers indépendants qui n'ont pas besoin d'appartenir à un clan (NgModule).

Que sont les Standalone Components ?

Les Standalone Components sont des composants qui :

• N'ont pas besoin d'être déclarés dans un NgModule
• Gèrent leurs propres dépendances via imports - c'est là que tu indiques les composants, directives et pipes utilisés par le template
• Sont plus faciles à tester et à réutiliser

Créer un Standalone Component

1import { Component } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { RouterLink } from '@angular/router';
4
5@Component({
6  selector: 'app-katana',
7  standalone: true,  // Par défaut depuis Angular 19 - on l'écrit explicitement
8  imports: [CommonModule, RouterLink],  // Dépendances
9  template: `
10    <div class="katana-card">
11      <h2>{{ name }}</h2>
12      <p>Type: {{ type }}</p>
13      <p>Tranchant : {{ sharpness }}/10</p>
14
15      @if (sharpness >= 8) {
16        <span class="badge">Chef-d’œuvre !</span>
17      }
18
19      <a routerLink="/collection">Retour à la collection</a>
20    </div>
21  `,
22  styles: [`
23    .katana-card {
24      border: 2px solid #8b4513;
25      padding: 1rem;
26      border-radius: 8px;
27    }
28    .badge {
29      background: gold;
30      padding: 0.25rem 0.5rem;
31    }
32  `]
33})
34export class KatanaComponent {
35  name = 'Masamune';
36  type = 'Tachi';
37  sharpness = 9;
38}

Le bloc @if (condition) { ... } est la nouvelle syntaxe d'affichage conditionnel (flux de contrôle intégré, depuis Angular 17). Il remplace l'ancienne directive *ngIf.

Standalone vs approche par NgModule

Ancienne méthode (NgModule) :

1// katana.component.ts
2@Component({
3  selector: 'app-katana',
4  template: '...'
5})
6export class KatanaComponent { }
7
8// katana.module.ts
9@NgModule({
10  declarations: [KatanaComponent],
11  imports: [CommonModule],
12  exports: [KatanaComponent]
13})
14export class KatanaModule { }

Nouvelle méthode (Standalone) :

1@Component({
2  selector: 'app-katana',
3  standalone: true,
4  imports: [CommonModule],
5  template: '...'
6})
7export class KatanaComponent { }

Bien plus simple ! Un seul fichier au lieu de deux.

Générer un Standalone Component via le CLI

1ng generate component dojo --standalone
2# ou en plus court :
3ng g c dojo --standalone

Depuis Angular 17+, l'option --standalone est celui par défaut, il te suffit donc de :

1ng g c dojo

Depuis Angular 19, standalone: true est aussi la valeur par défaut dans le décorateur : le CLI ne l'ajoute plus. Dans ce module, on l'écrit explicitement pour montrer que le composant est autonome.

Démarrer une application Standalone

1// main.ts
2import { bootstrapApplication } from '@angular/platform-browser';
3import { AppComponent } from './app/app.component';
4import { appConfig } from './app/app.config';
5
6bootstrapApplication(AppComponent, appConfig)
7  .catch(err => console.error(err));

1// app.config.ts
2import { ApplicationConfig } from '@angular/core';
3import { provideRouter } from '@angular/router';
4import { routes } from './app.routes';
5
6export const appConfig: ApplicationConfig = {
7  providers: [
8    provideRouter(routes)
9  ]
10};

Propre, clair et moderne - comme l'esthétique minimaliste japonaise !