Что такое standalone-компоненты в Angular и чем они лучше NgModule?

Standalone-компонент подключает всё нужное сам через массив imports, без объявления в NgModule.

Как выглядит

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule, RouterLink, UserAvatarComponent],
  template: `<app-user-avatar [user]="user" /><a routerLink="/users">Все</a>`,
})
export class UserCardComponent {
  @Input() user!: User;
}

В новых версиях Angular standalone: true включён по умолчанию.

Преимущества

• Меньше шаблонного кода: нет модулей для каждого компонента.
• Зависимости видны прямо в файле компонента.
• Проще ленивая загрузка: loadComponent в маршрутах.
• Лучше tree shaking и порог входа ниже.

Запуск приложения

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

Модули не исчезли

Старые проекты на NgModule продолжают работать, а standalone-компоненты можно подключать в модули и наоборот.

Коротко для собеседования

Standalone-компонент самодостаточен: свои зависимости в imports, запуск через bootstrapApplication. Это современный стиль Angular.