Standalone Components vs NgModules

Angular 17+ prefers Standalone Components - a simpler approach without modules.

Comparison of Approaches

Old Way (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 { }

New Way (Standalone)

// samurai.component.ts - everything in one file!
@Component({
  selector: 'app-samurai',
  standalone: true,
  imports: [CommonModule, CardComponent, ButtonComponent],
  templateUrl: './samurai.component.html'
})
export class SamuraiComponent { }

// Usage - direct import
@Component({
  standalone: true,
  imports: [SamuraiComponent]
})
export class AppComponent { }

Lazy Loading with 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)
  }
];

When to Use Which?