Angular’ın standalone component yapısı, Angular 14 ile tanıtılmıştır. Bu özellik, Angular uygulamalarında modül tabanlı yapıyı basitleştirmek ve daha az karmaşık projeler için daha hızlı ve kolay bir yapılandırma sunmak amacıyla geliştirilmiştir.

Normalde Angular’da bir bileşen (component), servis (service), veya yönlendirme (routing) gibi yapıların çalışması için bir modül (NgModule) gereklidir. Standalone component ile, bir bileşen bağımsız olarak çalışabilir ve bir modüle ihtiyaç duymadan doğrudan uygulamada kullanılabilir.

Neden Standalone Yapısı Geliştirildi?

1. Karmaşıklığın Azaltılması:
   • Geleneksel Angular projelerinde her bileşen bir modüle eklenmek zorundaydı. Özellikle küçük projelerde bu ekstra karmaşıklık oluşturabiliyordu.
   • Modül tabanlı yapılar, Angular ekosistemine yeni başlayanlar için öğrenme eğrisini artırıyordu.
2. Performans Artışı:
   • Standalone component’ler daha minimal yapılandırma gerektirdiği için uygulama başlatma süresi ve derleme performansı iyileştirilebilir.
3. Daha Esnek Geliştirme:
   • Modül bağımlılığı olmadan bileşenlerin bağımsız olarak geliştirilmesi ve tekrar kullanılabilirliği artar.
   • Mikro-frontend mimarileri gibi daha modern yaklaşımlarla uyum sağlar.
4. Geleceğe Yatırım:
   • Angular ekibi, standalone bileşenleri kullanarak Angular’ı daha modern JavaScript çerçeveleriyle uyumlu hale getirmeyi hedeflemiştir (React gibi modülsüz yapılara daha yakın).

Standalone Component Nasıl Kullanılır?

ng generate component my-component --standalone

Yukarıdaki komut, standalone özelliği açık bir bileşen oluşturur.

Bir standalone bileşenin tanımı ise şu şekildedir.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  standalone: true,
  imports: [CommonModule], // Gerekli modüller buraya eklenir
})
export class MyComponent {}

Standalone bir bileşen, main.ts dosyasında doğrudan bootstrap edilebilir.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

Başka bir standalone bileşen içerisine import edilebilir:

import { Component } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
  selector: 'app-another-component',
  template: '<app-my-component></app-my-component>',
  standalone: true,
  imports: [MyComponent],
})
export class AnotherComponent {}

Avantajları:

1. Modül bağımlılığını ortadan kaldırır.
2. Basit uygulamalar için daha hızlı geliştirme süreci sunar.
3. Daha modern ve modüler bir geliştirme yaklaşımına olanak tanır.
4. Test yazma ve yeniden kullanılabilirlik kolaylaşır.

Dezavantajları:

1. Büyük ve kompleks uygulamalarda, modüllerin sağladığı organizasyon avantajlarını kaybedebilir.
2. Projelerin karışık bir şekilde standalone ve modül tabanlı yapılarda harmanlanması kafa karıştırabilir.

Hangi Durumlarda Kullanılmalı?

• Küçük ve orta ölçekli projelerde.
• Mikro-frontend veya modüler yapılar gerektiren durumlarda.
• Tek sayfa uygulamalarında (SPA).

Standalone yapısı, Angular’ı daha esnek ve modern bir seçenek haline getirmiştir. Ancak, projenin büyüklüğüne ve karmaşıklığına göre modül tabanlı yapı ile standalone yapı arasında seçim yapılması gereklidir.

Kaynakça

https://blog.angular-university.io/angular-standalone-components

https://v14.angular.io/guide/standalone-components