Angular'da Test ortamında (localhost) farklı API - Canlı ortamda farklı API ile çalışmak

Merhaba.

Bazı projelerimizde geliştirme ortamında ayrı api canlı ortamda ayrı api ile çalışmamız gerekebiliyor. Böyle bir durumda build etmeden önce api adresini değiştirmek bir çözüm olsa bile zahmetli ve riskli bir işlem çünkü adresi değiştirmeyi unutup projeyi yayına alabiliriz buda istenmeyen bazı sonuçları getirebilir :)

Fazla uzatmadan bu durumu nasıl çözebileceğimize geçiyorum;

İlk önce api adresimizi app.module.ts dosyasında providers bölümünde tanımlıyoruz.

app.module.ts

providers: [
  { provide: 'apiUrl', useValue: 'https://test-api.kodumunblogu.net' }
]

Burada tanımladığımız apiUrl'yi component ve service dosyalarımızda constructor bölümünde;

@Inject('apiUrl') private apiUrl

bu şekilde çağırabiliyoruz ve this.apiUrl yazarak bunu kullanabiliyoruz.

Şimdi gelelim geliştirme ve canlı ortam adreslerini otomatik tanımlamaya.

Geliştirme ortamında kullanılacak api adresi için: src/environments/environment.ts

export const environment = {
  production: false,
  apiUrl: 'https://test-api.kodumunblogu.net'
};

Canlı ortamda kullanılacak api adresi için: src/environments/environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'https://prod-api.kodumunblogu.net'
};

Bu tanımlamaları yaptıktan hemen sonra app.module.ts dosyasına geri görüyoruz ve,

import {environment} from '../environments/environment';

enviroment i import ettikten sonra providers bölümüne iniyoruz;

{ provide: 'apiUrl', useValue: 'https://test-api.kodumunblogu.net' }

olan kodumuzu

{ provide: 'apiUrl', useValue: environment.apiUrl }

bununla değiştiriyoruz.

Tüm işlemler bu kadar.

Artık projemizi yayına alacağımız zaman api adresini değiştirmekle uğraşmamıza, vakit kaybetmemize gerek kalmadan gönül rahatlığıyla yayına alabiliriz ve localhost'ta https://test-api.kodumunblogu.net adresini canlı ortamda ise https://prod-api.kodumunblogu.net adresini kullanıyoruz.

Teşekkürler.