Standalone Components vs NgModules

Angular 17+ privilégie les Standalone Components - une approche plus simple, sans modules.

Comparaison des approches

Ancienne méthode (basée sur NgModule)

1// samurai.component.ts
2@Component({
3  selector: 'app-samurai',
4  standalone: false,
5  templateUrl: './samurai.component.html'
6})
7export class SamuraiComponent { }
8
9// samurai.module.ts
10@NgModule({
11  declarations: [SamuraiComponent],
12  imports: [CommonModule, SharedModule],
13  exports: [SamuraiComponent]
14})
15export class SamuraiModule { }

Nouvelle méthode (Standalone)

1// samurai.component.ts - tout dans un seul fichier!
2@Component({
3  selector: 'app-samurai',
4  standalone: true,
5  imports: [CommonModule, CardComponent, ButtonComponent],
6  templateUrl: './samurai.component.html'
7})
8export class SamuraiComponent { }
9
10// Utilisation - import direct
11@Component({
12  standalone: true,
13  imports: [SamuraiComponent]
14})
15export class AppComponent { }

Le lazy loading avec Standalone

1// app.routes.ts
2export const routes: Routes = [
3  {
4    path: 'samurai',
5    loadComponent: () => import('./samurai/samurai.component')
6      .then(c => c.SamuraiComponent)
7  },
8  {
9    path: 'dojo',
10    loadChildren: () => import('./dojo/dojo.routes')
11      .then(r => r.DOJO_ROUTES)
12  }
13];

Quand utiliser quoi ?