Merhaba,


2 gün önce stabil versiyon olarak Angular 8.0 duyuruldu. Peki bu versiyonda bizi neler bekliyor? Nasıl yenilikler getirildi ve değişiklikler yapıldı?

Özetle angular ekibi bizler için ağır yükleri kaldıracak performans iyileştirmeleri yapmış gibi görünüyor. Bunlardan bazılarını sizlerle paylaşmak istiyorum;


- TypeScript 3.4

Angular 8.0, şimdi TypeScript 3.4'ü destekliyor hatta gerektiriyor. Bu yüzden yükseltme yapmanız gerekir. TypeScript'in bu yeni sürümüyle nelerin değiştiğini buradan öğrenebilirsiniz.


- Differential loading

Angular 8 uygulamalarınız şimdi differential loading sayesinde otomatik olarak daha performanslı olacak.

Differential loading ile build işleminde iki paket oluşturulur;

  1. ES2015+'yı destekleyen modern tarayıcılar için bir paket
  2. Yalnızca JavaScript'in ES5 sürümünü destekleyen eski tarayıcılar için bir paket

Yeni tarayıcılardaki ES6 modüllerinin desteği sayesinde, doğru paket tarayıcı tarafından otomatik olarak yüklenecektir.


Bu yeni özellik, Angular 8 için en büyük performans gelişimi sağlar. Daha yeni tarayıcılar daha az kod yükler ve daha küçük boyutta polyfill yükler.

Differential loading'ten yararlanmak için özel bir şey yapmanıza gerek yoktur. --prod özelliği (ng build --prod) ile build ettiğinizde çalışmış olacak.


- Dynamic imports for lazy routes

Lazy loading rotaları artık dinamil içe aktarma sözdizimini kullanıyor. Bu TypeScript'in, modüller eksik veya yanlış yazılmışsa uyarı ve hata vermenin daha iyi ve kolay olacağı demektir. Yani şu şekilde olan kullanım;

{ path: 'product', loadChildren: './product/product.module#ProductModule' }

şu şekilde olacak;

{ path: 'product', loadChildren: () => import('.product/product.module').then(m => m.ProductModule) }

Eğer mevcut Angular projenizin sürümünü yükseltmek istiyorsanız ng upgrade komutunu kullanınız. Bu değişikliği sizin için halledecektir.


Bu değişikliği manuel olarak yaparsanız ve error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext' şeklinde hata alırsanız eğer çözümü şu şekildedir;

tsconfig.json dosyasını açın compilerOptions içerisindeki "module" nin değerini "esnext " olarak değiştirin.


- Ivy

Angular Ivy nedir?

Angular yeni sürümüyle çok beklenen yeni derleyici ve işleme hattı olan Ivy, önemli ölçüde daha küçük paketler oluşturma potansiyeline sahiptir. Artımlı derlemeyi kolaylaştırır ve gelecekteki yeniliklerin temelini oluşturur.

Burada, Angular'ın alt bölümlerinin birçoğunun değiştiği için, Angular ekibi önceki versiyonlarla uyumluluğa özel önem vermiştir.

Angular 8 ile Ivy'nin önizleme sürümü test için hazır durumdadır. Bu sürümün amacı erken geri bildirim almaktadır. Bu nedenle, Angular ekibi henüz üretim için Ivy'yi kullanmayı değil, geri bildirimler ile geliştirmeyi amaçlamıştır. Muhtemelen Angular 9'da kararlı olacaktır.

Ivy, uyumluluk modunda paket boyutlarında gözle görülür bir iyileşme sağlayacaktır. Bu mod özellikle optimizasyon için büyük miktarda iyileştirme içerir.

Eğer Ivy'i denemek istiyorsanız enable-ivy özelliği ile yeni bir proje oluşturabilirsiniz.

ng new projeAdi --enable-ivy

Bu komut tsconfig.app.json'da aşağıdaki komutu ekler;

"angularCompilerOptions": { 
  "enableIvy": true
}

Bunu manuel olarak da ekleyebilirsiniz.

Uygulamayı hata ayıklama modunda çalıştırmanız önerilir.

ng serve --aot


- HTTP paketi kaldırıldı

@angular/http Angular 5 versiyonunda kullanımdan kaldırılmıştı, yerine @angular/common/http kullanılıyordu ancak @angular/platform-server aynı bağımlılığa sahip olduğu için hala kullanılabilirdi. Ancak şimdi paketler listesinden çıkarıldı.


Kullanımdan kaldırılan tüm api'leri buradaki kılavuzda bulabilirsiniz.


- Angular 7'den Angular 8'e Yükseltme

Önceki versiyonlarda da olduğu gibi, Angular 7'den Angular 8'e yükseltmek çocuk oyuncağı. Bu, özellikle yeni HttpClient'i ve RxJS 6'yı kullanmaya geçiş yaptıysanız geçerli.

Bu durumda, Angular 8'e yükseltmek için çalıştırılacak tek bir komutunuz var;

ng update @angular/cli @angular/core

Bu komutla, tembel yüklü rotalarınız otomatik olarak yeni sözdizimine geçirilecektir.


Eğer "Repository is not clean. Please commit or stash any changes before updating." şeklinde bir hata alırsanız aşağıdaki komut ile tekrar deneyin;

ng update @angular/cli @angular/core --allow-dirty


Yükseltme işleminde bazı bilmeniz gerekenler;

  • Bazı yeni sözdizimi hataları ortaya çıkabilir. Bunun nedeni, daha önce vurgulanmayan bazı sorunları ortaya çıkarabilecek TypeScript 3.4 kullanan Angular'dan kaynaklanıyor.
  • Node.js sürüm 12 veya üstünü kullandığınızdan emin olun. Komut satırında node -v komutunu çalıştırarak bunu kontrol edebilirsiniz. En yeni sürümü edinmek için node'un resmi indirme sayfasına gidin.


Eğer @ViewChild komutlarınızda hata alırsanız bununda çözümü şu şekildedir;

Örneğin @ViewChild(MatPaginator) paginator: MatPaginator; komutunda hata aldınız bunu şu şekilde değiştirmeniz hatanızı çözecektir: @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

Buradaki static değerinden de kısaca bahsedecek olursak;

  • { static: true } ViewChild'a ngOnInit içinden erişmek istediğinizde kullanın.
  • { static: false } ngAfterViewInit'ten erişilebilir. Çoğu durumda bunu kullandığınızda çalışacaktır.


Angular 7'den farklı bir sürümden yükseltme yapmaya çalışıyorsanız, nasıl devam edeceğinize ilişkin talimatlar için resmi Angular yükseltme kılavuzunu kullanabilirsiniz.


- Angular Material'i yükseltme

Uygulamanızda Angular Material'i kullanıyorsanız, bu komutu da kullanmak isteyeceksiniz;

ng update @angular/material

Angular Material kullanıyorsanız v8 sürüm notlarına bir göz atmanızı tavsiye ederim.



Ayrıca Angular ekibinden Stephen Fluin, Angular 8'deki yeni özellikleri gösteren bir dizi video hazırladı: https://www.youtube.com/watch?v=lEmN5YpcFKQ - https://www.youtube.com/watch?v=jPXl7sCPCOA - https://www.youtube.com/watch?v=RBzogbjk3t4