Merhaba,


7 Şubat'ta Angular 9.0 versiyonunu yayınladı. Merak edilen ivy artık varsayılan derleyici olarak ayarlanmış oldu ve Angular bu versiyonu son 3 yılda yapılan en büyük güncellemelerden biri olarak değerlendirdi. Şimdi mevcut projelerinizi Angular 9'a nasıl güncelleyebilirsiniz bunu adım adım anlatacağım.


Güncelleme öncesi not: Komutlarınızı çalıştırdığınızda Repository is not clean. Please commit or stash any changes before updating. şeklinde hata alırsanız eğer, commit yapmanız gerekiyordur. Commit yaparsanız bu hatayı vermez, ama commit yapmadan komutları çalıştırmak istiyorsanız sonuna --allow-dirty yazabilirsiniz.


Evet başlayalım;


1-) İlk olarak Node.js güncellemesini yapıyoruz. 10.13 ve üzeri olmalı. Siz güncelleyin son sürüme;

https://nodejs.org sitesinden son versiyonu indirip kurabilirsiniz. Kurulumu yaptıktan sonra terminal'de aşağıdaki komutu yazarak kurulumun başarılı olduğundan emin olun

node -v


2-) İlk olarak Angular'ı 8 e güncellemek gerekiyor. 

ng update @angular/core@8 @angular/cli@8

Angular projemin versiyonu zaten 8 o yüzden buna gerek yok demeyin. Ben "buna gerek yok" dedim sonra tıpış tıpış en baştan bu komut ile başladım :)


Eğer önce bu komutu çalıştırmazsanız neredeyse her adımda hata alacaksınız. O hataların çözümleri tabiki var ama en son build etmeye geldiğinizde anlıyorsunuz ki o kadar hatayı çözmekle boşuna uğraşmışsınız :) O yüzden ilk önce 8'e güncelleme komutunu mutlaka çalıştırın :)


3-) Angular 9'a güncellemeyi yapacak olan komutumuzu çalıştırıyoruz;

ng update @angular/core @angular/cli

Burada eğer bir sıkıntı yoksa epey işlem yapacak. Birçok paketin güncellemesini bu komut yapacak.

Komutu çalıştırdığınızda uyarı veren paketler çıkarsa onlarıda güncellemeniz gerekiyor veya kullanımdan kalkan bir paket ise silmeniz gerekiyor.


Bu komut başarıyla tamamlanırsa tebrikler artık projeniz Angular 9.


4-) Eğer Angular Material kullanıyorsanız onuda güncellemeniz gerekiyor;

ng update @angular/material

Artık Angular Material'de kullandığımız bileşenleri import ederken '@angular/material' içerisinden import etmiyoruz. Hangi bileşeni kullanıyorsak onun bulunduğu klasörden import ediyoruz.

Yani eskiden şöyle olan bir kod;

import {
  MatIconModule,
  MatButtonModule,
  MatFormFieldModule
} from '@angular/material';

Artık şöyle;

import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';

Tabi ng update @angular/material komutu bu düzenlemeleri bizim için yapıyor. Yani tek tek değiştirmenize gerek yok.


5-) Eğer projenizde başka paketler kullanıyorsanız onlarıda güncellemelisiniz;

npm outdated

Bu komut, projenizdeki yeni sürümü olan paketleri gösterir. Bu paketleride güncellemeniz gerekebilir.

Örneğin bende @fortawesome/angular-fontawesome paketi vardı 0.5.0 versiyonu kuruluydu. Bu, güncelleme yaparken uyarı veriyordu o yüzden bu paketin resmi adresinde Angular 9 için yayınlanan bir sürümü var mı diye kontrol edip 0.6.0 versiyona güncellemem gerekti.


Aynı şekilde PrimeNG paketini kullanıyorsanız başınıza bela olabilir. ng serve komutunu çalıştırdığımda bu paket yüzünden çok hata aldım. Tabi çalıştıramadığınız projeyi derleyemiyorsunuzda. "9.0.0-rc.4" sürümüne güncelledim. Ama kullanımda değişiklikler olmuş, aynı Angular Material'de olduğu gibi bunda da kullandığınız bileşenleri kendi klasöründen import etmeniz gerekiyor. Aynıca örneğin ConfirmDialogModule'i kullanıyorsanız bunu kullandığınız componentin ts dosyasında da ConfirmDialog'u import etmeniz gerekiyor. Yoksa hata veriyor.


6-) package.json dosyasında postinstall scriptini ekliyoruz;

package.json dosyasında scripts içerisinde eğer yoksa şu eklemeyi yapıyoruz;

"postinstall": "ngcc"

Bununla ilgili olarak şu linki inceleyebilirsiniz.



ng serve komutu ile projenizi başlattığınızda ngcc çalışacak ve uzun bir derleme işlemi yapabilir. Sabırla bekleyin. Yeni bir paket kurduğunuzda da ngcc otomatik olarak çalışacaktır.


Evet güncelleme işlemimiz bu kadar. Angular 8'deki paket boyutları, Angular 9'a geçtikten sonra nasıl değişiklik gösterdi onu anlatacağım bir yazı da gelecek.


Umarım faydalı olur.