# Angular Standalone Bilesenler: 2026 Yilinda Migrasyon ve En Iyi Uygulamalar

> Angular uygulamalarini NgModules'den standalone bilesenlere tasimak icin eksiksiz rehber. Resmi 3 adimli CLI migrasyonu, lazy loading, routing ve Angular 21 icin en iyi uygulamalari kapsar.

- Published: 2026-04-21
- Updated: 2026-04-21
- Author: SharpSkill
- Tags: angular, standalone components, migrasyon, angular 21, ngmodule, lazy loading
- Reading time: 9 min

---

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.

> **Temel Cikarim**
>
> Resmi Angular CLI semasi, migrasyonun buyuk bolumunu uc geciste otomatik olarak gerceklestirir. Tipik bir kurumsal uygulama donusumu tek bir sprint icinde tamamlayabilir ve bilesen bazinda lazy loading sayesinde paket boyutlari %30-50 oraninda azalir.

## 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.

```typescript
// hero-list.component.ts
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.

```bash
# 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.

```bash
# 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.

```typescript
// main.ts (migrasyondan sonra)
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));
```

```typescript
// app.config.ts
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:

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

Standalone esdegeri, bireysel bilesenleri veya rota dosyalarini dogrudan yukler:

```typescript
// app.routes.ts (sonra)
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)
  }
];
```

```typescript
// settings/settings.routes.ts
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.

```typescript
// 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.

```json
// tsconfig.json
{
  "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.

```typescript
// hero-list.component.spec.ts
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](/technologies/angular/interview-questions/angular-signals) maksimum performans icin standalone mimariyle dogal olarak eslenir

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/blog/angular/angular-standalone-components-migration-best-practices