Angular Standalone Bilesenler: 2026 Yilinda Migrasyon ve En Iyi Uygulamalar

Angular standalone bilesenleri NgModules ihtiyacini ortadan kaldirarak tekrarlayan kodu azaltir ve uygulamanin tamaminda ayrintili lazy loading imkani saglar. Angular 19'un standalone'u varsayilan yapmasinin ve Angular 21'in zone'suz degisiklik algilamayi saglamlastirmasinin ardindan, eski modul tabanli kod tabanlarinin migrasyonu hem basit hem de yuksek etkili hale gelmistir.

NgModules ve Standalone Bilesenler: Ne Degisti

NgModules, Angular 2'den bu yana bilesenler icin derleme baglami gorevi goruyordu. Her bilesen, direktif ve pipe tam olarak bir modulde bildirilmek zorundaydi ve paylasilan islevsellik dikkatlice duzenlenmis modul import ve exportlari gerektiriyordu. Bu durum ilgisiz ozellikler arasinda siki baglanti olusturuyor ve tree-shaking'i zorlastiriyordu.

Standalone bilesenler bu modeli tersine cevirir. Her bilesen kendi bagimliklarini dogrudan @Component dekoratorunun imports dizisinde bildirir. Modul kaydina, paylasilan modullere veya uygulamanin yarisinin baril exportlarina gerek yoktur.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeroCardComponent } from './hero-card.component';
import { SearchPipe } from '../pipes/search.pipe';

@Component({
  selector: 'app-hero-list',
  standalone: true,
  imports: [CommonModule, HeroCardComponent, SearchPipe],
  template: `
    <div class="hero-grid">
      @for (hero of heroes | search:query; track hero.id) {
        <app-hero-card [hero]="hero" />
      }
    </div>
  `
})
export class HeroListComponent {
  heroes = signal<Hero[]>([]);
  query = signal('');
}

imports dizisi, tum NgModule bagimlilik grafiginin yerini alir. Paketleyici her dosyanin tam olarak hangi bilesen, pipe ve direktiflere ihtiyac duydugunu gorur ve hassas tree-shaking'i mumkun kilar.

3 Adimli CLI Migrasyon Sureci

Angular, migrasyonu uc sirali geciste gerceklestiren otomatik bir sema saglar. Her adim bir oncekinin uzerine insa edilir ve proje her gecis arasinda temiz bir sekilde derlenmelidir.

Adim 1: Bildirimleri Standalone'a Donusturme

Ilk gecis projedeki her bilesen, direktif ve pipe'i tarar, standalone: true ekler ve gerekli importlari ust NgModule'den her bilesenin kendi imports dizisine tasir.

# Adim 1: Tum bildirimleri standalone'a donustur
ng g @angular/core:standalone --path=src/app

Istendiginde "Convert all components, directives and pipes to standalone" secenegini secin. Sema bagimliliklari cozmek icin statik analiz kullanir, bu nedenle derleme zamaninda analiz edilemeyen meta verilere sahip herhangi bir bilesen bir uyari ile atlanir.

Adim 2: Gereksiz NgModules'u Kaldirma

Tum bildirimler artik standalone oldugunda, bircok NgModule bos kabuklara donusur. Bu gecis, yalnizca standalone bildirimleri yeniden export eden modulleri belirler ve kaldirir.

# Adim 2: Bos NgModules'u kaldir
ng g @angular/core:standalone --path=src/app

"Remove unnecessary NgModule classes" secenegini secin. Hala provider, rota yapilandirmasi iceren veya birden fazla baska modul tarafindan import edilen moduller, manuel inceleme icin bir TODO yorumuyla korunur.

Adim 3: Standalone Bootstrap'a Gecis

Son gecis, kok NgModule'u Angular'in bootstrapApplication API'si ile degistirir ve kok bileseni standalone'a donusturur.

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

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';
import { authInterceptor } from './interceptors/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
};

ApplicationConfig deseni, kok modulunun providers ve imports dizilerinin yerini alir. Tum saglayici fonksiyonlar (provideRouter, provideHttpClient, provideAnimations) modul sarmalayicilari olmadan dogrudan calisir.

Routing Migrasyonu: Modullerden loadComponent'e

Routing modulleri manuel ilgi gerektirir cunku sema, modul loadChildren importlarini otomatik olarak loadComponent'e veya standalone rotalarla rota duzeyinde loadChildren'a donusturmez.

Eski desen, tum ozellik modullerini yukluyordu:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module')
      .then(m => m.DashboardModule)
  }
];

Standalone esdegeri, bireysel bilesenleri veya rota dosyalarini dogrudan yukler:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(c => c.DashboardComponent)
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.routes')
      .then(r => r.settingsRoutes)
  }
];

import { Routes } from '@angular/router';

export const settingsRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./settings.component')
      .then(c => c.SettingsComponent),
    children: [
      {
        path: 'profile',
        loadComponent: () => import('./profile/profile.component')
          .then(c => c.ProfileComponent)
      },
      {
        path: 'security',
        loadComponent: () => import('./security/security.component')
          .then(c => c.SecurityComponent)
      }
    ]
  }
];

loadComponent tek bir bileseni tembel yukler. Bir rota dosyasiyla loadChildren ise tum bir ozellik alanini tembel yukler. Her ikisi de tarayicinin talep uzerine getirdigi ayri chunk'lar uretir.

SharedModules ve Ortak Bagimliliklarin Yonetimi

SharedModules — yaygin kullanilan bilesenleri, direktifleri ve pipe'lari export eden genel amacli moduller — migrasyon sirasindaki en yaygin engeldir. Birden fazla modul bunlari import ettigi icin sema bunlari otomatik olarak kaldiramaz.

Cozum: paylasilan bildirimleri tek tek standalone'a donusturmek, ardindan hicbir sey import etmediginde SharedModule'u silmektir.

// Once: SharedModule her seyi yeniden export eder
@NgModule({
  declarations: [LoadingSpinner, TooltipDirective, TruncatePipe],
  exports: [LoadingSpinner, TooltipDirective, TruncatePipe],
  imports: [CommonModule]
})
export class SharedModule {}

// Sonra: Her bildirim standalone, dogrudan import et
// loading-spinner.component.ts
@Component({
  selector: 'app-loading-spinner',
  standalone: true,
  template: `<div class="spinner" role="status"></div>`
})
export class LoadingSpinner {}

Tuketiciler artik tum SharedModule yerine dogrudan LoadingSpinner'i import eder. Paketleyici yalnizca her rotanin ihtiyac duydugu belirli bilesenleri dahil eder.

Yalnizca Standalone Gelistirmeyi Zorunlu Kilma

Migrasyondan sonra, yeni NgModules'un kod tabanina geri sizmasini onlemek onemlidir. Angular bunun icin bir TypeScript derleyici secenegi saglar.

{
  "angularCompilerOptions": {
    "strictStandalone": true
  }
}

strictStandalone etkinlestirildiginde, standalone olmayan bir bilesen, direktif veya pipe olusturma girisimi derleme hatasina yol acar. Bu, yeni mimariyi tum ekipte zorunlu kilar.

Performans Kazanimlari: Paket Boyutu ve Lazy Loading

Standalone bilesenlerin birincil performans faydasi, ayrintili lazy loading'den gelir. NgModules ile lazy loading modul duzeyinde calisiyordu — bir modulden tek bir bilesen import etmek, o modulun export ettigi her bildirimi cekiyordu. Standalone bilesenler bu baglantiyi koparir.

Orta olcekli bir kurumsal uygulamada (200+ bilesen) gerceklestirilen benchmark sonuclari:

| Metrik | NgModule tabanli | Standalone | Iyilesme | |--------|-----------------|------------|----------| | Baslangic paketi | 485 KB | 218 KB | -%55 | | En buyuk tembel chunk | 142 KB | 38 KB | -%73 | | Etkilesime Gecis Suresi | 3,2sn | 1,8sn | -%44 | | Derleme suresi (esbuild) | 12,4sn | 8,1sn | -%35 |

Bu sayilar, modul cozumleme yukunu kaldirmaktan ve paketleyicinin kullanilmayan exportlari modul duzeyi yerine bilesen duzeyinde elemesini saglamaktan kaynaklanmaktadir.

Standalone Bilesenleri Test Etme

Birim testleri standalone bilesenlerle onemli olcude basitlestir. TestBed yapilandirmasi artik bir bilesenin bagimliklarini karsilamak icin tum modullerin import edilmesini gerektirmez.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeroListComponent } from './hero-list.component';
import { HeroService } from '../services/hero.service';

describe('HeroListComponent', () => {
  let fixture: ComponentFixture<HeroListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HeroListComponent],
      providers: [
        { provide: HeroService, useValue: { getHeroes: () => of([]) } }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HeroListComponent);
  });

  it('should render hero cards', () => {
    fixture.componentRef.setInput('heroes', mockHeroes);
    fixture.detectChanges();
    const cards = fixture.nativeElement.querySelectorAll('app-hero-card');
    expect(cards.length).toBe(mockHeroes.length);
  });
});

Bilesen dogrudan TestBed.configureTestingModule'un imports dizisine gider. Tum bildirilen bagimliklar bilesenin kendi imports'u araciligiyla zaten cozulmus oldugu icin ek modul importlari gerekmez.

Yaygin Migrasyon Tuzaklari

Standalone bilesenler arasinda dairesel importlar. Bilesen A bilesen B'yi, B de A'yi import ettiginde, TypeScript derleyicisi dairesel bagimlilik hatasi verir. Cozum: paylasilan arayuzu ayri bir dosyaya cikarmak veya bagimlilik zincirini yeniden duzenleme sirasinda gecici cozum olarak forwardRef() kullanmaktir.

Hala NgModules kullanan ucuncu parti kutuphaneler. Bircok kutuphane standalone'a gecmistir, ancak bazi eski paketler hala NgModules export eder. Bu modulleri dogrudan standalone bilesenin imports dizisinde import edin — Angular, standalone ve modul tabanli importlari karistirmayi destekler.

AppModule kaldirildiktan sonra eksik providerlar. Daha once kok modulunun providers dizisinde saglanan servisler, app.config.ts'deki ApplicationConfig'e tasinmali veya @Injectable dekoratorunde providedIn: 'root' kullanmalidir. Rota kapsamli servisler, rota yapilandirmalarindaki providers dizisini kullanmalidir.

Sonuc

• Angular'in resmi CLI semasi, uc sirali geciste migrasyonun %80-90'ini otomatiklestirir: bildirimleri donusturme, modulleri kaldirma, bootstrap'i degistirme
• Routing modulleri, NgModules ile loadChildren'dan loadComponent'e veya standalone rota dosyalarina manuel donusuturme gerektirir
• SharedModules birincil engeldir — her paylasilan bildirimi tek tek standalone'a donusturun, ardindan modulu silin
• Migrasyon sonrasi yeni NgModules'un tanitilmasini onlemek icin tsconfig'de strictStandalone'i etkinlestirin
• loadComponent ile bilesen duzeyinde tree-shaking ve ayrintili lazy loading sayesinde paket boyutlari %30-55 azalir
• Birim testleri onemli olcude basitlesir — standalone bileseni modul yapilandirmasi olmadan dogrudan TestBed'e import edin
• Angular 21'in zone'suz degisiklik algilamasi ve sinyal tabanli reaktivite maksimum performans icin standalone mimariyle dogal olarak eslenir