Examples

✅ Good - Standalone Component

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  imports: [HeaderComponent, FooterComponent, RouterOutlet],
})
export class AppComponent {
  title = "my-app";
}

✅ Good - Standalone Component with Services

@Component({
  selector: "app-user-profile",
  template: `
    <div class="profile">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `,
  imports: [CommonModule],
  providers: [UserService],
})
export class UserProfileComponent {
  private userService = inject(UserService);
  user = this.userService.getCurrentUser();
}

✅ Good - Standalone Component with Lazy Loading

// In routing configuration
const routes: Routes = [
  {
    path: "dashboard",
    loadComponent: () => import("./dashboard/dashboard.component").then((m) => m.DashboardComponent),
  },
];

// Dashboard component
@Component({
  selector: "app-dashboard",
  template: `<h1>Dashboard</h1>`,
  imports: [CommonModule, ChartComponent],
})
export class DashboardComponent {}

✅ Good - Bootstrap with Standalone Component

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { provideRouter } from "@angular/router";
import { routes } from "./app/app.routes";

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    // other providers
  ],
});

❌ Bad - Using NgModule

@NgModule({
  declarations: [AppComponent],
  imports: [HeaderComponent, FooterComponent, RouterModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

// main.ts
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

❌ Bad - Feature Module When Standalone Would Work

@NgModule({
  declarations: [UserListComponent, UserDetailComponent, UserFormComponent],
  imports: [CommonModule, ReactiveFormsModule, UserRoutingModule],
  providers: [UserService],
})
export class UserModule {}

// Could be simplified with standalone components
@Component({
  selector: "app-user-list",
  imports: [CommonModule, UserDetailComponent],
  providers: [UserService],
})
export class UserListComponent {}