Standalone Components vs NgModules

Angular 17+ preferuje Standalone Components - prostsze podejście bez modułów.

Porównanie Podejść

Stary Sposób (NgModule-based)

// samurai.component.ts
@Component({
  selector: 'app-samurai',
  standalone: false,
  templateUrl: './samurai.component.html'
})
export class SamuraiComponent { }

// samurai.module.ts
@NgModule({
  declarations: [SamuraiComponent],
  imports: [CommonModule, SharedModule],
  exports: [SamuraiComponent]
})
export class SamuraiModule { }

Nowy Sposób (Standalone)

// samurai.component.ts - wszystko w jednym pliku!
@Component({
  selector: 'app-samurai',
  standalone: true,
  imports: [CommonModule, CardComponent, ButtonComponent],
  templateUrl: './samurai.component.html'
})
export class SamuraiComponent { }

// Użycie - bezpośredni import
@Component({
  standalone: true,
  imports: [SamuraiComponent]
})
export class AppComponent { }

Lazy Loading ze Standalone

// app.routes.ts
export const routes: Routes = [
  {
    path: 'samurai',
    loadComponent: () => import('./samurai/samurai.component')
      .then(c => c.SamuraiComponent)
  },
  {
    path: 'dojo',
    loadChildren: () => import('./dojo/dojo.routes')
      .then(r => r.DOJO_ROUTES)
  }
];

Kiedy Używać Czego?